@arcai/chatbot 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+IT License
+
+Copyright (c) 2024 ArcAi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,128 @@
+# @arcai/chatbot
+
+A customizable chatbot widget for websites with beautiful animations and modern design.
+
+## Features
+
+- 🎨 Fully customizable appearance
+- 🌊 Smooth animations
+- 💭 Thought bubbles
+- 🎯 Multiple positioning options
+- 🌓 Glassmorphism effects
+- 📱 Responsive design
+- 🔌 Easy integration
+
+## Installation
+
+### NPM
+
+```bash
+npm install @arcai/chatbot
+```
+
+### CDN
+
+Add the script directly to your HTML:
+
+```html
+<!-- Using jsDelivr -->
+<script src="https://cdn.jsdelivr.net/npm/@arcai/chatbot/dist/chatbot.min.js"></script>
+
+<!-- OR using UNPKG -->
+<script src="https://unpkg.com/@arcai/chatbot/dist/chatbot.min.js"></script>
+```
+
+## Usage
+
+### With NPM
+
+```javascript
+import { Chatbot } from '@arcai/chatbot';
+
+const chatbot = new Chatbot({
+  apiKey: 'your-api-key',
+  position: 'bottom-right',
+  primaryColor: '#2563eb',
+  floatAnimation: 'float-up-down',
+  showThoughts: true,
+  customThoughts: [
+    "Need help?",
+    "Have any questions?",
+    "I'm here to assist you!"
+  ],
+  onMessage: async (message) => {
+    // Handle incoming messages
+    return "Thanks for your message!";
+  }
+});
+```
+
+### With CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@arcai/chatbot/dist/chatbot.min.js"></script>
+<script>
+  const chatbot = new Arcai.Chatbot({
+    apiKey: 'your-api-key',
+    position: 'bottom-right',
+    primaryColor: '#2563eb',
+    floatAnimation: 'float-up-down',
+    showThoughts: true,
+    customThoughts: [
+      "Need help?",
+      "Have any questions?",
+      "I'm here to assist you!"
+    ],
+    onMessage: async (message) => {
+      return "Thanks for your message!";
+    }
+  });
+</script>
+```
+## Configuration Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `apiKey` | string | - | Your API key (required) |
+| `position` | string | 'bottom-right' | Widget position ('bottom-right', 'bottom-left', 'top-right', 'top-left') |
+| `primaryColor` | string | '#2563eb' | Primary color for the widget |
+| `textColor` | string | '#1e293b' | Text color |
+| `bgImage` | string | - | Background image URL |
+| `opacity` | number | 100 | Background opacity (0-100) |
+| `glassmorphism` | boolean | false | Enable glassmorphism effect |
+| `floatAnimation` | string | 'float-up-down' | Animation style for the launcher |
+| `showAvatar` | boolean | true | Show bot avatar in messages |
+| `showThoughts` | boolean | true | Show thought bubbles |
+| `thoughtInterval` | number | 8 | Interval between thoughts (seconds) |
+| `customThoughts` | string[] | [...] | Custom thought messages |
+| `onMessage` | function | - | Message handler function |
+
+## Methods
+
+- `open()`: Open the chat widget
+- `close()`: Close the chat widget
+- `toggle()`: Toggle the chat widget
+- `destroy()`: Remove the widget from the page
+
+## Events
+
+The chatbot extends EventEmitter and emits the following events:
+
+- `message`: When a message is sent or received
+- `open`: When the widget is opened
+- `close`: When the widget is closed
+
+## Styling
+
+The widget uses CSS variables for easy customization:
+
+```css
+:root {
+  --arcai-primary-color: #2563eb;
+  --arcai-primary-color-dark: #1d4ed8;
+}
+```
+
+## License
+
+MIT

package/dist/chatbot.min.js

@@ -0,0 +1,455 @@
+"use strict";var arcai=(()=>{var N=Object.create;var x=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var H=(o,a)=>()=>(a||o((a={exports:{}}).exports,a),a.exports),O=(o,a)=>{for(var t in a)x(o,t,{get:a[t],enumerable:!0})},C=(o,a,t,e)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of Y(a))!j.call(o,i)&&i!==t&&x(o,i,{get:()=>a[i],enumerable:!(e=I(a,i))||e.enumerable});return o};var D=(o,a,t)=>(t=o!=null?N(A(o)):{},C(a||!o||!o.__esModule?x(t,"default",{value:o,enumerable:!0}):t,o)),z=o=>C(x({},"__esModule",{value:!0}),o);var M=H((q,y)=>{"use strict";var $=Object.prototype.hasOwnProperty,h="~";function f(){}Object.create&&(f.prototype=Object.create(null),new f().__proto__||(h=!1));function F(o,a,t){this.fn=o,this.context=a,this.once=t||!1}function k(o,a,t,e,i){if(typeof t!="function")throw new TypeError("The listener must be a function");var n=new F(t,e||o,i),s=h?h+a:a;return o._events[s]?o._events[s].fn?o._events[s]=[o._events[s],n]:o._events[s].push(n):(o._events[s]=n,o._eventsCount++),o}function b(o,a){--o._eventsCount===0?o._events=new f:delete o._events[a]}function l(){this._events=new f,this._eventsCount=0}l.prototype.eventNames=function(){var a=[],t,e;if(this._eventsCount===0)return a;for(e in t=this._events)$.call(t,e)&&a.push(h?e.slice(1):e);return Object.getOwnPropertySymbols?a.concat(Object.getOwnPropertySymbols(t)):a};l.prototype.listeners=function(a){var t=h?h+a:a,e=this._events[t];if(!e)return[];if(e.fn)return[e.fn];for(var i=0,n=e.length,s=new Array(n);i<n;i++)s[i]=e[i].fn;return s};l.prototype.listenerCount=function(a){var t=h?h+a:a,e=this._events[t];return e?e.fn?1:e.length:0};l.prototype.emit=function(a,t,e,i,n,s){var p=h?h+a:a;if(!this._events[p])return!1;var r=this._events[p],d=arguments.length,u,c;if(r.fn){switch(r.once&&this.removeListener(a,r.fn,void 0,!0),d){case 1:return r.fn.call(r.context),!0;case 2:return r.fn.call(r.context,t),!0;case 3:return r.fn.call(r.context,t,e),!0;case 4:return r.fn.call(r.context,t,e,i),!0;case 5:return r.fn.call(r.context,t,e,i,n),!0;case 6:return r.fn.call(r.context,t,e,i,n,s),!0}for(c=1,u=new Array(d-1);c<d;c++)u[c-1]=arguments[c];r.fn.apply(r.context,u)}else{var m=r.length,g;for(c=0;c<m;c++)switch(r[c].once&&this.removeListener(a,r[c].fn,void 0,!0),d){case 1:r[c].fn.call(r[c].context);break;case 2:r[c].fn.call(r[c].context,t);break;case 3:r[c].fn.call(r[c].context,t,e);break;case 4:r[c].fn.call(r[c].context,t,e,i);break;default:if(!u)for(g=1,u=new Array(d-1);g<d;g++)u[g-1]=arguments[g];r[c].fn.apply(r[c].context,u)}}return!0};l.prototype.on=function(a,t,e){return k(this,a,t,e,!1)};l.prototype.once=function(a,t,e){return k(this,a,t,e,!0)};l.prototype.removeListener=function(a,t,e,i){var n=h?h+a:a;if(!this._events[n])return this;if(!t)return b(this,n),this;var s=this._events[n];if(s.fn)s.fn===t&&(!i||s.once)&&(!e||s.context===e)&&b(this,n);else{for(var p=0,r=[],d=s.length;p<d;p++)(s[p].fn!==t||i&&!s[p].once||e&&s[p].context!==e)&&r.push(s[p]);r.length?this._events[n]=r.length===1?r[0]:r:b(this,n)}return this};l.prototype.removeAllListeners=function(a){var t;return a?(t=h?h+a:a,this._events[t]&&b(this,t)):(this._events=new f,this._eventsCount=0),this};l.prototype.off=l.prototype.removeListener;l.prototype.addListener=l.prototype.on;l.prefixed=h;l.EventEmitter=l;typeof y<"u"&&(y.exports=l)});var P={};O(P,{Chatbot:()=>w});var T=D(M(),1);var E=T.default;var _=`
+/* Dark mode support */
+.arcai-widget[data-theme="dark"] {
+  --arcai-bg: #1a1a1a;
+  --arcai-text: #ffffff;
+  --arcai-border: #333333;
+}
+
+.arcai-widget[data-theme="light"] {
+  --arcai-bg: #ffffff;
+  --arcai-text: #1a1a1a;
+  --arcai-border: #e5e5e5;
+}
+
+.arcai-widget {
+  position: fixed;
+  z-index: 9999;
+  transform: none;
+  font-family: system-ui, -apple-system, sans-serif;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.arcai-widget.bottom-right {
+  bottom: 20px;
+  right: 20px;
+  transform-origin: bottom right;
+}
+
+.arcai-widget.bottom-left {
+  bottom: 20px;
+  left: 20px;
+  transform-origin: bottom left;
+}
+
+.arcai-widget.top-right {
+  top: 20px;
+  right: 20px;
+  transform-origin: top right;
+}
+
+.arcai-widget.top-left {
+  top: 20px;
+  left: 20px;
+  transform-origin: top left;
+}
+
+.arcai-widget.outside-left {
+  left: -28px; /* Half of launcher width */
+  top: 50%;
+  transform: translateY(-50%);
+  transform-origin: center left;
+}
+
+.arcai-widget.outside-left:hover {
+  left: 20px;
+}
+
+.arcai-widget.outside-left .arcai-chat {
+  left: 80px;
+  bottom: auto;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.arcai-widget.outside-right {
+  right: -28px;
+  top: 50%;
+  transform: translateY(-50%);
+  transform-origin: center right;
+}
+
+.arcai-widget.outside-right:hover {
+  right: 20px;
+}
+
+.arcai-widget.outside-right .arcai-chat {
+  right: 80px;
+  bottom: auto;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.arcai-launcher {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--arcai-primary-color, #2563eb);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 2;
+}
+
+.arcai-launcher:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+.arcai-launcher.float-up-down {
+  animation: arcaiFloatUpDown 3s ease-in-out infinite;
+}
+
+.arcai-launcher.float-left-right {
+  animation: arcaiFloatLeftRight 3s ease-in-out infinite;
+}
+
+.arcai-launcher.float-diagonal {
+  animation: arcaiFloatDiagonal 4s ease-in-out infinite;
+}
+
+.arcai-launcher.float-circle {
+  animation: arcaiFloatCircle 5s ease-in-out infinite;
+}
+
+/* Sound effect animations */
+@keyframes arcaiSoundWave {
+  0% { transform: scale(1); opacity: 0.8; }
+  100% { transform: scale(2); opacity: 0; }
+}
+
+.arcai-sound-wave {
+  position: absolute;
+  border: 2px solid var(--arcai-primary-color);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  animation: arcaiSoundWave 1s ease-out infinite;
+}
+
+/* Typing indicator */
+.arcai-typing {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  background: var(--arcai-bg);
+  border-radius: 12px;
+  margin-bottom: 8px;
+}
+
+.arcai-typing-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--arcai-primary-color);
+  border-radius: 50%;
+  animation: arcaiDotPulse 1.4s infinite;
+}
+
+.arcai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
+.arcai-typing-dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes arcaiDotPulse {
+  0%, 60%, 100% { transform: scale(1); opacity: 1; }
+  30% { transform: scale(1.2); opacity: 0.4; }
+}
+
+/* Suggested messages */
+.arcai-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.arcai-suggestion {
+  padding: 6px 12px;
+  background: var(--arcai-primary-color);
+  color: white;
+  border-radius: 16px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+
+.arcai-suggestion:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.1);
+}
+
+/* Attachment handling */
+.arcai-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.arcai-attachment {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--arcai-bg);
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.arcai-attachment-remove {
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+
+.arcai-attachment-remove:hover {
+  opacity: 1;
+}
+
+.arcai-chat {
+  position: fixed;
+  width: 380px;
+  height: 600px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.3s, transform 0.3s;
+  z-index: 1;
+}
+
+.arcai-chat.open {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.arcai-header {
+  padding: 16px;
+  background: var(--arcai-primary-color, #2563eb);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.arcai-header.glassmorphism {
+  backdrop-filter: blur(8px);
+  background: rgba(37, 99, 235, 0.8);
+}
+
+.arcai-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+}
+
+.arcai-close {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.arcai-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.arcai-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: #f8fafc;
+}
+
+.arcai-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 16px;
+  opacity: 0;
+  transform: translateY(10px);
+  animation: arcaiMessageSlideUp 0.3s forwards;
+}
+
+.arcai-message.user {
+  flex-direction: row-reverse;
+}
+
+.arcai-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.arcai-bubble {
+  background: white;
+  padding: 12px 16px;
+  border-radius: 12px;
+  max-width: 70%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.arcai-message.user .arcai-bubble {
+  background: var(--arcai-primary-color, #2563eb);
+  color: white;
+}
+
+.arcai-input {
+  padding: 16px;
+  background: white;
+  border-top: 1px solid #e2e8f0;
+}
+
+.arcai-input-form {
+  display: flex;
+  gap: 8px;
+}
+
+.arcai-input-field {
+  flex: 1;
+  padding: 8px 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 24px;
+  outline: none;
+  font-size: 14px;
+}
+
+.arcai-input-field:focus {
+  border-color: var(--arcai-primary-color, #2563eb);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+}
+
+.arcai-send {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--arcai-primary-color, #2563eb);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.arcai-send:hover {
+  background: var(--arcai-primary-color-dark, #1d4ed8);
+}
+
+.arcai-thought {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 12px;
+  background: white;
+  padding: 12px 16px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  max-width: 240px;
+  opacity: 0;
+  transform: translateY(10px);
+  animation: arcaiThoughtBubble 4s ease-in-out forwards;
+}
+
+.arcai-thought::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  right: 24px;
+  width: 12px;
+  height: 12px;
+  background: white;
+  transform: rotate(45deg);
+}
+
+@keyframes arcaiFloatUpDown {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes arcaiFloatLeftRight {
+  0%, 100% { transform: translateX(0); }
+  50% { transform: translateX(10px); }
+}
+
+@keyframes arcaiFloatDiagonal {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(5px, -5px); }
+}
+
+@keyframes arcaiFloatCircle {
+  0% { transform: translate(0, 0); }
+  25% { transform: translate(5px, -5px); }
+  50% { transform: translate(10px, 0); }
+  75% { transform: translate(5px, 5px); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes arcaiMessageSlideUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes arcaiThoughtBubble {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateY(10px);
+  }
+  10% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  90% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8) translateY(-10px);
+  }
+}`;var v=`
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/>
+  <path d="M12 8v8"/>
+  <path d="M5 3a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5z"/>
+  <path d="M17 3a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2z"/>
+  <path d="M9 17v-1a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1"/>
+  <path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6"/>
+</svg>`,S=`
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m22 2-7 20-4-9-9-4Z"/>
+  <path d="M22 2 11 13"/>
+</svg>`,L=`
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 6 6 18"/>
+  <path d="m6 6 12 12"/>
+</svg>`;var w=class extends E{constructor(t){super();this.messages=[];this.isOpen=!1;this.config={...t,position:t.position||"bottom-right",primaryColor:t.primaryColor||"#2563eb",textColor:t.textColor||"#1e293b",bgImage:t.bgImage||"",opacity:t.opacity||100,glassmorphism:t.glassmorphism||!1,floatAnimation:t.floatAnimation||"float-up-down",showAvatar:t.showAvatar??!0,showThoughts:t.showThoughts??!0,thoughtInterval:t.thoughtInterval||8,customThoughts:t.customThoughts||["I'm here to help!","Have any questions?","Need assistance?"],onMessage:t.onMessage||this.defaultMessageHandler},this.injectStyles(),this.container=this.createContainer(),this.chat=this.createChat(),document.body.appendChild(this.container),this.config.showThoughts&&this.startThoughtCycle()}injectStyles(){let t=document.createElement("style");t.textContent=_,document.head.appendChild(t);let e=document.createElement("style");e.textContent=`
+      :root {
+        --arcai-primary-color: ${this.config.primaryColor};
+        --arcai-primary-color-dark: ${this.adjustColor(this.config.primaryColor,-20)};
+      }
+    `,document.head.appendChild(e)}createContainer(){let t=document.createElement("div");t.className=`arcai-widget ${this.config.position}`;let e=document.createElement("button");return e.className=`arcai-launcher ${this.config.floatAnimation}`,e.innerHTML=v,e.onclick=()=>this.toggle(),t.appendChild(e),t}createChat(){let t=document.createElement("div");t.className="arcai-chat";let e=document.createElement("div");e.className=`arcai-header ${this.config.glassmorphism?"glassmorphism":""}`,this.config.bgImage&&(e.style.backgroundImage=`url(${this.config.bgImage})`,e.style.backgroundSize="cover",e.style.backgroundPosition="center",e.style.backgroundColor=`rgba(37, 99, 235, ${this.config.opacity/100})`);let i=document.createElement("div");i.className="arcai-title",i.innerHTML=`${v} <span>Chat Assistant</span>`;let n=document.createElement("button");n.className="arcai-close",n.innerHTML=L,n.onclick=()=>this.close(),e.appendChild(i),e.appendChild(n);let s=document.createElement("div");s.className="arcai-messages";let p=document.createElement("div");p.className="arcai-input";let r=document.createElement("form");r.className="arcai-input-form",r.onsubmit=c=>{c.preventDefault();let m=r.querySelector("input");m?.value.trim()&&(this.sendMessage(m.value),m.value="")};let d=document.createElement("input");d.className="arcai-input-field",d.placeholder="Type your message...";let u=document.createElement("button");return u.className="arcai-send",u.type="submit",u.innerHTML=S,r.appendChild(d),r.appendChild(u),p.appendChild(r),t.appendChild(e),t.appendChild(s),t.appendChild(p),this.container.appendChild(t),t}async sendMessage(t){let e={id:Math.random().toString(36).substr(2,9),role:"user",content:t,timestamp:new Date};this.messages.push(e),this.renderMessage(e);try{let i=await this.config.onMessage(t),n={id:Math.random().toString(36).substr(2,9),role:"bot",content:i,timestamp:new Date};this.messages.push(n),this.renderMessage(n)}catch(i){console.error("Error sending message:",i)}}renderMessage(t){let e=this.chat.querySelector(".arcai-messages");if(!e)return;let i=document.createElement("div");if(i.className=`arcai-message ${t.role}`,this.config.showAvatar){let s=document.createElement("div");s.className="arcai-avatar",s.innerHTML=v,i.appendChild(s)}let n=document.createElement("div");n.className="arcai-bubble",n.textContent=t.content,i.appendChild(n),e.appendChild(i),e.scrollTop=e.scrollHeight}showThought(){let t=this.config.customThoughts[Math.floor(Math.random()*this.config.customThoughts.length)],e=document.createElement("div");e.className="arcai-thought",e.textContent=t;let i=this.container.querySelector(".arcai-launcher");i&&(i.appendChild(e),setTimeout(()=>{e.remove()},4e3))}startThoughtCycle(){this.thoughtTimeout&&clearTimeout(this.thoughtTimeout);let t=()=>{this.isOpen||this.showThought(),this.thoughtTimeout=setTimeout(t,this.config.thoughtInterval*1e3)};setTimeout(t,2e3)}adjustColor(t,e){let i=t.replace("#",""),n=parseInt(i,16),s=Math.min(255,Math.max(0,(n>>16)+e)),p=Math.min(255,Math.max(0,(n>>8&255)+e)),r=Math.min(255,Math.max(0,(n&255)+e));return`#${(s<<16|p<<8|r).toString(16).padStart(6,"0")}`}async defaultMessageHandler(t){return`I received your message: "${t}". This is a default response. Please configure a custom message handler for more meaningful interactions.`}open(){this.isOpen=!0,this.chat.classList.add("open")}close(){this.isOpen=!1,this.chat.classList.remove("open")}toggle(){this.isOpen?this.close():this.open()}destroy(){this.thoughtTimeout&&clearTimeout(this.thoughtTimeout),this.container.remove()}};return z(P);})();

package/dist/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const botIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z\"/>\n  <path d=\"M12 8v8\"/>\n  <path d=\"M5 3a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5z\"/>\n  <path d=\"M17 3a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2z\"/>\n  <path d=\"M9 17v-1a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1\"/>\n  <path d=\"M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6\"/>\n</svg>";
+export declare const sendIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"m22 2-7 20-4-9-9-4Z\"/>\n  <path d=\"M22 2 11 13\"/>\n</svg>";
+export declare const closeIcon = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M18 6 6 18\"/>\n  <path d=\"m6 6 12 12\"/>\n</svg>";

package/dist/icons.js

@@ -0,0 +1,19 @@
+export const botIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/>
+  <path d="M12 8v8"/>
+  <path d="M5 3a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5z"/>
+  <path d="M17 3a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2z"/>
+  <path d="M9 17v-1a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1"/>
+  <path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6"/>
+</svg>`;
+export const sendIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m22 2-7 20-4-9-9-4Z"/>
+  <path d="M22 2 11 13"/>
+</svg>`;
+export const closeIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 6 6 18"/>
+  <path d="m6 6 12 12"/>
+</svg>`;

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import EventEmitter from 'eventemitter3';
+import type { ChatbotConfig, Message } from './types';
+export declare class Chatbot extends EventEmitter {
+    private config;
+    private container;
+    private chat;
+    private messages;
+    private thoughtTimeout?;
+    private isOpen;
+    constructor(config: ChatbotConfig);
+    private injectStyles;
+    private createContainer;
+    private createChat;
+    private sendMessage;
+    private renderMessage;
+    private showThought;
+    private startThoughtCycle;
+    private adjustColor;
+    private defaultMessageHandler;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    destroy(): void;
+}
+export type { ChatbotConfig, Message };