@blockspark/chat-widget 1.0.2 → 1.0.3
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 +101 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,9 +33,13 @@ npm install /path/to/blockspark-chat-widget
|
|
|
33
33
|
|
|
34
34
|
## Usage
|
|
35
35
|
|
|
36
|
+
Use **camelCase** for all props in every environment (React, Next.js, Vue, and CDN). Examples: `dfProjectId`, `serviceAccountKey`, `languageCode`.
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
36
40
|
### React
|
|
37
41
|
|
|
38
|
-
Import the component and the default styles, then render with your config.
|
|
42
|
+
Import the component and the default styles, then render with your config. Copy the props below and replace the placeholder values with yours.
|
|
39
43
|
|
|
40
44
|
```tsx
|
|
41
45
|
import ChatWidget from '@blockspark/chat-widget';
|
|
@@ -50,9 +54,21 @@ function App() {
|
|
|
50
54
|
dfLocation="us-central1"
|
|
51
55
|
dfAgentId="your-agent-id"
|
|
52
56
|
serviceAccountKey={serviceAccountKey}
|
|
57
|
+
// accessToken="your-token" // use instead of serviceAccountKey if you have a token
|
|
53
58
|
languageCode="en"
|
|
54
|
-
title="💬
|
|
59
|
+
title="💬 BlockSpark AI Assistant"
|
|
55
60
|
subtitle="We're here to help"
|
|
61
|
+
welcomeTitle="👋 Welcome to Blockspark"
|
|
62
|
+
welcomeMessage="My name is BlockSpark AI Assistant and I'll guide you."
|
|
63
|
+
welcomeCta="💬 Click here to start chatting!"
|
|
64
|
+
showWelcomePopup={true}
|
|
65
|
+
welcomePopupDelay={1500}
|
|
66
|
+
fallbackWelcomeMessage="Hello! I'm BlockSpark AI Assistant. How can I help you today?"
|
|
67
|
+
inputPlaceholder="Type your message..."
|
|
68
|
+
emptyStateMessage="Hi! I'm BlockSpark AI Assistant. How can I help you today?"
|
|
69
|
+
debug={false}
|
|
70
|
+
backendBaseUrl="http://localhost:8012"
|
|
71
|
+
backendWsUrl="ws://localhost:8012"
|
|
56
72
|
/>
|
|
57
73
|
);
|
|
58
74
|
}
|
|
@@ -89,6 +105,19 @@ export default function Page() {
|
|
|
89
105
|
dfAgentId="your-agent-id"
|
|
90
106
|
serviceAccountKey={serviceAccountKey}
|
|
91
107
|
languageCode="en"
|
|
108
|
+
title="💬 BlockSpark AI Assistant"
|
|
109
|
+
subtitle="We're here to help"
|
|
110
|
+
welcomeTitle="👋 Welcome to Blockspark"
|
|
111
|
+
welcomeMessage="My name is BlockSpark AI Assistant and I'll guide you."
|
|
112
|
+
welcomeCta="💬 Click here to start chatting!"
|
|
113
|
+
showWelcomePopup={true}
|
|
114
|
+
welcomePopupDelay={1500}
|
|
115
|
+
fallbackWelcomeMessage="Hello! I'm BlockSpark AI Assistant. How can I help you today?"
|
|
116
|
+
inputPlaceholder="Type your message..."
|
|
117
|
+
emptyStateMessage="Hi! I'm BlockSpark AI Assistant. How can I help you today?"
|
|
118
|
+
debug={false}
|
|
119
|
+
backendBaseUrl="http://localhost:8012"
|
|
120
|
+
backendWsUrl="ws://localhost:8012"
|
|
92
121
|
/>
|
|
93
122
|
</div>
|
|
94
123
|
);
|
|
@@ -107,13 +136,30 @@ const ChatWidget = dynamic(
|
|
|
107
136
|
);
|
|
108
137
|
|
|
109
138
|
export default function ChatPage() {
|
|
139
|
+
const serviceAccountKey = process.env.NEXT_PUBLIC_SERVICE_ACCOUNT_KEY_JSON
|
|
140
|
+
? JSON.parse(process.env.NEXT_PUBLIC_SERVICE_ACCOUNT_KEY_JSON)
|
|
141
|
+
: undefined;
|
|
142
|
+
|
|
110
143
|
return (
|
|
111
144
|
<ChatWidget
|
|
112
145
|
dfProjectId="your-project-id"
|
|
113
146
|
dfLocation="us-central1"
|
|
114
147
|
dfAgentId="your-agent-id"
|
|
115
|
-
serviceAccountKey={
|
|
148
|
+
serviceAccountKey={serviceAccountKey}
|
|
116
149
|
languageCode="en"
|
|
150
|
+
title="💬 BlockSpark AI Assistant"
|
|
151
|
+
subtitle="We're here to help"
|
|
152
|
+
welcomeTitle="👋 Welcome to Blockspark"
|
|
153
|
+
welcomeMessage="My name is BlockSpark AI Assistant and I'll guide you."
|
|
154
|
+
welcomeCta="💬 Click here to start chatting!"
|
|
155
|
+
showWelcomePopup={true}
|
|
156
|
+
welcomePopupDelay={1500}
|
|
157
|
+
fallbackWelcomeMessage="Hello! I'm BlockSpark AI Assistant. How can I help you today?"
|
|
158
|
+
inputPlaceholder="Type your message..."
|
|
159
|
+
emptyStateMessage="Hi! I'm BlockSpark AI Assistant. How can I help you today?"
|
|
160
|
+
debug={false}
|
|
161
|
+
backendBaseUrl="http://localhost:8012"
|
|
162
|
+
backendWsUrl="ws://localhost:8012"
|
|
117
163
|
/>
|
|
118
164
|
);
|
|
119
165
|
}
|
|
@@ -138,16 +184,29 @@ app.use(BlockSparkChatWidget); // registers <BlockSparkChatWidget>
|
|
|
138
184
|
app.mount('#app');
|
|
139
185
|
```
|
|
140
186
|
|
|
141
|
-
Then in any template:
|
|
187
|
+
Then in any template (copy and replace the placeholder values):
|
|
142
188
|
|
|
143
189
|
```vue
|
|
144
190
|
<template>
|
|
145
191
|
<BlockSparkChatWidget
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
:
|
|
150
|
-
|
|
192
|
+
dfProjectId="your-project-id"
|
|
193
|
+
dfLocation="us-central1"
|
|
194
|
+
dfAgentId="your-agent-id"
|
|
195
|
+
:serviceAccountKey="serviceAccountKey"
|
|
196
|
+
languageCode="en"
|
|
197
|
+
title="💬 BlockSpark AI Assistant"
|
|
198
|
+
subtitle="We're here to help"
|
|
199
|
+
welcomeTitle="👋 Welcome to Blockspark"
|
|
200
|
+
welcomeMessage="My name is BlockSpark AI Assistant and I'll guide you."
|
|
201
|
+
welcomeCta="💬 Click here to start chatting!"
|
|
202
|
+
:showWelcomePopup="true"
|
|
203
|
+
:welcomePopupDelay="1500"
|
|
204
|
+
fallbackWelcomeMessage="Hello! I'm BlockSpark AI Assistant. How can I help you today?"
|
|
205
|
+
inputPlaceholder="Type your message..."
|
|
206
|
+
emptyStateMessage="Hi! I'm BlockSpark AI Assistant. How can I help you today?"
|
|
207
|
+
:debug="false"
|
|
208
|
+
backendBaseUrl="http://localhost:8012"
|
|
209
|
+
backendWsUrl="ws://localhost:8012"
|
|
151
210
|
/>
|
|
152
211
|
</template>
|
|
153
212
|
```
|
|
@@ -164,17 +223,28 @@ import serviceAccountKey from './path/to/service-account-key.json';
|
|
|
164
223
|
|
|
165
224
|
<template>
|
|
166
225
|
<BlockSparkChatWidgetVue
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
:
|
|
171
|
-
|
|
226
|
+
dfProjectId="your-project-id"
|
|
227
|
+
dfLocation="us-central1"
|
|
228
|
+
dfAgentId="your-agent-id"
|
|
229
|
+
:serviceAccountKey="serviceAccountKey"
|
|
230
|
+
languageCode="en"
|
|
231
|
+
title="💬 BlockSpark AI Assistant"
|
|
232
|
+
subtitle="We're here to help"
|
|
233
|
+
welcomeTitle="👋 Welcome to Blockspark"
|
|
234
|
+
welcomeMessage="My name is BlockSpark AI Assistant and I'll guide you."
|
|
235
|
+
welcomeCta="💬 Click here to start chatting!"
|
|
236
|
+
:showWelcomePopup="true"
|
|
237
|
+
:welcomePopupDelay="1500"
|
|
238
|
+
fallbackWelcomeMessage="Hello! I'm BlockSpark AI Assistant. How can I help you today?"
|
|
239
|
+
inputPlaceholder="Type your message..."
|
|
240
|
+
emptyStateMessage="Hi! I'm BlockSpark AI Assistant. How can I help you today?"
|
|
241
|
+
:debug="false"
|
|
242
|
+
backendBaseUrl="http://localhost:8012"
|
|
243
|
+
backendWsUrl="ws://localhost:8012"
|
|
172
244
|
/>
|
|
173
245
|
</template>
|
|
174
246
|
```
|
|
175
247
|
|
|
176
|
-
Use **kebab-case** for props in templates (e.g. `df-project-id`, `service-account-key`). All props from the Props table below are supported.
|
|
177
|
-
|
|
178
248
|
### CDN (script tag, no build step)
|
|
179
249
|
|
|
180
250
|
You can load the widget from a CDN and mount it with React (the widget is a React component). Load React, ReactDOM, the widget CSS, and the widget script, then render into a container.
|
|
@@ -213,9 +283,21 @@ Replace `1.0.1` with the version you want (or use `latest` for the latest releas
|
|
|
213
283
|
dfLocation: 'us-central1',
|
|
214
284
|
dfAgentId: 'your-agent-id',
|
|
215
285
|
serviceAccountKey: { /* your service account key object */ },
|
|
286
|
+
// accessToken: 'your-token', // use instead of serviceAccountKey if you have a token
|
|
216
287
|
languageCode: 'en',
|
|
217
288
|
title: '💬 BlockSpark AI Assistant',
|
|
218
|
-
subtitle: "We're here to help"
|
|
289
|
+
subtitle: "We're here to help",
|
|
290
|
+
welcomeTitle: '👋 Welcome to Blockspark',
|
|
291
|
+
welcomeMessage: "My name is BlockSpark AI Assistant and I'll guide you.",
|
|
292
|
+
welcomeCta: '💬 Click here to start chatting!',
|
|
293
|
+
showWelcomePopup: true,
|
|
294
|
+
welcomePopupDelay: 1500,
|
|
295
|
+
fallbackWelcomeMessage: "Hello! I'm BlockSpark AI Assistant. How can I help you today?",
|
|
296
|
+
inputPlaceholder: 'Type your message...',
|
|
297
|
+
emptyStateMessage: "Hi! I'm BlockSpark AI Assistant. How can I help you today?",
|
|
298
|
+
debug: false,
|
|
299
|
+
backendBaseUrl: 'http://localhost:8012',
|
|
300
|
+
backendWsUrl: 'ws://localhost:8012'
|
|
219
301
|
};
|
|
220
302
|
|
|
221
303
|
if (ReactDOM.createRoot) {
|
|
@@ -257,6 +339,8 @@ The widget shows mode and connection status in the chat header.
|
|
|
257
339
|
|
|
258
340
|
## Props
|
|
259
341
|
|
|
342
|
+
All props use **camelCase** in every framework (React, Next.js, Vue, CDN).
|
|
343
|
+
|
|
260
344
|
| Prop | Type | Required | Default | Description |
|
|
261
345
|
|------|------|----------|---------|-------------|
|
|
262
346
|
| `dfProjectId` | `string` | Yes | - | Dialogflow project ID |
|