npm package: @kroonen-ai/librebot-widget
Description: Libre Bot - AI documentation assistant widget
Author: Kroonen AI, Inc.
Latest version: 1.6.7
Deprecated: Deprecated. Use https://cdn.librebot.io/widget.js instead

# Libre Bot Widget

AI-powered documentation assistant widget for your website. Part of [Libre Bot](https://librebot.io) - the RAG-powered chatbot SaaS.

## Installation

### CDN (Recommended)

```html
<script src="https://cdn.jsdelivr.net/npm/@kroonen-ai/librebot-widget@latest/dist/librebot.js"></script>
<script>
  LibreBot.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
```

### npm

```bash
npm install @kroonen-ai/librebot-widget
```

```javascript
import { LibreBotWidget } from '@kroonen-ai/librebot-widget';

new LibreBotWidget({
  apiKey: 'YOUR_API_KEY'
});
```

## Configuration

All configuration options are optional except `apiKey`. Settings configured in your [Libre Bot dashboard](https://librebot.io/dashboard) are automatically loaded.

```javascript
LibreBot.init({
  apiKey: 'YOUR_API_KEY',           // Required
  apiUrl: 'https://librebot.io/api', // API endpoint (default)
  position: 'bottom-right',          // 'bottom-right' | 'bottom-left'
  theme: 'dark',                     // 'dark' | 'light' | 'auto'
  primaryColor: '#14b8a6',           // Hex color for branding
  title: 'Libre Bot',                // Widget header title
  subtitle: 'AI Documentation Assistant',
  placeholder: 'Ask a question...',  // Input placeholder
  welcomeMessage: 'Hi! How can I help?',
  streaming: true,                   // Enable streaming responses
  whiteLabel: false,                 // Remove "Powered by Libre Bot"
  autoLoadConfig: true               // Fetch settings from server
});
```

## Features

### Markdown Support

The widget renders full markdown formatting in AI responses:

- **Code blocks** with syntax language labels
  ````
  ```javascript
  console.log('Hello');
  ```
  ````
- **Inline code** with backticks: `code`
- **Headers** (h2, h3, h4)
- **Bold** (`**text**`), *italic* (`*text*`), and ***bold+italic*** (`***text***`)
- **Links** `[text](url)` - opens in new tab
- **Unordered lists** (`-` or `*`)
- **Ordered lists** (`1.` `2.` `3.`)
- **Blockquotes** (`> text`)
- **Horizontal rules** (`---`)

### Themes

- **Dark mode** - Default dark theme
- **Light mode** - Clean light theme
- **Auto** - Follows system preference

### White-Label

Remove "Powered by Libre Bot" branding with the `whiteLabel: true` option (requires Pro plan or higher).

### Streaming Responses

Real-time streaming of AI responses for better UX. Enabled by default.

### RAG-Powered

Responses are augmented with your uploaded documentation. Source citations are included when relevant documents are found.

## Methods

```javascript
const widget = LibreBot.init({ apiKey: 'YOUR_API_KEY' });

// Open the chat modal
widget.open();

// Close the chat modal
widget.close();

// Toggle open/close
widget.toggle();

// Remove widget from DOM
widget.destroy();
```

## Styling

The widget uses CSS custom properties scoped to `.librebot-widget`. Override these to customize:

```css
.librebot-widget {
  --lb-primary: #14b8a6;
  --lb-bg: #0f0f0f;
  --lb-bg-secondary: #1a1a1a;
  --lb-text: #ffffff;
  --lb-text-secondary: #9ca3af;
  --lb-border: #2a2a2a;
}
```

## Browser Support

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## Changelog

### 1.1.0
- Full markdown formatting support
- Code blocks with language labels
- Headers, lists, blockquotes
- Links opening in new tabs
- XSS protection via HTML escaping
- Improved light/dark theme styling

### 1.0.3
- Widget customization support
- White-label mode
- Auto-load config from server
- Theme options (dark, light, auto)

### 1.0.0
- Initial release
- Streaming responses
- Basic markdown (bold, inline code)

## License

MIT - Kroonen AI, Inc.