@headwai/chat-bubble 1.0.2 → 2.0.0

package/README.md

@@ -1,209 +1,19 @@
-# Chat Bubble Svelte
-
-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.
+# Headwai Chat Bubble
 
 ## Features
 
 - 🚀 Easy integration
 - 🔧 Configurable via environment variables
-- 💬 Support for various AI providers (LocalChat, OpenAI and more)
+- 💬 Connect to your LocalChat Model
+- Review user conversations in LocalChat
 - 📱 Responsive design
 - 🎨 Customizable UI components
 - 🔄 Real-time messaging with WebSocket support
 
-## Installation
-
-### Prerequisites
-
-- Node.js (version 16 or higher)
-- npm or yarn
-
-### Setup
-
-1. Clone this repository:
-```bash
-git clone <your-repo-url>
-cd chat-bubble
-```
-
-2. Install dependencies:
-```bash
-npm install
-```
-
-3. Create a `.env` file in the root directory:
-```bash
-cp .env.example .env
-```
-
-4. Configure your environment variables (see [Configuration](#configuration) section)
-
-5. Start the development server:
-```bash
-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_NAME=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
+### Easy Website Integration
 
-### Basic Integration
+Add the Headwai Chat Bubble to the respective .html file.
 
-To integrate the deep-chat component into your Svelte application:
-
-1. **Install the package** (if using as a standalone package):
-```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_NAME
-    }
-  };
-
-  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}
-/>
-```
-
-### Including Chat Bubble in Customer Websites
-
-#### Option 1: Build and Deploy (Complete Application)
-
-This option bundles everything into a ready-to-use application including all interceptors and logic.
-
-**What gets bundled:**
-- ✅ Request/Response interceptors (OpenAI compatibility)
-- ✅ Environment variable configuration
-- ✅ All chat functionality
-- ✅ UI components and styling
-
-**Build and deployment steps:**
-1. **Configure environment variables** for production:
-```bash
-# Production .env file
-VITE_CHAT_BUBBLE_API_URL=https://api.customer-domain.com/chat
-VITE_CHAT_BUBBLE_API_KEY=prod-api-key
-VITE_CHAT_BUBBLE_MODEL_NAME=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>
@@ -212,11 +22,19 @@ npm publish
     <!-- Configure via global variables -->
     <script>
         // Runtime configuration override
