@developer.notchatbot/webchat 1.0.1 → 1.0.3

package/README.md

@@ -2,8 +2,6 @@
 
 A beautiful, embeddable chatbot widget built with **React**, **TypeScript**, **Vite**, **pnpm** and **Tailwind CSS** that can be easily integrated into any website with **just one file**.
 
-![WebChat Widget Demo](https://via.placeholder.com/600x400/667eea/ffffff?text=TypeScript+React+WebChat+Widget)
-
 ## ✨ Features
 
 - **📦 Single File Bundle**: Everything in one file - no separate CSS needed!
@@ -31,7 +29,6 @@ A beautiful, embeddable chatbot widget built with **React**, **TypeScript**, **V
 <script src="https://your-cdn.com/webchat-bundle.min.umd.cjs"></script>
 <script>
 WebChat.initialize({
-    elementId: "webchat-component",
     title: "Customer Support",
     placeholder: "Ask us anything...",
     primaryColor: "#667eea"
@@ -47,12 +44,10 @@ The chatbot button will appear in the bottom-right corner of your page. CSS is a
 
 ```typescript
 interface WebChatConfig {
-  elementId: string;                    // Required: ID of the container element
   title?: string;                       // Chat window title
   placeholder?: string;                 // Input placeholder text
   primaryColor?: string;                // Primary theme color
   apiKey?: string;                      // Your chatbot UID (required for API)
-  chatbotId?: number;                   // Your chatbot ID
   position?: 'bottom-right' | 'bottom-left'; // Widget position
   initialMessage?: string;              // Custom initial bot message
   closeButtonIcon?: 'default' | 'text' | 'custom'; // Close button type
@@ -60,7 +55,6 @@ interface WebChatConfig {
   closeButtonCustomIcon?: string;       // Custom icon SVG or URL (when type is 'custom')
   marginBottom?: number;                // Distance from bottom edge in pixels (default: 16)
   marginSide?: number;                  // Distance from left/right edge in pixels (default: 16)
-  aiEnabled?: boolean;                  // Enable/disable AI responses (default: true)
   mobile?: WebChatPositionConfig;       // Mobile-specific position settings
   desktop?: WebChatPositionConfig;      // Desktop-specific position settings
 }
@@ -72,18 +66,15 @@ interface WebChatPositionConfig {
 }
 
 WebChat.initialize({
-    elementId: "webchat-component",
     title: "Chat Assistant",
     placeholder: "Type your message...",
     primaryColor: "#007bff",
     apiKey: "your-chatbot-uid",        // Chatbot UID from admin panel
-    chatbotId: 123,                    // Chatbot ID from admin panel
     position: "bottom-right",
     initialMessage: "¡Hola! 👋 Soy tu asistente virtual. ¿En qué puedo ayudarte hoy?",
     closeButtonIcon: "default", // or "text" or "custom"
     marginBottom: 20,           // Distance from bottom edge (default: 16px)
     marginSide: 20,             // Distance from side edge (default: 16px)
-    aiEnabled: true,            // Enable AI responses (default: true)
     // Device-specific overrides
     mobile: {
         position: "bottom-left",
@@ -103,7 +94,6 @@ WebChat.initialize({
 ### Colors
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     primaryColor: "#ff6b6b",  // Custom brand color
     // ... other options
 });
@@ -118,9 +108,7 @@ The WebChat widget automatically detects the environment and uses the appropriat
 
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     apiKey: "your-chatbot-uid",    // Chatbot UID from your Next.js admin panel
-    chatbotId: 123,                // Chatbot ID from your Next.js admin panel
     // Endpoints are automatically configured based on environment
     // No need to specify apiEndpoint manually
 });
@@ -142,7 +130,6 @@ Customize the first message your users see when they open the chat:
 
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     title: "MiTienda Support",
     // Custom welcome message with your brand's personality
     initialMessage: "¡Hola! 👋 Soy el asistente de MiTienda.\n\n¿Buscas algún producto específico? ¡Estoy aquí para ayudarte!\n\nPuedes preguntarme sobre:\n• Productos disponibles\n• Precios y ofertas\n• Envíos y devoluciones\n• Soporte técnico\n\n¿En qué puedo ayudarte hoy? 😊",
@@ -156,7 +143,6 @@ Customize the appearance of the close button in the chat header:
 #### Option 1: Default X Icon (SVG)
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     closeButtonIcon: "default" // Standard X icon
 });
 ```
@@ -164,7 +150,6 @@ WebChat.initialize({
 #### Option 2: Custom Text
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     closeButtonIcon: "text",
     closeButtonText: "CERRAR" // or "✕", "CLOSE", etc.
 });
@@ -173,7 +158,6 @@ WebChat.initialize({
 #### Option 3: Custom SVG Icon
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     closeButtonIcon: "custom",
     closeButtonCustomIcon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'
 });
@@ -182,7 +166,6 @@ WebChat.initialize({
 #### Option 4: Custom Icon from URL
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     closeButtonIcon: "custom",
     closeButtonCustomIcon: "https://yoursite.com/icons/close-icon.svg"
 });
@@ -194,7 +177,6 @@ Control where the chat widget appears on the screen and how much space it has fr
 #### Bottom Right Position (Default)
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     position: "bottom-right",
     marginBottom: 20,  // 20px from bottom edge
     marginSide: 25,    // 25px from right edge
@@ -205,7 +187,6 @@ WebChat.initialize({
 #### Bottom Left Position
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     position: "bottom-left",
     marginBottom: 30,  // 30px from bottom edge
     marginSide: 20,    // 20px from left edge
@@ -218,7 +199,6 @@ WebChat.initialize({
 **E-commerce Site (avoid cart button)**
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     position: "bottom-left",
     marginBottom: 20,
     marginSide: 20,
@@ -229,7 +209,6 @@ WebChat.initialize({
 **Corporate Website (professional look)**
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     position: "bottom-right",
     marginBottom: 40,   // More space from bottom
     marginSide: 30,     // More space from side
@@ -240,7 +219,6 @@ WebChat.initialize({
 **Mobile-First Design (more accessible)**
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     position: "bottom-right",
     marginBottom: 80,   // Avoid mobile navigation
     marginSide: 15,     // Less space on mobile
@@ -257,35 +235,12 @@ The WebChat widget is optimized to minimize API costs:
 
 This ensures users can visit your e-commerce site without triggering unnecessary API calls.
 
-### 🤖 AI Configuration
-Control whether the chat uses AI responses or just collects messages:
-
-#### AI Enabled (Default)
-```javascript
-WebChat.initialize({
-    elementId: "webchat-component",
-    aiEnabled: true,    // AI will respond to user messages
-    apiKey: "your-api-key"
-});
-```
-
-#### AI Disabled (Message Collection Only)
-```javascript
-WebChat.initialize({
-    elementId: "webchat-component",
-    aiEnabled: false,   // Only collect messages, no AI responses
-    apiKey: "your-api-key"
-    // When disabled, users get: "Gracias por tu mensaje. Un miembro de nuestro equipo se pondrá en contacto contigo pronto."
-});
-```
-
 ### 📱💻 Device-Specific Configurations
 Configure different positions and margins for mobile and desktop devices:
 
 #### Complete Device-Specific Setup
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     title: "Customer Support",
     apiKey: "your-api-key",
     
@@ -313,10 +268,8 @@ WebChat.initialize({
 #### E-commerce Site Example
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     title: "Shopping Assistant",
     apiKey: "your-api-key",
-    aiEnabled: true,
     
     // Desktop: bottom-right (standard)
     desktop: {
@@ -337,10 +290,8 @@ WebChat.initialize({
 #### Corporate Website Example
 ```javascript
 WebChat.initialize({
-    elementId: "webchat-component",
     title: "Business Support",
     apiKey: "your-api-key",
-    aiEnabled: true,
     
     // Consistent position, different margins
     position: "bottom-right",   // Global fallback
@@ -357,28 +308,6 @@ WebChat.initialize({
 });
 ```
 
-#### Message Collection Only (No AI)
-```javascript
-WebChat.initialize({
-    elementId: "webchat-component",
-    title: "Contact Form",
-    aiEnabled: false,           // Disable AI responses
-    apiKey: "your-api-key",
-    
-    desktop: {
-        position: "bottom-right",
-        marginBottom: 30,
-        marginSide: 30
-    },
-    
-    mobile: {
-        position: "bottom-right",
-        marginBottom: 60,
-        marginSide: 20
-    }
-});
-```
-
 ## 👨‍💻 Developer Guide
 
 ### 🚀 Getting Started
@@ -800,105 +729,6 @@ webchat-widget/
 └── package.json             # pnpm + React + TypeScript dependencies
 ```
 
-## 🚀 Deployment
-
-### Option 1: CDN Hosting
-Upload the single bundle file to your CDN:
-
-```html
-<script src="https://your-cdn.com/webchat-bundle.min.umd.cjs"></script>
-```
-
-### Option 2: Self-Hosting
-Host the bundle file on your server:
-
-```html
-<script src="/assets/js/webchat-bundle.min.umd.cjs"></script>
-```
-
-### Option 3: Download and Include
-Download the bundle file and include it directly:
-
-```html
-<script src="./webchat-bundle.min.umd.cjs"></script>
-```
-
-## 🔧 API Integration
-
-The widget can integrate with any chat API. Here's an example server endpoint:
-
-```typescript
-// Express.js example
-app.post('/api/chat', async (req, res) => {
-    const { message, sessionId } = req.body;
-    
-    // Process the message with your AI/chat service
-    const response = await processChatMessage(message, sessionId);
-    
-    res.json({ 
-        message: response,
-        success: true 
-    });
-});
-```
-
-## 🎯 Browser Support
-
-- Chrome 63+ (ES modules, React, and TypeScript support)
-- Firefox 60+
-- Safari 11+
-- Edge 79+
-
-## ⚡ Why This Tech Stack?
-
-### TypeScript
-- **🛡️ Type Safety**: Catch errors at compile time, not runtime
-- **🧠 Better IntelliSense**: Enhanced autocomplete and refactoring
-- **📚 Self-Documenting**: Interfaces serve as living documentation
-- **🔧 Better Refactoring**: Safe and confident code changes
-
-### Single File Bundle
-- **📦 Simplicity**: Just one file to include - no CSS dependencies
-- **🚀 Fast Loading**: Everything bundled and optimized
-- **🔄 Auto CSS Injection**: Styles are automatically added to the page
-- **🚫 No Conflicts**: Scoped styles prevent conflicts with existing CSS
-
-### React
-- **🧱 Component Architecture**: Modular, reusable components
-- **🔄 State Management**: Built-in hooks for complex interactions
-- **🧪 Testability**: Easy to write unit and integration tests
-- **📚 Ecosystem**: Vast ecosystem of libraries and tools
-
-### Tailwind CSS
-- **⚡ Utility-First**: Write styles directly in components
-- **📦 Small Bundle**: Only includes used styles
-- **🎨 Design System**: Consistent spacing, colors, and typography
-- **🔧 No Conflicts**: Prefixed classes (`nbc-`) prevent style conflicts
-
-### Vite + pnpm
-- **🚀 Lightning Fast**: Instant dev server and optimized builds
-- **💾 Efficient**: pnpm saves disk space and installs faster
-- **🔧 Simple Config**: Minimal configuration required
-- **🎯 Modern**: Built for modern JavaScript, TypeScript, and React
-
 ## 📄 License
 
-MIT License - see the [LICENSE](LICENSE) file for details.
-
-## 🤝 Contributing
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add some amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
-
-## 📞 Support
-
-- 📧 Email: support@example.com
-- 💬 Issues: [GitHub Issues](https://github.com/your-username/webchat-widget/issues)
-- 📖 Docs: [Documentation](https://your-docs-site.com)
-
----
-
-Made with ❤️, 🔷 TypeScript, ⚛️ React, 🎨 Tailwind CSS, and ⚡ Vite - **All in one file!** 📦 
+MIT License - see the [LICENSE](LICENSE) file for details.

package/dist/components/ChatWindow.d.ts

@@ -1,4 +1,7 @@
 import { default as React } from 'react';
 import { ChatWindowProps } from '../types';
-declare const ChatWindow: React.FC<ChatWindowProps>;
+interface ChatWindowWithApiKeyProps extends ChatWindowProps {
+    apiKeyMissing?: boolean;
+}
+declare const ChatWindow: React.FC<ChatWindowWithApiKeyProps>;
 export default ChatWindow;

package/dist/config/company-config.d.ts

@@ -1,8 +1,7 @@
 export declare const COMPANY_CONFIG: {
-    readonly apiKey: "dedcf0f1-0c44-4435-806d-c0bb9acf4714";
-    readonly chatbotId: 73;
+    readonly apiKey: "";
     readonly primaryColor: "#111111";
-    readonly avatar: "https://n3v6oj3tw5ouoeeb.public.blob.vercel-storage.com/almohadovar-YwigR5IYdZVfSNI8uWilFrzAeVo4JZ.png";
+    readonly avatar: "";
     readonly title: "ChatBot - NotChatBot";
     readonly placeholder: "Escribe tu mensaje...";
     readonly initialMessage: "¡Hola! ¿En qué puedo ayudarte?";
@@ -22,5 +21,4 @@ export declare const COMPANY_CONFIG: {
     readonly closeButtonIcon: "default";
     readonly closeButtonText: "Cerrar";
     readonly closeButtonCustomIcon: "";
-    readonly aiEnabled: true;
 };

package/dist/config/company-config.template.d.ts

@@ -1,6 +1,5 @@
 export declare const COMPANY_CONFIG: {
     readonly apiKey: "{{ API_KEY }}";
-    readonly chatbotId: "{{ CHATBOT_ID }}";
     readonly primaryColor: "{{ PRIMARY_COLOR }}";
     readonly avatar: "{{ AVATAR_URL }}";
     readonly title: "{{ TITLE }}";
@@ -22,5 +21,4 @@ export declare const COMPANY_CONFIG: {
     readonly closeButtonIcon: "{{ CLOSE_BUTTON_ICON }}";
     readonly closeButtonText: "{{ CLOSE_BUTTON_TEXT }}";
     readonly closeButtonCustomIcon: "{{ CLOSE_BUTTON_CUSTOM_ICON }}";
-    readonly aiEnabled: "{{ AI_ENABLED }}";
 };

package/dist/types.d.ts

@@ -10,7 +10,6 @@ export interface WebChatConfig {
     primaryColor?: string;
     avatar?: string;
     apiKey?: string;
-    chatbotId?: number;
     position?: 'bottom-right' | 'bottom-left';
     conversationId?: string;
     initialMessage?: string;
@@ -19,7 +18,6 @@ export interface WebChatConfig {
     closeButtonCustomIcon?: string;
     marginBottom?: number;
     marginSide?: number;
-    aiEnabled?: boolean;
     mobile?: WebChatPositionConfig;
     desktop?: WebChatPositionConfig;
 }

package/dist/utils/config.d.ts

@@ -6,7 +6,6 @@ export interface ResolvedWebChatConfig extends WebChatConfig {
     position: 'bottom-right' | 'bottom-left';
     marginBottom: number;
     marginSide: number;
-    aiEnabled: boolean;
 }
 /**
  * Resolves the final configuration by applying device-specific overrides

package/dist/utils/messaging.d.ts

@@ -3,18 +3,11 @@ export interface SendMessagePayload {
     conversationId: string;
     conversation: {
         id: string;
-        chatbotId: string | null;
         senderId: string;
         createdAt: string;
         chatbotActivated: boolean;
         updatedAt: string;
         source: string;
-        lastUserMessage: null;
-        qualification: null;
-        contactId: null;
-        conversationType: null;
-        language: null;
-        region: null;
         website: string;
         messages: any[];
     };
@@ -25,11 +18,6 @@ export interface SendMessagePayload {
  * @returns Fallback bot message
  */
 export declare const createFallbackMessage: () => Message;
-/**
- * Creates a notification message for when AI is disabled
- * @returns Notification message
- */
-export declare const createNotificationMessage: () => Message;
 /**
  * Builds the payload for sending messages to the API
  * @param conversationId Conversation ID
@@ -40,7 +28,6 @@ export declare const createNotificationMessage: () => Message;
  */
 export declare const buildMessagePayload: (conversationId: string, messages: Message[], config: {
     apiKey: string;
-    chatbotId?: string;
 }, userIP: string) => SendMessagePayload;
 /**
  * Sends messages to the chat API