copilot-chat-widget 0.1.6 → 0.1.8
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 +68 -78
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,35 +1,31 @@
|
|
|
1
|
-
# Copilot Chat Widget (NPM)
|
|
2
|
-
|
|
3
|
-
Widget chat Copilot
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
```jsx
|
|
30
|
-
import { useEffect } from "react";
|
|
31
|
-
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
32
|
-
|
|
1
|
+
# Copilot Chat Widget (NPM)
|
|
2
|
+
|
|
3
|
+
Widget chat Copilot có thể nhúng theo hai cách:
|
|
4
|
+
1. Qua NPM (khuyến nghị cho SPA/Next.js/React/Vue).
|
|
5
|
+
2. Qua thẻ `<script>` (tương thích ngược, không cần build).
|
|
6
|
+
|
|
7
|
+
## Cài đặt
|
|
8
|
+
```bash
|
|
9
|
+
npm install copilot-chat-widget
|
|
10
|
+
# hoặc
|
|
11
|
+
yarn add copilot-chat-widget
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Sử dụng với NPM (import)
|
|
15
|
+
```js
|
|
16
|
+
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
17
|
+
|
|
18
|
+
loadCopilotChatWidget({ token: "YOUR_WIDGET_TOKEN" });
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Hàm này sẽ gắn script `chat-widget.min.js` (IIFE) vào trang, đọc `token` từ options (hoặc `window.CopilotChatConfig` nếu bạn set trước).
|
|
22
|
+
- Nếu backend widget không cùng origin với web hiện tại, truyền thêm `baseUrl: "https://your-backend-domain"` để gọi đúng API. Nếu không truyền, widget sẽ dùng giá trị build-time `WIDGET_BASE_URL`, sau đó mới fallback sang origin của script/trang.
|
|
23
|
+
|
|
24
|
+
### React/Next.js
|
|
25
|
+
```jsx
|
|
26
|
+
import { useEffect } from "react";
|
|
27
|
+
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
28
|
+
|
|
33
29
|
export default function Page() {
|
|
34
30
|
useEffect(() => {
|
|
35
31
|
loadCopilotChatWidget({
|
|
@@ -37,49 +33,43 @@ export default function Page() {
|
|
|
37
33
|
baseUrl: process.env.NEXT_PUBLIC_WIDGET_BASE_URL // nếu backend khác origin; nếu không, sẽ dùng giá trị build-time hoặc origin hiện tại
|
|
38
34
|
});
|
|
39
35
|
}, []);
|
|
40
|
-
|
|
41
|
-
return <main>Your page content</main>;
|
|
42
|
-
}
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
##
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
data-
|
|
51
|
-
></script>
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
- `data-
|
|
55
|
-
- `data-
|
|
56
|
-
|
|
57
|
-
## API
|
|
58
|
-
|
|
59
|
-
- `
|
|
60
|
-
- `
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
window.CopilotChat.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
```bash
|
|
82
|
-
npm publish --access public
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
Neu muon doi ten package cho phu hop scope cong ty, sua truong `name` trong `webui/widget/package.json` truoc khi publish.
|
|
36
|
+
|
|
37
|
+
return <main>Your page content</main>;
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Sử dụng qua thẻ `<script>` (giữ hành vi cũ)
|
|
42
|
+
```html
|
|
43
|
+
<script
|
|
44
|
+
src="https://cdn.example.com/chat-widget.min.js"
|
|
45
|
+
data-token="YOUR_WIDGET_TOKEN"
|
|
46
|
+
data-base-url="https://your-backend-domain" <!-- tùy chọn nếu khác origin -->
|
|
47
|
+
></script>
|
|
48
|
+
```
|
|
49
|
+
- `data-token`: bắt buộc.
|
|
50
|
+
- `data-autoload="false"`: nếu muốn chèn script nhưng tự gọi `window.CopilotChat.init()` sau.
|
|
51
|
+
- `data-base-url`: override host backend nếu khác origin hoặc bạn không build sẵn `WIDGET_BASE_URL`.
|
|
52
|
+
|
|
53
|
+
## API cấu hình
|
|
54
|
+
- `token` (string, bắt buộc): mã token widget.
|
|
55
|
+
- `autoload` (boolean): đặt `false` nếu muốn tự gọi `window.CopilotChat.load()`.
|
|
56
|
+
- `baseUrl` (string): host/backend cung cấp API `/api/chat-widget/config`. Cần khi web embed khác origin; nếu không truyền sẽ dùng `WIDGET_BASE_URL` build-time rồi fallback origin.
|
|
57
|
+
|
|
58
|
+
Khi script đã load, có thể gọi:
|
|
59
|
+
```js
|
|
60
|
+
window.CopilotChat.open(); // mở widget
|
|
61
|
+
window.CopilotChat.close(); // đóng widget
|
|
62
|
+
window.CopilotChat.load(); // khởi tạo lại nếu autoload=false
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Build và publish package
|
|
66
|
+
```bash
|
|
67
|
+
cd webui/widget
|
|
68
|
+
npm install
|
|
69
|
+
WIDGET_BASE_URL=https://your-backend-domain npm run build # gắn default baseUrl vào bundle
|
|
70
|
+
```
|
|
71
|
+
Sau khi kiểm tra output trong `webui/widget/dist`, có thể publish lên NPM:
|
|
72
|
+
```bash
|
|
73
|
+
npm publish --access public
|
|
74
|
+
```
|
|
75
|
+
Nếu muốn đổi tên package cho phù hợp scope công ty, sửa trường `name` trong `webui/widget/package.json` trước khi publish.
|