-        window.DEEP_CHAT_CONFIG = {
-            apiUrl: 'https://customer-api.com/chat',
-            apiKey: 'customer-api-key',
-            modelName: 'gpt-4',
-            connectionType: 'websocket'
+        window.HEADWAI_CHAT_BUBBLE_CONFIG = {
+            apiUrl: 'https://company.localchat.at', // required
+            apiKey: 'customer-support-user-api-key', // required
+            modelId: 'customer-support-model-id', // required
+            maxMessages: 0, // optional - 0 means unlimited
+            placeholderText: 'Ask your question here!', // optional - default: 'Enter your questions here'
+            faviconPath: 'https://cdn.company.at/icons/favicon.svg', // optional - default: '/icons/favicon.svg'
+            initialMessage: 'Hey! My name is Supporty, how can I help you?', // optional - default: 'Hey, how can I help you?'
+            userMessageBackgroundColor: '#007bff', // optional - default: '#007bff'
+            aiMessageBackgroundColor: '#f1f3f4', // optional - default: '#f1f3f4'
+            userMessageTextColor: '#000000', // optional - default: '#000000'
+            aiMessageTextColor: '#000000', // optional - default: '#000000'
+            faviconBackgroundColor: '#667eea' // optional - default: '#667eea'
         };
     </script>
 </head>
@@ -233,274 +51,191 @@ npm publish
 </html>
 ```
 
-**Alternative: Multiple chat bubbles with data attributes:**
+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">
+<script src="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist-widget/chat-bubble.js"></script>
+
+<!-- Specific version -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@1.0.0/dist-widget/chat-bubble.css">
+<script src="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@1.0.0/dist-widget/chat-bubble.js"></script>
+```
+
+Place the Headwai Chat Bubble into the `<body>` tag. It will apear on the right corner of your website.
+
+
+#### Multiple Headwai Chat Bubbles
+
+For multiple instances use data attributes of the `<div>` tag for configuration instead.
+
 ```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>
+     data-chat-bubble-api-url="https://company.localchat.at"
+     data-chat-bubble-api-key="customer-support-user-api-key"
+     data-chat-bubble-model-name="customer-support-model-id"
+     data-chat-bubble-max-messages="0"
+     data-chat-bubble-placeholder-text="Ask your question here!"
+     data-chat-bubble-favicon-path="https://cdn.company.at/icons/favicon.svg"
+     data-chat-bubble-initial-message="Hey! My name is Supporty, how can I help you?"
+     data-chat-bubble-user-message-background-color="#007bff"
+     data-chat-bubble-ai-message-background-color="#f1f3f4"
+     data-chat-bubble-user-message-text-color="#000000"
+     data-chat-bubble-ai-message-text-color="#000000"
+     data-chat-bubble-assistant-icon-color="#667eea">
+     </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>
+     data-chat-bubble-api-url="https://company.localchat.at"
+     data-chat-bubble-api-key="customer-support-user-api-key"
+     data-chat-bubble-model-name="FAQ-model-id"
+     data-chat-bubble-max-messages="10"
+     data-chat-bubble-placeholder-text="Ask about our FAQ..."
+     data-chat-bubble-favicon-path="https://cdn.company.at/icons/faq-icon.svg"
+     data-chat-bubble-initial-message="Hello! I can help you with frequently asked questions."
+     data-chat-bubble-user-message-background-color="#28a745"
+     data-chat-bubble-ai-message-background-color="#e9ecef"
+     data-chat-bubble-user-message-text-color="#ffffff"
+     data-chat-bubble-ai-message-text-color="#495057"
+     data-chat-bubble-assistant-icon-color="#28a745">
+     </div>
 
+<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>
 ```
 
-**What customers get:**
-- ✅ Complete chat interface
-- ✅ All interceptors included
-- ✅ OpenAI API compatibility built-in
-- ✅ Just needs API configuration
-- ✅ Auto-initialization on page load
+## Configuration
 
-#### Option 3: NPM Package Integration (Developer Integration)
+The Headwai Chat Bubble can be configured using either the global `window.HEADWAI_CHAT_BUBBLE_CONFIG` object or data attributes on individual chat bubble elements. Below are all available configuration options:
 
-For developers who need full control and customization.
+### Required Configuration
 
-**Build and publish steps:**
-1. **Build the library**:
-```bash
-npm run build:lib
+#### `apiUrl`
+**Type:** `string` | **Required:** ✅  
+The base URL of your LocalChat API endpoint where the chat bubble will send messages. This is the same URL you access your LocalCaht instance in the Webbrowser.
+```javascript
+apiUrl: 'https://company.localchat.at'
 ```
 
-2. **Publish to NPM**:
-```bash
-npm publish
+#### `apiKey` 
+**Type:** `string` | **Required:** ✅  
+The API Key of a dedicated Headwai Chat Bubble user in LocalChat.
+```javascript
+apiKey: 'customer-support-user-api-key'
 ```
 
-**Customer installation:**
-```bash
-# Install in customer's project
-npm install @headwai/chat-bubble
-```
+**How to get your API Key:**
 
-**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}
-/>
-```
+1. **Access Settings**: Login to LocalChat with the dedicated Headwai Chat Bubble user (All conversations will be stored at this user's chats list) and click on the user menu, then select `Settings`.
 
-**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>
-```
+   <img src="docs/images/settings.png" alt="LocalChat User Menu" width="50%" />
 
-**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
-
-## Publishing to NPM and jsDelivr Access
-
-### Publishing Steps
-
-1. **Build both library and widget**:
-```bash
-npm run build
-```
+2. **Navigate to Account**: In the Settings sidebar, click on `Account` to access your account settings.
 
-2. **Login to NPM** (if not already logged in):
-```bash
-npm login
-```
+   <img src="docs/images/api-keys.png" alt="LocalChat Settings Account" width="50%" />
 
-3. **Publish the package**:
-```bash
-npm publish
-```
+3. **Get your API credentials**: In the API keys section, you have two options:
+   - **JWT Token**: Copy the existing JWT Token (expires after 7 days)
+   - **API Key**: Generate an API Key via `Generate API Key` button. Click the copy button next to the API Key field, or click the refresh button to generate a new permanent API Key
 
-### jsDelivr CDN Access
+**⚠️ Security Note:** When using permanent API Keys, ensure they are stored securely (e.g., environment variables, secure configuration) and never expose them directly in client-side code. If using JWT Tokens, implement an automatic refresh mechanism since they expire after 7 days - consider using a server-side proxy to handle token renewal and keep tokens secure.
 
-Once published to NPM, your package is automatically available on jsDelivr:
 
