@verba-ai/chat-sdk 1.0.2 → 1.0.4

package/README.md

@@ -4,41 +4,37 @@ A lightweight, TypeScript SDK for embedding the Verba AI chat widget into any we
 
 The SDK acts as a secure, high-performance orchestration layer that manages the injection and lifecycle of the Verba chat `iframe`. It supports both floating and inline mounting strategies.
 
-## Installation
-
-Install via your preferred package manager:
-
-```bash
-npm install @verba-ai/chat-sdk
-# or
-yarn add @verba-ai/chat-sdk
-# or
-pnpm add @verba-ai/chat-sdk
-```
-
----
-
 ## Usage
 
 ### 1. Floating Bubble (Default)
+
 The easiest way to integrate the chat. It creates a fixed-position action button in the bottom corner of your screen that toggles the chat window.
 
 ```typescript
-import { ChatSDK } from '@verba-ai/chat-sdk';
+import { ChatSDK } from "@verba-ai/chat-sdk";
 
 const chat = new ChatSDK({
   // Required: Your unique Verba tenant ID
-  tenant: 'your-tenant-id',
-  
-  // Optional: Simple theme selection
-  theme: 'dark', 
-  
-  // Optional: Position of the bubble
-  position: 'bottom-right' 
+  tenant: "your-tenant-id",
+
+  // Optional
+  theme: {
+    primaryColor: "#6366f1",
+    backgroundColor: "#080b14",
+    textColor: "#f1f5f9",
+  },
+
+  // Optional: Configuration for the floating bubble
+  bubble: {
+    position: "bottom-right",
+    color: "#8b5cf6", // custom background gradient/color
+    size: 56, // size in pixels
+    icon: "<link>", // src to <img> tag
+  },
 });
 
 // Inject the bubble into the DOM
-chat.init(); 
+chat.init();
 
 // Optional programmatic controls
 // chat.show();
@@ -47,47 +43,48 @@ chat.init();
 ```
 
 ### 2. Inline Mounting
+
 If you want to render the chat inside a specific part of your page (like a dashboard panel or a dedicated contact page).
 
 ```typescript
-import { ChatSDK } from '@verba-ai/chat-sdk';
+import { ChatSDK } from "@verba-ai/chat-sdk";
 
 // Ensure the container exists in your DOM
 // <div id="my-chat-container" style="height: 600px;"></div>
 
 const chat = new ChatSDK({
-  tenant: 'your-tenant-id',
-  
+  tenant: "your-tenant-id",
+
   // Target a CSS selector or pass an HTMLElement directly
-  container: '#my-chat-container',
-  
+  container: "#my-chat-container",
+
   // Optional: Advanced visual theming
   theme: {
-    primaryColor: '#6366f1',
-    backgroundColor: '#080b14',
-    textColor: '#f1f5f9',
-    borderRadius: '12px'
-  }
+    primaryColor: "#6366f1",
+    backgroundColor: "#080b14",
+    textColor: "#f1f5f9",
+  },
 });
 
 chat.init();
 ```
 
 ### 3. Usage via CDN (UMD)
+
 If you aren't using a bundler (Webpack/Vite/Rollup), you can load the SDK directly via a script tag.
 
 ```html
 <script src="https://unpkg.com/@verba-ai/chat-sdk@latest/dist/chat-sdk.umd.cjs"></script>
 <script>
   const { ChatSDK } = window.VerbaChatSDK;
-  
-  new ChatSDK({ tenant: 'your-tenant-id' }).init();
+
+  new ChatSDK({ tenant: "your-tenant-id" }).init();
 </script>
 ```
 
 ---
 
-## 📚 API Reference
+## API Reference
 
 ### `ChatSDK` Class
 
@@ -95,12 +92,12 @@ The main entry point for the widget.
 
 #### Methods
 
-| Method | Description |
-| :--- | :--- |
-| `init()` | Injects the CSS and iframe into the DOM. Resolves the SDK state to `ready`. |
-| `show()` | Makes the widget visible (animates the iframe open in floating mode). |
-| `hide()` | Hides the widget (animates the iframe closed in floating mode). |
-| `destroy()`| Completely tears down the SDK, removing all injected DOM elements, styles, and events. |
+| Method      | Description                                                                            |
+| :---------- | :------------------------------------------------------------------------------------- |
+| `init()`    | Injects the CSS and iframe into the DOM.                                               |
+| `show()`    | Makes the widget visible (animates the iframe open in floating mode).                  |
+| `hide()`    | Hides the widget (animates the iframe closed in floating mode).                        |
+| `destroy()` | Completely tears down the SDK, removing all injected DOM elements, styles, and events. |
 
 ---
 
@@ -112,18 +109,36 @@ The main entry point for the widget.
 interface ChatSDKConfig {
   /** Your Verba tenant ID (Required) */
   tenant: string;
-  
+
   /** Where to mount the widget. Omit for floating bubble. */
   container?: string | HTMLElement;
-  
+
   /** Visual theme. String preset or detailed config. */
-  theme?: 'light' | 'dark' | ThemeConfig;
-  
-  /** Position of the floating bubble (Default: 'bottom-right') */
-  position?: 'bottom-right' | 'bottom-left';
-  
-  /** Arbitrary metadata to pass to the widget */
-  userMetadata?: Record<string, unknown>;
+  theme?: "light" | "dark" | ThemeConfig;
+
+  /** Configuration for the floating bubble. */
+  bubble?: ChatBubbleConfig;
+}
+```
+
+#### `ChatBubbleConfig`
+
+```typescript
+interface ChatBubbleConfig {
+  /** Corner position of the floating bubble (Default: 'bottom-right') */
+  position?: "bottom-right" | "bottom-left";
+
+  /** Background color of the bubble (Default: '#ffffff') */
+  color?: string;
+
+  /** Size of the bubble in pixels (Default: 56) */
+  size?: number;
+
+  /** SVG string for a custom open (chat) icon */
+  icon?: string;
+
+  /** Color of the close (X) icon (Default: '#ffffff') */
+  closeIconColor?: string;
 }
 ```
 
@@ -135,7 +150,5 @@ interface ThemeConfig {
   textColor?: string;
   backgroundColor?: string;
   fontFamily?: string;
-  borderRadius?: string | number;
 }
 ```
-