@product7/feedback-sdk 1.2.5 → 1.2.7

package/README.md

@@ -21,6 +21,10 @@ A lightweight, customizable JavaScript SDK for collecting user feedback on any w
 - **TypeScript support** — Full type definitions included
 - **Accessible** — WCAG 2.1 compliant
 - **Secure** — CSP friendly, no `eval()` usage
+- **Messenger widget** — Real-time chat with WebSocket support
+- **Help center** — Integrated help articles and collections
+- **Changelog** — Display product updates and announcements
+- **Environment auto-detection** — Automatic staging/production switching
 
 ---
 
@@ -126,19 +130,34 @@ const inline = feedback.createWidget('inline');
 inline.mount('#feedback-container');
 ```
 
+**Messenger Widget**
+
+```javascript
+const messenger = feedback.createWidget('messenger', {
+	position: 'bottom-right',
+	theme: 'light',
+	teamName: 'Support',
+	enableHelp: true,
+	enableChangelog: true,
+});
+messenger.mount();
+```
+
 ---
 
 ## Configuration
 
 ### SDK Configuration
 
-| Option        | Type    | Required | Default   | Description                      |
-| ------------- | ------- | -------- | --------- | -------------------------------- |
-| `workspace`   | string  | ✅       | -         | Your workspace subdomain         |
-| `boardId`     | string  | ❌       | 'general' | Target board for feedback        |
-| `userContext` | object  | ❌       | null      | User identification data         |
-| `mock`        | boolean | ❌       | false     | Enable mock mode for development |
-| `debug`       | boolean | ❌       | false     | Enable debug logging             |
+| Option        | Type    | Required | Default     | Description                            |
+| ------------- | ------- | -------- | ----------- | -------------------------------------- |
+| `workspace`   | string  | ✅       | -           | Your workspace subdomain               |
+| `boardId`     | string  | ❌       | 'general'   | Target board for feedback              |
+| `userContext` | object  | ❌       | null        | User identification data               |
+| `mock`        | boolean | ❌       | false       | Enable mock mode for development       |
+| `debug`       | boolean | ❌       | false       | Enable debug logging                   |
+| `env`         | string  | ❌       | auto-detect | Environment: 'production' or 'staging' |
+| `apiUrl`      | string  | ❌       | null        | Custom API URL (overrides env)         |
 
 ### Widget Configuration
 
@@ -234,6 +253,10 @@ Mock mode simulates:
 - Session initialization
 - Feedback submission (with 500ms delay)
 - Default configuration values
+- Messenger conversations and messages
+- Help articles and collections
+- Changelog entries
+- Agent availability status
 
 ---
 
@@ -368,6 +391,152 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 ---
 
+## Messenger Widget
+
+The SDK includes a full-featured messenger widget for real-time customer conversations, help articles, and changelog updates.
+
+### Features
+
+- **Real-time messaging** — WebSocket-powered live chat with typing indicators
+- **Conversation management** — View and manage multiple conversations
+- **Help center integration** — Browse help articles and collections
+- **Changelog updates** — Display product updates and announcements
+- **Agent availability** — Show online status and response times
+- **Customizable UI** — Theme, colors, and position options
+
+### Quick Start
+
+```javascript
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	userContext: {
+		user_id: 'user_123',
+		email: 'user@example.com',
+		name: 'John Doe',
+	},
+});
+
+await feedback.init();
+
+const messenger = feedback.createWidget('messenger', {
+	position: 'bottom-right',
+	theme: 'light',
+	teamName: 'Support Team',
+	welcomeMessage: 'How can we help you today?',
+	enableHelp: true,
+	enableChangelog: true,
+	primaryColor: '#1c1c1e',
+});
+
+messenger.mount();
+```
+
+### Messenger Configuration Options
+
+| Option             | Type     | Default            | Description                             |
+| ------------------ | -------- | ------------------ | --------------------------------------- |
+| `position`         | string   | 'bottom-right'     | Widget position on screen               |
+| `theme`            | string   | 'light'            | 'light' or 'dark'                       |
+| `teamName`         | string   | 'Support'          | Team name displayed in header           |
+| `teamAvatars`      | array    | []                 | Array of team member avatar URLs        |
+| `welcomeMessage`   | string   | 'How can we help?' | Welcome message on home view            |
+| `enableHelp`       | boolean  | true               | Show help articles section              |
+| `enableChangelog`  | boolean  | true               | Show changelog section                  |
+| `logoUrl`          | string   | -                  | Custom logo URL                         |
+| `primaryColor`     | string   | '#1c1c1e'          | Primary accent color                    |
+| `onSendMessage`    | function | null               | Callback when message is sent           |
+| `onArticleClick`   | function | null               | Callback when help article is clicked   |
+| `onChangelogClick` | function | null               | Callback when changelog item is clicked |
+
+### Messenger Views
+
+The messenger widget includes multiple views:
+
+| View        | Description                       |
+| ----------- | --------------------------------- |
+| `home`      | Welcome screen with quick actions |
+| `messages`  | List of all conversations         |
+| `chat`      | Individual conversation chat view |
+| `help`      | Help articles and collections     |
+| `changelog` | Product updates and announcements |
+
+### Programmatic Control
+
+```javascript
+// Open/close messenger
+messenger.open();
+messenger.close();
+messenger.toggle();
+
+// Navigate to specific view
+messenger.navigateTo('messages');
+messenger.navigateTo('help');
+messenger.navigateTo('changelog');
+
+// Get current state
+const state = messenger.getState();
+console.log(state.isOpen, state.currentView, state.unreadCount);
+
+// Update unread count
+messenger.setUnreadCount(3);
+```
+
+### Real-time Events
+
+```javascript
+// Message sent
+feedback.eventBus.on('messenger:messageSent', (data) => {
+	console.log('Message sent:', data.message);
+});
+
+// Messenger opened/closed
+feedback.eventBus.on('messenger:opened', () => {
+	console.log('Messenger opened');
+});
+
+feedback.eventBus.on('messenger:closed', () => {
+	console.log('Messenger closed');
+});
+```
+
+### WebSocket Connection
+
+The messenger automatically establishes a WebSocket connection for real-time features:
+
+- **Incoming messages** — New messages appear instantly
+- **Typing indicators** — See when agents are typing
+- **Presence updates** — Real-time agent availability
+
+The WebSocket connection is managed automatically and reconnects on disconnection.
+
+---
+
+## Environment Auto-Detection
+
+The SDK automatically detects the environment based on the hostname:
+
+| Hostname Pattern                    | Environment |
+| ----------------------------------- | ----------- |
+| `localhost`, `127.0.0.1`, `*.local` | staging     |
+| Contains `staging`                  | staging     |
+| All other hostnames                 | production  |
+
+```javascript
+// Auto-detection (recommended)
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	// env is auto-detected from window.location.hostname
+});
+
+// Manual override
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	env: 'staging', // Force staging environment
+});
+```
+
+---
+
 ## Survey Widget
 
 The SDK includes a powerful survey widget for collecting structured user feedback through NPS, CSAT, CES, and custom surveys. Surveys can be triggered manually, on specific events, or managed through the backend dashboard.

package/dist/README.md

@@ -21,6 +21,10 @@ A lightweight, customizable JavaScript SDK for collecting user feedback on any w
 - **TypeScript support** — Full type definitions included
 - **Accessible** — WCAG 2.1 compliant
 - **Secure** — CSP friendly, no `eval()` usage
+- **Messenger widget** — Real-time chat with WebSocket support
+- **Help center** — Integrated help articles and collections
+- **Changelog** — Display product updates and announcements
+- **Environment auto-detection** — Automatic staging/production switching
 
 ---
 
@@ -126,19 +130,34 @@ const inline = feedback.createWidget('inline');
 inline.mount('#feedback-container');
 ```
 
