lulichat 1.0.8 → 1.0.16

package/README.md

@@ -1,69 +1,138 @@
-# Lulichat Support Chat
+# LuliChat Support Chat
 
-Lulichat Support Chat is a React library that provides a chat interface for web applications. It includes a chat icon that opens a contact form for users to submit their contact information, and it establishes a socket connection for real-time chat functionality.
+LuliChat Support Chat is a library that provides a real-time live support chat widget for web applications. It can be integrated into React applications or loaded directly via UMD/script tags in standard HTML pages.
 
-## Features
+---
 
-- Chat icon positioned at the bottom right corner of the screen.
-- Contact information collection form with validation.
-- Real-time chat interface using WebSocket.
-- Easy integration into any React application.
-
-## Installation
-
-To install the Lulichat Support Chat library, run the following command:
+## 1. React Installation & Usage
 
+### Installation
 ```bash
 npm install lulichat
 ```
 
-## Usage
-
-To use the Lulichat Support Chat in your application, import the components as follows:
-
-```tsx
-import Lulichat from "lulichat";
-```
-
-### Example
-
+### Usage
+Import the component and stylesheet:
 ```tsx
 import React from "react";
-import Lulichat from "lulichat";
+import LuliChat from "lulichat";
 import "lulichat/dist/style.css";
 
 const App = () => {
   return (
-    <div>
-      <h1>Welcome to My Application</h1>
-      <LuliChat
-        apiKey="LU...."
-        companyName="LuliChat Demo"
-        welcomeMessage="How can we help you today?"
-        primaryColor="#4f46e5"
-        allowAnonymous={true}
-        requireContactInfo={true}
-        position="bottom-right"
-      />
-    </div>
+    <LuliChat
+      apiKey="YOUR_API_KEY"
+      companyName="LuliChat Demo"
+      welcomeMessage="How can we help you today?"
+      primaryColor="#4f46e5"
+      allowAnonymous={true}
+      requireContactInfo={true}
+      position="bottom-right"
+    />
   );
 };
 
 export default App;
 ```
 
-## API
+---
+
+## 2. Vanilla Script Integration (No React)
+
+You can load the widget on any website using the unpkg CDN.
+
+### Option A: Standalone Bundle (Recommended for non-React websites)
+This bundle includes React, ReactDOM, Socket.io, marked, and DOMPurify internally, making it a zero-dependency drop-in.
+
+```html
+<script
+  src="https://unpkg.com/lulichat/dist/lulichat-widget-standalone.umd.js"
+  data-api-key="YOUR_API_KEY"
+  data-company-name="Your Company"
+  data-position="bottom-right"
+  data-primary-color="#4f46e5"
+  defer
+  onload="window.LuliChatSupport && window.LuliChatSupport.initFromScript()"
+></script>
+```
+
+### Option B: Externalized Bundle
+If your page already loads React, ReactDOM, and socket.io-client, use the smaller externalized bundle:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/lulichat/dist/style.css" />
+<script
+  src="https://unpkg.com/lulichat/dist/lulichat-widget.umd.js"
+  data-api-key="YOUR_API_KEY"
+  data-company-name="Your Company"
+  data-position="bottom-right"
+  data-primary-color="#4f46e5"
+  defer
+  onload="window.LuliChatSupport && window.LuliChatSupport.initFromScript()"
+></script>
+```
+
+---
+
+## 3. Iframe Embedding Options
+
+### Option A: Isolated Iframe (Script Tag)
+To isolate the chat DOM and CSS from your parent page styles, enable isolated mode using the `data-isolated` attribute:
+
+```html
+<script
+  src="https://unpkg.com/lulichat/dist/lulichat-widget.umd.js"
+  data-api-key="YOUR_API_KEY"
+  data-isolated="iframe"
+  data-iframe-width="360px"
+  data-iframe-height="560px"
+  defer
+  onload="window.LuliChatSupport && window.LuliChatSupport.initFromScript()"
+></script>
+```
+
+### Option B: Zero-JS Iframe Embedding (Static Frame)
+If you want to embed the chat widget strictly via a standard `<iframe>` without any scripts on the parent page, point the frame to the hosted `lulichat-widget.html`:
+
+```html
+<iframe
+  src="https://unpkg.com/lulichat/dist/lulichat-widget.html?apiKey=YOUR_API_KEY&position=bottom-right&primaryColor=%234f46e5"
+  width="380"
+  height="600"
+  style="border:0;background:transparent"
+  loading="lazy"
+></iframe>
+```
+
+---
+
+## 4. Configuration Options
+
+Set these options via React component props, `data-*` script tag attributes, or URL query parameters:
+
+| Parameter / Attribute | Description | Default |
+| :--- | :--- | :--- |
+| `apiKey` / `data-api-key` | Your LuliChat public API key (Required) | - |
+| `companyName` / `data-company-name` | Header title of the widget | `LuliChat` |
+| `welcomeMessage` / `data-welcome-message` | Initial greeting message | - |
+| `primaryColor` / `data-primary-color` | Hex theme color code (e.g. `#4f46e5`) | `#4f46e5` |
+| `position` / `data-position` | Widget placement (`bottom-right`, `bottom-left`, `top-right`, `top-left`) | `bottom-right` |
+| `allowAnonymous` / `data-allow-anonymous` | Allow users to chat without entering contact info | `false` |
+| `requireContactInfo` / `data-require-contact-info` | Ask for contact info before initiating a session | `true` |
+| `baseUrl` / `data-base-url` | Base endpoint URL for the chat backend API | `https://api.lulichat.com` |
 
