keyring-chatbot-agent-sdk-test 0.0.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 +151 -0
- package/dist/chat-widget-wc.es.js +32722 -0
- package/dist/chat-widget-wc.umd.js +273 -0
- package/dist/chat-widget.es.js +3648 -0
- package/dist/chat-widget.umd.js +31 -0
- package/dist/lib.d.ts +57 -0
- package/dist/vite.svg +1 -0
- package/package.json +94 -0
package/README.md
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
# Chat Widget SDK
|
|
2
|
+
|
|
3
|
+
Một SDK UI React.js để tích hợp chat widget vào ứng dụng web. SDK hiển thị nút chat icon ở góc phải màn hình và mở modal chat khi được nhấn.
|
|
4
|
+
|
|
5
|
+
## Tính năng
|
|
6
|
+
|
|
7
|
+
- ✨ Nút chat icon nổi (floating button) ở góc phải màn hình
|
|
8
|
+
- 💬 Modal chat với giao diện đẹp mắt
|
|
9
|
+
- 🎨 Gradient màu hiện đại
|
|
10
|
+
- 📱 Responsive design
|
|
11
|
+
- ⚡ Build với Vite để tối ưu hiệu suất
|
|
12
|
+
- 🔧 TypeScript support
|
|
13
|
+
- 🎯 Dễ dàng tích hợp
|
|
14
|
+
|
|
15
|
+
## Cài đặt
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install chat-widget-sdk
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
hoặc
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
yarn add chat-widget-sdk
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Sử dụng
|
|
28
|
+
|
|
29
|
+
### Cơ bản
|
|
30
|
+
|
|
31
|
+
Import component và CSS vào ứng dụng React của bạn:
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import { ChatWidget } from 'chat-widget-sdk';
|
|
35
|
+
import 'chat-widget-sdk/dist/chat-widget-sdk.css';
|
|
36
|
+
|
|
37
|
+
function App() {
|
|
38
|
+
return (
|
|
39
|
+
<div>
|
|
40
|
+
<h1>My Application</h1>
|
|
41
|
+
{/* Nội dung ứng dụng của bạn */}
|
|
42
|
+
|
|
43
|
+
<ChatWidget />
|
|
44
|
+
</div>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export default App;
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Props
|
|
52
|
+
|
|
53
|
+
Component `ChatWidget` chấp nhận các props sau:
|
|
54
|
+
|
|
55
|
+
| Prop | Type | Default | Mô tả |
|
|
56
|
+
|------|------|---------|-------|
|
|
57
|
+
| position | `'bottom-right'` \| `'bottom-left'` | `'bottom-right'` | Vị trí của chat button |
|
|
58
|
+
|
|
59
|
+
## Development
|
|
60
|
+
|
|
61
|
+
### Clone repository
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
git clone <repository-url>
|
|
65
|
+
cd keying-agent
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Cài đặt dependencies
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
npm install
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Build library
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
npm run build
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Build sẽ tạo ra các file sau trong thư mục `dist/`:
|
|
81
|
+
- `chat-widget.es.js` - ES module
|
|
82
|
+
- `chat-widget.umd.js` - UMD module
|
|
83
|
+
- `chat-widget-sdk.css` - CSS styles
|
|
84
|
+
|
|
85
|
+
### Development mode
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
npm run dev
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Cấu trúc project
|
|
92
|
+
|
|
93
|
+
```
|
|
94
|
+
src/
|
|
95
|
+
├── components/
|
|
96
|
+
│ ├── ChatButton.tsx # Component nút chat
|
|
97
|
+
│ ├── ChatButton.css # Styles cho nút chat
|
|
98
|
+
│ ├── ChatModal.tsx # Component modal chat
|
|
99
|
+
│ ├── ChatModal.css # Styles cho modal
|
|
100
|
+
│ └── ChatWidget.tsx # Component chính
|
|
101
|
+
└── lib.tsx # Entry point của library
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Build Configuration
|
|
105
|
+
|
|
106
|
+
Project sử dụng Vite ở library mode với cấu hình sau:
|
|
107
|
+
|
|
108
|
+
- **Entry point**: `src/lib.tsx`
|
|
109
|
+
- **Output formats**: ES module và UMD
|
|
110
|
+
- **External dependencies**: React và React-DOM (peer dependencies)
|
|
111
|
+
- **TypeScript**: Full type support
|
|
112
|
+
|
|
113
|
+
## Package.json Configuration
|
|
114
|
+
|
|
115
|
+
```json
|
|
116
|
+
{
|
|
117
|
+
"name": "chat-widget-sdk",
|
|
118
|
+
"version": "1.0.0",
|
|
119
|
+
"main": "./dist/chat-widget.umd.js",
|
|
120
|
+
"module": "./dist/chat-widget.es.js",
|
|
121
|
+
"types": "./dist/lib.d.ts",
|
|
122
|
+
"exports": {
|
|
123
|
+
".": {
|
|
124
|
+
"types": "./dist/lib.d.ts",
|
|
125
|
+
"import": "./dist/chat-widget.es.js",
|
|
126
|
+
"require": "./dist/chat-widget.umd.js"
|
|
127
|
+
},
|
|
128
|
+
"./dist/style.css": "./dist/chat-widget-sdk.css"
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Publish lên NPM
|
|
134
|
+
|
|
135
|
+
1. Đăng nhập NPM:
|
|
136
|
+
```bash
|
|
137
|
+
npm login
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
2. Publish package:
|
|
141
|
+
```bash
|
|
142
|
+
npm publish
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## License
|
|
146
|
+
|
|
147
|
+
MIT
|
|
148
|
+
|
|
149
|
+
## Author
|
|
150
|
+
|
|
151
|
+
Duc Pham
|