+**Messenger Widget**
+
+```javascript
+const messenger = feedback.createWidget('messenger', {
+	position: 'bottom-right',
+	theme: 'light',
+	teamName: 'Support',
+	enableHelp: true,
+	enableChangelog: true,
+});
+messenger.mount();
+```
+
 ---
 
 ## Configuration
 
 ### SDK Configuration
 
-| Option        | Type    | Required | Default   | Description                      |
-| ------------- | ------- | -------- | --------- | -------------------------------- |
-| `workspace`   | string  | ✅       | -         | Your workspace subdomain         |
-| `boardId`     | string  | ❌       | 'general' | Target board for feedback        |
-| `userContext` | object  | ❌       | null      | User identification data         |
-| `mock`        | boolean | ❌       | false     | Enable mock mode for development |
-| `debug`       | boolean | ❌       | false     | Enable debug logging             |
+| Option        | Type    | Required | Default     | Description                            |
+| ------------- | ------- | -------- | ----------- | -------------------------------------- |
+| `workspace`   | string  | ✅       | -           | Your workspace subdomain               |
+| `boardId`     | string  | ❌       | 'general'   | Target board for feedback              |
+| `userContext` | object  | ❌       | null        | User identification data               |
+| `mock`        | boolean | ❌       | false       | Enable mock mode for development       |
+| `debug`       | boolean | ❌       | false       | Enable debug logging                   |
+| `env`         | string  | ❌       | auto-detect | Environment: 'production' or 'staging' |
+| `apiUrl`      | string  | ❌       | null        | Custom API URL (overrides env)         |
 
 ### Widget Configuration
 
@@ -234,6 +253,10 @@ Mock mode simulates:
 - Session initialization
 - Feedback submission (with 500ms delay)
 - Default configuration values
