fyrebot-widget 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fyrebot
+
+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,363 @@
+# 🤖 Fyrebot AI Chatbot Widget
+
+Production-ready, standalone chatbot popup widget for any React application. Features beautiful dark theme, multi-tenant support via X-API-Key authentication, and complete TypeScript support.
+
+**Made with ❤️ by [Fyrebot](https://fyrebot.com)**
+
+## ✨ Features
+
+- 🎨 Beautiful dark theme UI with smooth animations
+- 🔐 Secure X-API-Key authentication
+- 🏢 Multi-tenant support (automatic tenant identification via API key)
+- 💬 Session-based conversations with context retention
+- 📚 Source citations with relevance scores
+- ⚡ Real-time typing indicators
+- 📱 Fully responsive design
+- 🎯 TypeScript support with complete type definitions
+- 🔄 Error handling with user-friendly messages
+- ⚙️ Highly customizable (colors, position, messages, etc.)
+- 📦 Zero external UI dependencies (self-contained)
+
+## 📦 Installation
+
+```bash
+npm install fyrebot-widget
+# or
+yarn add fyrebot-widget
+# or
+pnpm add fyrebot-widget
+```
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```tsx
+import { ChatbotWidget } from 'fyrebot-widget';
+
+function App() {
+  return (
+    <div>
+      {/* Your app content */}
+      
+      <ChatbotWidget
+        apiUrl="https://api.fyrebot.com/api"
+        apiKey="your-api-key-from-dashboard"
+      />
+    </div>
+  );
+}
+```
+
+### Get Your API Key
+
+1. Sign up at [fyrebot.com](https://fyrebot.com)
+2. Go to your dashboard
+3. Copy your API key
+4. Use it in the widget configuration
+
+### Advanced Configuration
+
+```tsx
+import { ChatbotWidget } from 'fyrebot-widget';
+
+function App() {
+  return (
+    <ChatbotWidget
+      // Required
+      apiUrl="https://api.clarvobot.com/api"
+      apiKey="your-api-key-from-dashboard"
+      
+      // Customization
+      title="Support Assistant"
+      subtitle="We're here to help"
+      brandName="Your Company"
+      primaryColor="#6366f1"
+      welcomeMessage="Hello! How can I assist you today?"
+      placeholder="Ask me anything..."
+      position="bottom-right"
+      
+      // Features
+      showTypingIndicator={true}
+      showTimestamps={true}
+      showSources={true}
+      
+      // Sizing
+      maxHeight="600px"
+      maxWidth="400px"
+      
+      // Callbacks
+      onOpen={() => console.log('Chat opened')}
+      onClose={() => console.log('Chat closed')}
+      onMessageSent={(message) => console.log('Sent:', message)}
+      onMessageReceived={(message) => console.log('Received:', message)}
+      onError={(error) => console.error('Error:', error)}
+    />
+  );
+}
+```
+
+## 🎨 Customization Options
+
+### Configuration Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiUrl` | `string` | **Required** | Your API endpoint URL |
+| `apiKey` | `string` | **Required** | X-API-Key for authentication |
+| `title` | `string` | `'AI Assistant'` | Header title |
+| `subtitle` | `string` | `'Ask me anything'` | Header subtitle |
+| `brandName` | `string` | `undefined` | Brand name for welcome message |
+| `primaryColor` | `string` | `'#6366f1'` | Primary theme color (hex) |
+| `welcomeMessage` | `string` | `'Hello! How can I help you today?'` | Initial welcome message |
+| `placeholder` | `string` | `'Type your message...'` | Input placeholder text |
+| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Chat button position |
+| `showTypingIndicator` | `boolean` | `true` | Show typing animation |
+| `showTimestamps` | `boolean` | `true` | Show message timestamps |
+| `showSources` | `boolean` | `true` | Show source citations |
+| `maxHeight` | `string` | `'600px'` | Maximum chat window height |
+| `maxWidth` | `string` | `'400px'` | Maximum chat window width |
+| `className` | `string` | `''` | Custom CSS class |
+
+### Callbacks
+
+```tsx
+<ChatbotWidget
+  // ... other props
+  onOpen={() => {
+    // Called when chat window opens
+    console.log('Chat opened');
+  }}
+  
+  onClose={() => {
+    // Called when chat window closes
+    console.log('Chat closed');
+  }}
+  
+  onMessageSent={(message) => {
+    // Called when user sends a message
+    console.log('User said:', message);
+  }}
+  
+  onMessageReceived={(message) => {
+    // Called when bot responds
+    console.log('Bot said:', message.content);
+  }}
+  
+  onError={(error) => {
+    // Called when an error occurs
+    console.error('Error:', error.message);
+  }}
+/>
+```
+
+## 🔐 API Integration
+
+### Backend Requirements
+
+Your backend API must support:
+
+1. **Authentication**: X-API-Key header
+2. **Endpoint**: `POST /chat`
+3. **Request Format**:
+   ```json
+   {
+     "query": "User's message",
+     "sessionId": "optional-session-id"
+   }
+   ```
+4. **Response Format**:
+   ```json
+   {
+     "success": true,
+     "data": {
+       "answer": "Bot's response",
+       "sessionId": "session-123",
+       "sources": [
+         {
+           "title": "Source document",
+           "score": 0.95,
+           "content": "Optional excerpt"
+         }
+       ]
+     }
+   }
+   ```
+
+### Multi-Tenant Support
+
+The widget automatically includes the X-API-Key header in all requests. Your backend should:
+
+1. Validate the X-API-Key
+2. Identify the tenant from the key
+3. Return responses based on the tenant's data
+
+Example backend logic:
+```javascript
+// Backend (Node.js/Express example)
+app.post('/chat', async (req, res) => {
+  const apiKey = req.headers['x-api-key'];
+  
+  // Validate and get tenant
+  const tenant = await validateApiKey(apiKey);
+  if (!tenant) {
+    return res.status(401).json({ error: 'Invalid API key' });
+  }
+  
+  // Process query with tenant's data
+  const result = await processQuery(
+    tenant.id,
+    req.body.query,
+    req.body.sessionId
+  );
+  
+  res.json({ success: true, data: result });
+});
+```
+
+## 🎯 TypeScript Support
+
+Full TypeScript definitions included:
+
+```tsx
+import { ChatbotWidget, ChatbotConfig, ChatMessage } from 'fyrebot-widget';
+
+const config: ChatbotConfig = {
+  apiUrl: 'https://api.fyrebot.com/api',
+  apiKey: 'your-key',
+  title: 'Assistant',
+  onMessageReceived: (message: ChatMessage) => {
+    console.log(message.content);
+  },
+};
+
+function App() {
+  return <ChatbotWidget {...config} />;
+}
+```
+
+## 📱 Responsive Design
+
+The widget automatically adapts to:
+- Desktop screens
+- Tablets
+- Mobile devices (full-screen on small screens)
+
+## 🎨 Styling
+
+The widget uses scoped inline styles with no external CSS dependencies. You can customize:
+
+1. **Theme Colors**: Use `primaryColor` prop
+2. **Size**: Use `maxHeight` and `maxWidth` props
+3. **Position**: Use `position` prop
+4. **Custom Overrides**: Use `className` prop with CSS variables
+
+Example custom styling:
+```css
+.my-custom-chatbot {
+  /* Your custom styles */
+}
+```
+
+```tsx
+<ChatbotWidget
+  className="my-custom-chatbot"
+  primaryColor="#ff6b6b"
+/>
+```
+
+## 🔧 Advanced Usage
+
+### Programmatic Control
+
+```tsx
+import { ChatbotWidget, ChatbotApiClient } from 'fyrebot-widget';
+import { useRef } from 'react';
+
+function App() {
+  const apiClientRef = useRef<ChatbotApiClient>();
+
+  const handleReset = () => {
+    // Reset the conversation
+    apiClientRef.current?.resetSession();
+  };
+
+  return (
+    <>
+      <button onClick={handleReset}>Reset Chat</button>
+      <ChatbotWidget
+        apiUrl="https://api.clarvobot.com/api"
+        apiKey="your-key"
+      />
+    </>
+  );
+}
+```
+
+## 🐛 Error Handling
+
+The widget handles common errors gracefully:
+
+- ❌ Invalid API key → "Invalid API key. Please check your credentials."
+- ❌ Rate limiting → "Too many requests. Please wait a moment."
+- ❌ Network issues → "Unable to connect to the server."
+- ❌ Server errors → "Server error. Please try again later."
+
+All errors are displayed in a user-friendly format within the chat window.
+
+## 📦 Bundle Size
+
+- **Minified**: ~45KB
+- **Gzipped**: ~15KB
+- **Dependencies**: React, Lucide Icons, Axios
+
+## 🔒 Security
+
+- ✅ X-API-Key authentication
+- ✅ HTTPS required for production
+- ✅ XSS protection (React's built-in escaping)
+- ✅ CORS handled by your backend
+- ✅ No data stored in localStorage (optional session storage)
+
+## 🚀 Deployment
+
+### Option 1: Direct Copy (Easiest)
+
+Copy the entire `src` folder to your React project:
+
+```bash
+cp -r chatbot-widget/src ./src/components/chatbot
+```
+
+Then import:
+```tsx
+import { ChatbotWidget } from './components/chatbot';
+```
+
+### Option 2: NPM Package
+
+Build and publish:
+```bash
+npm run build
+npm publish
+```
+
+Then install in your projects:
+```bash
+npm install fyrebot-widget
+```
+
+## 📄 License
+
+MIT © [Fyrebot](https://fyrebot.com)
+
+## 🤝 Support
+
+For issues or questions:
+- 📧 Email: support@fyrebot.com
+- 🌐 Website: [fyrebot.com](https://fyrebot.com)
+- 📚 Docs: [docs.fyrebot.com](https://docs.fyrebot.com)
+
+---
+
+**Made with ❤️ by Fyrebot** - Empowering businesses with AI-powered conversations

package/dist/ChatbotWidget.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Chatbot Popup Widget
+ * Production-ready, standalone chatbot component
+ */
+import React from 'react';
+import type { ChatbotConfig } from './types';
+export declare const ChatbotWidget: React.FC<ChatbotConfig>;
+export default ChatbotWidget;
+//# sourceMappingURL=ChatbotWidget.d.ts.map

package/dist/ChatbotWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatbotWidget.d.ts","sourceRoot":"","sources":["../src/ChatbotWidget.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AAE1D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6nBjD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/ChatbotWidget.js

@@ -0,0 +1,479 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chatbot Popup Widget
+ * Production-ready, standalone chatbot component
+ */
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { MessageCircle, X, Send, Loader2, Bot, User, Sparkles, RefreshCw } from 'lucide-react';
+import { ChatbotApiClient } from './api';
+export const ChatbotWidget = ({ apiUrl, apiKey, title = 'AI Assistant', subtitle = 'Ask me anything', brandName, primaryColor = '#6366f1', welcomeMessage = 'Hello! How can I help you today?', placeholder = 'Type your message...', position = 'bottom-right', showTypingIndicator = true, showTimestamps = true, showSources = true, maxHeight = '600px', maxWidth = '400px', className = '', onOpen, onClose, onMessageSent, onMessageReceived, onError, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const scrollRef = useRef(null);
+    const apiClient = useRef(null);
+    // Initialize API client
+    useEffect(() => {
+        apiClient.current = new ChatbotApiClient(apiUrl, apiKey);
+    }, [apiUrl, apiKey]);
+    // Auto-scroll to bottom
+    useEffect(() => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        }
+    }, [messages, isLoading]);
+    // Handle open/close
+    const handleToggle = useCallback(() => {
+        const newState = !isOpen;
+        setIsOpen(newState);
+        if (newState) {
+            onOpen?.();
+            setError(null);
+        }
+        else {
+            onClose?.();
+        }
+    }, [isOpen, onOpen, onClose]);
+    // Send message
+    const handleSend = useCallback(async () => {
+        if (!input.trim() || isLoading || !apiClient.current)
+            return;
+        const userMessage = {
+            id: `user-${Date.now()}`,
+            role: 'user',
+            content: input.trim(),
+            timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, userMessage]);
+        setInput('');
+        setIsLoading(true);
+        setError(null);
+        onMessageSent?.(userMessage.content);
+        try {
+            const response = await apiClient.current.sendMessage(userMessage.content);
+            const assistantMessage = {
+                id: `assistant-${Date.now()}`,
+                role: 'assistant',
+                content: response.answer,
+                timestamp: new Date(),
+                sources: response.sources,
+            };
+            setMessages((prev) => [...prev, assistantMessage]);
+            onMessageReceived?.(assistantMessage);
+        }
+        catch (err) {
+            const error = err;
+            setError(error.message);
+            onError?.(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [input, isLoading, onMessageSent, onMessageReceived, onError]);
+    // Handle Enter key
+    const handleKeyPress = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    }, [handleSend]);
+    // Reset conversation
+    const handleReset = useCallback(() => {
+        setMessages([]);
+        setError(null);
+        apiClient.current?.resetSession();
+    }, []);
+    // Position styles
+    const positionStyles = {
+        'bottom-right': { bottom: '20px', right: '20px' },
+        'bottom-left': { bottom: '20px', left: '20px' },
+        'top-right': { top: '20px', right: '20px' },
+        'top-left': { top: '20px', left: '20px' },
+    };
+    return (_jsxs("div", { className: `chatbot-widget-container ${className}`, style: positionStyles[position], children: [_jsx("style", { children: `
+        .chatbot-widget-container {
+          position: fixed;
+          z-index: 9999;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        }
+
+        .chatbot-button {
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          background: ${primaryColor};
+          border: none;
+          cursor: pointer;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.3s ease;
+          color: white;
+        }
+
+        .chatbot-button:hover {
+          transform: scale(1.1);
+          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+        }
+
+        .chatbot-window {
+          position: absolute;
+          bottom: 80px;
+          right: 0;
+          width: ${maxWidth};
+          max-width: calc(100vw - 40px);
+          height: ${maxHeight};
+          max-height: calc(100vh - 120px);
+          background: #1a1a1a;
+          border-radius: 16px;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          animation: slideUp 0.3s ease;
+        }
+
+        @keyframes slideUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .chatbot-header {
+          background: linear-gradient(135deg, ${primaryColor}, ${primaryColor}dd);
+          padding: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          color: white;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .chatbot-header-content {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+        }
+
+        .chatbot-icon {
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .chatbot-title {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .chatbot-title h3 {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+        }
+
+        .chatbot-title p {
+          margin: 0;
+          font-size: 12px;
+          opacity: 0.9;
+        }
+
+        .chatbot-close {
+          background: none;
+          border: none;
+          color: white;
+          cursor: pointer;
+          padding: 8px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: background 0.2s;
+        }
+
+        .chatbot-close:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        .chatbot-messages {
+          flex: 1;
+          overflow-y: auto;
+          padding: 16px;
+          background: #1a1a1a;
+        }
+
+        .chatbot-messages::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        .chatbot-messages::-webkit-scrollbar-track {
+          background: #2a2a2a;
+        }
+
+        .chatbot-messages::-webkit-scrollbar-thumb {
+          background: #444;
+          border-radius: 4px;
+        }
+
+        .chatbot-welcome {
+          text-align: center;
+          padding: 40px 20px;
+          color: #888;
+        }
+
+        .chatbot-welcome-icon {
+          width: 64px;
+          height: 64px;
+          margin: 0 auto 16px;
+          border-radius: 50%;
+          background: rgba(99, 102, 241, 0.1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: ${primaryColor};
+        }
+
+        .chatbot-message {
+          display: flex;
+          gap: 12px;
+          margin-bottom: 16px;
+          animation: fadeIn 0.3s ease;
+        }
+
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+
+        .chatbot-message.user {
+          flex-direction: row-reverse;
+        }
+
+        .chatbot-avatar {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        }
+
+        .chatbot-avatar.bot {
+          background: ${primaryColor};
+          color: white;
+        }
+
+        .chatbot-avatar.user {
+          background: #333;
+          color: #aaa;
+        }
+
+        .chatbot-message-content {
+          flex: 1;
+          max-width: 75%;
+        }
+
+        .chatbot-message.user .chatbot-message-content {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+        }
+
+        .chatbot-bubble {
+          padding: 12px 16px;
+          border-radius: 12px;
+          word-wrap: break-word;
+          line-height: 1.5;
+        }
+
+        .chatbot-bubble.bot {
+          background: #2a2a2a;
+          color: #e0e0e0;
+          border-bottom-left-radius: 4px;
+        }
+
+        .chatbot-bubble.user {
+          background: ${primaryColor};
+          color: white;
+          border-bottom-right-radius: 4px;
+        }
+
+        .chatbot-timestamp {
+          font-size: 11px;
+          color: #666;
+          margin-top: 4px;
+        }
+
+        .chatbot-sources {
+          margin-top: 8px;
+          display: flex;
+          flex-wrap: wrap;
+          gap: 6px;
+        }
+
+        .chatbot-source {
+          font-size: 11px;
+          padding: 4px 8px;
+          background: rgba(99, 102, 241, 0.1);
+          color: ${primaryColor};
+          border-radius: 4px;
+          border: 1px solid rgba(99, 102, 241, 0.2);
+        }
+
+        .chatbot-typing {
+          display: flex;
+          gap: 12px;
+          align-items: center;
+          animation: fadeIn 0.3s ease;
+        }
+
+        .chatbot-typing-dots {
+          display: flex;
+          gap: 4px;
+          padding: 12px 16px;
+          background: #2a2a2a;
+          border-radius: 12px;
+        }
+
+        .chatbot-typing-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: #666;
+          animation: typing 1.4s infinite;
+        }
+
+        .chatbot-typing-dot:nth-child(2) {
+          animation-delay: 0.2s;
+        }
+
+        .chatbot-typing-dot:nth-child(3) {
+          animation-delay: 0.4s;
+        }
+
+        @keyframes typing {
+          0%, 60%, 100% {
+            transform: translateY(0);
+            opacity: 0.4;
+          }
+          30% {
+            transform: translateY(-10px);
+            opacity: 1;
+          }
+        }
+
+        .chatbot-error {
+          background: rgba(239, 68, 68, 0.1);
+          border: 1px solid rgba(239, 68, 68, 0.3);
+          color: #ef4444;
+          padding: 12px;
+          border-radius: 8px;
+          margin: 0 16px 16px;
+          font-size: 13px;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .chatbot-input-area {
+          padding: 16px;
+          background: #222;
+          border-top: 1px solid #333;
+          display: flex;
+          gap: 8px;
+        }
+
+        .chatbot-input-wrapper {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          background: #2a2a2a;
+          border-radius: 12px;
+          padding: 0 12px;
+          border: 1px solid #333;
+          transition: border-color 0.2s;
+        }
+
+        .chatbot-input-wrapper:focus-within {
+          border-color: ${primaryColor};
+        }
+
+        .chatbot-input {
+          flex: 1;
+          background: none;
+          border: none;
+          outline: none;
+          padding: 12px 0;
+          color: #e0e0e0;
+          font-size: 14px;
+        }
+
+        .chatbot-input::placeholder {
+          color: #666;
+        }
+
+        .chatbot-button-icon {
+          background: ${primaryColor};
+          border: none;
+          color: white;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+
+        .chatbot-button-icon:hover:not(:disabled) {
+          opacity: 0.9;
+          transform: scale(1.05);
+        }
+
+        .chatbot-button-icon:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .chatbot-reset {
+          background: #2a2a2a;
+          border: 1px solid #333;
+        }
+
+        .chatbot-reset:hover:not(:disabled) {
+          background: #333;
+        }
+
+        @media (max-width: 480px) {
+          .chatbot-window {
+            width: calc(100vw - 40px);
+            height: calc(100vh - 120px);
+          }
+        }
+      ` }), !isOpen && (_jsx("button", { className: "chatbot-button", onClick: handleToggle, "aria-label": "Open chat", children: _jsx(MessageCircle, { size: 28 }) })), isOpen && (_jsxs("div", { className: "chatbot-window", children: [_jsxs("div", { className: "chatbot-header", children: [_jsxs("div", { className: "chatbot-header-content", children: [_jsx("div", { className: "chatbot-icon", children: _jsx(Sparkles, { size: 20 }) }), _jsxs("div", { className: "chatbot-title", children: [_jsx("h3", { children: title }), subtitle && _jsx("p", { children: subtitle })] })] }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [messages.length > 0 && (_jsx("button", { className: "chatbot-close", onClick: handleReset, "aria-label": "Reset conversation", title: "Start new conversation", children: _jsx(RefreshCw, { size: 18 }) })), _jsx("button", { className: "chatbot-close", onClick: handleToggle, "aria-label": "Close chat", children: _jsx(X, { size: 20 }) })] })] }), _jsxs("div", { className: "chatbot-messages", ref: scrollRef, children: [messages.length === 0 ? (_jsxs("div", { className: "chatbot-welcome", children: [_jsx("div", { className: "chatbot-welcome-icon", children: _jsx(Bot, { size: 32 }) }), _jsx("h4", { style: { margin: '0 0 8px 0', color: '#ccc' }, children: brandName ? `Welcome to ${brandName}!` : 'Welcome!' }), _jsx("p", { style: { margin: 0, fontSize: '14px' }, children: welcomeMessage })] })) : (messages.map((message) => (_jsxs("div", { className: `chatbot-message ${message.role}`, children: [_jsx("div", { className: `chatbot-avatar ${message.role === 'user' ? 'user' : 'bot'}`, children: message.role === 'user' ? _jsx(User, { size: 18 }) : _jsx(Bot, { size: 18 }) }), _jsxs("div", { className: "chatbot-message-content", children: [_jsx("div", { className: `chatbot-bubble ${message.role === 'user' ? 'user' : 'bot'}`, children: message.content }), showSources && message.sources && message.sources.length > 0 && (_jsx("div", { className: "chatbot-sources", children: message.sources.map((source, idx) => (_jsxs("span", { className: "chatbot-source", children: [source.title, " (", Math.round(source.score * 100), "%)"] }, idx))) })), showTimestamps && (_jsx("div", { className: "chatbot-timestamp", children: new Date(message.timestamp).toLocaleTimeString([], {
+                                                    hour: '2-digit',
+                                                    minute: '2-digit',
+                                                }) }))] })] }, message.id)))), isLoading && showTypingIndicator && (_jsxs("div", { className: "chatbot-typing", children: [_jsx("div", { className: "chatbot-avatar bot", children: _jsx(Bot, { size: 18 }) }), _jsxs("div", { className: "chatbot-typing-dots", children: [_jsx("div", { className: "chatbot-typing-dot" }), _jsx("div", { className: "chatbot-typing-dot" }), _jsx("div", { className: "chatbot-typing-dot" })] })] }))] }), error && (_jsxs("div", { className: "chatbot-error", children: [_jsx("span", { children: "\u26A0\uFE0F" }), error] })), _jsxs("div", { className: "chatbot-input-area", children: [_jsx("div", { className: "chatbot-input-wrapper", children: _jsx("input", { type: "text", className: "chatbot-input", value: input, onChange: (e) => setInput(e.target.value), onKeyPress: handleKeyPress, placeholder: placeholder, disabled: isLoading }) }), _jsx("button", { className: "chatbot-button-icon", onClick: handleSend, disabled: !input.trim() || isLoading, "aria-label": "Send message", children: isLoading ? _jsx(Loader2, { size: 20, className: "spin" }) : _jsx(Send, { size: 20 }) })] })] })), _jsx("style", { children: `
+        .spin {
+          animation: spin 1s line              <s     }
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` })] }));
+};
+export default ChatbotWidget;

package/dist/api.d.ts

@@ -0,0 +1,33 @@
+/**
+ * API Client for Chatbot Widget
+ * Handles all communication
+ with the backend using X-API-Key authentication
+ */
+import type { ChatApiResponse } from './types';
+export declare class ChatbotApiClient {
+    private client;
+    private apiKey;
+    private sessionId;
+    constructor(apiUrl: string, apiKey: string);
+    /**
+     * Send a chat message to the API
+     */
+    sendMessage(message: string): Promise<ChatApiResponse>;
+    /**
+     * Get current session ID
+     */
+    getSessionId(): string | null;
+    /**
+     * Reset session (start new conversation)
+     */
+    resetSession(): void;
+    /**
+     * Update API key
+     */
+    updateApiKey(apiKey: string): void;
+    /**
+     * Handle API errors with user-friendly messages
+     */
+    private handleError;
+}
+//# sourceMappingURL=api.d.ts.map

package/dist/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAe,MAAM,SAAS,CAAC;AAE5D,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAuB;gBAE5B,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAqB1C;;OAEG;IACG,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC;IA6B5D;;OAEG;IACH,YAAY,IAAI,MAAM,GAAG,IAAI;IAI7B;;OAEG;IACH,YAAY,IAAI,IAAI;IAIpB;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAKlC;;OAEG;IACH,OAAO,CAAC,WAAW;CA2BpB"}

package/dist/api.js

@@ -0,0 +1,98 @@
+/**
+ * API Client for Chatbot Widget
+ * Handles all communication
+ with the backend using X-API-Key authentication
+ */
+import axios from 'axios';
+export class ChatbotApiClient {
+    constructor(apiUrl, apiKey) {
+        this.sessionId = null;
+        this.apiKey = apiKey;
+        this.client = axios.create({
+            baseURL: apiUrl,
+            headers: {
+                'Content-Type': 'application/json',
+                'X-API-Key': apiKey,
+            },
+            timeout: 30000, // 30 second timeout
+        });
+        // Response interceptor for error handling
+        this.client.interceptors.response.use((response) => response, (error) => {
+            return Promise.reject(this.handleError(error));
+        });
+    }
+    /**
+     * Send a chat message to the API
+     */
+    async sendMessage(message) {
+        try {
+            // Build request body - only include sessionId if it exists
+            const requestBody = {
+                query: message,
+            };
+            // Only add sessionId if we have one (don't send null or undefined)
+            if (this.sessionId) {
+                requestBody.sessionId = this.sessionId;
+            }
+            const response = await this.client.post('/chat', requestBody);
+            // Store session ID for conversation continuity
+            if (response.data.data?.sessionId) {
+                this.sessionId = response.data.data.sessionId;
+            }
+            if (!response.data.success || !response.data.data) {
+                throw new Error(response.data.error || 'Failed to get response');
+            }
+            return response.data.data;
+        }
+        catch (error) {
+            throw this.handleError(error);
+        }
+    }
+    /**
+     * Get current session ID
+     */
+    getSessionId() {
+        return this.sessionId;
+    }
+    /**
+     * Reset session (start new conversation)
+     */
+    resetSession() {
+        this.sessionId = null;
+    }
+    /**
+     * Update API key
+     */
+    updateApiKey(apiKey) {
+        this.apiKey = apiKey;
+        this.client.defaults.headers['X-API-Key'] = apiKey;
+    }
+    /**
+     * Handle API errors with user-friendly messages
+     */
+    handleError(error) {
+        if (axios.isAxiosError(error)) {
+            const axiosError = error;
+            if (axiosError.response) {
+                const status = axiosError.response.status;
+                const data = axiosError.response.data;
+                switch (status) {
+                    case 401:
+                        return new Error('Invalid API key. Please check your credentials.');
+                    case 403:
+                        return new Error('Access denied. You may have exceeded your usage limits.');
+                    case 429:
+                        return new Error('Too many requests. Please wait a moment and try again.');
+                    case 500:
+                        return new Error('Server error. Please try again later.');
+                    default:
+                        return new Error(data?.error || data?.message || 'An unexpected error occurred.');
+                }
+            }
+            else if (axiosError.request) {
+                return new Error('Unable to connect to the server. Please check your internet connection.');
+            }
+        }
+        return error instanceof Error ? error : new Error('An unexpected error occurred.');
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Chatbot Widget - Main Entry Point
+ * Export all public APIs
+ */
+export { ChatbotWidget } from './ChatbotWidget';
+export { ChatbotApiClient } from './api';
+export type { ChatbotConfig, ChatMessage, ChatSession, ApiResponse, ChatApiResponse } from './types';
+export { ChatbotWidget as default } from './ChatbotWidget';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACzC,YAAY,EACV,aAAa,EACb,WAAW,EACX,WAAW,EACX,WAAW,EACX,eAAe,EAChB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+/**
+ * Chatbot Widget - Main Entry Point
+ * Export all public APIs
+ */
+export { ChatbotWidget } from './ChatbotWidget';
+export { ChatbotApiClient } from './api';
+// Default export
+export { ChatbotWidget as default } from './ChatbotWidget';

package/dist/types.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Chatbot Widget Types
+ * Production-ready TypeScript definitions
+ */
+export interface ChatMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: Date;
+    sources?: Array<{
+        title: string;
+        score: number;
+        content?: string;
+    }>;
+}
+export interface ChatbotConfig {
+    /** API endpoint URL (e.g., 'https://api.example.com') */
+    apiUrl: string;
+    /** X-API-Key for authentication */
+    apiKey: string;
+    /** Title displayed in the chatbot header */
+    title?: string;
+    /** Subtitle or description */
+    subtitle?: string;
+    /** Brand name for personalization */
+    brandName?: string;
+    /** Primary color theme (hex color) */
+    primaryColor?: string;
+    /** Welcome message shown when chat is empty */
+    welcomeMessage?: string;
+    /** Placeholder text for input field */
+    placeholder?: string;
+    /** Position of the chat button */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Enable/disable typing indicators */
+    showTypingIndicator?: boolean;
+    /** Enable/disable timestamps */
+    showTimestamps?: boolean;
+    /** Enable/disable source citations */
+    showSources?: boolean;
+    /** Maximum height of the chat window */
+    maxHeight?: string;
+    /** Maximum width of the chat window */
+    maxWidth?: string;
+    /** Custom CSS class for styling */
+    className?: string;
+    /** Callback when chat is opened */
+    onOpen?: () => void;
+    /** Callback when chat is closed */
+    onClose?: () => void;
+    /** Callback when message is sent */
+    onMessageSent?: (message: string) => void;
+    /** Callback when response is received */
+    onMessageReceived?: (message: ChatMessage) => void;
+    /** Callback when error occurs */
+    onError?: (error: Error) => void;
+}
+export interface ChatSession {
+    sessionId: string;
+    messages: ChatMessage[];
+    createdAt: Date;
+    updatedAt: Date;
+}
+export interface ApiResponse<T = any> {
+    success: boolean;
+    data?: T;
+    error?: string;
+    message?: string;
+}
+export interface ChatApiResponse {
+    answer: string;
+    sessionId: string;
+    sources?: Array<{
+        title: string;
+        score: number;
+        content?: string;
+    }>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,aAAa;IAC5B,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IAEf,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IAErE,uCAAuC;IACvC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,gCAAgC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAEnD,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,IAAI,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,GAAG;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;CACJ"}

package/dist/types.js

@@ -0,0 +1,5 @@
+/**
+ * Chatbot Widget Types
+ * Production-ready TypeScript definitions
+ */
+export {};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "fyrebot-widget",
+  "version": "1.0.0",
+  "description": "Production-ready AI chatbot popup widget by Fyrebot - Multi-tenant support with seamless React integration",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build",
+    "test": "echo \"No tests yet\" && exit 0"
+  },
+  "keywords": [
+    "fyrebot",
+    "chatbot",
+    "ai",
+    "widget",
+    "popup",
+    "react",
+    "typescript",
+    "multi-tenant",
+    "saas",
+    "customer-support",
+    "chat-widget",
+    "ai-assistant",
+    "embedded-chat",
+    "live-chat"
+  ],
+  "author": "Fyrebot <support@fyrebot.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "axios": "^1.7.0",
+    "lucide-react": "^0.460.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fyrebot/chatbot-widget.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fyrebot/chatbot-widget/issues"
+  },
+  "homepage": "https://fyrebot.com"
+}