tia-chatbot 1.0.0 โ 1.0.4
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 +88 -135
- package/dist/src/widget.d.ts +1 -0
- package/dist/tia-widget.iife.js +342 -0
- package/dist/tia-widget.iife.js.map +1 -0
- package/package.json +28 -35
- package/dist/index.d.ts +0 -1
- package/dist/tia-chatbot.css +0 -1
- package/dist/tia-chatbot.js +0 -17210
- package/dist/tia-chatbot.js.map +0 -1
- package/dist/tia-chatbot.umd.js +0 -364
- package/dist/tia-chatbot.umd.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,193 +1,146 @@
|
|
|
1
|
-
# TIA
|
|
1
|
+
# TIA Widget
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A reusable CDN widget for integrating the TIA chatbot into any website.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
[](https://opensource.org/licenses/MIT)
|
|
7
|
-
|
|
8
|
-
## โจ Features
|
|
9
|
-
|
|
10
|
-
- ๐ **Easy Integration** - Add to any website with NPM or CDN
|
|
11
|
-
- ๐ฌ **Real-time Chat** - Interactive messaging with AI assistant
|
|
12
|
-
- ๐จ **Modern UI** - Clean, responsive interface with smooth animations
|
|
13
|
-
- ๐ค **Voice Support** - Voice-to-text and text-to-speech capabilities
|
|
14
|
-
- ๐ฑ **Mobile Friendly** - Works seamlessly on all devices
|
|
15
|
-
- โก **Lightweight** - Optimized bundle size with tree-shaking support
|
|
16
|
-
- ๐ง **Customizable** - Easy to style and configure
|
|
17
|
-
- ๐ฆ **TypeScript** - Full TypeScript support with type definitions
|
|
18
|
-
|
|
19
|
-
## ๐ฆ Installation
|
|
5
|
+
## Installation
|
|
20
6
|
|
|
21
7
|
### Via NPM
|
|
22
8
|
|
|
23
9
|
```bash
|
|
24
|
-
npm install tia-
|
|
10
|
+
npm install tia-widget
|
|
25
11
|
```
|
|
26
12
|
|
|
27
13
|
### Via CDN
|
|
28
14
|
|
|
29
15
|
```html
|
|
30
|
-
|
|
31
|
-
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
32
|
-
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
33
|
-
|
|
34
|
-
<!-- TIA Chatbot Widget -->
|
|
35
|
-
<script src="https://unpkg.com/tia-chatbot@latest/dist/tia-chatbot.umd.js"></script>
|
|
36
|
-
<link rel="stylesheet" href="https://unpkg.com/tia-chatbot@latest/dist/style.css">
|
|
16
|
+
<script src="https://unpkg.com/tia-widget@latest/dist/tia-widget.iife.js"></script>
|
|
37
17
|
```
|
|
38
18
|
|
|
39
|
-
##
|
|
40
|
-
|
|
41
|
-
### NPM Usage (React/TypeScript)
|
|
42
|
-
|
|
43
|
-
```typescript
|
|
44
|
-
import { initTiaChatbot } from 'tia-chatbot';
|
|
45
|
-
import 'tia-chatbot/style.css';
|
|
19
|
+
## Usage
|
|
46
20
|
|
|
47
|
-
|
|
48
|
-
serverUrl: 'https://your-chainlit-server.com',
|
|
49
|
-
container: '#chatbot-container'
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
// Later, to remove the widget
|
|
53
|
-
widget.destroy();
|
|
54
|
-
```
|
|
21
|
+
### Automatic Initialization (CDN)
|
|
55
22
|
|
|
56
|
-
|
|
23
|
+
Add the script tag with data attributes for auto-initialization:
|
|
57
24
|
|
|
58
25
|
```html
|
|
59
26
|
<!DOCTYPE html>
|
|
60
27
|
<html>
|
|
61
28
|
<head>
|
|
62
|
-
<
|
|
29
|
+
<title>My Website</title>
|
|
30
|
+
<!-- Include React and ReactDOM for the widget -->
|
|
31
|
+
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
32
|
+
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
63
33
|
</head>
|
|
64
34
|
<body>
|
|
65
|
-
|
|
35
|
+
<!-- Your website content -->
|
|
36
|
+
|
|
37
|
+
<!-- TIA Widget Script -->
|
|
38
|
+
<script
|
|
39
|
+
src="https://unpkg.com/tia-widget@latest/dist/tia-widget.iife.js"
|
|
40
|
+
data-auto-init
|
|
41
|
+
data-api-url="https://your-api-endpoint.com"
|
|
42
|
+
data-container-id="custom-widget-container">
|
|
43
|
+
</script>
|
|
44
|
+
</body>
|
|
45
|
+
</html>
|
|
46
|
+
```
|
|
66
47
|
|
|
48
|
+
### Manual Initialization
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<!DOCTYPE html>
|
|
52
|
+
<html>
|
|
53
|
+
<head>
|
|
54
|
+
<title>My Website</title>
|
|
55
|
+
<!-- Include React and ReactDOM -->
|
|
67
56
|
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
68
57
|
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
69
|
-
|
|
58
|
+
</head>
|
|
59
|
+
<body>
|
|
60
|
+
<!-- Your website content -->
|
|
61
|
+
<div id="my-widget"></div>
|
|
70
62
|
|
|
63
|
+
<!-- TIA Widget Script -->
|
|
64
|
+
<script src="https://unpkg.com/tia-widget@latest/dist/tia-widget.iife.js"></script>
|
|
71
65
|
<script>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
66
|
+
// Initialize the widget manually
|
|
67
|
+
const widget = window.TIAWidget.init({
|
|
68
|
+
apiUrl: 'https://your-api-endpoint.com',
|
|
69
|
+
containerId: 'my-widget',
|
|
70
|
+
onError: (error) => {
|
|
71
|
+
console.error('TIA Widget Error:', error);
|
|
72
|
+
}
|
|
75
73
|
});
|
|
74
|
+
|
|
75
|
+
// Optional: Unmount the widget later
|
|
76
|
+
// widget.unmount();
|
|
76
77
|
</script>
|
|
77
78
|
</body>
|
|
78
79
|
</html>
|
|
79
80
|
```
|
|
80
81
|
|
|
81
|
-
|
|
82
|
+
### Programmatic Usage (NPM)
|
|
82
83
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
- Framework integration (React, Vue, Angular, Next.js)
|
|
86
|
-
- Styling and customization
|
|
87
|
-
- API reference
|
|
88
|
-
- Troubleshooting
|
|
84
|
+
```javascript
|
|
85
|
+
import { initTIAWidget } from 'tia-widget';
|
|
89
86
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
// Initialize the widget
|
|
88
|
+
const widget = initTIAWidget({
|
|
89
|
+
apiUrl: 'https://your-api-endpoint.com',
|
|
90
|
+
containerId: 'my-widget',
|
|
91
|
+
onError: (error) => {
|
|
92
|
+
console.error('Widget error:', error);
|
|
93
|
+
}
|
|
94
|
+
});
|
|
93
95
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
serverUrl: string; // Your Chainlit server URL (required)
|
|
97
|
-
container?: string | HTMLElement; // Container element (default: '#tia-chatbot-root')
|
|
98
|
-
}
|
|
96
|
+
// Later, unmount if needed
|
|
97
|
+
widget.unmount();
|
|
99
98
|
```
|
|
100
99
|
|
|
101
|
-
##
|
|
100
|
+
## Configuration Options
|
|
102
101
|
|
|
103
|
-
|
|
102
|
+
| Option | Type | Default | Description |
|
|
103
|
+
|--------|------|---------|-------------|
|
|
104
|
+
| `apiUrl` | `string` | `window.origin + routerBasename` | The API endpoint URL for the TIA chatbot |
|
|
105
|
+
| `containerId` | `string` | `'tia-widget-root'` | The ID of the DOM element where the widget will be mounted |
|
|
106
|
+
| `onError` | `function` | `console.error` | Error handler function |
|
|
104
107
|
|
|
105
|
-
|
|
106
|
-
:root {
|
|
107
|
-
--tia-primary-color: #f56057;
|
|
108
|
-
--tia-secondary-color: #283068;
|
|
109
|
-
}
|
|
108
|
+
## Data Attributes (for CDN auto-init)
|
|
110
109
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
right: 20px;
|
|
115
|
-
}
|
|
116
|
-
```
|
|
110
|
+
- `data-auto-init`: Enables automatic initialization
|
|
111
|
+
- `data-api-url`: Sets the API URL
|
|
112
|
+
- `data-container-id`: Sets the container element ID
|
|
117
113
|
|
|
118
|
-
##
|
|
114
|
+
## Publishing to NPM
|
|
119
115
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
116
|
+
```bash
|
|
117
|
+
npm run build:cdn
|
|
118
|
+
npm publish
|
|
119
|
+
```
|
|
123
120
|
|
|
124
|
-
|
|
121
|
+
## Development
|
|
125
122
|
|
|
126
123
|
```bash
|
|
127
124
|
# Install dependencies
|
|
128
|
-
|
|
125
|
+
pnpm install
|
|
129
126
|
|
|
130
127
|
# Start development server
|
|
131
|
-
|
|
128
|
+
pnpm run dev
|
|
132
129
|
|
|
133
130
|
# Build for production
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
# Preview production build
|
|
137
|
-
npm run preview
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
### Project Structure
|
|
141
|
-
|
|
142
|
-
```
|
|
143
|
-
src/
|
|
144
|
-
โโโ components/ # React components
|
|
145
|
-
โ โโโ ChatPopup.tsx # Main chat interface
|
|
146
|
-
โ โโโ ...
|
|
147
|
-
โโโ state/ # Recoil state management
|
|
148
|
-
โโโ lib/ # Utility functions
|
|
149
|
-
โโโ index.tsx # Widget entry point
|
|
150
|
-
โโโ App.tsx # Main app component
|
|
151
|
-
โโโ index.css # Global styles
|
|
152
|
-
```
|
|
131
|
+
pnpm run build
|
|
153
132
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
### Peer Dependencies
|
|
157
|
-
- `react` >= 18.3.1
|
|
158
|
-
- `react-dom` >= 18.3.1
|
|
159
|
-
|
|
160
|
-
### Browser Support
|
|
161
|
-
- Chrome (latest)
|
|
162
|
-
- Firefox (latest)
|
|
163
|
-
- Safari (latest)
|
|
164
|
-
- Edge (latest)
|
|
165
|
-
|
|
166
|
-
## ๐งช Testing
|
|
167
|
-
|
|
168
|
-
Open `example.html` in a browser after building to test the UMD build:
|
|
169
|
-
|
|
170
|
-
```bash
|
|
171
|
-
npm run build
|
|
172
|
-
# Open example.html in your browser
|
|
133
|
+
# Build for CDN
|
|
134
|
+
pnpm run build:cdn
|
|
173
135
|
```
|
|
174
136
|
|
|
175
|
-
##
|
|
176
|
-
|
|
177
|
-
MIT License - see [LICENSE](./LICENSE) for details
|
|
178
|
-
|
|
179
|
-
## ๐ค Contributing
|
|
180
|
-
|
|
181
|
-
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
182
|
-
|
|
183
|
-
## ๐ Issues
|
|
184
|
-
|
|
185
|
-
Found a bug or have a feature request? Please open an issue on GitHub.
|
|
137
|
+
## Requirements
|
|
186
138
|
|
|
187
|
-
|
|
139
|
+
- React 18+
|
|
140
|
+
- React DOM 18+
|
|
188
141
|
|
|
189
|
-
|
|
142
|
+
The widget bundles React and other dependencies, but for CDN usage, you need to include React and ReactDOM scripts separately.
|
|
190
143
|
|
|
191
|
-
|
|
144
|
+
## License
|
|
192
145
|
|
|
193
|
-
|
|
146
|
+
MIT
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|