+- Messenger conversations and messages
+- Help articles and collections
+- Changelog entries
+- Agent availability status
 
 ---
 
@@ -368,6 +391,152 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 ---
 
+## Messenger Widget
+
+The SDK includes a full-featured messenger widget for real-time customer conversations, help articles, and changelog updates.
+
+### Features
+
+- **Real-time messaging** — WebSocket-powered live chat with typing indicators
+- **Conversation management** — View and manage multiple conversations
+- **Help center integration** — Browse help articles and collections
+- **Changelog updates** — Display product updates and announcements
+- **Agent availability** — Show online status and response times
+- **Customizable UI** — Theme, colors, and position options
+
+### Quick Start
+
+```javascript
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	userContext: {
+		user_id: 'user_123',
+		email: 'user@example.com',
+		name: 'John Doe',
+	},
+});
+
+await feedback.init();
+
+const messenger = feedback.createWidget('messenger', {
+	position: 'bottom-right',
+	theme: 'light',
+	teamName: 'Support Team',
+	welcomeMessage: 'How can we help you today?',
+	enableHelp: true,
+	enableChangelog: true,
+	primaryColor: '#1c1c1e',
+});
+
+messenger.mount();
+```
+
+### Messenger Configuration Options
+
+| Option             | Type     | Default            | Description                             |
+| ------------------ | -------- | ------------------ | --------------------------------------- |
+| `position`         | string   | 'bottom-right'     | Widget position on screen               |
+| `theme`            | string   | 'light'            | 'light' or 'dark'                       |
+| `teamName`         | string   | 'Support'          | Team name displayed in header           |
+| `teamAvatars`      | array    | []                 | Array of team member avatar URLs        |
+| `welcomeMessage`   | string   | 'How can we help?' | Welcome message on home view            |
+| `enableHelp`       | boolean  | true               | Show help articles section              |
+| `enableChangelog`  | boolean  | true               | Show changelog section                  |
+| `logoUrl`          | string   | -                  | Custom logo URL                         |
+| `primaryColor`     | string   | '#1c1c1e'          | Primary accent color                    |
+| `onSendMessage`    | function | null               | Callback when message is sent           |
+| `onArticleClick`   | function | null               | Callback when help article is clicked   |
+| `onChangelogClick` | function | null               | Callback when changelog item is clicked |
+
+### Messenger Views
+
+The messenger widget includes multiple views:
+
+| View        | Description                       |
+| ----------- | --------------------------------- |
+| `home`      | Welcome screen with quick actions |
+| `messages`  | List of all conversations         |
+| `chat`      | Individual conversation chat view |
+| `help`      | Help articles and collections     |
+| `changelog` | Product updates and announcements |
+
+### Programmatic Control
+
+```javascript
+// Open/close messenger
+messenger.open();
+messenger.close();
+messenger.toggle();
+
+// Navigate to specific view
+messenger.navigateTo('messages');
+messenger.navigateTo('help');
+messenger.navigateTo('changelog');
+
+// Get current state
+const state = messenger.getState();
+console.log(state.isOpen, state.currentView, state.unreadCount);
+
+// Update unread count
+messenger.setUnreadCount(3);
+```
+
+### Real-time Events
+
+```javascript
+// Message sent
+feedback.eventBus.on('messenger:messageSent', (data) => {
+	console.log('Message sent:', data.message);
+});
+
+// Messenger opened/closed
+feedback.eventBus.on('messenger:opened', () => {
+	console.log('Messenger opened');
+});
+
+feedback.eventBus.on('messenger:closed', () => {
+	console.log('Messenger closed');
+});
+```
+
+### WebSocket Connection
+
+The messenger automatically establishes a WebSocket connection for real-time features:
+
+- **Incoming messages** — New messages appear instantly
+- **Typing indicators** — See when agents are typing
+- **Presence updates** — Real-time agent availability
+
+The WebSocket connection is managed automatically and reconnects on disconnection.
+
+---
+
+## Environment Auto-Detection
+
+The SDK automatically detects the environment based on the hostname:
+
+| Hostname Pattern                    | Environment |
+| ----------------------------------- | ----------- |
+| `localhost`, `127.0.0.1`, `*.local` | staging     |
+| Contains `staging`                  | staging     |
+| All other hostnames                 | production  |
+
+```javascript
+// Auto-detection (recommended)
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	// env is auto-detected from window.location.hostname
+});
+
+// Manual override
+const feedback = new FeedbackSDK({
+	workspace: 'your-workspace',
+	env: 'staging', // Force staging environment
+});
+```
+
+---
+
 ## Survey Widget
 
 The SDK includes a powerful survey widget for collecting structured user feedback through NPS, CSAT, CES, and custom surveys. Surveys can be triggered manually, on specific events, or managed through the backend dashboard.