chatnest 3.4.0 → 3.4.1
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.
package/readme.md
CHANGED
|
@@ -1,306 +1,323 @@
|
|
|
1
1
|
# ChatNest
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<p align="center">
|
|
4
|
+
<img src="https://i.ibb.co.com/ts1T0q7/chatnest.jpg" alt="ChatNest" width="400">
|
|
5
|
+
</p>
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## Table of Contents
|
|
8
|
-
- [Key Features](#key-features)
|
|
9
|
-
- [Installation](#installation)
|
|
10
|
-
- [Usage](#usage)
|
|
11
|
-
- [Configuration Options](#configuration-options)
|
|
12
|
-
- [Example Initialization with Full Configuration](#example-initialization-with-full-configuration)
|
|
13
|
-
- [Dependencies](#dependencies)
|
|
14
|
-
|
|
15
|
-
## Key Features
|
|
16
|
-
|
|
17
|
-
1. **Seamless Integration with LLMs using LangChain or RAG (Retrieval-Augmented Generation)**
|
|
18
|
-
- **LangChain Integration**: ChatNest is fully compatible with LangChain, allowing developers to harness the power of large language models (LLMs) directly within their chat interface. This enables dynamic and context-aware responses by structuring conversation history, improving response generation, and enabling multi-turn conversations.
|
|
19
|
-
- **RAG-Based Conversational AI**: With RAG, ChatNest offers access to real-time knowledge bases, document databases, and custom data sources, allowing users to retrieve and interact with up-to-date and accurate information. This setup is ideal for applications that require responses grounded in specific knowledge domains, like customer support, product information, or knowledge retrieval.
|
|
20
|
-
|
|
21
|
-
2. **Flexible Configuration System**
|
|
22
|
-
- Developers can control chatbot settings, such as default endpoints (e.g., `deleteEndpoint` for clearing history or `apiEndpoint` for main interactions), response types, themes, and interaction prompts.
|
|
23
|
-
- ChatNest supports custom API routes, allowing developers to set up and route requests to specific RAG or LangChain endpoints for highly optimized and tailored performance.
|
|
24
|
-
|
|
25
|
-
3. **Customizable UI**
|
|
26
|
-
- ChatNest is designed to blend seamlessly with your app’s visual style. You can adjust colors, fonts, and layout, enabling a fully branded chatbot experience.
|
|
27
|
-
- The widget is also mobile-responsive, ensuring optimal user experience across all devices.
|
|
28
|
-
|
|
29
|
-
## Use Cases
|
|
30
|
-
|
|
31
|
-
- **Customer Support**: ChatNest, combined with LangChain or RAG, can serve as a smart assistant capable of answering questions based on real-time data from your knowledge base.
|
|
32
|
-
- **Product Recommendations**: For e-commerce, ChatNest can pull from product databases, providing users with personalized recommendations and detailed product descriptions.
|
|
33
|
-
- **Knowledge Retrieval**: ChatNest can act as a virtual assistant in educational platforms, retrieving information from research papers, textbooks, or articles, enhancing learning experiences.
|
|
34
|
-
- **Internal Tools**: Enhance productivity by allowing team members to interact with internal databases or corporate knowledge resources through the chat interface.
|
|
7
|
+
A lightweight, customizable AI chat widget. Drop it into any website in minutes.
|
|
35
8
|
|
|
9
|
+
---
|
|
36
10
|
|
|
37
11
|
## Installation
|
|
38
12
|
|
|
39
|
-
|
|
40
|
-
|
|
13
|
+
**CDN**
|
|
41
14
|
```html
|
|
42
|
-
<script src="https://cdn.jsdelivr.net/npm/chatnest@3.4.
|
|
15
|
+
<script src="https://cdn.jsdelivr.net/npm/chatnest@3.4.1/dist/chatnest.min.js"></script>
|
|
43
16
|
```
|
|
44
17
|
|
|
45
|
-
|
|
46
|
-
|
|
18
|
+
**npm**
|
|
47
19
|
```bash
|
|
48
20
|
npm install chatnest
|
|
49
21
|
```
|
|
22
|
+
```js
|
|
23
|
+
import Chatnest from 'chatnest';
|
|
24
|
+
```
|
|
50
25
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
height: '600px'
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## Quick Start
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<script src="https://cdn.jsdelivr.net/npm/chatnest@3.4.1/dist/chatnest.min.js"></script>
|
|
32
|
+
<script>
|
|
33
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
34
|
+
new Chatnest({
|
|
35
|
+
botName: 'Support Bot',
|
|
36
|
+
apiEndpoint: 'https://your-api.com/chat',
|
|
37
|
+
primaryColor: '#0084ff'
|
|
64
38
|
});
|
|
65
|
-
});
|
|
39
|
+
});
|
|
40
|
+
</script>
|
|
66
41
|
```
|
|
67
42
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
|
92
|
-
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
|
108
|
-
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
|
125
|
-
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
|
134
|
-
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## Configuration
|
|
46
|
+
|
|
47
|
+
### Core
|
|
48
|
+
|
|
49
|
+
| Option | Type | Default | Description |
|
|
50
|
+
|--------|------|---------|-------------|
|
|
51
|
+
| `botName` | `string` | `'Chat Assistant'` | Name shown in the header |
|
|
52
|
+
| `botImage` | `string` | default avatar | Bot avatar URL |
|
|
53
|
+
| `botSubname` | `string` | `null` | Sub-label below the bot name |
|
|
54
|
+
| `showBotSubname` | `boolean` | `true` | Show/hide `botSubname` |
|
|
55
|
+
| `greeting` | `string` | `'Hello! How can I help you today?'` | Opening message |
|
|
56
|
+
| `placeholder` | `string` | `'Type your message here...'` | Input placeholder text |
|
|
57
|
+
| `primaryColor` | `string` | `'#0084ff'` | Accent color — hex or CSS gradient |
|
|
58
|
+
| `fontSize` | `number\|string` | `14` | Message font size in px (14–25) |
|
|
59
|
+
| `width` | `string` | `'400px'` | Widget width (300–600px) |
|
|
60
|
+
| `height` | `string` | `'600px'` | Widget height (400–800px) |
|
|
61
|
+
| `position` | `string` | `'bottom-right'` | `bottom-right` `bottom-left` `bottom-center` `top-right` `top-left` |
|
|
62
|
+
| `theme` | `string` | `'light'` | `'light'` `'dark'` `'system'` |
|
|
63
|
+
|
|
64
|
+
### API
|
|
65
|
+
|
|
66
|
+
| Option | Type | Default | Description |
|
|
67
|
+
|--------|------|---------|-------------|
|
|
68
|
+
| `apiEndpoint` | `string` | `'http://localhost:7000/chat'` | Chat endpoint URL |
|
|
69
|
+
| `apiKey` | `string` | `''` | Bearer token added to `Authorization` header |
|
|
70
|
+
| `apiHeaders` | `object` | `{ 'Content-Type': 'application/json' }` | Extra request headers |
|
|
71
|
+
| `apiMethod` | `string` | `'POST'` | HTTP method |
|
|
72
|
+
| `apiTimeout` | `number` | `30000` | Request timeout in ms |
|
|
73
|
+
| `apiRequestFormat` | `object` | `{ query, userId, domain }` | Map request field names to what your API expects |
|
|
74
|
+
| `apiResponseFormat` | `object` | `{ response, products, productItem }` | Map response field names from your API |
|
|
75
|
+
| `apiDataFormat` | `string` | `'json'` | `'json'` or `'form-data'` |
|
|
76
|
+
| `useMultipartFormData` | `boolean` | `true` | Use multipart encoding for file uploads |
|
|
77
|
+
| `transformResponse` | `function` | `null` | Transform the raw API response before display |
|
|
78
|
+
| `productInjectionMarker` | `string\|array` | see below | Text marker(s) after which the product carousel is inserted |
|
|
79
|
+
|
|
80
|
+
### Chat Behavior
|
|
81
|
+
|
|
82
|
+
| Option | Type | Default | Description |
|
|
83
|
+
|--------|------|---------|-------------|
|
|
84
|
+
| `enableHistory` | `boolean` | `true` | Persist chat in localStorage |
|
|
85
|
+
| `maxHistoryLength` | `number` | `100` | Max messages stored locally |
|
|
86
|
+
| `separateSubpageHistory` | `boolean` | `false` | Separate history per URL path |
|
|
87
|
+
| `enableMarkdown` | `boolean` | `true` | Render Markdown in bot replies |
|
|
88
|
+
| `enableTypewriter` | `boolean` | `true` | Typewriter animation for bot replies |
|
|
89
|
+
| `typewriterSpeed` | `object` | `{ min: 30, max: 70 }` | Typewriter speed range in ms per character |
|
|
90
|
+
| `typewritewithscroll` | `boolean` | `false` | Auto-scroll while typewriter is animating |
|
|
91
|
+
| `enableTypingIndicator` | `boolean` | `true` | Show "Thinking…" while waiting |
|
|
92
|
+
| `showTypingText` | `boolean` | `true` | Show text label next to typing dots |
|
|
93
|
+
| `typingIndicatorColor` | `string` | `'#666'` | Color of the typing dots |
|
|
94
|
+
| `showTimestamp` | `boolean` | `false` | Show time on each message |
|
|
95
|
+
| `chips` | `array` | `[]` | Suggestion chip buttons, e.g. `['Help', 'Pricing']` |
|
|
96
|
+
|
|
97
|
+
### File Upload
|
|
98
|
+
|
|
99
|
+
| Option | Type | Default | Description |
|
|
100
|
+
|--------|------|---------|-------------|
|
|
101
|
+
| `enableFileUpload` | `boolean` | `true` | Enable file / image attachments |
|
|
102
|
+
| `fileAccept` | `string` | `'image/*,.pdf,.doc,.docx,.txt'` | Accepted MIME types or extensions |
|
|
103
|
+
| `maxFiles` | `number` | `null` | Max files per message (`null` = unlimited) |
|
|
104
|
+
| `enableEnhancedMobileInput` | `boolean` | `true` | Optimised input handling on mobile |
|
|
105
|
+
|
|
106
|
+
### Backend History
|
|
107
|
+
|
|
108
|
+
| Option | Type | Default | Description |
|
|
109
|
+
|--------|------|---------|-------------|
|
|
110
|
+
| `enableBackendHistory` | `boolean` | `true` | Send conversation history to the API |
|
|
111
|
+
| `backendHistoryEndpoint` | `string` | `''` | Separate endpoint to fetch server-side history |
|
|
112
|
+
| `deleteEndpoint` | `string` | `{apiEndpoint}/delete-history` | Endpoint called when the user clears chat |
|
|
113
|
+
| `feedbackEndpoint` | `string` | `{apiEndpoint}/feedback` | Endpoint for like/dislike feedback |
|
|
114
|
+
| `enableServerHistoryDelete` | `boolean` | `false` | Call `deleteEndpoint` when erasing chat |
|
|
115
|
+
|
|
116
|
+
### UI & Branding
|
|
117
|
+
|
|
118
|
+
| Option | Type | Default | Description |
|
|
119
|
+
|--------|------|---------|-------------|
|
|
120
|
+
| `showBranding` | `boolean` | `true` | "Powered by" footer link |
|
|
121
|
+
| `brandingText` | `string` | `'Powered by NeuroBrain'` | Footer brand label |
|
|
122
|
+
| `brandingUrl` | `string` | `'https://neurobrains.co/'` | Footer brand URL |
|
|
123
|
+
| `showMessageActions` | `boolean` | `true` | Like / dislike / copy / regenerate buttons |
|
|
124
|
+
| `enableDeleteButton` | `boolean` | `true` | Show clear-chat button in header |
|
|
125
|
+
| `aiAvatar` | `string` | `null` | URL, emoji, or inline SVG for the AI avatar |
|
|
126
|
+
| `showAiAvatar` | `boolean` | `true` | Show/hide the AI avatar next to messages |
|
|
127
|
+
| `chatBackgroundColor` | `string` | `'#ffffff'` | Chat panel background color |
|
|
128
|
+
| `chatBackgroundImage` | `string` | `null` | CSS background-image for the chat panel |
|
|
129
|
+
| `sendButtonIconSize` | `number` | `24` | Send button icon size in px |
|
|
130
|
+
|
|
131
|
+
### Toggle Button
|
|
132
|
+
|
|
133
|
+
| Option | Type | Default | Description |
|
|
134
|
+
|--------|------|---------|-------------|
|
|
135
|
+
| `toggleButtonIcon` | `string` | default chat icon | URL, emoji, or SVG for the toggle button |
|
|
136
|
+
| `toggleButtonSize` | `number` | `60` | Toggle button diameter in px (40–80) |
|
|
137
|
+
| `toggleButtonAnimation` | `number` | `4` | Animation style 0–5 (`0` = none) |
|
|
138
|
+
| `toggleButtonBottomMargin` | `number` | `50` | Distance from the bottom of the viewport in px |
|
|
139
|
+
| `toggleButtonRightMargin` | `number` | `30` | Distance from the right edge of the viewport in px |
|
|
140
|
+
| `websiteBottomSpacing` | `number` | `0` | Extra bottom spacing to avoid overlapping site elements |
|
|
141
|
+
|
|
142
|
+
### Text Box Pop-up
|
|
143
|
+
|
|
144
|
+
The small speech-bubble pop-up that appears above the toggle button before the chat is opened.
|
|
145
|
+
|
|
146
|
+
| Option | Type | Default | Description |
|
|
147
|
+
|--------|------|---------|-------------|
|
|
148
|
+
| `showTextBox` | `boolean` | `true` | Show the pop-up text box |
|
|
149
|
+
| `textBoxMessage` | `string` | `'Hi there! If you need any assistance, I am always here.'` | Main message |
|
|
150
|
+
| `textBoxSubMessage` | `string` | `'24/7 Live Chat Support'` | Sub-message |
|
|
151
|
+
| `showTextBoxCloseButton` | `boolean` | `true` | Allow user to dismiss the pop-up |
|
|
152
|
+
| `textBoxTextColor` | `string` | `'primary'` | `'primary'` (uses `primaryColor`), `'default'`, or any hex |
|
|
153
|
+
| `textBoxSpacingFromToggle` | `number` | `0` | Gap between the pop-up and toggle button in px |
|
|
154
|
+
|
|
155
|
+
### HubSpot Lead Form
|
|
156
|
+
|
|
157
|
+
Displays a lead-capture form before or during chat. Requires HubSpot portal credentials.
|
|
158
|
+
|
|
159
|
+
| Option | Type | Default | Description |
|
|
160
|
+
|--------|------|---------|-------------|
|
|
161
|
+
| `hubspot.enabled` | `boolean` | `false` | Enable HubSpot form integration |
|
|
162
|
+
| `hubspot.portalId` | `string` | `''` | HubSpot portal ID |
|
|
163
|
+
| `hubspot.formGuid` | `string` | `''` | HubSpot form GUID |
|
|
164
|
+
| `hubspot.triggerKeywords` | `array` | `['pricing','demo','contact','quote','help','support']` | Keywords that trigger the form |
|
|
165
|
+
| `showFormOnStart` | `boolean` | `true` | Show form when chat opens for new users |
|
|
166
|
+
| `useEmailAsUserId` | `boolean` | `true` | Use submitted email as the persistent user ID |
|
|
167
|
+
| `formTitle` | `string` | `'Give Your Details'` | Form modal title |
|
|
168
|
+
| `formSubtitle` | `string` | `'Please provide your information to start chatting.'` | Form modal subtitle |
|
|
169
|
+
|
|
170
|
+
### Supabase Chat History
|
|
171
|
+
|
|
172
|
+
Persist chat history in Supabase so sessions survive across devices and browsers.
|
|
173
|
+
|
|
174
|
+
| Option | Type | Default | Description |
|
|
175
|
+
|--------|------|---------|-------------|
|
|
176
|
+
| `supabase.enabled` | `boolean` | `false` | Enable Supabase persistence |
|
|
177
|
+
| `supabase.url` | `string` | `''` | Supabase project URL |
|
|
178
|
+
| `supabase.anonKey` | `string` | `''` | Supabase anon/public API key |
|
|
179
|
+
| `supabase.tableName` | `string` | `'chat_history'` | Table to store messages |
|
|
180
|
+
| `supabase.historyLimit` | `number` | `50` | Max rows to load on widget open |
|
|
181
|
+
| `supabase.pollIntervalMs` | `number` | `5000` | Background refresh interval (ms); Realtime gives instant delivery |
|
|
182
|
+
|
|
183
|
+
### Parlant Integration
|
|
184
|
+
|
|
185
|
+
| Option | Type | Default | Description |
|
|
186
|
+
|--------|------|---------|-------------|
|
|
187
|
+
| `parlant.enabled` | `boolean` | `false` | Enable Parlant agent integration |
|
|
188
|
+
| `parlant.apiBaseUrl` | `string` | `''` | Parlant API base URL |
|
|
189
|
+
|
|
190
|
+
### Callbacks
|
|
191
|
+
|
|
192
|
+
| Option | Type | Description |
|
|
193
|
+
|--------|------|-------------|
|
|
194
|
+
| `onInit` | `function` | Called when the widget is ready |
|
|
195
|
+
| `onMessage` | `function` | Called on every message send / receive |
|
|
196
|
+
| `onError` | `function` | Called on API errors |
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## Supabase Setup
|
|
201
|
+
|
|
202
|
+
### 1. Create the table
|
|
203
|
+
|
|
204
|
+
```sql
|
|
205
|
+
CREATE TABLE IF NOT EXISTS chat_history (
|
|
206
|
+
id BIGSERIAL PRIMARY KEY,
|
|
207
|
+
user_id TEXT NOT NULL,
|
|
208
|
+
domain TEXT NOT NULL,
|
|
209
|
+
query TEXT NOT NULL,
|
|
210
|
+
response TEXT NOT NULL,
|
|
211
|
+
timestamp TIMESTAMPTZ NOT NULL DEFAULT NOW()
|
|
212
|
+
);
|
|
213
|
+
|
|
214
|
+
CREATE INDEX IF NOT EXISTS idx_chat_history_user_domain ON chat_history (user_id, domain);
|
|
215
|
+
CREATE INDEX IF NOT EXISTS idx_chat_history_timestamp ON chat_history (timestamp DESC);
|
|
216
|
+
|
|
217
|
+
ALTER TABLE chat_history ENABLE ROW LEVEL SECURITY;
|
|
218
|
+
CREATE POLICY "chat_history_open" ON chat_history FOR ALL USING (true) WITH CHECK (true);
|
|
219
|
+
|
|
220
|
+
-- Enable Realtime for instant Messenger-like delivery (optional but recommended)
|
|
221
|
+
ALTER PUBLICATION supabase_realtime ADD TABLE chat_history;
|
|
222
|
+
```
|
|
198
223
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
224
|
+
### 2. Configure
|
|
225
|
+
|
|
226
|
+
```js
|
|
227
|
+
new Chatnest({
|
|
228
|
+
apiEndpoint: 'https://your-api.com/chat',
|
|
229
|
+
supabase: {
|
|
230
|
+
enabled: true,
|
|
231
|
+
url: 'https://xxxxxxxxxxxx.supabase.co',
|
|
232
|
+
anonKey: 'your-anon-key',
|
|
233
|
+
tableName: 'chat_history', // optional
|
|
234
|
+
historyLimit: 50 // optional
|
|
235
|
+
}
|
|
206
236
|
});
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
> Find `url` and `anonKey` in **Supabase → Project Settings → API**.
|
|
240
|
+
|
|
241
|
+
**Real-time sync** — The widget polls for new rows every 3 seconds. When a human agent or backend adds a reply to `chat_history`, it appears live, like Messenger. Tune with `supabase.pollIntervalMs`.
|
|
242
|
+
|
|
243
|
+
**Multi-part responses (`,,,`)** — If your API returns multiple replies concatenated with three commas, ChatNest splits them into separate messages:
|
|
244
|
+
`"Hello!,,,How can I help?"` → two bot messages.
|
|
207
245
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
## Product Carousel
|
|
249
|
+
|
|
250
|
+
When your API returns a `products` array, ChatNest renders product cards with image, name, price, highlights, and a CTA button.
|
|
251
|
+
|
|
252
|
+
```js
|
|
253
|
+
new Chatnest({
|
|
254
|
+
apiEndpoint: 'https://your-api.com/chat',
|
|
255
|
+
productInjectionMarker: 'Here are some recommendations:',
|
|
256
|
+
apiResponseFormat: {
|
|
257
|
+
response: 'response',
|
|
258
|
+
products: 'products',
|
|
259
|
+
productItem: {
|
|
260
|
+
name: 'name',
|
|
261
|
+
price: 'price',
|
|
262
|
+
image: 'image_url',
|
|
263
|
+
link: 'buy_link',
|
|
264
|
+
highlights: 'highlights',
|
|
265
|
+
ctaText: 'Buy now'
|
|
266
|
+
}
|
|
267
|
+
}
|
|
216
268
|
});
|
|
217
269
|
```
|
|
218
270
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
primaryColor: 'linear-gradient(45deg, #2563eb, #9333ea)',
|
|
228
|
-
|
|
229
|
-
// Text box with gradient support
|
|
230
|
-
showTextBox: true,
|
|
231
|
-
textBoxMessage: 'Need help? We\'re here!',
|
|
232
|
-
textBoxSubMessage: '💬 24/7 Support',
|
|
233
|
-
textBoxTextColor: 'primary',
|
|
234
|
-
|
|
235
|
-
// Perfect positioning
|
|
236
|
-
toggleButtonBottomMargin: 50,
|
|
237
|
-
textBoxSpacingFromToggle: 0,
|
|
238
|
-
|
|
239
|
-
// API configuration
|
|
240
|
-
apiEndpoint: 'https://your-api.com/chat',
|
|
241
|
-
enableFileUpload: true,
|
|
242
|
-
|
|
243
|
-
// Callbacks
|
|
244
|
-
onInit: () => console.log('Chat widget initialized'),
|
|
245
|
-
onMessage: (message) => console.log('Message received:', message),
|
|
246
|
-
onError: (error) => console.error('An error occurred:', error),
|
|
247
|
-
});
|
|
248
|
-
});
|
|
271
|
+
Expected API response shape:
|
|
272
|
+
```json
|
|
273
|
+
{
|
|
274
|
+
"response": "Here are some recommendations:\n\n",
|
|
275
|
+
"products": [
|
|
276
|
+
{ "name": "Product A", "price": "$29", "image_url": "...", "buy_link": "...", "highlights": "Lightweight" }
|
|
277
|
+
]
|
|
278
|
+
}
|
|
249
279
|
```
|
|
250
280
|
|
|
251
|
-
|
|
281
|
+
---
|
|
252
282
|
|
|
253
|
-
|
|
283
|
+
## File Upload
|
|
284
|
+
|
|
285
|
+
```js
|
|
286
|
+
new Chatnest({
|
|
287
|
+
apiEndpoint: 'https://your-api.com/chat',
|
|
288
|
+
enableFileUpload: true,
|
|
289
|
+
useMultipartFormData: true,
|
|
290
|
+
apiDataFormat: 'form-data',
|
|
291
|
+
fileAccept: 'image/*',
|
|
292
|
+
maxFiles: 1
|
|
293
|
+
});
|
|
294
|
+
```
|
|
254
295
|
|
|
255
|
-
|
|
296
|
+
Single file → sent as `image` field. Multiple files → `file_0`, `file_1`, etc.
|
|
256
297
|
|
|
257
|
-
|
|
298
|
+
---
|
|
258
299
|
|
|
259
300
|
## Troubleshooting
|
|
260
301
|
|
|
261
|
-
|
|
262
|
-
|
|
302
|
+
**Widget not loading**
|
|
303
|
+
Wrap init in `DOMContentLoaded`. Load the script before your init code.
|
|
263
304
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
305
|
+
**422 error from API**
|
|
306
|
+
Your API expects different field names:
|
|
307
|
+
```js
|
|
308
|
+
apiRequestFormat: { query: 'message', userId: 'user_id', domain: 'domain' }
|
|
309
|
+
```
|
|
267
310
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
2. Set `useMultipartFormData: true`
|
|
271
|
-
3. Set `apiDataFormat: 'form-data'`
|
|
272
|
-
4. Check file size limits on your server
|
|
311
|
+
**Products not showing**
|
|
312
|
+
Ensure your API returns a `products` array and `productInjectionMarker` matches text in the `response` field.
|
|
273
313
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
4. Check network connectivity
|
|
314
|
+
**Supabase history not loading**
|
|
315
|
+
- Confirm `supabase.enabled: true` and credentials are correct
|
|
316
|
+
- Check RLS policies allow reads with the anon key
|
|
317
|
+
- Check browser console for `[Supabase]` error messages
|
|
279
318
|
|
|
280
|
-
|
|
319
|
+
---
|
|
281
320
|
|
|
282
|
-
|
|
283
|
-
```javascript
|
|
284
|
-
{
|
|
285
|
-
useMultipartFormData: true,
|
|
286
|
-
apiDataFormat: 'form-data',
|
|
287
|
-
apiRequestFormat: {
|
|
288
|
-
query: 'message', // Match your API's field name
|
|
289
|
-
userId: 'user_id',
|
|
290
|
-
domain: 'domain'
|
|
291
|
-
}
|
|
292
|
-
}
|
|
293
|
-
```
|
|
321
|
+
## License
|
|
294
322
|
|
|
295
|
-
|
|
296
|
-
```javascript
|
|
297
|
-
{
|
|
298
|
-
useMultipartFormData: false,
|
|
299
|
-
apiDataFormat: 'json',
|
|
300
|
-
apiRequestFormat: {
|
|
301
|
-
query: 'message',
|
|
302
|
-
userId: 'user_id',
|
|
303
|
-
domain: 'domain'
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
```
|
|
323
|
+
MIT © [Sifat Hasan](https://github.com/Pro-Sifat-Hasan)
|