nivq-chat-widget 1.0.1 → 1.0.2
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 +40 -37
- package/dist/{VegaRenderer-lp_dbUCo.js → VegaRenderer-BBtSZNxE.js} +2 -10
- package/dist/{element-D4amUXLj.js → element-D3xRY4Za.js} +850 -793
- package/dist/nivq-chat.d.ts +62 -62
- package/dist/nivq-chat.js +1 -1
- package/docs/integration.md +73 -64
- package/package.json +33 -6
package/README.md
CHANGED
|
@@ -15,11 +15,11 @@ one tag and get the NivQ chat UI in a floating launcher (FAB) or inline panel.
|
|
|
15
15
|
Via CDN (jsDelivr) — no build step:
|
|
16
16
|
|
|
17
17
|
```html
|
|
18
|
-
<script
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
<script
|
|
19
|
+
type="module"
|
|
20
|
+
src="https://cdn.jsdelivr.net/npm/nivq-chat-widget@1/dist/nivq-chat.js"
|
|
21
|
+
></script>
|
|
22
|
+
<nivq-chat agent-id="YOUR_AGENT_ID" api-base-url="https://api.nivq.ai" token-endpoint="/nivq-token">
|
|
23
23
|
</nivq-chat>
|
|
24
24
|
```
|
|
25
25
|
|
|
@@ -28,8 +28,9 @@ Or via npm (bundlers / React / Angular):
|
|
|
28
28
|
```bash
|
|
29
29
|
npm i nivq-chat-widget
|
|
30
30
|
```
|
|
31
|
+
|
|
31
32
|
```ts
|
|
32
|
-
import
|
|
33
|
+
import "nivq-chat-widget"; // registers <nivq-chat>; ships its own types
|
|
33
34
|
```
|
|
34
35
|
|
|
35
36
|
Pin the major (`@1`) for automatic patches without breaking changes.
|
|
@@ -43,13 +44,13 @@ NivQ credentials for a token and returns only `{ access_token, expires_in }`:
|
|
|
43
44
|
```js
|
|
44
45
|
// POST /nivq-token (your backend) — authenticate YOUR user first, then:
|
|
45
46
|
const r = await fetch(`${process.env.NIVQ_API_BASE}/oauth2/token`, {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
method: "POST",
|
|
48
|
+
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
|
49
|
+
body: new URLSearchParams({
|
|
50
|
+
grant_type: "client_credentials",
|
|
51
|
+
client_id: process.env.NIVQ_CLIENT_ID,
|
|
52
|
+
client_secret: process.env.NIVQ_CLIENT_SECRET, // stays server-side
|
|
53
|
+
}),
|
|
53
54
|
});
|
|
54
55
|
const { access_token, expires_in } = await r.json();
|
|
55
56
|
res.json({ access_token, expires_in }); // never return the secret
|
|
@@ -65,34 +66,36 @@ privacy notes are in `docs/integration.md` (shipped in the package).
|
|
|
65
66
|
|
|
66
67
|
## Configuration
|
|
67
68
|
|
|
68
|
-
| Attribute
|
|
69
|
-
|
|
70
|
-
| `agent-id`
|
|
71
|
-
| `token-endpoint`
|
|
72
|
-
| `api-base-url`
|
|
73
|
-
| `mode`
|
|
74
|
-
| `target`
|
|
75
|
-
| `position`
|
|
76
|
-
| `theme`
|
|
77
|
-
| `locale`
|
|
78
|
-
| `primary-color`
|
|
79
|
-
| `accent-color`
|
|
80
|
-
| `radius`
|
|
81
|
-
| `logo-url`
|
|
82
|
-
| `brand-name`
|
|
83
|
-
| `launcher-label`
|
|
84
|
-
| `greeting`
|
|
85
|
-
| `placeholder`
|
|
86
|
-
| `title`
|
|
87
|
-
| `external-user-id` |
|
|
88
|
-
| `persist`
|
|
89
|
-
| `start-open`
|
|
69
|
+
| Attribute | Required | Default | Description |
|
|
70
|
+
| ------------------ | -------- | -------------- | -------------------------------------------------------- |
|
|
71
|
+
| `agent-id` | ✅ | — | The NivQ agent to chat with |
|
|
72
|
+
| `token-endpoint` | ✅ | — | Your token broker URL |
|
|
73
|
+
| `api-base-url` | ✅ | — | NivQ chat API base (e.g. `https://api.nivq.ai`) |
|
|
74
|
+
| `mode` | | `fab` | `fab` (floating launcher) or `inline` |
|
|
75
|
+
| `target` | | — | Inline only: CSS selector of the container to mount into |
|
|
76
|
+
| `position` | | `bottom-right` | `bottom-right` or `bottom-left` (FAB) |
|
|
77
|
+
| `theme` | | `auto` | `light`, `dark`, or `auto` (follows OS) |
|
|
78
|
+
| `locale` | | `auto` | `tr`, `en`, or `auto` (browser language) |
|
|
79
|
+
| `primary-color` | | NivQ red | Hex (`#6d28d9`) or HSL triplet (`265 70% 50%`) |
|
|
80
|
+
| `accent-color` | | NivQ | Hex or HSL triplet |
|
|
81
|
+
| `radius` | | `0.625rem` | Corner radius (any CSS length) |
|
|
82
|
+
| `logo-url` | | NivQ mark | Replace the brand logo |
|
|
83
|
+
| `brand-name` | | `NivQ` | Header title / logo alt text |
|
|
84
|
+
| `launcher-label` | | — | Text next to the FAB icon |
|
|
85
|
+
| `greeting` | | — | Custom empty-state heading |
|
|
86
|
+
| `placeholder` | | localized | Input placeholder text |
|
|
87
|
+
| `title` | | localized | Panel header title |
|
|
88
|
+
| `external-user-id` | | — | Distinguishes your end-user |
|
|
89
|
+
| `persist` | | `false` | Persist the conversation in `localStorage` |
|
|
90
|
+
| `start-open` | | `false` | FAB only: open the panel on load |
|
|
90
91
|
|
|
91
92
|
Programmatic config:
|
|
92
93
|
|
|
93
94
|
```js
|
|
94
|
-
document.querySelector(
|
|
95
|
-
|
|
95
|
+
document.querySelector("nivq-chat").configure({
|
|
96
|
+
primaryColor: "#6d28d9",
|
|
97
|
+
brandName: "Acme Assistant",
|
|
98
|
+
mode: "inline",
|
|
96
99
|
});
|
|
97
100
|
```
|
|
98
101
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { g as kg, R as ta, j as X7 } from "./element-
|
|
1
|
+
import { g as kg, R as ta, j as X7 } from "./element-D3xRY4Za.js";
|
|
2
2
|
var Dd = { exports: {} }, Td = { exports: {} }, Ie = {};
|
|
3
3
|
var pS;
|
|
4
4
|
function K7() {
|
|
@@ -40903,15 +40903,7 @@ function kme(e) {
|
|
|
40903
40903
|
}));
|
|
40904
40904
|
}
|
|
40905
40905
|
function g1e({ spec: e }) {
|
|
40906
|
-
return /* @__PURE__ */ X7.jsx(
|
|
40907
|
-
kme,
|
|
40908
|
-
{
|
|
40909
|
-
spec: e,
|
|
40910
|
-
actions: !1,
|
|
40911
|
-
renderer: "canvas",
|
|
40912
|
-
className: "w-full"
|
|
40913
|
-
}
|
|
40914
|
-
);
|
|
40906
|
+
return /* @__PURE__ */ X7.jsx(kme, { spec: e, actions: !1, renderer: "canvas", className: "w-full" });
|
|
40915
40907
|
}
|
|
40916
40908
|
export {
|
|
40917
40909
|
g1e as default
|