@bangdb/web-sdk 1.0.8 → 1.0.9
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 +191 -86
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @bangdb/web-sdk
|
|
2
2
|
|
|
3
|
-
A self-contained AI chat widget that mounts itself into any web page. Works as a plain `<script>` tag, an npm package, or inside a React, Angular app.
|
|
3
|
+
A self-contained AI chat widget that mounts itself into any web page. Works as a plain `<script>` tag, an npm package, or inside a React, Next.js, or Angular app.
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -9,7 +9,11 @@ A self-contained AI chat widget that mounts itself into any web page. Works as a
|
|
|
9
9
|
```bash
|
|
10
10
|
npm install @bangdb/web-sdk
|
|
11
11
|
# or
|
|
12
|
+
yarn add @bangdb/web-sdk
|
|
13
|
+
# or
|
|
12
14
|
pnpm add @bangdb/web-sdk
|
|
15
|
+
# or
|
|
16
|
+
bun add @bangdb/web-sdk
|
|
13
17
|
```
|
|
14
18
|
|
|
15
19
|
---
|
|
@@ -19,12 +23,15 @@ pnpm add @bangdb/web-sdk
|
|
|
19
23
|
### Script tag
|
|
20
24
|
|
|
21
25
|
```html
|
|
22
|
-
<script src="https://cdn.jsdelivr.net/@bangdb/web-sdk/dist/index.global.js"></script>
|
|
23
|
-
|
|
26
|
+
<script src="https://cdn.jsdelivr.net/npm/@bangdb/web-sdk@latest/dist/index.global.js"></script>
|
|
27
|
+
|
|
28
|
+
<script type="text/javascript">
|
|
24
29
|
window.BangdbChatWidget.init({
|
|
30
|
+
title: "Chat with AI",
|
|
25
31
|
config: {
|
|
26
32
|
apikey: "your-api-key",
|
|
27
|
-
|
|
33
|
+
backendURL: "https://your-bangdb-instance.com:18080",
|
|
34
|
+
resourceURL: "https://your-resource-service.com:18082",
|
|
28
35
|
userid: "user-123",
|
|
29
36
|
indexName: "my-index",
|
|
30
37
|
},
|
|
@@ -32,38 +39,84 @@ pnpm add @bangdb/web-sdk
|
|
|
32
39
|
</script>
|
|
33
40
|
```
|
|
34
41
|
|
|
35
|
-
###
|
|
42
|
+
### React
|
|
36
43
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
Create a new file at `src/components/Chat.tsx` and paste the snippet below.
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { useEffect, useRef } from "react";
|
|
48
|
+
import { type ChatWidgetOptions, ChatWidget } from "@bangdb/web-sdk";
|
|
49
|
+
|
|
50
|
+
export function Chat() {
|
|
51
|
+
const mountedRef = useRef(false);
|
|
52
|
+
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
if (mountedRef.current) return;
|
|
55
|
+
mountedRef.current = true;
|
|
56
|
+
|
|
57
|
+
new ChatWidget({
|
|
58
|
+
title: "Chat with AI",
|
|
59
|
+
config: {
|
|
60
|
+
apikey: "your-api-key",
|
|
61
|
+
backendURL: "https://your-bangdb-instance.com:18080",
|
|
62
|
+
resourceURL: "https://your-resource-service.com:18082",
|
|
63
|
+
userid: "user-123",
|
|
64
|
+
indexName: "my-index",
|
|
65
|
+
},
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
return () => {
|
|
69
|
+
document.getElementById("ai-chat-widget-root")?.remove();
|
|
70
|
+
mountedRef.current = false;
|
|
71
|
+
};
|
|
72
|
+
}, []);
|
|
73
|
+
|
|
74
|
+
return null; // widget mounts itself into document.body
|
|
75
|
+
}
|
|
48
76
|
```
|
|
49
77
|
|
|
50
|
-
|
|
78
|
+
Import and render the `Chat` component anywhere in your app, e.g. `App.tsx`:
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import { Chat } from "./components/Chat";
|
|
82
|
+
|
|
83
|
+
export default function App() {
|
|
84
|
+
return (
|
|
85
|
+
<main>
|
|
86
|
+
{/* Your existing UI */}
|
|
87
|
+
<Chat />
|
|
88
|
+
</main>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Next.js
|
|
94
|
+
|
|
95
|
+
Create a new file at `components/chat.tsx` and paste the snippet below.
|
|
51
96
|
|
|
52
97
|
```tsx
|
|
53
|
-
|
|
54
|
-
"use client"; // Next.js App Router only
|
|
98
|
+
"use client";
|
|
55
99
|
|
|
56
100
|
import { useEffect, useRef } from "react";
|
|
57
101
|
import { type ChatWidgetOptions, ChatWidget } from "@bangdb/web-sdk";
|
|
58
102
|
|
|
59
|
-
export
|
|
103
|
+
export function Chat() {
|
|
60
104
|
const mountedRef = useRef(false);
|
|
61
105
|
|
|
62
106
|
useEffect(() => {
|
|
63
107
|
if (mountedRef.current) return;
|
|
64
108
|
mountedRef.current = true;
|
|
65
109
|
|
|
66
|
-
new ChatWidget(
|
|
110
|
+
new ChatWidget({
|
|
111
|
+
title: "Chat with AI",
|
|
112
|
+
config: {
|
|
113
|
+
apikey: "your-api-key",
|
|
114
|
+
backendURL: "https://your-bangdb-instance.com:18080",
|
|
115
|
+
resourceURL: "https://your-resource-service.com:18082",
|
|
116
|
+
userid: "user-123",
|
|
117
|
+
indexName: "my-index",
|
|
118
|
+
},
|
|
119
|
+
});
|
|
67
120
|
|
|
68
121
|
return () => {
|
|
69
122
|
document.getElementById("ai-chat-widget-root")?.remove();
|
|
@@ -71,97 +124,149 @@ export default function Chat(props: ChatWidgetOptions) {
|
|
|
71
124
|
};
|
|
72
125
|
}, []);
|
|
73
126
|
|
|
74
|
-
return null;
|
|
127
|
+
return null;
|
|
75
128
|
}
|
|
76
129
|
```
|
|
77
130
|
|
|
131
|
+
Import the `Chat` component into a page, e.g. `app/page.tsx` (App Router):
|
|
132
|
+
|
|
78
133
|
```tsx
|
|
79
|
-
|
|
80
|
-
import Chat from "@/components/Chat";
|
|
134
|
+
import { Chat } from "@/components/chat";
|
|
81
135
|
|
|
82
|
-
export default function
|
|
136
|
+
export default function Page() {
|
|
83
137
|
return (
|
|
84
|
-
|
|
85
|
-
{
|
|
86
|
-
<Chat
|
|
87
|
-
|
|
88
|
-
apikey: process.env.NEXT_PUBLIC_BANGDB_API_KEY!,
|
|
89
|
-
baseURL: process.env.NEXT_PUBLIC_BANGDB_BASE_URL!,
|
|
90
|
-
userid: "user-123",
|
|
91
|
-
indexName: "my-index",
|
|
92
|
-
}}
|
|
93
|
-
/>
|
|
94
|
-
</>
|
|
138
|
+
<main>
|
|
139
|
+
{/* Your existing UI */}
|
|
140
|
+
<Chat />
|
|
141
|
+
</main>
|
|
95
142
|
);
|
|
96
143
|
}
|
|
97
144
|
```
|
|
98
145
|
|
|
146
|
+
### Angular
|
|
147
|
+
|
|
148
|
+
Create a new file at `src/app/chat-widget.component.ts` and paste the snippet below.
|
|
149
|
+
|
|
150
|
+
```ts
|
|
151
|
+
import {
|
|
152
|
+
Component,
|
|
153
|
+
AfterViewInit,
|
|
154
|
+
OnDestroy,
|
|
155
|
+
ViewChild,
|
|
156
|
+
ElementRef,
|
|
157
|
+
} from "@angular/core";
|
|
158
|
+
|
|
159
|
+
@Component({
|
|
160
|
+
selector: "app-chat-widget",
|
|
161
|
+
standalone: true,
|
|
162
|
+
template: `<div #chatContainer id="chat-container"></div>`,
|
|
163
|
+
})
|
|
164
|
+
export class ChatWidgetComponent implements AfterViewInit, OnDestroy {
|
|
165
|
+
@ViewChild("chatContainer", { static: true })
|
|
166
|
+
containerRef!: ElementRef<HTMLDivElement>;
|
|
167
|
+
|
|
168
|
+
private widget: any;
|
|
169
|
+
|
|
170
|
+
async ngAfterViewInit(): Promise<void> {
|
|
171
|
+
const { ChatWidget } = await import("@bangdb/web-sdk");
|
|
172
|
+
|
|
173
|
+
this.widget = new ChatWidget({
|
|
174
|
+
title: "Chat with AI",
|
|
175
|
+
config: {
|
|
176
|
+
apikey: "your-api-key",
|
|
177
|
+
backendURL: "https://your-bangdb-instance.com:18080",
|
|
178
|
+
resourceURL: "https://your-resource-service.com:18082",
|
|
179
|
+
userid: "user-123",
|
|
180
|
+
indexName: "my-index",
|
|
181
|
+
},
|
|
182
|
+
});
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
ngOnDestroy(): void {
|
|
186
|
+
this.widget?.destroy?.();
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
Add `ChatWidgetComponent` to your standalone component imports and render it:
|
|
192
|
+
|
|
193
|
+
```ts
|
|
194
|
+
import { Component } from "@angular/core";
|
|
195
|
+
import { ChatWidgetComponent } from "./chat-widget.component";
|
|
196
|
+
|
|
197
|
+
@Component({
|
|
198
|
+
selector: "app-root",
|
|
199
|
+
standalone: true,
|
|
200
|
+
imports: [ChatWidgetComponent],
|
|
201
|
+
template: `<app-chat-widget></app-chat-widget>`,
|
|
202
|
+
})
|
|
203
|
+
export class AppComponent {}
|
|
204
|
+
```
|
|
205
|
+
|
|
99
206
|
---
|
|
100
207
|
|
|
101
208
|
## Configuration
|
|
102
209
|
|
|
103
210
|
### `ChatWidgetOptions`
|
|
104
211
|
|
|
105
|
-
| Option | Type
|
|
106
|
-
|
|
107
|
-
| `config` | `ApiConfig`
|
|
108
|
-
| `
|
|
109
|
-
| `
|
|
212
|
+
| Option | Type | Required | Description |
|
|
213
|
+
|---------------|---------------|----------|--------------------------------------|
|
|
214
|
+
| `config` | `ApiConfig` | ✅ | API connection settings |
|
|
215
|
+
| `title` | `string` | ❌ | Chat header title |
|
|
216
|
+
| `logo` | `string` | ❌ | URL to logo image shown in the header |
|
|
217
|
+
| `colorTokens` | `ColorTokens` | ❌ | Override default theme colors |
|
|
110
218
|
|
|
111
219
|
### `ApiConfig`
|
|
112
220
|
|
|
113
|
-
| Option
|
|
114
|
-
|
|
115
|
-
| `apikey`
|
|
116
|
-
| `backendURL`
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
|
|
121
|
-
---
|
|
122
|
-
|
|
123
|
-
If you use KaTeX for math rendering, import its CSS in your app:
|
|
124
|
-
|
|
125
|
-
```ts
|
|
126
|
-
import "katex/dist/katex.min.css";
|
|
127
|
-
```
|
|
221
|
+
| Option | Type | Required | Description |
|
|
222
|
+
|---------------|----------|----------|------------------------------------------------|
|
|
223
|
+
| `apikey` | `string` | ✅ | BangDB API key |
|
|
224
|
+
| `backendURL` | `string` | ✅ | BangDB backend service URL |
|
|
225
|
+
| `resourceURL` | `string` | ✅ | BangDB resource service URL (for files/images) |
|
|
226
|
+
| `userid` | `string` | ✅ | BangDB user account ID |
|
|
227
|
+
| `indexName` | `string` | ✅ | Vector index to query against |
|
|
128
228
|
|
|
129
229
|
---
|
|
130
230
|
|
|
131
231
|
## Theming
|
|
132
232
|
|
|
133
|
-
Override any part of the default dark theme by passing `colorTokens
|
|
233
|
+
Override any part of the default dark theme by passing `colorTokens`. The defaults are:
|
|
134
234
|
|
|
135
235
|
```ts
|
|
136
|
-
|
|
137
|
-
config: { ... },
|
|
236
|
+
new ChatWidget({
|
|
237
|
+
config: { /* ... */ },
|
|
138
238
|
colorTokens: {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
"0 8px 32px color-mix(in oklab, oklch(0.611 0.1217 157.75) 40%, transparent)",
|
|
159
|
-
shadowInput:
|
|
160
|
-
"0 0 0 2px color-mix(in oklab, oklch(0.611 0.1217 157.75) 50%, transparent)",
|
|
239
|
+
background: "#1A1B1EFF",
|
|
240
|
+
foreground: "#F0F0F0FF",
|
|
241
|
+
card: "#222327FF",
|
|
242
|
+
cardForeground: "#F0F0F0FF",
|
|
243
|
+
primary: "#339966FF",
|
|
244
|
+
primaryForeground: "#EEEEEEFF",
|
|
245
|
+
secondary: "#2A2C33FF",
|
|
246
|
+
secondaryForeground: "#F0F0F0FF",
|
|
247
|
+
muted: "#2A2C33FF",
|
|
248
|
+
mutedForeground: "#A0A0A0FF",
|
|
249
|
+
accent: "#1E293BFF",
|
|
250
|
+
accentForeground: "#79C0FFFF",
|
|
251
|
+
border: "#33353AFF",
|
|
252
|
+
input: "#33353AFF",
|
|
253
|
+
ring: "#339966FF",
|
|
254
|
+
radius: "0.5rem",
|
|
255
|
+
shadowPanel: "0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06)",
|
|
256
|
+
shadowBubble: "0 8px 32px color-mix(in oklab, oklch(0.611 0.1217 157.75) 40%, transparent)",
|
|
257
|
+
shadowInput: "0 0 0 2px color-mix(in oklab, oklch(0.611 0.1217 157.75) 50%, transparent)",
|
|
161
258
|
},
|
|
162
259
|
});
|
|
163
260
|
```
|
|
164
261
|
|
|
262
|
+
If you use KaTeX for math rendering, import its CSS in your app:
|
|
263
|
+
|
|
264
|
+
```ts
|
|
265
|
+
import "katex/dist/katex.min.css";
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
---
|
|
269
|
+
|
|
165
270
|
## TypeScript Support
|
|
166
271
|
|
|
167
272
|
All types are exported from the package root:
|
|
@@ -191,9 +296,9 @@ The widget uses Shadow DOM (`mode: "open"`) for style isolation. It requires a m
|
|
|
191
296
|
|
|
192
297
|
The following are **not** bundled and must be provided by the consumer if used:
|
|
193
298
|
|
|
194
|
-
| Package
|
|
195
|
-
|
|
196
|
-
| `katex`
|
|
197
|
-
| `katex/dist/katex.min.css` | KaTeX styles (import in your app)
|
|
299
|
+
| Package | When needed |
|
|
300
|
+
|----------------------------|------------------------------------|
|
|
301
|
+
| `katex` | Math rendering in markdown |
|
|
302
|
+
| `katex/dist/katex.min.css` | KaTeX styles (import in your app) |
|
|
198
303
|
|
|
199
|
-
---
|
|
304
|
+
---
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bangdb/web-sdk",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A lightweight JavaScript SDK for seamlessly embedding BangDB’s AI-powered search and chat features into your web or internet applications.",
|
|
6
6
|
"publishConfig": {
|