@aktarulrahul/floater-chatbot 1.0.1

package/README.md

@@ -0,0 +1,338 @@
+# Floater Chatbot - React NPM Package
+
+A professional, AI-powered floating chat widget for React applications that integrates with n8n workflows for intelligent customer support.
+
+[![GitHub](https://img.shields.io/badge/GitHub-Soft--Loop--Studio%2Fchat--bot-blue)](https://github.com/Soft-Loop-Studio/chat-bot)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- 🤖 **AI-Powered**: Integrates with your n8n workflow for intelligent responses
+- 🎨 **Customizable**: Fully customizable appearance and positioning
+- 🔐 **Secure**: Token-based authentication
+- 📱 **Responsive**: Works seamlessly on desktop and mobile
+- 🎯 **TypeScript**: Built with TypeScript for type safety
+- ⚡ **Lightweight**: Minimal dependencies, optimized bundle size
+- 🔄 **Conversation Context**: Maintains conversation history via conversation IDs
+- 🎫 **Ticket Support**: Handles Zendesk ticket creation callbacks
+
+## Installation
+
+```bash
+npm install @aktarulrahul/floater-chatbot
+# or
+yarn add @aktarulrahul/floater-chatbot
+```
+
+## Quick Start
+
+```tsx
+import React from "react";
+import { ChatWidget } from "@aktarulrahul/floater-chatbot";
+import "@aktarulrahul/floater-chatbot/dist/index.css"; // If CSS is bundled separately
+
+function App() {
+  return (
+    <ChatWidget
+      config={{
+        webhookUrl: "http://localhost:5678/webhook/chat",
+        accessToken: "your-access-token",
+        apiEndpoints: {
+          profileApi: "https://api.example.com/profile",
+          servicesApi: "https://api.example.com/services",
+          zendeskApi: "https://your-domain.zendesk.com",
+        },
+        appearance: {
+          primaryColor: "#007bff",
+          position: "bottom-right",
+          title: "Chat Support",
+          subtitle: "How can we help you?",
+        },
+        callbacks: {
+          onMessageSent: (message) => console.log("Sent:", message),
+          onMessageReceived: (response) => console.log("Received:", response),
+          onTicketCreated: (ticketId, ticketUrl) => {
+            console.log("Ticket created:", ticketId, ticketUrl);
+          },
+        },
+      }}
+    />
+  );
+}
+```
+
+## Configuration Options
+
+### ChatWidgetConfig
+
+| Property         | Type     | Required | Description                                                           |
+| ---------------- | -------- | -------- | --------------------------------------------------------------------- |
+| `webhookUrl`     | `string` | ✅       | n8n webhook endpoint URL (e.g., `http://localhost:5678/webhook/chat`) |
+| `accessToken`    | `string` | ✅       | User authentication token                                             |
+| `conversationId` | `string` | ❌       | Optional conversation ID for context                                  |
+| `apiEndpoints`   | `object` | ❌       | API endpoints to pass to n8n                                          |
+| `appearance`     | `object` | ❌       | Widget appearance configuration                                       |
+| `callbacks`      | `object` | ❌       | Event callback functions                                              |
+| `supportConfig`  | `object` | ❌       | Support-specific config (for SupportChatWidget)                       |
+
+### Appearance Options
+
+```tsx
+appearance: {
+  primaryColor?: string;        // Default: '#007bff'
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';  // Default: 'bottom-right'
+  title?: string;                // Default: 'Chat Support'
+  subtitle?: string;             // Default: 'How can we help you?'
+  placeholder?: string;          // Default: 'Type your message...'
+  showAvatar?: boolean;          // Default: true
+  avatarUrl?: string;           // Default: auto-generated avatar
+}
+```
+
+### API Endpoints
+
+```tsx
+apiEndpoints: {
+  profileApi?: string;      // User profile API endpoint
+  servicesApi?: string;     // Purchased services API endpoint
+  zendeskApi?: string;      // Zendesk API endpoint
+}
+```
+
+### Callbacks
+
+```tsx
+callbacks: {
+  onMessageSent?: (message: string) => void;
+  onMessageReceived?: (response: ChatResponse) => void;
+  onError?: (error: Error) => void;
+  onTicketCreated?: (ticketId: string, ticketUrl: string) => void;
+}
+```
+
+## SupportChatWidget Usage
+
+For advanced support features with category selection, priority levels, and ticket management:
+
+```tsx
+import React from "react";
+import { SupportChatWidget } from "@aktarulrahul/floater-chatbot";
+import "@aktarulrahul/floater-chatbot/dist/index.css";
+
+function App() {
+  return (
+    <SupportChatWidget
+      config={{
+        webhookUrl: "http://localhost:5678/webhook/support-chat",
+        accessToken: "your-access-token",
+        supportConfig: {
+          custOrgId: 10556,
+          serviceItemId: 2970,
+        },
+        apiEndpoints: {
+          profileApi: "https://api.example.com/profile",
+          servicesApi: "https://api.example.com/services",
+          zendeskApi: "https://your-domain.zendesk.com",
+        },
+        appearance: {
+          title: "Support Center",
+          subtitle: "How can we help you?",
+        },
+      }}
+    />
+  );
+}
+```
+
+### Support Configuration
+
+```tsx
+supportConfig: {
+  custOrgId?: number;      // Customer organization ID
+  serviceItemId?: number;  // Service item ID
+  category?: string;        // Support category
+  priority?: string;        // Priority level
+  stage?: string;          // Conversation stage
+}
+```
+
+## Advanced Usage
+
+### Using the Hook Directly
+
+```tsx
+import { useChat } from "@aktarulrahul/floater-chatbot";
+
+function CustomChat() {
+  const { messages, isLoading, sendMessage } = useChat({
+    webhookUrl: "http://localhost:5678/webhook/chat",
+    accessToken: "your-token",
+  });
+
+  return (
+    <div>
+      {messages.map((msg) => (
+        <div key={msg.id}>{msg.text}</div>
+      ))}
+      <button onClick={() => sendMessage("Hello!")}>Send</button>
+    </div>
+  );
+}
+```
+
+### Using the API Client
+
+```tsx
+import { ChatApiClient } from "@aktarulrahul/floater-chatbot";
+
+const client = new ChatApiClient({
+  webhookUrl: "http://localhost:5678/webhook/chat",
+  accessToken: "your-token",
+});
+
+const response = await client.sendMessage("Hello!");
+console.log(response);
+```
+
+## Response Format
+
+The widget expects responses in the following format from your n8n workflow:
+
+```json
+{
+  "success": true,
+  "response": "AI-generated answer",
+  "conversation_id": "conv-123",
+  "references": [
+    {
+      "id": "doc-id",
+      "pdf_name": "document.pdf",
+      "page_number": 1
+    }
+  ],
+  "ticket_id": "optional-ticket-id",
+  "ticket_url": "optional-ticket-url",
+  "customer_context": {
+    "name": "Customer Name",
+    "plan": "Premium"
+  }
+}
+```
+
+## n8n Integration
+
+This widget is designed to work with the n8n workflow provided in `templates/chat.json`. The workflow expects:
+
+**Request:**
+
+```json
+{
+  "token": "user-access-token",
+  "message": "user question",
+  "conversation_id": "optional-conversation-id",
+  "api_endpoints": {
+    "profileApi": "https://api.example.com/profile",
+    "servicesApi": "https://api.example.com/services",
+    "zendeskApi": "https://your-domain.zendesk.com"
+  }
+}
+```
+
+## Styling
+
+The widget includes default styles, but you can override them:
+
+```css
+.chat-widget-container {
+  /* Your custom styles */
+}
+
+.chat-widget-button {
+  /* Button styles */
+}
+
+.chat-widget-window {
+  /* Window styles */
+}
+```
+
+## TypeScript Support
+
+Full TypeScript definitions are included:
+
+```tsx
+import {
+  ChatWidgetConfig,
+  ChatResponse,
+  ChatMessage,
+} from "@aktarulrahul/floater-chatbot";
+```
+
+## Development
+
+### Building the Package
+
+To build the npm package:
+
+```bash
+cd chat-widget
+npm install
+npm run build
+```
+
+This will create the compiled files in the `dist/` directory:
+
+- `dist/index.js` - CommonJS bundle
+- `dist/index.esm.js` - ES Module bundle
+- `dist/index.d.ts` - TypeScript declarations
+
+### Development Mode
+
+For development with watch mode (auto-rebuild on changes):
+
+```bash
+npm run dev
+```
+
+### Publishing to NPM
+
+For detailed instructions on building and publishing, see [BUILD.md](./BUILD.md).
+
+Quick publish steps:
+
+```bash
+# 1. Update version
+npm version patch  # or minor, major
+
+# 2. Build (runs automatically before publish)
+npm run build
+
+# 3. Publish
+npm publish --access public
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## Repository
+
+- **GitHub**: [https://github.com/Soft-Loop-Studio/chat-bot](https://github.com/Soft-Loop-Studio/chat-bot)
+- **Issues**: [https://github.com/Soft-Loop-Studio/chat-bot/issues](https://github.com/Soft-Loop-Studio/chat-bot/issues)
+
+## License
+
+MIT License - see the [LICENSE](https://github.com/Soft-Loop-Studio/chat-bot/blob/main/LICENSE) file for details.

package/dist/components/ChatWidget.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ChatWidgetConfig } from "../types";
+import "./ChatWidget.css";
+interface ChatWidgetProps {
+    config: ChatWidgetConfig;
+}
+export declare const ChatWidget: React.FC<ChatWidgetProps>;
+export {};
+//# sourceMappingURL=ChatWidget.d.ts.map

package/dist/components/ChatWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../src/components/ChatWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAe,MAAM,UAAU,CAAC;AAEzD,OAAO,kBAAkB,CAAC;AAE1B,UAAU,eAAe;IACvB,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkNhD,CAAC"}

package/dist/components/SupportChatWidget.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { ChatWidgetConfig } from "../types";
+import "./SupportChatWidget.css";
+interface SupportCategory {
+    id: string;
+    name: string;
+    icon: string;
+    description: string;
+}
+interface PriorityLevel {
+    id: string;
+    name: string;
+    color: string;
+    description: string;
+}
+interface SupportChatWidgetProps {
+    config: ChatWidgetConfig & {
+        /** Support-specific categories (optional, uses defaults if not provided) */
+        supportCategories?: SupportCategory[];
+        /** Priority levels (optional, uses defaults if not provided) */
+        priorityLevels?: PriorityLevel[];
+    };
+}
+export declare const SupportChatWidget: React.FC<SupportChatWidgetProps>;
+export {};
+//# sourceMappingURL=SupportChatWidget.d.ts.map

package/dist/components/SupportChatWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportChatWidget.d.ts","sourceRoot":"","sources":["../../src/components/SupportChatWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,yBAAyB,CAAC;AAEjC,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AA6BD,UAAU,sBAAsB;IAC9B,MAAM,EAAE,gBAAgB,GAAG;QACzB,4EAA4E;QAC5E,iBAAiB,CAAC,EAAE,eAAe,EAAE,CAAC;QACtC,gEAAgE;QAChE,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;KAClC,CAAC;CACH;AAwDD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAimB9D,CAAC"}

package/dist/hooks/useChat.d.ts

@@ -0,0 +1,9 @@
+import { ChatMessage, ChatWidgetConfig } from "../types";
+export declare const useChat: (config: ChatWidgetConfig) => {
+    messages: ChatMessage[];
+    isLoading: boolean;
+    error: string | null;
+    sendMessage: (text: string) => Promise<void>;
+    clearMessages: () => void;
+};
+//# sourceMappingURL=useChat.d.ts.map

package/dist/hooks/useChat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChat.d.ts","sourceRoot":"","sources":["../../src/hooks/useChat.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAgB,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGvE,eAAO,MAAM,OAAO,GAAI,QAAQ,gBAAgB;;;;wBAO/B,MAAM;;CAsGtB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,133 @@
+import React from 'react';
+
+interface ChatWidgetConfig {
+    /** n8n webhook endpoint URL */
+    webhookUrl: string;
+    /** User access token for authentication */
+    accessToken: string;
+    /** Optional conversation ID for maintaining context */
+    conversationId?: string;
+    /** List of API endpoints to pass to n8n */
+    apiEndpoints?: {
+        profileApi?: string;
+        servicesApi?: string;
+        zendeskApi?: string;
+    };
+    /** Widget appearance configuration */
+    appearance?: {
+        primaryColor?: string;
+        position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+        title?: string;
+        subtitle?: string;
+        placeholder?: string;
+        showAvatar?: boolean;
+        avatarUrl?: string;
+    };
+    /** Callback functions */
+    callbacks?: {
+        onMessageSent?: (message: string) => void;
+        onMessageReceived?: (response: ChatResponse) => void;
+        onError?: (error: Error) => void;
+        onTicketCreated?: (ticketId: string, ticketUrl: string) => void;
+    };
+    /** Support-specific configuration (optional) */
+    supportConfig?: {
+        custOrgId?: number;
+        serviceItemId?: number;
+        category?: string;
+        priority?: string;
+        stage?: string;
+    };
+}
+interface ChatMessage {
+    id: string;
+    text: string;
+    sender: "user" | "bot";
+    timestamp: Date;
+    isLoading?: boolean;
+}
+interface ChatResponse {
+    success: boolean;
+    response: string;
+    conversation_id: string | null;
+    references?: Array<{
+        id: string;
+        pdf_name: string;
+        page_number: number;
+    }>;
+    ticket_id?: string;
+    ticket_url?: string;
+    customer_context?: {
+        name?: string;
+        plan?: string;
+    };
+    error?: string;
+}
+interface ApiEndpoints {
+    profileApi?: string;
+    servicesApi?: string;
+    zendeskApi?: string;
+}
+
+interface ChatWidgetProps {
+    config: ChatWidgetConfig;
+}
+declare const ChatWidget: React.FC<ChatWidgetProps>;
+
+interface SupportCategory {
+    id: string;
+    name: string;
+    icon: string;
+    description: string;
+}
+interface PriorityLevel {
+    id: string;
+    name: string;
+    color: string;
+    description: string;
+}
+interface SupportChatWidgetProps {
+    config: ChatWidgetConfig & {
+        /** Support-specific categories (optional, uses defaults if not provided) */
+        supportCategories?: SupportCategory[];
+        /** Priority levels (optional, uses defaults if not provided) */
+        priorityLevels?: PriorityLevel[];
+    };
+}
+declare const SupportChatWidget: React.FC<SupportChatWidgetProps>;
+
+declare const useChat: (config: ChatWidgetConfig) => {
+    messages: ChatMessage[];
+    isLoading: boolean;
+    error: string | null;
+    sendMessage: (text: string) => Promise<void>;
+    clearMessages: () => void;
+};
+
+declare class ChatApiClient {
+    private client;
+    private config;
+    private conversationId;
+    constructor(config: ChatWidgetConfig);
+    /**
+     * Send a message to the chat API
+     */
+    sendMessage(message: string, additionalData?: {
+        custOrgId?: number;
+        serviceItemId?: number;
+        category?: string;
+        priority?: string;
+        stage?: string;
+    }): Promise<ChatResponse>;
+    /**
+     * Get current conversation ID
+     */
+    getConversationId(): string | null;
+    /**
+     * Set conversation ID
+     */
+    setConversationId(id: string | null): void;
+}
+
+export { ChatApiClient, ChatWidget, SupportChatWidget, useChat };
+export type { ApiEndpoints, ChatMessage, ChatResponse, ChatWidgetConfig };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,cAAc,SAAS,CAAC"}