npm - sidenetai-sdk - Versions diffs - 1.0.0 - Mend

sidenetai-sdk 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +1036 -0
package/dist/sidenetai-sdk.css +1 -0
package/dist/sidenetai-sdk.es.js +37234 -0
package/dist/sidenetai-sdk.umd.js +307 -0
package/dist/vite.svg +1 -0
package/package.json +83 -0

package/README.md ADDED Viewed

@@ -0,0 +1,1036 @@
+# SideNetAI SDK
+A lightweight, easy-to-use sidebar SDK that can be loaded via script tag or npm package. The SideNetAI SDK provides a powerful, customizable sidebar interface for AI chat interactions that seamlessly integrates into any web application.
+## Table of Contents
+- [Installation](#installation)
+- [Version Management & Updates](#version-management--updates)
+- [Using with Non-React Apps](#using-with-non-react-apps)
+- [Quick Start](#quick-start)
+- [API Reference](#api-reference)
+- [Configuration Options](#configuration-options)
+- [Usage Examples](#usage-examples)
+- [React Component Usage](#react-component-usage)
+- [Customization](#customization)
+- [Package Contents](#package-contents)
+- [Development](#development)
+## Installation
+> **Important Note About React:** The SideNetAI SDK uses React internally to render the sidebar UI. However, **your application does not need to use React** - you just need to ensure React and ReactDOM are loaded (either via CDN or npm). The SDK will work with any framework (Vue, Angular, Svelte, vanilla JavaScript, etc.) as long as React is available on the page.
+### Option 1: NPM Package (Recommended)
+Install the package using npm, yarn, or pnpm:
+```bash
+# Using npm
+npm install sidenetai-sdk
+# Using yarn
+yarn add sidenetai-sdk
+# Using pnpm
+pnpm add sidenetai-sdk
+```
+**Note:** React and ReactDOM are peer dependencies. Make sure you have React 18 or 19 installed:
+```bash
+npm install react@^18 react-dom@^18
+# or
+npm install react@^19 react-dom@^19
+```
+**For Non-React Apps:** If your app doesn't use React, you still need to install React as a dependency (it won't interfere with your app). The SDK uses React internally but doesn't require your app to use React.
+### Option 2: CDN (ES Modules)
+Load the SDK directly from a CDN using ES modules:
+> **Note:** Replace `@latest` with a specific version (e.g., `@1.0.14`) for production use. See [Version Management & Updates](#version-management--updates) for details.
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Load React and ReactDOM first (required peer dependencies) -->
+  <script crossorigin src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
+  <!-- Load the SDK CSS (use specific version for production) -->
+  <link rel="stylesheet" href="https://unpkg.com/sidenetai-sdk@1.0.14/dist/sidenetai-sdk.css">
+</head>
+<body>
+  <h1>My Website</h1>
+  <!-- Load and initialize the SDK -->
+  <script type="module">
+    import { initSidenet, toggleSidenet } from 'https://unpkg.com/sidenetai-sdk@1.0.14/dist/sidenetai-sdk.es.js';
+    // Initialize the sidebar
+    initSidenet({
+      position: 'right',
+      width: '45vw',
+      defaultOpen: false
+    });
+    // Make toggleSidenet available globally (optional)
+    window.toggleSidenet = toggleSidenet;
+  </script>
+  <!-- Add a button to toggle the sidebar -->
+  <button onclick="toggleSidenet()">Toggle Sidebar</button>
+</body>
+</html>
+```
+### Option 3: UMD Bundle (Script Tag)
+For browsers that don't support ES modules, use the UMD bundle:
+> **Note:** Replace `@latest` with a specific version (e.g., `@1.0.14`) for production use. See [Version Management & Updates](#version-management--updates) for details.
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Load React and ReactDOM -->
+  <script crossorigin src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
+  <!-- Load the SDK CSS (use specific version for production) -->
+  <link rel="stylesheet" href="https://unpkg.com/sidenetai-sdk@1.0.14/dist/sidenetai-sdk.css">
+</head>
+<body>
+  <h1>My Website</h1>
+  <!-- Load the SDK UMD bundle (use specific version for production) -->
+  <script src="https://unpkg.com/sidenetai-sdk@1.0.14/dist/sidenetai-sdk.umd.js"></script>
+  <script>
+    // Access the SDK from the global SideNetAI object
+    const { initSidenet, toggleSidenet } = SideNetAI;
+    // Initialize the sidebar
+    initSidenet({
+      position: 'right',
+      width: '45vw',
+      defaultOpen: false
+    });
+    // Make toggleSidenet available globally
+    window.toggleSidenet = toggleSidenet;
+  </script>
+  <button onclick="toggleSidenet()">Toggle Sidebar</button>
+</body>
+</html>
+```
+## Version Management & Updates
+When you publish a new version of the SDK, host applications need to update to receive the changes. Here's how version management works:
+### Semantic Versioning
+The SDK follows [Semantic Versioning](https://semver.org/) (semver):
+- **Major version** (e.g., `1.0.0` → `2.0.0`): Breaking changes
+- **Minor version** (e.g., `1.0.0` → `1.1.0`): New features, backward compatible
+- **Patch version** (e.g., `1.0.0` → `1.0.1`): Bug fixes, backward compatible
+### Updating with NPM
+#### Automatic Updates (Recommended for Development)
+Use version ranges in your `package.json` to automatically receive compatible updates:
+```json
+{
+  "dependencies": {
+    "sidenetai-sdk": "^1.0.14"  // Receives all 1.x.x updates (patches and minor)
+  }
+}
+```
+**Version Range Options:**
+- `^1.0.14` - Receives patches and minor updates (1.0.14 → 1.1.0, but not 2.0.0)
+- `~1.0.14` - Receives only patch updates (1.0.14 → 1.0.15, but not 1.1.0)
+- `1.0.14` - Fixed version (no automatic updates)
+**To update manually:**
+```bash
+# Update to latest compatible version
+npm update sidenetai-sdk
+# Or install a specific version
+npm install sidenetai-sdk@1.1.0
+# Check for outdated packages
+npm outdated sidenetai-sdk
+```
+#### Production Best Practices
+For production applications, use **fixed versions** to prevent unexpected updates:
+```json
+{
+  "dependencies": {
+    "sidenetai-sdk": "1.0.14"  // Fixed version - no automatic updates
+  }
+}
+```
+Then manually test and update when new versions are released:
+```bash
+# Check what's available
+npm view sidenetai-sdk versions
+# Install a specific new version
+npm install sidenetai-sdk@1.1.0
+# Test your application thoroughly
+# Then commit the updated package.json
+```
+### Updating with CDN
+#### Using `@latest` (Automatic Updates)
+When using `@latest`, your application will **automatically receive new versions** as they're published:
+```html
+<!-- Automatically updates to newest version -->
+<script src="https://unpkg.com/sidenetai-sdk@latest/dist/sidenetai-sdk.umd.js"></script>
+```
+**⚠️ Warning:** Using `@latest` in production can cause unexpected breaking changes. Use with caution.
+#### Using Specific Versions (Recommended for Production)
+Pin to a specific version for production stability:
+```html
+<!-- Fixed version - won't update automatically -->
+<script src="https://unpkg.com/sidenetai-sdk@1.0.14/dist/sidenetai-sdk.umd.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/sidenetai-sdk@1.0.14/dist/sidenetai-sdk.css">
+```
+**To update manually:**
+1. Check the [npm registry](https://www.npmjs.com/package/sidenetai-sdk) for new versions
+2. Update the version number in your HTML:
+   ```html
+   <!-- Update from 1.0.14 to 1.1.0 -->
+   <script src="https://unpkg.com/sidenetai-sdk@1.1.0/dist/sidenetai-sdk.umd.js"></script>
+   ```
+3. Test your application thoroughly
+4. Deploy the updated version
+### Version Strategy Recommendations
+| Environment | Strategy | Version Format |
+|------------|----------|----------------|
+| **Development** | Auto-update patches/minor | `^1.0.14` or `@latest` |
+| **Staging** | Manual updates, test first | `1.0.14` (fixed) |
+| **Production** | Fixed version, manual updates | `1.0.14` (fixed) |
+### Checking for Updates
+**NPM Users:**
+```bash
+# Check current version
+npm list sidenetai-sdk
+# Check for updates
+npm outdated sidenetai-sdk
+# View all available versions
+npm view sidenetai-sdk versions
+# View latest version
+npm view sidenetai-sdk version
+```
+**CDN Users:**
+- Visit https://www.npmjs.com/package/sidenetai-sdk to see the latest version
+- Check the [changelog](https://github.com/your-repo/sidenetai-sdk/releases) (if available) for breaking changes
+### Migration Guide
+When updating to a new major version (e.g., `1.x.x` → `2.x.x`), check for:
+- Breaking changes in the API
+- Configuration option changes
+- Required dependency updates
+- Deprecated features
+Always test in a development environment before updating production.
+### Example: Update Workflow
+**Scenario:** New version `1.1.0` is published
+**For NPM users with version ranges:**
+```bash
+# 1. Check what will be updated
+npm outdated
+# 2. Update (if using ^ version range, this happens automatically)
+npm update sidenetai-sdk
+# 3. Test your application
+npm test
+# 4. If everything works, commit the updated package.json
+git add package.json package-lock.json
+git commit -m "Update sidenetai-sdk to 1.1.0"
+```
+**For CDN users:**
+```html
+<!-- 1. Update the version number in your HTML -->
+<script src="https://unpkg.com/sidenetai-sdk@1.1.0/dist/sidenetai-sdk.umd.js"></script>
+<!-- 2. Test thoroughly -->
+<!-- 3. Deploy -->
+```
+## Using with Non-React Apps
+The SideNetAI SDK works perfectly with applications that don't use React. Here's how:
+### For Vanilla HTML/JavaScript Apps
+If your app is just plain HTML and JavaScript, load React via CDN (as shown in the CDN installation options above). React will only be used by the SDK internally - your app code can continue using vanilla JavaScript.
+### For Vue.js Apps
+```javascript
+// In your Vue app (e.g., main.js or a component)
+import { initSidenet, toggleSidenet } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// Initialize when your Vue app mounts
+export default {
+  mounted() {
+    initSidenet({
+      position: 'right',
+      width: '45vw',
+      defaultOpen: false
+    });
+  },
+  methods: {
+    toggleSidenet() {
+      toggleSidenet();
+    }
+  }
+}
+```
+Make sure React is installed:
+```bash
+npm install react@^18 react-dom@^18
+```
+### For Angular Apps
+```typescript
+// In your Angular component (e.g., app.component.ts)
+import { Component, OnInit } from '@angular/core';
+import { initSidenet, toggleSidenet } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent implements OnInit {
+  ngOnInit() {
+    initSidenet({
+      position: 'right',
+      width: '45vw',
+      defaultOpen: false
+    });
+  }
+  toggleSidenet() {
+    toggleSidenet();
+  }
+}
+```
+Make sure React is installed:
+```bash
+npm install react@^18 react-dom@^18
+```
+### For Svelte Apps
+```javascript
+// In your Svelte component (e.g., App.svelte)
+<script>
+  import { onMount } from 'svelte';
+  import { initSidenet, toggleSidenet } from 'sidenetai-sdk';
+  import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+  onMount(() => {
+    initSidenet({
+      position: 'right',
+      width: '45vw',
+      defaultOpen: false
+    });
+  });
+  function handleToggle() {
+    toggleSidenet();
+  }
+</script>
+<button on:click={handleToggle}>Toggle Sidebar</button>
+```
+Make sure React is installed:
+```bash
+npm install react@^18 react-dom@^18
+```
+### Key Points
+- **React is only used internally** by the SDK - your app can use any framework or no framework
+- **No conflicts** - React loaded by the SDK won't interfere with your app's framework
+- **CDN option** - For vanilla HTML/JS apps, you can load React via CDN (no npm needed)
+- **NPM option** - For apps using build tools, install React as a dependency
+## Quick Start
+### Basic Usage with NPM
+```javascript
+// Import the SDK functions and styles
+import { initSidenet, toggleSidenet, destroySidenet } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// Initialize the sidebar with default settings
+initSidenet();
+// Or with custom configuration
+initSidenet({
+  position: 'right',      // 'left' or 'right'
+  width: '45vw',          // Width in px or vw (e.g., '500px' or '45vw')
+  userId: 'user-123',     // Optional: User identifier
+  copilotId: 'project-456', // Optional: Project identifier
+  defaultOpen: false      // Whether sidebar starts open (default: true)
+});
+// Toggle sidebar visibility
+toggleSidenet();
+// Clean up when done
+destroySidenet();
+```
+## API Reference
+### `initSidenet(options?)`
+Initializes the sidebar on the page. This function creates and mounts the sidebar component. It should be called once when your application loads.
+**Parameters:**
+- `options` (optional): Configuration object with the following properties:
+  - `position` (optional): `'left'` or `'right'` - Sidebar position on the page. Default: `'right'`
+  - `width` (optional): `string` - Sidebar width with unit (e.g., `'500px'` or `'45vw'`). Default: `'45vw'`
+  - `userId` (optional): `string` - User identifier for the chat session
+  - `copilotId` (optional): `string` - Project identifier for the chat session
+  - `defaultOpen` (optional): `boolean` - Whether the sidebar should be open by default. Default: `true`
+**Returns:** `void`
+**Example:**
+```javascript
+import { initSidenet } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// Initialize with default settings (right side, 45vw width, open by default)
+initSidenet();
+// Initialize with custom settings
+initSidenet({
+  position: 'left',
+  width: '400px',
+  userId: 'user-123',
+  copilotId: 'project-456',
+  defaultOpen: false
+});
+```
+**Note:** Calling `initSidenet()` multiple times will result in a warning and will not reinitialize the sidebar. Use `destroySidenet()` first if you need to reinitialize.
+---
+### `toggleSidenet()`
+Toggles the sidebar visibility (show/hide). If the sidebar is currently visible, it will be hidden, and vice versa. The function automatically adjusts the page body margins to accommodate the sidebar when visible.
+**Parameters:** None
+**Returns:** `void`
+**Example:**
+```javascript
+import { toggleSidenet } from 'sidenetai-sdk';
+// Toggle sidebar visibility
+toggleSidenet();
+// You can also attach it to a button
+document.getElementById('sidebar-toggle-btn').addEventListener('click', toggleSidenet);
+```
+---
+### `destroySidenet()`
+Completely removes the sidebar from the page and cleans up all associated resources. This function unmounts the React component, removes the container element, and restores the original body styles.
+**Parameters:** None
+**Returns:** `void`
+**Example:**
+```javascript
+import { destroySidenet } from 'sidenetai-sdk';
+// Remove the sidebar when navigating away or closing the app
+destroySidenet();
+```
+---
+### `updateSidenetConfig(options)`
+Updates the sidebar configuration dynamically without reinitializing. This is useful when you need to change the sidebar settings after initialization (e.g., changing width, position, or user/project IDs).
+**Parameters:**
+- `options`: Configuration object with the following properties:
+  - `width` (optional): `string` - New width with unit (e.g., `'600px'` or `'50vw'`)
+  - `position` (optional): `'left'` or `'right'` - New sidebar position
+  - `userId` (optional): `string` - Updated user identifier
+  - `copilotId` (optional): `string` - Updated project identifier
+  - `defaultOpen` (optional): `boolean` - Updated default open state
+**Returns:** `void`
+**Example:**
+```javascript
+import { initSidenet, updateSidenetConfig } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// Initialize the sidebar
+initSidenet({
+  width: '400px',
+  position: 'right'
+});
+// Later, update the width dynamically
+updateSidenetConfig({
+  width: '600px'
+});
+// Update position
+updateSidenetConfig({
+  position: 'left'
+});
+// Update user/project IDs
+updateSidenetConfig({
+  userId: 'new-user-123',
+  copilotId: 'new-project-456'
+});
+```
+**Note:** The sidebar must be initialized with `initSidenet()` before calling this function.
+---
+### `refreshSidenetStyles()`
+Refreshes the sidebar styles from the database without reinitializing. This function is useful when you've updated styling configuration in your backend and want to apply those changes to an already-initialized sidebar.
+**Parameters:** None
+**Returns:** `void`
+**Example:**
+```javascript
+import { initSidenet, refreshSidenetStyles } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// Initialize the sidebar
+initSidenet();
+// Later, when database styles are updated, refresh them
+refreshSidenetStyles();
+```
+**Note:** The sidebar must be initialized with `initSidenet()` before calling this function.
+---
+### `refreshSidenetScrollbar()`
+Refreshes the scrollbar positioning calculation. Call this function if the host page's scrollbar properties change (e.g., scrollbar visibility changes) to ensure the sidebar is positioned correctly.
+**Parameters:** None
+**Returns:** `void`
+**Example:**
+```javascript
+import { initSidenet, refreshSidenetScrollbar } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// Initialize the sidebar
+initSidenet();
+// Later, if the page scrollbar changes, refresh detection
+refreshSidenetScrollbar();
+```
+**Note:** The sidebar must be initialized with `initSidenet()` before calling this function.
+---
+### `Sidebar` Component (React)
+For advanced usage in React applications, you can import and use the `Sidebar` component directly. This gives you more control over the component lifecycle and integration with your React app.
+**Props:**
+- `config`: Configuration object
+  - `position` (optional): `'left'` or `'right'` - Default: `'right'`
+  - `width` (optional): `string` - Width with unit (e.g., `'500px'` or `'45vw'`)
+  - `userId` (optional): `string` - User identifier
+  - `copilotId` (optional): `string` - Project identifier
+  - `defaultOpen` (optional): `boolean` - Whether sidebar starts open
+- `onWidthChange` (optional): `(newWidth: string) => void` - Callback when width changes
+**Example:**
+```javascript
+import React from 'react';
+import { Sidebar } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+function MyApp() {
+  const handleWidthChange = (newWidth) => {
+    console.log('Sidebar width changed to:', newWidth);
+  };
+  return (
+    <div>
+      <h1>My Application</h1>
+      <Sidebar
+        config={{
+          position: 'right',
+          width: '45vw',
+          userId: 'user-123',
+          copilotId: 'project-456',
+          defaultOpen: false
+        }}
+        onWidthChange={handleWidthChange}
+      />
+    </div>
+  );
+}
+export default MyApp;
+```
+---
+## Configuration Options
+The `initSidenet()` function accepts a configuration object with the following options:
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `position` | `'left' \| 'right'` | `'right'` | Sidebar position on the page |
+| `width` | `string` | `'45vw'` | Sidebar width with unit (px or vw). Examples: `'500px'`, `'45vw'`, `'50%'` |
+| `userId` | `string` | `undefined` | Optional user identifier for chat sessions |
+| `copilotId` | `string` | `undefined` | Optional project identifier for chat sessions |
+| `defaultOpen` | `boolean` | `true` | Whether the sidebar should be open when initialized |
+### Width Units
+The `width` option accepts values with the following units:
+- **px**: Fixed pixel width (e.g., `'500px'`)
+- **vw**: Viewport width percentage (e.g., `'45vw'` means 45% of viewport width)
+**Examples:**
+```javascript
+// Fixed width in pixels
+initSidenet({ width: '500px' });
+// Responsive width based on viewport
+initSidenet({ width: '45vw' });
+// Default width (45vw)
+initSidenet();
+```
+## Usage Examples
+### Example 1: Basic Integration
+```javascript
+import { initSidenet, toggleSidenet } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// Initialize sidebar on page load
+initSidenet({
+  position: 'right',
+  defaultOpen: false
+});
+// Add a toggle button
+document.getElementById('chat-button').addEventListener('click', toggleSidenet);
+```
+### Example 2: Dynamic Configuration Updates
+```javascript
+import { initSidenet, updateSidenetConfig } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// Initialize with default settings
+initSidenet();
+// Update configuration based on user preferences
+function updateUserPreferences(userId, copilotId) {
+  updateSidenetConfig({
+    userId: userId,
+    copilotId: copilotId,
+    width: '50vw'
+  });
+}
+// Update based on screen size
+function handleResize() {
+  const width = window.innerWidth < 768 ? '100vw' : '45vw';
+  updateSidenetConfig({ width });
+}
+window.addEventListener('resize', handleResize);
+```
+### Example 3: React Integration
+```javascript
+import React, { useEffect } from 'react';
+import { initSidenet, destroySidenet, toggleSidenet } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+function App() {
+  useEffect(() => {
+    // Initialize sidebar when component mounts
+    initSidenet({
+      position: 'right',
+      width: '45vw',
+      userId: 'user-123',
+      copilotId: 'project-456',
+      defaultOpen: false
+    });
+    // Cleanup when component unmounts
+    return () => {
+      destroySidenet();
+    };
+  }, []);
+  return (
+    <div>
+      <h1>My Application</h1>
+      <button onClick={toggleSidenet}>Toggle Chat</button>
+    </div>
+  );
+}
+export default App;
+```
+### Example 4: Vanilla JavaScript with Event Handling
+```javascript
+import { initSidenet, toggleSidenet, updateSidenetConfig } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// Initialize sidebar
+initSidenet({
+  position: 'right',
+  width: '45vw',
+  defaultOpen: false
+});
+// Make functions globally available
+window.toggleSidenet = toggleSidenet;
+// Handle keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+  // Toggle sidebar with Ctrl/Cmd + B
+  if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
+    e.preventDefault();
+    toggleSidenet();
+  }
+});
+// Update sidebar when user logs in
+function onUserLogin(userId, copilotId) {
+  updateSidenetConfig({
+    userId: userId,
+    copilotId: copilotId
+  });
+}
+```
+### Example 5: Responsive Width Changes
+```javascript
+import { initSidenet, updateSidenetConfig } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// Initialize with responsive width
+let currentWidth = window.innerWidth < 768 ? '100vw' : '45vw';
+initSidenet({
+  width: currentWidth,
+  defaultOpen: false
+});
+// Update width on window resize
+let resizeTimeout;
+window.addEventListener('resize', () => {
+  clearTimeout(resizeTimeout);
+  resizeTimeout = setTimeout(() => {
+    const newWidth = window.innerWidth < 768 ? '100vw' : '45vw';
+    updateSidenetConfig({ width: newWidth });
+  }, 250); // Debounce resize events
+});
+```
+## React Component Usage
+For React applications where you want more control over the component lifecycle, you can import and use the `Sidebar` component directly:
+```javascript
+import React, { useState } from 'react';
+import { Sidebar } from 'sidenetai-sdk';
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+function App() {
+  const [sidebarConfig, setSidebarConfig] = useState({
+    position: 'right' as const,
+    width: '45vw',
+    userId: 'user-123',
+    copilotId: 'project-456',
+    defaultOpen: false
+  });
+  const handleWidthChange = (newWidth: string) => {
+    console.log('Sidebar width changed:', newWidth);
+    setSidebarConfig(prev => ({ ...prev, width: newWidth }));
+  };
+  return (
+    <div className="app">
+      <header>
+        <h1>My Application</h1>
+      </header>
+      <main>
+        {/* Your main content */}
+      </main>
+      <Sidebar
+        config={sidebarConfig}
+        onWidthChange={handleWidthChange}
+      />
+    </div>
+  );
+}
+export default App;
+```
+## Customization
+### CSS Import
+The SDK requires its CSS file to be imported. Make sure to include it in your application:
+```javascript
+// ES Modules / NPM
+import 'sidenetai-sdk/dist/sidenetai-sdk.css';
+// CDN
+<link rel="stylesheet" href="https://unpkg.com/sidenetai-sdk@latest/dist/sidenetai-sdk.css">
+```
+### CSS Variables
+The sidebar uses CSS custom properties (variables) that can be overridden for customization. The container ID is fixed as `sidebarai-container`.
+**Available CSS Variables:**
+- `--sidebar-bg-color`: Background color of the sidebar
+- `--sidebar-text-color`: Text color in the sidebar
+- `--sidebar-border-color`: Border color
+- `--sidebar-border-radius`: Border radius
+- `--sidebar-font-size`: Font size
+- `--sidebar-font-family`: Font family
+- `--sidebar-box-shadow`: Box shadow
+- `--sidebar-button-bg`: Button background color
+- `--sidebar-button-hover`: Button hover color
+**Example Customization:**
+```css
+/* Override sidebar styles */
+#sidebarai-container {
+  --sidebar-bg-color: #1a1a1a;
+  --sidebar-text-color: #ffffff;
+  --sidebar-border-radius: 12px;
+  --sidebar-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+/* Or override directly */
+#sidebarai-container {
+  width: 500px !important;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border-radius: 12px !important;
+}
+```
+### Container ID
+The sidebar container uses a fixed ID: `sidebarai-container`. This ID cannot be changed, but you can style it using CSS:
+```css
+#sidebarai-container {
+  /* Your custom styles */
+}
+```
+## Package Contents
+The package includes the following files:
+- **ES Module**: `dist/sidenetai-sdk.es.js` - For modern bundlers and ES module imports
+- **UMD Bundle**: `dist/sidenetai-sdk.umd.js` - For script tag usage and older bundlers
+- **CSS Styles**: `dist/sidenetai-sdk.css` - Required stylesheet
+- **TypeScript Types**: Included automatically (TypeScript support)
+## Development
+### Prerequisites
+- Node.js 18+
+- pnpm (recommended) or npm/yarn
+### Setup
+```bash
+# Install dependencies
+pnpm install
+# Start development server
+pnpm dev
+# Build for production
+pnpm build
+# Preview production build
+pnpm preview
+# Run linter
+pnpm lint
+```
+### Project Structure
+```
+sidenetai-sdk/
+├── src/
+│   ├── components/     # React components
+│   ├── api/           # API integration
+│   ├── lib/           # Utilities and types
+│   ├── hooks/         # React hooks
+│   ├── sdk.tsx        # Core SDK implementation
+│   └── sdk-entry.ts   # SDK entry point
+├── dist/              # Built files (generated)
+└── package.json
+```
+## TypeScript Support
+The package includes full TypeScript definitions. Import types as needed:
+```typescript
+import { initSidenet, type SidenetOptions } from 'sidenetai-sdk';
+const options: SidenetOptions = {
+  position: 'right',
+  width: '45vw',
+  userId: 'user-123',
+  copilotId: 'project-456',
+  defaultOpen: false
+};
+initSidenet(options);
+```
+## Browser Support
+The SDK supports all modern browsers that support:
+- ES6+ JavaScript features
+- React 18 or 19
+- CSS Custom Properties (CSS Variables)
+**Minimum Browser Versions:**
+- Chrome/Edge: 90+
+- Firefox: 88+
+- Safari: 14+
+## Troubleshooting
+### Sidebar not appearing
+1. Make sure you've imported the CSS file: `import 'sidenetai-sdk/dist/sidenetai-sdk.css'`
+2. Check that React and ReactDOM are loaded before initializing the SDK
+3. Verify that `initSidenet()` is being called after the DOM is ready
+### Styles not applying
+1. Ensure the CSS file is imported
+2. Check for CSS conflicts with your existing styles
+3. Verify that CSS custom properties are supported in your target browsers
+### Multiple initialization warnings
+If you see warnings about the sidebar being already initialized:
+- Call `destroySidenet()` before reinitializing
+- Or restructure your code to only call `initSidenet()` once
+### React not found errors
+If you're using a non-React app and see errors about React not being found:
+- **For NPM projects:** Install React as a dependency: `npm install react@^18 react-dom@^18`
+- **For CDN usage:** Ensure React and ReactDOM scripts are loaded before the SDK
+- **For build tools:** Make sure React is included in your bundle (it won't conflict with other frameworks)
+- React is only used internally by the SDK - your app doesn't need to use React
+## License
+MIT License - feel free to use in your projects!
+## Contributing
+Contributions are welcome! Please feel free to submit a Pull Request.
+## Support
+For issues, questions, or feature requests, please open an issue on the GitHub repository.