@headwai/chat-bubble 2.0.6 → 2.0.8

package/README.dev.md

@@ -1,17 +1,8 @@
-# Chat Bubble Svelte
+# Headwai Chat Bubble
 
 The chat bubble is based on a Svelte integration for the [deep-chat](https://www.npmjs.com/package/deep-chat) component, providing an easy-to-use AI chat interface for your web applications.
 
-## Features
-
-- 🚀 Easy integration
-- 🔧 Configurable via environment variables
-- 💬 Support for various AI providers (LocalChat, OpenAI and more)
-- 📱 Responsive design
-- 🎨 Customizable UI components
-- 🔄 Real-time messaging with WebSocket support
-
-## Installation
+## Development
 
 ### Prerequisites
 
@@ -43,171 +34,34 @@ cp .env.example .env
 npm run dev
 ```
 
-## Configuration
-
-The deep-chat component can be configured using environment variables. Create a `.env` file in your project root with the following variables:
-
-### Required Environment Variables
-
-```env
-# API Configuration
-VITE_CHAT_BUBBLE_API_URL=https://your-api-endpoint.com/api/chat/completions
-VITE_CHAT_BUBBLE_API_KEY=your-api-key-here
-VITE_CHAT_BUBBLE_MODEL_ID=gpt-3.5-turbo
-
-# Connection Type (websocket, openAI, etc.)
-VITE_CHAT_BUBBLE_CONNECTION_TYPE=websocket
-```
-
-### Optional Environment Variables
-
-```env
-# Additional Headers
-VITE_CHAT_BUBBLE_CONTENT_TYPE=application/json
-
-# Request Configuration
-VITE_CHAT_BUBBLE_MAX_MESSAGES=0
-
-# UI Configuration
-VITE_CHAT_BUBBLE_PLACEHOLDER_TEXT=Welcome to the chat!
-VITE_CHAT_BUBBLE_DEMO_MODE=false
-VITE_CHAT_BUBBLE_FAVICON_PATH=/icons/favicon.svg
-```
-
-## Usage
-
-### Basic Integration
-
-To integrate the deep-chat component into your Svelte application:
-
-1. **Install the package** (if using as a standalone package):
+6. Open embedded Headwai Chat Bubble in Browser
 ```bash
-npm install deep-chat
-```
-
-2. **Import and use in your Svelte component**:
-
-```svelte
-<script>
-  import { DeepChat } from "deep-chat";
-  
-  // Configuration using environment variables
-  const connect = {
-    type: import.meta.env.VITE_CHAT_BUBBLE_CONNECTION_TYPE || "websocket",
-    url: import.meta.env.VITE_CHAT_BUBBLE_API_URL,
-    headers: {
-      Authorization: `Bearer ${import.meta.env.VITE_CHAT_BUBBLE_API_KEY}`,
-      "Content-Type": import.meta.env.VITE_CHAT_BUBBLE_CONTENT_TYPE || "application/json"
-    },
-    additionalBodyProps: {
-      model: import.meta.env.VITE_CHAT_BUBBLE_MODEL_ID
-    }
-  };
-
-  const requestBodyLimits = {
-    maxMessages: parseInt(import.meta.env.VITE_CHAT_BUBBLE_MAX_MESSAGES) || 0
-  };
-
-  const textInputConfig = {
-    placeholder: {
-      text: import.meta.env.VITE_CHAT_BUBBLE_PLACEHOLDER_TEXT || "Type your message..."
-    }
-  };
-
-  // Message transformation for OpenAI compatibility
-  const requestInterceptor = (details) => {
-    if (details.body && details.body.messages) {
-      details.body.messages = details.body.messages.map(message => ({
-        role: message.role === "ai" ? "assistant" : message.role,
-        content: message.text || message.content
-      }));
-    }
-    return details;
-  };
-
-  const responseInterceptor = (response) => {
-    if (response.choices && response.choices[0] && response.choices[0].message) {
-      const message = response.choices[0].message;
-      return {
-        text: message.content,
-        role: message.role === "assistant" ? "ai" : message.role
-      };
-    }
-    
-    if (response.text || response.html || response.files) {
-      return response;
-    }
-    
-    if (typeof response === 'string') {
-      return { text: response };
-    }
-    
-    return response;
-  };
-</script>
-
-<deep-chat
-  demo={import.meta.env.VITE_CHAT_BUBBLE_DEMO_MODE === 'true'}
-  textInput={textInputConfig}
-  connect={connect}
-  requestBodyLimits={requestBodyLimits}
-  requestInterceptor={requestInterceptor}
-  responseInterceptor={responseInterceptor}
-/>
+ http://localhost:5174/
 ```
 
-### Including Chat Bubble in Customer Websites
-
-#### Customizing Message Colors
+7. Alternatively, build and test deployed veersion:
+[Build and Deploy](#build-and-deploy) and open `./test-widget.html` in a browser.
 
-You can customize the background colors and text colors of user and AI messages, as well as the assistant icon color, in several ways:
+## Configuration
 
-**Via environment variables (.env file):**
-```env
-# Message styling
-VITE_CHAT_BUBBLE_USER_MESSAGE_BG_COLOR=#007bff
-VITE_CHAT_BUBBLE_AI_MESSAGE_BG_COLOR=#f1f3f4
-VITE_CHAT_BUBBLE_USER_MESSAGE_TEXT_COLOR=#ffffff
-VITE_CHAT_BUBBLE_AI_MESSAGE_TEXT_COLOR=#000000
+The Headwai Chat Bubble can be configured using environment variables or by changing the attributes of the instance. 
 
-# Assistant icon styling (creates a gradient automatically)
-VITE_CHAT_BUBBLE_FAVICON_BG_COLOR=#667eea
-```
+### Environment Variables
+Create a `.env` by copying `.env.example` file in your project root with the following variables:
 
-**Via runtime configuration (Script Embed - Option 2):**
+### Window Object Configuration
 ```html
-<script>
-    window.DEEP_CHAT_CONFIG = {
-        apiUrl: 'https://customer-api.com/chat',
-        apiKey: 'customer-api-key',
-        userMessageBackgroundColor: '#4a90e2',  // Blue background for user messages
-        aiMessageBackgroundColor: '#e8f5e8',     // Light green background for AI messages
-        userMessageTextColor: '#ffffff',         // White text for user messages
-        aiMessageTextColor: '#2d5016',           // Dark green text for AI messages
-        faviconBackgroundColor: '#28a745'            // Green icon (gradient auto-generated)
-    };
-</script>
-```
-
-**Via props (NPM Package - Option 3):**
-```svelte
-<script>
-  import { ChatBubble } from '@headwai/chat-bubble';
-</script>
-
-<ChatBubble
-  apiUrl="https://api.example.com/chat"
-  apiKey="your-api-key"
-  userMessageBackgroundColor="#ff6b6b"   <!-- Red background for user messages -->
-  aiMessageBackgroundColor="#4ecdc4"     <!-- Teal background for AI messages -->
-  userMessageTextColor="#ffffff"         <!-- White text for user messages -->
-  aiMessageTextColor="#2c3e50"           <!-- Dark blue text for AI messages -->
-  faviconBackgroundColor="#e74c3c"           <!-- Red icon (gradient auto-generated) -->
-  {/* ...other props */}
-/>
+    <script>
+        // Runtime configuration override
+        window.HEADWAI_CHAT_BUBBLE_CONFIG = {
+            apiUrl: 'https://customer-api.com/chat',
+            apiKey: 'customer-api-key',
+            modelId: 'gpt-4'
+        };
+    </script>
 ```
 
-**Via data attributes (Multiple chat bubbles):**
+### Via data attributes (Multiple chat bubbles):**
 ```html
 <div data-chat-bubble 
      data-chat-bubble-api-url="https://api1.com/chat"
@@ -219,22 +73,16 @@ VITE_CHAT_BUBBLE_FAVICON_BG_COLOR=#667eea
      data-chat-bubble-favicon-background-color="#ff6f00"></div>
 ```
 
-**Color Suggestions for Assistant Icon:**
-- **Corporate Blue:** `#0066cc` (creates blue gradient)
-- **Success Green:** `#28a745` (creates green gradient)  
-- **Warning Orange:** `#fd7e14` (creates orange gradient)
-- **Danger Red:** `#dc3545` (creates red gradient)
-- **Purple:** `#6f42c1` (creates purple gradient)
-- **Teal:** `#20c997` (creates teal gradient)
+## Including Chat Bubble in Customer Websites
 
-The component automatically creates a beautiful linear gradient by making the second color 20% darker than your chosen base color.
+For simple integration instructions, see [README.md](README.md) which provides a streamlined guide for customers.
 
-#### Option 1: Build and Deploy (Complete Application)
+## Build and Deploy
 
-This option bundles everything into a ready-to-use application including all interceptors and logic.
+This project builds a standalone widget that can be integrated into any website.
 
 **What gets bundled:**
-- ✅ Request/Response interceptors (OpenAI compatibility)
+- ✅ All logic and request/response interceptors
 - ✅ Environment variable configuration
 - ✅ All chat functionality
 - ✅ UI components and styling
@@ -246,229 +94,26 @@ This option bundles everything into a ready-to-use application including all int
 VITE_CHAT_BUBBLE_API_URL=https://api.customer-domain.com/chat
 VITE_CHAT_BUBBLE_API_KEY=prod-api-key
 VITE_CHAT_BUBBLE_MODEL_ID=gpt-4
-VITE_CHAT_BUBBLE_CONNECTION_TYPE=websocket
-VITE_CHAT_BUBBLE_DEMO_MODE=false
-```
-
-2. **Build the widget**:
-```bash
-npm run build:widget
-```
-
-3. **Deploy the `dist-widget` folder** to your web server or CDN.
-
-**Result:** Customers get a complete chat application - no additional coding required!
-
-#### Option 2: Embed Chat Bubble as Script (Plug-and-Play)
-
-After building the widget, you can include the chat component in any website as a complete widget.
-
-**Build steps:**
-1. **Build the widget**:
-```bash
-npm run build:widget
-```
-
-2. **Publish to NPM** (for jsDelivr access):
-```bash
-npm publish
-```
-
-**Customer integration:**
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Customer Website</title>
-    <!-- Configure via global variables -->
-    <script>
-        // Runtime configuration override
-        window.DEEP_CHAT_CONFIG = {
-            apiUrl: 'https://customer-api.com/chat',
-            apiKey: 'customer-api-key',
-            modelId: 'gpt-4',
-            connectionType: 'websocket'
-        };
-    </script>
-</head>
-<body>
-    <!-- Your existing content -->
-    
-    <!-- Chat Bubble Integration - Auto-initializes! -->
-    <div id="chat-bubble-container"></div>
-    
-    <!-- Include from jsDelivr CDN -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist-widget/chat-bubble.css">
-    <script src="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist-widget/chat-bubble.js"></script>
-</body>
-</html>
-```
-
-**Alternative: Multiple chat bubbles with data attributes:**
-```html
-<!-- Chat bubble with specific configuration -->
-<div data-chat-bubble 
-     data-chat-bubble-api-url="https://api1.com/chat"
-     data-chat-bubble-api-key="key1"></div>
-
-<!-- Another chat bubble with different config -->
-<div data-chat-bubble 
-     data-chat-bubble-api-url="https://api2.com/chat"
-     data-chat-bubble-api-key="key2"></div>
-
-<script src="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist-widget/chat-bubble.js"></script>
-```
-
-**What customers get:**
-- ✅ Complete chat interface
-- ✅ All interceptors included
-- ✅ OpenAI API compatibility built-in
-- ✅ Just needs API configuration
-- ✅ Auto-initialization on page load
-
-#### Option 3: NPM Package Integration (Developer Integration)
-
-For developers who need full control and customization.
-
-**Build and publish steps:**
-1. **Build the library**:
-```bash
-npm run build:lib
-```
-
-2. **Publish to NPM**:
-```bash
-npm publish
-```
-
-**Customer installation:**
-```bash
-# Install in customer's project
-npm install @headwai/chat-bubble
-```
-
-**For Svelte projects:**
-```svelte
-<!-- Customer's Svelte component -->
-<script>
-  import { ChatBubble } from '@headwai/chat-bubble';
-  
-  // Customers MUST implement these interceptors themselves
-  const requestInterceptor = (details) => {
-    if (details.body && details.body.messages) {
-      details.body.messages = details.body.messages.map(message => ({
-        role: message.role === "ai" ? "assistant" : message.role,
-        content: message.text || message.content
-      }));
-    }
-    return details;
-  };
-
-  const responseInterceptor = (response) => {
-    if (response.choices && response.choices[0] && response.choices[0].message) {
-      const message = response.choices[0].message;
-      return {
-        text: message.content,
-        role: message.role === "assistant" ? "ai" : message.role
-      };
-    }
-    return response;
-  };
-
-  const connect = {
-    type: "websocket",
-    url: process.env.API_URL,
-    headers: {
-      Authorization: `Bearer ${process.env.API_KEY}`,
-      "Content-Type": "application/json"
-    },
-    additionalBodyProps: {
-      model: process.env.MODEL_NAME
-    }
-  };
-</script>
-
-<ChatBubble
-  connect={connect}
-  requestInterceptor={requestInterceptor}
-  responseInterceptor={responseInterceptor}
-/>
 ```
 
-**For vanilla JavaScript projects:**
-```html
-<script type="module">
-  import { createChatBubble } from 'https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist/index.js';
-  
-  // Initialize manually with custom configuration
-  const chatBubble = createChatBubble(
-    document.getElementById('chat-container'),
-    {
-      apiUrl: 'https://api.example.com/chat',
-      apiKey: 'your-api-key',
-      // ... other props
-    }
-  );
-</script>
-```
-
-**What customers need to implement:**
-- ❌ Request/Response interceptors (manual setup required)
-- ❌ Environment variable handling
-- ❌ API configuration logic
-- ✅ Deep chat component only
-
-## Deployment Options Comparison
-
-| Feature | Built App (Option 1) | Script Embed (Option 2) | NPM Package (Option 3) |
-|---------|----------------------|--------------------------|-------------------------|
-| **Build Command** | `npm run build:widget` | `npm run build:widget` + publish | `npm run build:lib` + publish |
-| **Interceptors Included** | ✅ Yes, automatically | ✅ Yes, automatically | ❌ No, manual setup required |
-| **Environment Variables** | ✅ Built-in support | ✅ Runtime configuration | ❌ Customer implements |
-| **OpenAI Compatibility** | ✅ Ready to use | ✅ Ready to use | ❌ Customer implements |
-| **Setup Complexity** | 🟢 Minimal (just config) | � Minimal (script tag) | �🟡 Moderate (coding required) |
-| **Customization** | 🟡 Limited to env vars | � Limited to config object | �🟢 Full control |
-| **File Size** | 🟡 Larger (complete app) | � Larger (complete app) | �🟢 Smaller (just component) |
-| **Use Case** | Self-hosted deployment | CDN/jsDelivr embedding | Developers, custom integration |
-| **Auto-initialization** | ✅ Yes | ✅ Yes | ❌ Manual setup |
-
-### Recommended Approach
-
-**For most customers:** Use **Option 2** (Script Embed via jsDelivr)
-- ✅ No coding required
-- ✅ All interceptors included
-- ✅ Easy CDN access via jsDelivr
-- ✅ Just configure via JavaScript object
-- ✅ Ready-to-deploy solution
-- ✅ Auto-initialization
-
-**For self-hosted deployments:** Use **Option 1** (Built Application)
-- ✅ Complete control over hosting
-- ✅ No external CDN dependencies
-- ✅ All interceptors included
-- ✅ Environment variable configuration
-
-**For developers who need customization:** Use **Option 3** (NPM Package)
-- ✅ Full control over interceptors
-- ✅ Custom API integrations
-- ✅ Smaller bundle size
-- ❌ More setup required
+2. **Bump package version**
+Bump up the `version` in `package.json`
 
 ## Publishing to NPM and jsDelivr Access
 
 ### Publishing Steps
 
-1. **Build both library and widget**:
+3. **Build widget**:
 ```bash
 npm run build
 ```
 
-2. **Login to NPM** (if not already logged in):
+4. **Login to NPM** (if not already logged in):
 ```bash
 npm login
 ```
 
-3. **Publish the package**:
+5. **Publish the package**:
 ```bash
 npm publish
 ```
@@ -477,7 +122,7 @@ npm publish
 
 Once published to NPM, your package is automatically available on jsDelivr:
 
-**For Widget/Script Embed (Options 1 & 2):**
+**For Widget/Script Embed:**
 ```html
 <!-- Latest version -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist-widget/chat-bubble.css">
@@ -488,51 +133,6 @@ Once published to NPM, your package is automatically available on jsDelivr:
 <script src="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@1.0.0/dist-widget/chat-bubble.js"></script>
 ```
 
-**For Library/Module Import (Option 3):**
-```html
-<!-- ES Module -->
-<script type="module">
-  import { ChatBubble, createChatBubble } from 'https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist/index.js';
-</script>
-
-<!-- UMD (Universal Module Definition) -->
-<script src="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist/index.umd.js"></script>
-```
-
-### File Structure After Build
-
-```
-dist/                    # NPM package (Option 3)
-├── index.js            # ES module
-├── index.umd.js        # UMD module
-└── style.css           # Component styles
-
-dist-widget/            # Standalone widget (Options 1 & 2)
-├── widget.html         # Demo page
-├── chat-bubble.js      # Complete widget with auto-init
-├── chat-bubble.css     # Widget styles
-└── assets/             # Additional assets
-```
-
-## Environment Variables Reference
-
-| Variable | Description | Default | Required |
-|----------|-------------|---------|----------|
-| `VITE_CHAT_BUBBLE_API_URL` | The API endpoint URL | - | ✅ |
-| `VITE_CHAT_BUBBLE_API_KEY` | API authentication key | - | ✅ |
-| `VITE_CHAT_BUBBLE_MODEL_ID` | AI model name to use | `gpt-3.5-turbo` | ✅ |
-| `VITE_CHAT_BUBBLE_CONNECTION_TYPE` | Connection type (websocket, openAI, etc.) | `websocket` | ✅ |
-| `VITE_CHAT_BUBBLE_CONTENT_TYPE` | HTTP Content-Type header | `application/json` | ❌ |
-| `VITE_CHAT_BUBBLE_MAX_MESSAGES` | Maximum messages in conversation history | `0` (unlimited) | ❌ |
-| `VITE_CHAT_BUBBLE_PLACEHOLDER_TEXT` | Chat input placeholder text | `Type your message...` | ❌ |
-| `VITE_CHAT_BUBBLE_DEMO_MODE` | Enable demo mode | `false` | ❌ |
-| `VITE_CHAT_BUBBLE_FAVICON_PATH` | Path to favicon/icon for chat toggle button | `/icons/favicon.svg` | ❌ |
-| `VITE_CHAT_BUBBLE_USER_MESSAGE_BG_COLOR` | Background color for user messages | `#007bff` | ❌ |
-| `VITE_CHAT_BUBBLE_AI_MESSAGE_BG_COLOR` | Background color for AI messages | `#f1f3f4` | ❌ |
-| `VITE_CHAT_BUBBLE_USER_MESSAGE_TEXT_COLOR` | Text color for user messages | `#000000` | ❌ |
-| `VITE_CHAT_BUBBLE_AI_MESSAGE_TEXT_COLOR` | Text color for AI messages | `#000000` | ❌ |
-| `VITE_CHAT_BUBBLE_FAVICON_BG_COLOR` | Base color for assistant icon gradient | `#667eea` | ❌ |
-
 ## API Compatibility
 
 This component is designed to work with OpenAI-compatible APIs. The request and response interceptors handle the message format transformation between deep-chat and OpenAI formats.
@@ -550,51 +150,23 @@ This component is designed to work with OpenAI-compatible APIs. The request and
 ### Scripts
 
 - `npm run dev` - Start development server
-- `npm run build` - Build both library and widget for production
-- `npm run build:lib` - Build NPM package (Option 3)
-- `npm run build:widget` - Build standalone widget (Options 1 & 2)
-- `npm run build:app` - Build demo application
+- `npm run build` - Build widget for production
+- `npm run build:widget` - Build standalone widget
 - `npm run preview` - Preview production build
 
-### Project Structure
-
-```
-chat-bubble/
-├── src/
-│   ├── App.svelte          # Main chat component
-│   ├── main.js             # Development entry point
-│   ├── lib.js              # NPM package entry point
-│   └── widget.js           # Widget/standalone entry point
-├── dist/                   # NPM package build output
-├── dist-widget/            # Widget build output
-├── package.json            # Dependencies and scripts
-├── vite.config.js          # Default Vite configuration
-├── vite.lib.config.js      # Library build configuration
-├── vite.widget.config.js   # Widget build configuration
-├── vite.app.config.js      # App build configuration
-├── svelte.config.js        # Svelte configuration
-├── index.html              # Development HTML
-├── widget.html             # Widget HTML template
-└── README.md               # This file
-```
-
 ## Troubleshooting
 
 ### Common Issues
 
-1. **CORS Errors**: Ensure your API endpoint allows requests from your domain
-2. **Authentication Failures**: Verify your API key is correct and has proper permissions
-3. **WebSocket Connection Issues**: Check if your API supports WebSocket connections
-4. **Environment Variables Not Loading**: Ensure variables are prefixed with `VITE_CHAT_BUBBLE_`
-
-### Debug Mode
-
-Enable debug mode by setting:
-```env
-VITE_CHAT_BUBBLE_DEMO_MODE=true
-```
-
-This will enable demo features that can help test the component without a real API connection.
+**CORS Errors**: Ensure your API endpoint allows requests from your domain
+**Authentication Failures**: Verify your API key is correct and has proper permissions
+**Environment Variables Not Loading**: Ensure variables are prefixed with `VITE_CHAT_BUBBLE_`
+**CDN Version Delays**: Sometimes the `@latest` tag on jsDelivr CDN takes time to propagate to all edge servers and may not deliver the newest version immediately. If you need the latest features or fixes, specify the exact version number instead of using `@latest`:
+   ```html
+   <!-- Instead of @latest -->
+   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@1.2.3/dist-widget/chat-bubble.css">
+   <script src="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@1.2.3/dist-widget/chat-bubble.js"></script>
+   ```
 
 ## Support
 

package/README.md

@@ -21,7 +21,7 @@ Add the Headwai Chat Bubble to the respective .html file.
     <!-- Configure via global variables -->
     <script>
         // Runtime configuration override
-        window.DEEP_CHAT_CONFIG = {
+        window.HEADWAI_CHAT_BUBBLE_CONFIG = {
             apiUrl: 'https://company.localchat.at', // required
             apiKey: 'customer-support-user-api-key', // required
             modelId: 'customer-support-model-id', // required
@@ -53,8 +53,6 @@ Add the Headwai Chat Bubble to the respective .html file.
 Set the configuration of the Headwai Chat Bubble in the `<script>` tag of the `<head>`.
 Get the desired version of the JavaScript and CSS in your `<body>`.
 
-
-
 ```html
 <!-- Latest version -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist-widget/chat-bubble.css">
@@ -240,6 +238,13 @@ When using data attributes for multiple chat bubbles, convert camelCase property
 
 ### Common Issues
 
-1. **CORS Errors**: Ensure your API endpoint allows requests from your domain
-2. **Authentication Failures**: Verify your API key is correct and has proper permissions
+**CORS Errors**: Ensure your API endpoint allows requests from your domain
+**Authentication Failures**: Verify your API key is correct and has proper permissions
+**CDN Version Delays**: Sometimes the `@latest` tag on jsDelivr CDN takes time to propagate to all edge servers and may not deliver the newest version immediately. If you need the latest features or fixes, specify the exact version number instead of using `@latest`:
+   ```html
+   <!-- Instead of @latest -->
+   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@1.2.3/dist-widget/chat-bubble.css">
+   <script src="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@1.2.3/dist-widget/chat-bubble.js"></script>
+   ```
+
 

package/dist-widget/chat-bubble.css

@@ -1 +1 @@
-main.svelte-bjand4.svelte-bjand4{font-family:sans-serif;position:relative;height:100vh;width:100vw}.ai-assistant-icon.svelte-bjand4.svelte-bjand4{position:fixed;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px #00000026;transition:all .3s ease;z-index:1000}.ai-assistant-icon.svelte-bjand4.svelte-bjand4:hover{transform:scale(1.1);box-shadow:0 6px 25px #0003}.ai-assistant-icon.svelte-bjand4.svelte-bjand4:active{transform:scale(.95)}.ai-assistant-icon.svelte-bjand4 img.svelte-bjand4{width:36px;height:36px;object-fit:contain}.chat-container.svelte-bjand4.svelte-bjand4{position:fixed;bottom:20px;right:20px;width:400px;height:600px;border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;z-index:999;background:#fff;animation:svelte-bjand4-slideIn .3s ease-out}.chat-container.svelte-bjand4 deep-chat{width:100%!important;height:100%!important;position:relative!important;display:block!important;top:0!important;left:0!important;box-sizing:border-box!important}.chat-container.svelte-bjand4 deep-chat>*{width:100%!important;height:100%!important;box-sizing:border-box!important}@keyframes svelte-bjand4-slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.chat-container.svelte-bjand4.svelte-bjand4{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;border-radius:0}.ai-assistant-icon.svelte-bjand4.svelte-bjand4{bottom:30px;right:30px}}
+html,body{margin:0;padding:0;overflow:hidden;width:100%;height:100%}main.svelte-mbs169.svelte-mbs169{font-family:sans-serif;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;padding:0;overflow:hidden}.ai-assistant-icon.svelte-mbs169.svelte-mbs169{position:fixed;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px #00000026;transition:all .3s ease;z-index:1000}.ai-assistant-icon.svelte-mbs169.svelte-mbs169:hover{transform:scale(1.1);box-shadow:0 6px 25px #0003}.ai-assistant-icon.svelte-mbs169.svelte-mbs169:active{transform:scale(.95)}.ai-assistant-icon.svelte-mbs169 img.svelte-mbs169{width:36px;height:36px;object-fit:contain}.chat-container.svelte-mbs169.svelte-mbs169{position:fixed;bottom:20px;right:20px;width:400px;height:600px;border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;z-index:999;background:#fff;animation:svelte-mbs169-slideIn .3s ease-out}.chat-container.svelte-mbs169 deep-chat{width:100%!important;height:100%!important;position:relative!important;display:block!important;top:0!important;left:0!important;box-sizing:border-box!important}.chat-container.svelte-mbs169 deep-chat>*{width:100%!important;height:100%!important;box-sizing:border-box!important}@keyframes svelte-mbs169-slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.chat-container.svelte-mbs169.svelte-mbs169{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;border-radius:0}.ai-assistant-icon.svelte-mbs169.svelte-mbs169{bottom:30px;right:30px}}