-**For Widget/Script Embed (Options 1 & 2):**
-```html
-<!-- Latest version -->
-<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>
-
-<!-- Specific version -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@1.0.0/dist-widget/chat-bubble.css">
-<script src="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@1.0.0/dist-widget/chat-bubble.js"></script>
+#### `modelId`
+**Type:** `string` | **Required:** ✅  
+The identifier of the AI model to use for generating responses. This should match a model configured in your LocalChat instance.
+```javascript
+modelId: 'customer-support-model-id'
 ```
 
-**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>
+1. **Navigate to Model**: Login to LocalChat with the dedicated Headwai Chat Bubble user (Or any other user that is allowed to see the desired model) and click on the `Workspace` menu, then select `Models`. Search for the name of the desired model (Or create one). Click onto the edit-`Pen`.
 
-<!-- UMD (Universal Module Definition) -->
-<script src="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist/index.umd.js"></script>
-```
+  <img src="docs/images/model-edit.png" alt="LocalChat User Menu" width="50%" />
+
+1. **Copy Model Id**: Now the model is displayed with its `name` and right underneath the `model-id`. Copy the `model-id`. 
+
+  <img src="docs/images/model-id.png" alt="LocalChat User Menu" width="50%" />
 
-### File Structure After Build
+### Optional Configuration
 
+#### `maxMessages`
+**Type:** `number` | **Default:** `0` (unlimited)  
+Limits the number of messages stored in the conversation history in one singel conversation. Set to `0` for unlimited messages, or specify a positive number to limit history.
+```javascript
+maxMessages: 10 // Keep and use only last 10 messages
 ```
-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
+
+#### `placeholderText`
+**Type:** `string` | **Default:** `'Type your message...'`  
+The placeholder text displayed in the message input field when it's empty.
+```javascript
+placeholderText: 'Ask your question here!'
 ```
 
-## Environment Variables Reference
+#### `faviconPath`
+**Type:** `string` | **Default:** `'/icons/favicon.svg'`  
+Path or URL to the icon displayed on the chat bubble toggle button. Can be a relative path or absolute URL.
+```javascript
+faviconPath: 'https://cdn.company.at/icons/favicon.svg'
+```
 
-| 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_NAME` | 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` | ❌ |
+#### `initialMessage`
+**Type:** `string` | **Default:** `undefined`  
+An optional welcome message that appears when the chat is first opened. If not set, no initial message is displayed.
+```javascript
+initialMessage: 'Hey! My name is Supporty, how can I help you?'
+```
 
-## API Compatibility
+### Styling Configuration
 
-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.
+#### `userMessageBackgroundColor`
+**Type:** `string` | **Default:** `'#007bff'`  
+Background color for messages sent by the user. Accepts any valid CSS color value.
+```javascript
+userMessageBackgroundColor: '#007bff'
+```
 
-### Supported Message Flow
+#### `aiMessageBackgroundColor`
+**Type:** `string` | **Default:** `'#f1f3f4'`  
+Background color for messages sent by the AI assistant. Accepts any valid CSS color value.
+```javascript
+aiMessageBackgroundColor: '#f1f3f4'
+```
 
-1. **User Input** → Deep Chat format
-2. **Request Interceptor** → Transforms to OpenAI format
-3. **API Call** → Your configured endpoint
-4. **Response Interceptor** → Transforms back to Deep Chat format
-5. **Display** → Rendered in chat interface
+#### `userMessageTextColor`
+**Type:** `string` | **Default:** `'#000000'`  
+Text color for user messages. Accepts any valid CSS color value.
+```javascript
+userMessageTextColor: '#ffffff'
+```
 
-## Development
+#### `aiMessageTextColor`
+**Type:** `string` | **Default:** `'#000000'`  
+Text color for AI assistant messages. Accepts any valid CSS color value.
+```javascript
+aiMessageTextColor: '#333333'
+```
 
-### Scripts
+#### `faviconBackgroundColor`
+**Type:** `string` | **Default:** `'#667eea'`  
+Base color used for the assistant icon gradient. This color influences the overall appearance of the AI assistant's avatar.
+```javascript
+faviconBackgroundColor: '#667eea'
+```
 
-- `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 preview` - Preview production build
+### Data Attribute Format
 
-### Project Structure
+When using data attributes for multiple chat bubbles, convert camelCase property names to kebab-case with the `data-chat-bubble-` prefix:
 
-```
-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
-```
+- `apiUrl` → `data-chat-bubble-api-url`
+- `userMessageBackgroundColor` → `data-chat-bubble-user-message-background-color`
+- `initialMessage` → `data-chat-bubble-initial-message`
 
 ## Troubleshooting
 
@@ -508,21 +243,4 @@ chat-bubble/
 
 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.
-
-## Support
 
-For issues and questions:
-- Create an issue in this repository
-- Check the [deep-chat documentation](https://deepchat.dev/)
-- Review the [API compatibility guide](https://deepchat.dev/docs/connect)