-### Components
+---
 
-- **ChatIcon**: Renders a chat icon that opens the contact form.
-- **ContactForm**: Displays a form for users to input their contact details.
-- **SupportChat**: Manages the chat interface and socket connection.
+## 5. JavaScript / Programmatic API
 
-## Contributing
+When loaded via a script tag, the widget registers a global `window.LuliChatSupport` object:
 
-Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
+- `window.LuliChatSupport.mount(config, targetSelector?)`: Mounts the widget programmatically.
+- `window.LuliChatSupport.unmount(id)`: Unmounts a specific widget instance by ID.
+- `window.LuliChatSupport.unmountAll()`: Removes all mounted widget instances.
+- `window.LuliChatSupport.mountIframe(config, iframeConfig)`: Programmatically mounts the widget within an isolated iframe.
+- `window.LuliChatSupport.initFromScript()`: Reads properties from the current `<script>` tag and initializes the widget.
 
 ## License
 
-This project is licensed under the MIT License. See the LICENSE file for more details.
+This project is licensed under the MIT License.

package/dist/index.d.ts

@@ -1,4 +1,131 @@
-import { LuliChat } from "./components/LuliChat";
-export * from "./types";
-import "./index.css";
-export { LuliChat as default };
+import React from 'react';
+
+export interface LuliChatConfig {
+  apiKey: string;
+  baseUrl?: string;
+  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+  primaryColor?: string;
+  companyName?: string;
+  welcomeMessage?: string;
+  requireContactInfo?: boolean;
+  allowAnonymous?: boolean;
+}
+
+export interface MountResult {
+  id: string;
+  unmount: () => void;
+  container: HTMLElement;
+}
+
+export function mount(
+  config: LuliChatConfig,
+  target?: string | HTMLElement
+): MountResult;
+
+export function unmount(id: string): void;
+
+export function unmountAll(): void;
+
+export interface IframeOptions {
+  width?: string | number;
+  height?: string | number;
+  autoResize?: boolean;
+  minHeight?: string | number;
+  maxHeight?: string | number;
+  styleHref?: string;
+}
+
+export function mountIframe(
+  config: LuliChatConfig,
+  options?: IframeOptions
+): MountResult & { iframe: HTMLIFrameElement };
+
+export function unmountIframe(id: string): void;
+
+export function initFromScript(script?: HTMLScriptElement): any;
+
+export interface ContactInfo {
+  name?: string;
+  email?: string;
+  queueId?: string | number;
+  queueOptionId?: string | number;
+  guestId?: string;
+}
+
+export interface Help {
+  id: number;
+  title: string;
+  description: string;
+  category: string;
+  video: string;
+  link: string;
+  type: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export type Sender = "user" | "human-agent" | "system" | "ai-agent" | "auto-respond";
+export type MessageStatus = "error" | "pending" | "delivered" | "seen" | "played" | "unknown";
+
+export interface ChatMessage {
+  mediaUrl?: string | null;
+  id: string;
+  dataJson?: any;
+  ack: number;
+  read: boolean;
+  fromMe: boolean;
+  body: string;
+  mediaType?: string;
+  isDeleted?: boolean;
+  createdAt: string | Date;
+  quotedMsgId?: number | string | null;
+  queueId?: number;
+  isEdited?: boolean;
+  quotedMsg?: ChatMessage | null;
+  status: string;
+  sender: Sender;
+}
+
+export interface Ticket {
+  id: number;
+  status: string;
+  unreadMessages: null;
+  lastMessage: string;
+  createdAt: string;
+  updatedAt: string;
+  companyId: string;
+  queueId: string;
+  contact: Contact;
+  queue: {
+    id: number;
+    name: string;
+    color: string;
+  };
+  ticketTracking: any;
+  tags: any[];
+}
+
+export interface Contact {
+  id: number;
+  name: string;
+  number: string;
+  email: string;
+  chatId: string;
+  profilePicUrl: null;
+}
+
+export interface Queue {
+  id: number;
+  name: string;
+  color: string;
+  greetingMessage: string;
+  outOfHoursMessage: string;
+  companyId: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export type ChatState = "closed" | "contact-form" | "chat" | "loading";
+
+declare const LuliChat: React.FC<LuliChatConfig>;
+export default LuliChat;