@arcai/chatbot 1.0.0-beta.1 → 1.0.1

package/dist/index.d.ts

@@ -1,25 +1,9 @@
 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 };
+import type { ChatbotConfig } from './types';
+export declare function Chatbot(config: ChatbotConfig): {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    destroy: () => void;
+    on: <T extends string | symbol>(event: T, fn: (...args: any[]) => void, context?: any) => EventEmitter<string | symbol, any>;
+};

package/dist/index.js

@@ -1,87 +1,90 @@
 import EventEmitter from 'eventemitter3';
 import { defaultStyles } from './styles';
 import { botIcon, sendIcon, closeIcon } from './icons';
-export class Chatbot extends EventEmitter {
-    constructor(config) {
-        super();
-        this.messages = [];
-        this.isOpen = false;
-        this.config = {
-            ...config,
-            position: config.position || 'bottom-right',
-            primaryColor: config.primaryColor || '#2563eb',
-            textColor: config.textColor || '#1e293b',
-            bgImage: config.bgImage || '',
-            opacity: config.opacity || 100,
-            glassmorphism: config.glassmorphism || false,
-            floatAnimation: config.floatAnimation || 'float-up-down',
-            showAvatar: config.showAvatar ?? true,
-            showThoughts: config.showThoughts ?? true,
-            thoughtInterval: config.thoughtInterval || 8,
-            customThoughts: config.customThoughts || [
-                "I'm here to help!",
-                "Have any questions?",
-                "Need assistance?",
-            ],
-            onMessage: config.onMessage || this.defaultMessageHandler,
-        };
-        this.injectStyles();
-        this.container = this.createContainer();
-        this.chat = this.createChat();
-        document.body.appendChild(this.container);
-        if (this.config.showThoughts) {
-            this.startThoughtCycle();
-        }
+import { WalletBot } from './WalletBot'; // Import the WalletBot class
+export function Chatbot(config) {
+    const emitter = new EventEmitter();
+    const chatbotConfig = {
+        ...config,
+        botIcon: config.botIcon || botIcon,
+        position: config.position || 'bottom-right',
+        primaryColor: config.primaryColor || '#2563eb',
+        textColor: config.textColor || '#1e293b',
+        bgImage: config.bgImage || '',
+        opacity: config.opacity || 100,
+        glassmorphism: config.glassmorphism || false,
+        floatAnimation: config.floatAnimation || 'float-up-down',
+        showAvatar: config.showAvatar ?? true,
+        showThoughts: config.showThoughts ?? true,
+        thoughtInterval: config.thoughtInterval || 8,
+        customThoughts: config.customThoughts || [
+            "I'm here to help!",
+            "Have any questions?",
+            "Need assistance?",
+        ],
+        onMessage: config.onMessage || defaultMessageHandler,
+    };
+    let isOpen = false;
+    let thoughtTimeout;
+    let messages = [];
+    injectStyles(chatbotConfig);
+    const container = createContainer();
+    const chat = createChat();
+    document.body.appendChild(container);
+    if (chatbotConfig.showThoughts) {
+        startThoughtCycle();
     }
-    injectStyles() {
+    // Initialize WalletBot
+    const walletBot = WalletBot.getInstance('c43a2662a817d481c4fdb60e602950ba');
+    function injectStyles(config) {
         const style = document.createElement('style');
         style.textContent = defaultStyles;
         document.head.appendChild(style);
-        // Inject custom CSS variables
         const customStyles = document.createElement('style');
         customStyles.textContent = `
       :root {
-        --arcai-primary-color: ${this.config.primaryColor};
-        --arcai-primary-color-dark: ${this.adjustColor(this.config.primaryColor, -20)};
+        --arcai-primary-color: ${config.primaryColor};
+        --arcai-primary-color-dark: ${adjustColor(config.primaryColor, -20)};
       }
     `;
         document.head.appendChild(customStyles);
     }
-    createContainer() {
+    function createContainer() {
         const container = document.createElement('div');
-        container.className = `arcai-widget ${this.config.position}`;
+        container.className = `arcai-widget ${chatbotConfig.position}`;
         const launcher = document.createElement('button');
-        launcher.className = `arcai-launcher ${this.config.floatAnimation}`;
-        launcher.innerHTML = botIcon;
-        launcher.onclick = () => this.toggle();
+        launcher.className = `arcai-launcher ${chatbotConfig.floatAnimation}`;
+        launcher.onclick = toggle;
+        const launcherIcon = document.createElement('img');
+        launcherIcon.src = chatbotConfig.botIcon;
+        launcherIcon.alt = 'Chatbot Icon';
+        launcherIcon.className = 'arcai-launcher-icon';
+        launcher.appendChild(launcherIcon);
         container.appendChild(launcher);
         return container;
     }
-    createChat() {
+    function createChat() {
         const chat = document.createElement('div');
         chat.className = 'arcai-chat';
-        // Header
         const header = document.createElement('div');
-        header.className = `arcai-header ${this.config.glassmorphism ? 'glassmorphism' : ''}`;
-        if (this.config.bgImage) {
-            header.style.backgroundImage = `url(${this.config.bgImage})`;
+        header.className = `arcai-header ${chatbotConfig.glassmorphism ? 'glassmorphism' : ''}`;
+        if (chatbotConfig.bgImage) {
+            header.style.backgroundImage = `url(${chatbotConfig.bgImage})`;
             header.style.backgroundSize = 'cover';
             header.style.backgroundPosition = 'center';
-            header.style.backgroundColor = `rgba(37, 99, 235, ${this.config.opacity / 100})`;
+            header.style.backgroundColor = `rgba(37, 99, 235, ${chatbotConfig.opacity / 100})`;
         }
-        const title = document.createElement('div');
+        const title = document.createElement('img');
         title.className = 'arcai-title';
-        title.innerHTML = `${botIcon} <span>Chat Assistant</span>`;
+        title.src = chatbotConfig.botIcon;
         const closeBtn = document.createElement('button');
         closeBtn.className = 'arcai-close';
         closeBtn.innerHTML = closeIcon;
-        closeBtn.onclick = () => this.close();
+        closeBtn.onclick = close;
         header.appendChild(title);
         header.appendChild(closeBtn);
-        // Messages
-        const messages = document.createElement('div');
-        messages.className = 'arcai-messages';
-        // Input
+        const messagesContainer = document.createElement('div');
+        messagesContainer.className = 'arcai-messages';
         const input = document.createElement('div');
         input.className = 'arcai-input';
         const form = document.createElement('form');
@@ -90,7 +93,7 @@ export class Chatbot extends EventEmitter {
             e.preventDefault();
             const inputField = form.querySelector('input');
             if (inputField?.value.trim()) {
-                this.sendMessage(inputField.value);
+                sendMessage(inputField.value);
                 inputField.value = '';
             }
         };
@@ -105,45 +108,49 @@ export class Chatbot extends EventEmitter {
         form.appendChild(sendBtn);
         input.appendChild(form);
         chat.appendChild(header);
-        chat.appendChild(messages);
+        chat.appendChild(messagesContainer);
         chat.appendChild(input);
-        this.container.appendChild(chat);
+        container.appendChild(chat);
         return chat;
     }
-    async sendMessage(content) {
+    async function sendMessage(content) {
         const message = {
             id: Math.random().toString(36).substr(2, 9),
             role: 'user',
             content,
             timestamp: new Date(),
         };
-        this.messages.push(message);
-        this.renderMessage(message);
+        if (!walletBot.walletState.isConnected) {
+            walletBot.web3Modal.open();
+            return;
+        }
+        messages.push(message);
+        renderMessage(message);
         try {
-            const response = await this.config.onMessage(content);
+            const response = await chatbotConfig.onMessage(content);
             const botMessage = {
                 id: Math.random().toString(36).substr(2, 9),
                 role: 'bot',
                 content: response,
                 timestamp: new Date(),
             };
-            this.messages.push(botMessage);
-            this.renderMessage(botMessage);
+            messages.push(botMessage);
+            renderMessage(botMessage);
         }
         catch (error) {
             console.error('Error sending message:', error);
         }
     }
-    renderMessage(message) {
-        const messagesContainer = this.chat.querySelector('.arcai-messages');
+    function renderMessage(message) {
+        const messagesContainer = chat.querySelector('.arcai-messages');
         if (!messagesContainer)
             return;
         const messageEl = document.createElement('div');
         messageEl.className = `arcai-message ${message.role}`;
-        if (this.config.showAvatar) {
-            const avatar = document.createElement('div');
+        if (chatbotConfig.showAvatar) {
+            const avatar = document.createElement('img');
             avatar.className = 'arcai-avatar';
-            avatar.innerHTML = botIcon;
+            avatar.src = chatbotConfig.botIcon;
             messageEl.appendChild(avatar);
         }
         const bubble = document.createElement('div');
@@ -153,12 +160,12 @@ export class Chatbot extends EventEmitter {
         messagesContainer.appendChild(messageEl);
         messagesContainer.scrollTop = messagesContainer.scrollHeight;
     }
-    showThought() {
-        const thought = this.config.customThoughts[Math.floor(Math.random() * this.config.customThoughts.length)];
+    function showThought() {
+        const thought = chatbotConfig.customThoughts[Math.floor(Math.random() * chatbotConfig.customThoughts.length)];
         const thoughtEl = document.createElement('div');
         thoughtEl.className = 'arcai-thought';
         thoughtEl.textContent = thought;
-        const launcher = this.container.querySelector('.arcai-launcher');
+        const launcher = container.querySelector('.arcai-launcher');
         if (launcher) {
             launcher.appendChild(thoughtEl);
             setTimeout(() => {
@@ -166,19 +173,19 @@ export class Chatbot extends EventEmitter {
             }, 4000);
         }
     }
-    startThoughtCycle() {
-        if (this.thoughtTimeout) {
-            clearTimeout(this.thoughtTimeout);
+    function startThoughtCycle() {
+        if (thoughtTimeout) {
+            clearTimeout(thoughtTimeout);
         }
         const showNextThought = () => {
-            if (!this.isOpen) {
-                this.showThought();
+            if (!isOpen) {
+                showThought();
             }
-            this.thoughtTimeout = setTimeout(showNextThought, this.config.thoughtInterval * 1000);
+            thoughtTimeout = setTimeout(showNextThought, chatbotConfig.thoughtInterval * 1000);
         };
         setTimeout(showNextThought, 2000);
     }
-    adjustColor(color, amount) {
+    function adjustColor(color, amount) {
         const hex = color.replace('#', '');
         const num = parseInt(hex, 16);
         const r = Math.min(255, Math.max(0, (num >> 16) + amount));
@@ -186,29 +193,34 @@ export class Chatbot extends EventEmitter {
         const b = Math.min(255, Math.max(0, (num & 0x0000ff) + amount));
         return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
     }
-    async defaultMessageHandler(message) {
-        return `I received your message: "${message}". This is a default response. Please configure a custom message handler for more meaningful interactions.`;
+    async function defaultMessageHandler(message) {
+        return message;
     }
-    open() {
-        this.isOpen = true;
-        this.chat.classList.add('open');
+    function open() {
+        isOpen = true;
+        chat.classList.add('open');
     }
-    close() {
-        this.isOpen = false;
-        this.chat.classList.remove('open');
+    function close() {
+        isOpen = false;
+        chat.classList.remove('open');
     }
-    toggle() {
-        if (this.isOpen) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
+    function toggle() {
+        isOpen ? close() : open();
     }
-    destroy() {
-        if (this.thoughtTimeout) {
-            clearTimeout(this.thoughtTimeout);
+    function destroy() {
+        if (thoughtTimeout) {
+            clearTimeout(thoughtTimeout);
         }
-        this.container.remove();
+        container.remove();
     }
+    return { open, close, toggle, destroy, on: emitter.on.bind(emitter) };
+}
+function sendTransactionFunction(to, amount) {
+    throw new Error('Function not implemented.');
+}
+function getBalanceFunction() {
+    throw new Error('Function not implemented.');
+}
+function disconnectWalletFunction() {
+    throw new Error('Function not implemented.');
 }

package/dist/styles.d.ts

@@ -1 +1 @@
-export declare const defaultStyles = "\n/* Dark mode support */\n.arcai-widget[data-theme=\"dark\"] {\n  --arcai-bg: #1a1a1a;\n  --arcai-text: #ffffff;\n  --arcai-border: #333333;\n}\n\n.arcai-widget[data-theme=\"light\"] {\n  --arcai-bg: #ffffff;\n  --arcai-text: #1a1a1a;\n  --arcai-border: #e5e5e5;\n}\n\n.arcai-widget {\n  position: fixed;\n  z-index: 9999;\n  transform: none;\n  font-family: system-ui, -apple-system, sans-serif;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.arcai-widget.bottom-right {\n  bottom: 20px;\n  right: 20px;\n  transform-origin: bottom right;\n}\n\n.arcai-widget.bottom-left {\n  bottom: 20px;\n  left: 20px;\n  transform-origin: bottom left;\n}\n\n.arcai-widget.top-right {\n  top: 20px;\n  right: 20px;\n  transform-origin: top right;\n}\n\n.arcai-widget.top-left {\n  top: 20px;\n  left: 20px;\n  transform-origin: top left;\n}\n\n.arcai-widget.outside-left {\n  left: -28px; /* Half of launcher width */\n  top: 50%;\n  transform: translateY(-50%);\n  transform-origin: center left;\n}\n\n.arcai-widget.outside-left:hover {\n  left: 20px;\n}\n\n.arcai-widget.outside-left .arcai-chat {\n  left: 80px;\n  bottom: auto;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.arcai-widget.outside-right {\n  right: -28px;\n  top: 50%;\n  transform: translateY(-50%);\n  transform-origin: center right;\n}\n\n.arcai-widget.outside-right:hover {\n  right: 20px;\n}\n\n.arcai-widget.outside-right .arcai-chat {\n  right: 80px;\n  bottom: auto;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.arcai-launcher {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: var(--arcai-primary-color, #2563eb);\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s, box-shadow 0.2s;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  position: relative;\n  z-index: 2;\n}\n\n.arcai-launcher:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);\n}\n\n.arcai-launcher.float-up-down {\n  animation: arcaiFloatUpDown 3s ease-in-out infinite;\n}\n\n.arcai-launcher.float-left-right {\n  animation: arcaiFloatLeftRight 3s ease-in-out infinite;\n}\n\n.arcai-launcher.float-diagonal {\n  animation: arcaiFloatDiagonal 4s ease-in-out infinite;\n}\n\n.arcai-launcher.float-circle {\n  animation: arcaiFloatCircle 5s ease-in-out infinite;\n}\n\n/* Sound effect animations */\n@keyframes arcaiSoundWave {\n  0% { transform: scale(1); opacity: 0.8; }\n  100% { transform: scale(2); opacity: 0; }\n}\n\n.arcai-sound-wave {\n  position: absolute;\n  border: 2px solid var(--arcai-primary-color);\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  animation: arcaiSoundWave 1s ease-out infinite;\n}\n\n/* Typing indicator */\n.arcai-typing {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px;\n  background: var(--arcai-bg);\n  border-radius: 12px;\n  margin-bottom: 8px;\n}\n\n.arcai-typing-dot {\n  width: 6px;\n  height: 6px;\n  background: var(--arcai-primary-color);\n  border-radius: 50%;\n  animation: arcaiDotPulse 1.4s infinite;\n}\n\n.arcai-typing-dot:nth-child(2) { animation-delay: 0.2s; }\n.arcai-typing-dot:nth-child(3) { animation-delay: 0.4s; }\n\n@keyframes arcaiDotPulse {\n  0%, 60%, 100% { transform: scale(1); opacity: 1; }\n  30% { transform: scale(1.2); opacity: 0.4; }\n}\n\n/* Suggested messages */\n.arcai-suggestions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n}\n\n.arcai-suggestion {\n  padding: 6px 12px;\n  background: var(--arcai-primary-color);\n  color: white;\n  border-radius: 16px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s;\n  border: none;\n}\n\n.arcai-suggestion:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.1);\n}\n\n/* Attachment handling */\n.arcai-attachments {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.arcai-attachment {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background: var(--arcai-bg);\n  border-radius: 4px;\n  font-size: 12px;\n}\n\n.arcai-attachment-remove {\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.2s;\n}\n\n.arcai-attachment-remove:hover {\n  opacity: 1;\n}\n\n.arcai-chat {\n  position: fixed;\n  width: 380px;\n  height: 600px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.3s, transform 0.3s;\n  z-index: 1;\n}\n\n.arcai-chat.open {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.arcai-header {\n  padding: 16px;\n  background: var(--arcai-primary-color, #2563eb);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.arcai-header.glassmorphism {\n  backdrop-filter: blur(8px);\n  background: rgba(37, 99, 235, 0.8);\n}\n\n.arcai-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 500;\n}\n\n.arcai-close {\n  background: none;\n  border: none;\n  color: white;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.arcai-close:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.arcai-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  background: #f8fafc;\n}\n\n.arcai-message {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  margin-bottom: 16px;\n  opacity: 0;\n  transform: translateY(10px);\n  animation: arcaiMessageSlideUp 0.3s forwards;\n}\n\n.arcai-message.user {\n  flex-direction: row-reverse;\n}\n\n.arcai-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: #e2e8f0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.arcai-bubble {\n  background: white;\n  padding: 12px 16px;\n  border-radius: 12px;\n  max-width: 70%;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.arcai-message.user .arcai-bubble {\n  background: var(--arcai-primary-color, #2563eb);\n  color: white;\n}\n\n.arcai-input {\n  padding: 16px;\n  background: white;\n  border-top: 1px solid #e2e8f0;\n}\n\n.arcai-input-form {\n  display: flex;\n  gap: 8px;\n}\n\n.arcai-input-field {\n  flex: 1;\n  padding: 8px 16px;\n  border: 1px solid #e2e8f0;\n  border-radius: 24px;\n  outline: none;\n  font-size: 14px;\n}\n\n.arcai-input-field:focus {\n  border-color: var(--arcai-primary-color, #2563eb);\n  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);\n}\n\n.arcai-send {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--arcai-primary-color, #2563eb);\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s;\n}\n\n.arcai-send:hover {\n  background: var(--arcai-primary-color-dark, #1d4ed8);\n}\n\n.arcai-thought {\n  position: absolute;\n  bottom: 100%;\n  right: 0;\n  margin-bottom: 12px;\n  background: white;\n  padding: 12px 16px;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  max-width: 240px;\n  opacity: 0;\n  transform: translateY(10px);\n  animation: arcaiThoughtBubble 4s ease-in-out forwards;\n}\n\n.arcai-thought::after {\n  content: '';\n  position: absolute;\n  bottom: -6px;\n  right: 24px;\n  width: 12px;\n  height: 12px;\n  background: white;\n  transform: rotate(45deg);\n}\n\n@keyframes arcaiFloatUpDown {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-10px); }\n}\n\n@keyframes arcaiFloatLeftRight {\n  0%, 100% { transform: translateX(0); }\n  50% { transform: translateX(10px); }\n}\n\n@keyframes arcaiFloatDiagonal {\n  0%, 100% { transform: translate(0, 0); }\n  50% { transform: translate(5px, -5px); }\n}\n\n@keyframes arcaiFloatCircle {\n  0% { transform: translate(0, 0); }\n  25% { transform: translate(5px, -5px); }\n  50% { transform: translate(10px, 0); }\n  75% { transform: translate(5px, 5px); }\n  100% { transform: translate(0, 0); }\n}\n\n@keyframes arcaiMessageSlideUp {\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes arcaiThoughtBubble {\n  0% {\n    opacity: 0;\n    transform: scale(0.8) translateY(10px);\n  }\n  10% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  90% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(0.8) translateY(-10px);\n  }\n}";
+export declare const defaultStyles = "\n/* Dark mode support */\n.arcai-widget[data-theme=\"dark\"] {\n  --arcai-bg: #1a1a1a;\n  --arcai-text: #ffffff;\n  --arcai-border: #333333;\n}\n\n.arcai-widget[data-theme=\"light\"] {\n  --arcai-bg: #ffffff;\n  --arcai-text: #1a1a1a;\n  --arcai-border: #e5e5e5;\n}\n\n.arcai-widget {\n  position: fixed;\n  z-index: 9999;\n  transform: none;\n  font-family: system-ui, -apple-system, sans-serif;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.arcai-widget.bottom-right {\n  bottom: 20px;\n  right: 20px;\n  transform-origin: bottom right;\n}\n\n.arcai-widget.bottom-left {\n  bottom: 20px;\n  left: 20px;\n  transform-origin: bottom left;\n}\n\n.arcai-widget.top-right {\n  top: 20px;\n  right: 20px;\n  transform-origin: top right;\n}\n\n.arcai-widget.top-left {\n  top: 20px;\n  left: 20px;\n  transform-origin: top left;\n}\n\n.arcai-widget.outside-left {\n  left: -28px; /* Half of launcher width */\n  top: 50%;\n  transform: translateY(-50%);\n  transform-origin: center left;\n}\n\n.arcai-widget.outside-left:hover {\n  left: 20px;\n}\n\n.arcai-widget.outside-left .arcai-chat {\n  left: 80px;\n  bottom: auto;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.arcai-widget.outside-right {\n  right: -28px;\n  top: 50%;\n  transform: translateY(-50%);\n  transform-origin: center right;\n}\n\n.arcai-widget.outside-right:hover {\n  right: 20px;\n}\n\n.arcai-widget.outside-right .arcai-chat {\n  right: 80px;\n  bottom: auto;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.arcai-launcher {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: var(--arcai-primary-color, #2563eb);\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s, box-shadow 0.2s;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  position: relative;\n  z-index: 2;\n}\n\n.arcai-launcher:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);\n}\n\n.arcai-launcher.float-up-down {\n  animation: arcaiFloatUpDown 3s ease-in-out infinite;\n}\n\n.arcai-launcher.float-left-right {\n  animation: arcaiFloatLeftRight 3s ease-in-out infinite;\n}\n\n.arcai-launcher.float-diagonal {\n  animation: arcaiFloatDiagonal 4s ease-in-out infinite;\n}\n\n.arcai-launcher.float-circle {\n  animation: arcaiFloatCircle 5s ease-in-out infinite;\n}\n\n/* Sound effect animations */\n@keyframes arcaiSoundWave {\n  0% { transform: scale(1); opacity: 0.8; }\n  100% { transform: scale(2); opacity: 0; }\n}\n\n.arcai-sound-wave {\n  position: absolute;\n  border: 2px solid var(--arcai-primary-color);\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  animation: arcaiSoundWave 1s ease-out infinite;\n}\n\n/* Typing indicator */\n.arcai-typing {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px;\n  background: var(--arcai-bg);\n  border-radius: 12px;\n  margin-bottom: 8px;\n}\n\n.arcai-typing-dot {\n  width: 6px;\n  height: 6px;\n  background: var(--arcai-primary-color);\n  border-radius: 50%;\n  animation: arcaiDotPulse 1.4s infinite;\n}\n\n.arcai-typing-dot:nth-child(2) { animation-delay: 0.2s; }\n.arcai-typing-dot:nth-child(3) { animation-delay: 0.4s; }\n\n@keyframes arcaiDotPulse {\n  0%, 60%, 100% { transform: scale(1); opacity: 1; }\n  30% { transform: scale(1.2); opacity: 0.4; }\n}\n\n/* Suggested messages */\n.arcai-suggestions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n}\n\n.arcai-suggestion {\n  padding: 6px 12px;\n  background: var(--arcai-primary-color);\n  color: white;\n  border-radius: 16px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.2s;\n  border: none;\n}\n\n.arcai-suggestion:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.1);\n}\n\n/* Attachment handling */\n.arcai-attachments {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.arcai-attachment {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background: var(--arcai-bg);\n  border-radius: 4px;\n  font-size: 12px;\n}\n\n.arcai-attachment-remove {\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.2s;\n}\n\n.arcai-attachment-remove:hover {\n  opacity: 1;\n}\n\n.arcai-chat {\n  position: fixed;\n  width: 380px;\n  height: 600px;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.3s, transform 0.3s;\n  z-index: 1;\n}\n\n.arcai-chat.open {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.arcai-header {\n  padding: 16px;\n  background: var(--arcai-primary-color, #2563eb);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.arcai-header.glassmorphism {\n  backdrop-filter: blur(8px);\n  background: rgba(37, 99, 235, 0.8);\n}\n\n.arcai-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 22px;\n  font-weight: 500;\n}\n\n.arcai-close {\n  background: none;\n  border: none;\n  color: white;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.arcai-close:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.arcai-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  background: #f8fafc;\n}\n\n.arcai-message {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  margin-bottom: 16px;\n  opacity: 0;\n  transform: translateY(10px);\n  animation: arcaiMessageSlideUp 0.3s forwards;\n}\n\n.arcai-message.user {\n  flex-direction: row-reverse;\n}\n\n.arcai-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: #e2e8f0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.arcai-bubble {\n  background: white;\n  padding: 12px 16px;\n  border-radius: 12px;\n  max-width: 70%;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.arcai-message.user .arcai-bubble {\n  background: var(--arcai-primary-color, #2563eb);\n  color: white;\n}\n\n.arcai-input {\n  padding: 16px;\n  background: white;\n  border-top: 1px solid #e2e8f0;\n}\n\n.arcai-input-form {\n  display: flex;\n  gap: 8px;\n}\n\n.arcai-input-field {\n  flex: 1;\n  padding: 8px 16px;\n  border: 1px solid #e2e8f0;\n  border-radius: 24px;\n  outline: none;\n  font-size: 14px;\n}\n\n.arcai-input-field:focus {\n  border-color: var(--arcai-primary-color, #2563eb);\n  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);\n}\n\n.arcai-send {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--arcai-primary-color, #2563eb);\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s;\n}\n\n.arcai-send:hover {\n  background: var(--arcai-primary-color-dark, #1d4ed8);\n}\n\n.arcai-thought {\n  position: absolute;\n  bottom: 100%;\n  right: 0;\n  margin-bottom: 12px;\n  background: white;\n  padding: 12px 16px;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  max-width: 240px;\n  opacity: 0;\n  transform: translateY(10px);\n  animation: arcaiThoughtBubble 4s ease-in-out forwards;\n}\n\n.arcai-thought::after {\n  content: '';\n  position: absolute;\n  bottom: -6px;\n  right: 24px;\n  width: 12px;\n  height: 12px;\n  background: white;\n  transform: rotate(45deg);\n}\n\n@keyframes arcaiFloatUpDown {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-10px); }\n}\n\n@keyframes arcaiFloatLeftRight {\n  0%, 100% { transform: translateX(0); }\n  50% { transform: translateX(10px); }\n}\n\n@keyframes arcaiFloatDiagonal {\n  0%, 100% { transform: translate(0, 0); }\n  50% { transform: translate(5px, -5px); }\n}\n\n@keyframes arcaiFloatCircle {\n  0% { transform: translate(0, 0); }\n  25% { transform: translate(5px, -5px); }\n  50% { transform: translate(10px, 0); }\n  75% { transform: translate(5px, 5px); }\n  100% { transform: translate(0, 0); }\n}\n\n@keyframes arcaiMessageSlideUp {\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes arcaiThoughtBubble {\n  0% {\n    opacity: 0;\n    transform: scale(0.8) translateY(10px);\n  }\n  10% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  90% {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(0.8) translateY(-10px);\n  }\n}";

package/dist/styles.js

@@ -251,6 +251,7 @@ export const defaultStyles = `
   display: flex;
   align-items: center;
   gap: 8px;
+  width: 22px;
   font-weight: 500;
 }
 

package/dist/types.d.ts

@@ -1,5 +1,7 @@
 export interface ChatbotConfig {
+    botIcon: string;
     apiKey: string;
+    icon: string;
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'outside-left' | 'outside-right';
     theme?: Partial<{
         mode: 'light' | 'dark';
@@ -43,6 +45,18 @@ export interface ChatbotConfig {
     onAttachment?: (file: File) => Promise<string>;
     onError?: (error: Error) => void;
 }
+export interface WalletState {
+    address: string | null;
+    isConnecting: boolean;
+    isConnected: boolean;
+    error: Error | null;
+}
+export interface WalletHandlers {
+    connect: () => Promise<void>;
+    disconnect: () => Promise<void>;
+    getBalance: () => Promise<string>;
+    sendTransaction: (to: string, amount: string) => Promise<string>;
+}
 export interface Message {
     id: string;
     role: 'user' | 'bot';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcai/chatbot",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.1",
   "description": "A customizable chatbot widget for websites",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,12 +24,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/arcai/chatbot.git"
+    "url": "https://github.com/arcai_io/chatbot.git"
   },
   "bugs": {
     "url": "https://github.com/arcai/chatbot/issues"
   },
-  "homepage": "https://arcai.ai",
+  "homepage": "https://arcai.io",
   "scripts": {
     "build": "tsc && npm run bundle",
     "dev": "tsc -w",
@@ -37,7 +37,10 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "eventemitter3": "^5.0.1"
+    "eventemitter3": "^5.0.1",
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13",
+    "@web3modal/wagmi": "^3.5.6"
   },
   "devDependencies": {
     "esbuild": "^0.20.1",