nerdagent-chat-widget-angular 1.0.6 → 1.0.7
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 +193 -47
- package/dist/README.md +193 -47
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,121 +1,267 @@
|
|
|
1
|
-
#
|
|
1
|
+
# NerdAgent Chat Widget for Angular
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A powerful, customizable chat widget component for Angular applications. Built with Stencil.js for maximum compatibility and performance.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🚀 **Framework Agnostic Core** - Built with Stencil.js Web Components
|
|
8
|
+
- 🎨 **Highly Customizable** - Colors, positioning, features, and more
|
|
9
|
+
- 📱 **Responsive Design** - Works on desktop and mobile
|
|
10
|
+
- 🔧 **TypeScript Support** - Full type definitions included
|
|
11
|
+
- ⚡ **Lightweight** - Minimal bundle size impact
|
|
12
|
+
- 🎯 **Easy Integration** - Simple Angular component wrapper
|
|
4
13
|
|
|
5
14
|
## Installation
|
|
6
15
|
|
|
7
16
|
```bash
|
|
8
|
-
npm install
|
|
17
|
+
npm install nerdagent-chat-widget-angular
|
|
9
18
|
```
|
|
10
19
|
|
|
11
|
-
##
|
|
20
|
+
## Quick Start
|
|
12
21
|
|
|
13
22
|
### 1. Import the Module
|
|
14
23
|
|
|
15
24
|
```typescript
|
|
16
25
|
import { NgModule } from '@angular/core';
|
|
17
26
|
import { BrowserModule } from '@angular/platform-browser';
|
|
18
|
-
import { NerdChatWidgetModule } from '
|
|
19
|
-
|
|
20
|
-
import { AppComponent } from './app.component';
|
|
27
|
+
import { NerdChatWidgetModule } from 'nerdagent-chat-widget-angular';
|
|
21
28
|
|
|
22
29
|
@NgModule({
|
|
23
|
-
declarations: [
|
|
24
|
-
AppComponent
|
|
25
|
-
],
|
|
26
30
|
imports: [
|
|
27
31
|
BrowserModule,
|
|
28
32
|
NerdChatWidgetModule
|
|
29
33
|
],
|
|
30
|
-
|
|
31
|
-
bootstrap: [AppComponent]
|
|
34
|
+
// ... rest of your module
|
|
32
35
|
})
|
|
33
36
|
export class AppModule { }
|
|
34
37
|
```
|
|
35
38
|
|
|
36
|
-
### 2. Use
|
|
39
|
+
### 2. Use the Component
|
|
37
40
|
|
|
38
41
|
```html
|
|
39
42
|
<nerd-chat-widget
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
position="bottom-right"
|
|
46
|
-
[width]="350"
|
|
47
|
-
[height]="500"
|
|
48
|
-
[
|
|
49
|
-
[
|
|
50
|
-
[
|
|
51
|
-
[
|
|
52
|
-
[
|
|
43
|
+
[agent-name]="'Support Agent'"
|
|
44
|
+
[agent-role]="'Customer Support'"
|
|
45
|
+
[primary-color]="'#2d3e50'"
|
|
46
|
+
[accent-color]="'#4e8cff'"
|
|
47
|
+
[welcome-message]="'Hi! How can I help you today?'"
|
|
48
|
+
[position]="'bottom-right'"
|
|
49
|
+
[width]="'350'"
|
|
50
|
+
[height]="'500'"
|
|
51
|
+
[show-minimize-button]="true"
|
|
52
|
+
[show-timestamps]="true"
|
|
53
|
+
[enable-file-upload]="false"
|
|
54
|
+
[enable-speech]="false"
|
|
55
|
+
[show-powered-by]="true"
|
|
53
56
|
(messageSent)="onMessageSent($event)"
|
|
54
57
|
(widgetOpened)="onWidgetOpened()"
|
|
55
58
|
(widgetClosed)="onWidgetClosed()">
|
|
56
59
|
</nerd-chat-widget>
|
|
57
60
|
```
|
|
58
61
|
|
|
59
|
-
### 3. Handle Events
|
|
62
|
+
### 3. Handle Events
|
|
60
63
|
|
|
61
64
|
```typescript
|
|
62
65
|
import { Component } from '@angular/core';
|
|
63
66
|
|
|
64
67
|
@Component({
|
|
65
68
|
selector: 'app-root',
|
|
66
|
-
|
|
69
|
+
template: `
|
|
70
|
+
<nerd-chat-widget
|
|
71
|
+
[agent-name]="config.agentName"
|
|
72
|
+
[agent-role]="config.agentRole"
|
|
73
|
+
[primary-color]="config.primaryColor"
|
|
74
|
+
[accent-color]="config.accentColor"
|
|
75
|
+
[welcome-message]="config.welcomeMessage"
|
|
76
|
+
[position]="config.position"
|
|
77
|
+
[width]="config.width"
|
|
78
|
+
[height]="config.height"
|
|
79
|
+
[show-minimize-button]="config.showMinimizeButton"
|
|
80
|
+
[show-timestamps]="config.showTimestamps"
|
|
81
|
+
[enable-file-upload]="config.enableFileUpload"
|
|
82
|
+
[enable-speech]="config.enableSpeech"
|
|
83
|
+
[show-powered-by]="config.showPoweredBy"
|
|
84
|
+
(messageSent)="onMessageSent($event)"
|
|
85
|
+
(widgetOpened)="onWidgetOpened()"
|
|
86
|
+
(widgetClosed)="onWidgetClosed()">
|
|
87
|
+
</nerd-chat-widget>
|
|
88
|
+
`
|
|
67
89
|
})
|
|
68
90
|
export class AppComponent {
|
|
69
|
-
|
|
91
|
+
config = {
|
|
92
|
+
agentName: 'Support Agent',
|
|
93
|
+
agentRole: 'Customer Support',
|
|
94
|
+
primaryColor: '#2d3e50',
|
|
95
|
+
accentColor: '#4e8cff',
|
|
96
|
+
welcomeMessage: 'Hi! How can I help you today?',
|
|
97
|
+
placeholderText: 'Type your message...',
|
|
98
|
+
position: 'bottom-right' as 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left',
|
|
99
|
+
width: '350',
|
|
100
|
+
height: '500',
|
|
101
|
+
showMinimizeButton: true,
|
|
102
|
+
showTimestamps: true,
|
|
103
|
+
enableFileUpload: false,
|
|
104
|
+
enableSpeech: false,
|
|
105
|
+
showPoweredBy: true
|
|
106
|
+
};
|
|
107
|
+
|
|
70
108
|
onMessageSent(event: { message: string; timestamp: Date }) {
|
|
71
109
|
console.log('Message sent:', event);
|
|
110
|
+
// Handle message sent event
|
|
72
111
|
}
|
|
73
112
|
|
|
74
113
|
onWidgetOpened() {
|
|
75
114
|
console.log('Widget opened');
|
|
115
|
+
// Handle widget opened event
|
|
76
116
|
}
|
|
77
117
|
|
|
78
118
|
onWidgetClosed() {
|
|
79
119
|
console.log('Widget closed');
|
|
120
|
+
// Handle widget closed event
|
|
80
121
|
}
|
|
81
122
|
}
|
|
82
123
|
```
|
|
83
124
|
|
|
84
|
-
##
|
|
125
|
+
## Configuration Options
|
|
85
126
|
|
|
86
|
-
### Properties
|
|
127
|
+
### Input Properties
|
|
87
128
|
|
|
88
129
|
| Property | Type | Default | Description |
|
|
89
130
|
|----------|------|---------|-------------|
|
|
90
|
-
| `agentName` | `string` | `'Support Agent'` | Name of the
|
|
131
|
+
| `agentName` | `string` | `'Support Agent'` | Name of the support agent |
|
|
91
132
|
| `agentRole` | `string` | `'Customer Support'` | Role/title of the agent |
|
|
92
|
-
| `primaryColor` | `string` | `'#2d3e50'` | Primary theme
|
|
93
|
-
| `accentColor` | `string` | `'#4e8cff'` | Accent color
|
|
94
|
-
| `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial message
|
|
133
|
+
| `primaryColor` | `string` | `'#2d3e50'` | Primary color theme |
|
|
134
|
+
| `accentColor` | `string` | `'#4e8cff'` | Accent color theme |
|
|
135
|
+
| `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial welcome message |
|
|
95
136
|
| `placeholderText` | `string` | `'Type your message...'` | Input placeholder text |
|
|
96
|
-
| `position` | `WidgetPosition` | `'bottom-right'` | Widget position |
|
|
137
|
+
| `position` | `WidgetPosition` | `'bottom-right'` | Widget position on screen |
|
|
97
138
|
| `width` | `string` | `'350'` | Widget width in pixels |
|
|
98
139
|
| `height` | `string` | `'500'` | Widget height in pixels |
|
|
99
|
-
| `showMinimizeButton` | `boolean` | `true` | Show
|
|
100
|
-
| `showTimestamps` | `boolean` | `true` | Show
|
|
140
|
+
| `showMinimizeButton` | `boolean` | `true` | Show minimize/maximize button |
|
|
141
|
+
| `showTimestamps` | `boolean` | `true` | Show message timestamps |
|
|
101
142
|
| `enableFileUpload` | `boolean` | `false` | Enable file upload feature |
|
|
102
|
-
| `enableSpeech` | `boolean` | `false` | Enable speech
|
|
103
|
-
| `showPoweredBy` | `boolean` | `true` | Show
|
|
143
|
+
| `enableSpeech` | `boolean` | `false` | Enable speech recognition |
|
|
144
|
+
| `showPoweredBy` | `boolean` | `true` | Show "Powered by" branding |
|
|
104
145
|
|
|
105
|
-
###
|
|
146
|
+
### WidgetPosition Type
|
|
147
|
+
|
|
148
|
+
```typescript
|
|
149
|
+
type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### Output Events
|
|
106
153
|
|
|
107
154
|
| Event | Type | Description |
|
|
108
155
|
|-------|------|-------------|
|
|
109
|
-
| `messageSent` | `{ message: string; timestamp: Date }` |
|
|
110
|
-
| `widgetOpened` | `void` |
|
|
111
|
-
| `widgetClosed` | `void` |
|
|
156
|
+
| `messageSent` | `{ message: string; timestamp: Date }` | Fired when user sends a message |
|
|
157
|
+
| `widgetOpened` | `void` | Fired when widget is opened |
|
|
158
|
+
| `widgetClosed` | `void` | Fired when widget is closed |
|
|
159
|
+
|
|
160
|
+
## Advanced Usage
|
|
112
161
|
|
|
113
|
-
###
|
|
162
|
+
### Dynamic Configuration
|
|
114
163
|
|
|
115
164
|
```typescript
|
|
116
|
-
|
|
165
|
+
export class AppComponent {
|
|
166
|
+
config = {
|
|
167
|
+
agentName: 'AI Assistant',
|
|
168
|
+
agentRole: 'Virtual Support',
|
|
169
|
+
primaryColor: '#007bff',
|
|
170
|
+
accentColor: '#28a745',
|
|
171
|
+
welcomeMessage: 'Hello! I\'m here to help.',
|
|
172
|
+
position: 'bottom-left' as WidgetPosition,
|
|
173
|
+
width: '400',
|
|
174
|
+
height: '600',
|
|
175
|
+
showMinimizeButton: true,
|
|
176
|
+
showTimestamps: true,
|
|
177
|
+
enableFileUpload: true,
|
|
178
|
+
enableSpeech: true,
|
|
179
|
+
showPoweredBy: false
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
updateConfig() {
|
|
183
|
+
// Update configuration dynamically
|
|
184
|
+
this.config.primaryColor = '#ff6b6b';
|
|
185
|
+
this.config.position = 'top-right';
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### Custom Styling
|
|
191
|
+
|
|
192
|
+
The widget uses CSS custom properties for theming. You can override these in your global styles:
|
|
193
|
+
|
|
194
|
+
```css
|
|
195
|
+
:root {
|
|
196
|
+
--primary-color: #your-color;
|
|
197
|
+
--accent-color: #your-accent;
|
|
198
|
+
--widget-width: 400px;
|
|
199
|
+
--widget-height: 600px;
|
|
200
|
+
--font-family: 'Your Font', sans-serif;
|
|
201
|
+
}
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
## Browser Support
|
|
205
|
+
|
|
206
|
+
- Chrome 60+
|
|
207
|
+
- Firefox 55+
|
|
208
|
+
- Safari 10+
|
|
209
|
+
- Edge 79+
|
|
210
|
+
|
|
211
|
+
## TypeScript Support
|
|
212
|
+
|
|
213
|
+
Full TypeScript definitions are included. Import types as needed:
|
|
214
|
+
|
|
215
|
+
```typescript
|
|
216
|
+
import { WidgetPosition } from 'nerdagent-chat-widget-angular';
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## Troubleshooting
|
|
220
|
+
|
|
221
|
+
### Common Issues
|
|
222
|
+
|
|
223
|
+
1. **Widget not appearing**: Ensure the module is imported in your app module
|
|
224
|
+
2. **Styling issues**: Check that FontAwesome is loaded for icons
|
|
225
|
+
3. **Events not firing**: Verify event handlers are properly bound
|
|
226
|
+
|
|
227
|
+
### Debug Mode
|
|
228
|
+
|
|
229
|
+
Enable debug logging by setting the browser's localStorage:
|
|
230
|
+
|
|
231
|
+
```javascript
|
|
232
|
+
localStorage.setItem('nerdagent-chat-widget-debug', 'true');
|
|
117
233
|
```
|
|
118
234
|
|
|
235
|
+
## Contributing
|
|
236
|
+
|
|
237
|
+
We welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
|
|
238
|
+
|
|
119
239
|
## License
|
|
120
240
|
|
|
121
|
-
MIT
|
|
241
|
+
MIT License - see [LICENSE](../../LICENSE) for details.
|
|
242
|
+
|
|
243
|
+
## Support
|
|
244
|
+
|
|
245
|
+
- 📧 Email: support@nerdagent.ai
|
|
246
|
+
- 📖 Documentation: [docs.nerdagent.ai](https://docs.nerdagent.ai)
|
|
247
|
+
- 🐛 Issues: [GitHub Issues](https://github.com/nerdagent/chat-widget/issues)
|
|
248
|
+
|
|
249
|
+
## Changelog
|
|
250
|
+
|
|
251
|
+
### v1.0.6
|
|
252
|
+
- Fixed infinite recursion issue in component template
|
|
253
|
+
- Improved AOT compilation support
|
|
254
|
+
- Enhanced TypeScript definitions
|
|
255
|
+
|
|
256
|
+
### v1.0.5
|
|
257
|
+
- Fixed package entry points for proper module resolution
|
|
258
|
+
- Improved build configuration
|
|
259
|
+
|
|
260
|
+
### v1.0.4
|
|
261
|
+
- Added proper AOT compilation support
|
|
262
|
+
- Fixed Angular Ivy compatibility
|
|
263
|
+
|
|
264
|
+
### v1.0.3
|
|
265
|
+
- Initial release with Angular wrapper
|
|
266
|
+
- Full TypeScript support
|
|
267
|
+
- Event handling integration
|
package/dist/README.md
CHANGED
|
@@ -1,121 +1,267 @@
|
|
|
1
|
-
#
|
|
1
|
+
# NerdAgent Chat Widget for Angular
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A powerful, customizable chat widget component for Angular applications. Built with Stencil.js for maximum compatibility and performance.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🚀 **Framework Agnostic Core** - Built with Stencil.js Web Components
|
|
8
|
+
- 🎨 **Highly Customizable** - Colors, positioning, features, and more
|
|
9
|
+
- 📱 **Responsive Design** - Works on desktop and mobile
|
|
10
|
+
- 🔧 **TypeScript Support** - Full type definitions included
|
|
11
|
+
- ⚡ **Lightweight** - Minimal bundle size impact
|
|
12
|
+
- 🎯 **Easy Integration** - Simple Angular component wrapper
|
|
4
13
|
|
|
5
14
|
## Installation
|
|
6
15
|
|
|
7
16
|
```bash
|
|
8
|
-
npm install
|
|
17
|
+
npm install nerdagent-chat-widget-angular
|
|
9
18
|
```
|
|
10
19
|
|
|
11
|
-
##
|
|
20
|
+
## Quick Start
|
|
12
21
|
|
|
13
22
|
### 1. Import the Module
|
|
14
23
|
|
|
15
24
|
```typescript
|
|
16
25
|
import { NgModule } from '@angular/core';
|
|
17
26
|
import { BrowserModule } from '@angular/platform-browser';
|
|
18
|
-
import { NerdChatWidgetModule } from '
|
|
19
|
-
|
|
20
|
-
import { AppComponent } from './app.component';
|
|
27
|
+
import { NerdChatWidgetModule } from 'nerdagent-chat-widget-angular';
|
|
21
28
|
|
|
22
29
|
@NgModule({
|
|
23
|
-
declarations: [
|
|
24
|
-
AppComponent
|
|
25
|
-
],
|
|
26
30
|
imports: [
|
|
27
31
|
BrowserModule,
|
|
28
32
|
NerdChatWidgetModule
|
|
29
33
|
],
|
|
30
|
-
|
|
31
|
-
bootstrap: [AppComponent]
|
|
34
|
+
// ... rest of your module
|
|
32
35
|
})
|
|
33
36
|
export class AppModule { }
|
|
34
37
|
```
|
|
35
38
|
|
|
36
|
-
### 2. Use
|
|
39
|
+
### 2. Use the Component
|
|
37
40
|
|
|
38
41
|
```html
|
|
39
42
|
<nerd-chat-widget
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
position="bottom-right"
|
|
46
|
-
[width]="350"
|
|
47
|
-
[height]="500"
|
|
48
|
-
[
|
|
49
|
-
[
|
|
50
|
-
[
|
|
51
|
-
[
|
|
52
|
-
[
|
|
43
|
+
[agent-name]="'Support Agent'"
|
|
44
|
+
[agent-role]="'Customer Support'"
|
|
45
|
+
[primary-color]="'#2d3e50'"
|
|
46
|
+
[accent-color]="'#4e8cff'"
|
|
47
|
+
[welcome-message]="'Hi! How can I help you today?'"
|
|
48
|
+
[position]="'bottom-right'"
|
|
49
|
+
[width]="'350'"
|
|
50
|
+
[height]="'500'"
|
|
51
|
+
[show-minimize-button]="true"
|
|
52
|
+
[show-timestamps]="true"
|
|
53
|
+
[enable-file-upload]="false"
|
|
54
|
+
[enable-speech]="false"
|
|
55
|
+
[show-powered-by]="true"
|
|
53
56
|
(messageSent)="onMessageSent($event)"
|
|
54
57
|
(widgetOpened)="onWidgetOpened()"
|
|
55
58
|
(widgetClosed)="onWidgetClosed()">
|
|
56
59
|
</nerd-chat-widget>
|
|
57
60
|
```
|
|
58
61
|
|
|
59
|
-
### 3. Handle Events
|
|
62
|
+
### 3. Handle Events
|
|
60
63
|
|
|
61
64
|
```typescript
|
|
62
65
|
import { Component } from '@angular/core';
|
|
63
66
|
|
|
64
67
|
@Component({
|
|
65
68
|
selector: 'app-root',
|
|
66
|
-
|
|
69
|
+
template: `
|
|
70
|
+
<nerd-chat-widget
|
|
71
|
+
[agent-name]="config.agentName"
|
|
72
|
+
[agent-role]="config.agentRole"
|
|
73
|
+
[primary-color]="config.primaryColor"
|
|
74
|
+
[accent-color]="config.accentColor"
|
|
75
|
+
[welcome-message]="config.welcomeMessage"
|
|
76
|
+
[position]="config.position"
|
|
77
|
+
[width]="config.width"
|
|
78
|
+
[height]="config.height"
|
|
79
|
+
[show-minimize-button]="config.showMinimizeButton"
|
|
80
|
+
[show-timestamps]="config.showTimestamps"
|
|
81
|
+
[enable-file-upload]="config.enableFileUpload"
|
|
82
|
+
[enable-speech]="config.enableSpeech"
|
|
83
|
+
[show-powered-by]="config.showPoweredBy"
|
|
84
|
+
(messageSent)="onMessageSent($event)"
|
|
85
|
+
(widgetOpened)="onWidgetOpened()"
|
|
86
|
+
(widgetClosed)="onWidgetClosed()">
|
|
87
|
+
</nerd-chat-widget>
|
|
88
|
+
`
|
|
67
89
|
})
|
|
68
90
|
export class AppComponent {
|
|
69
|
-
|
|
91
|
+
config = {
|
|
92
|
+
agentName: 'Support Agent',
|
|
93
|
+
agentRole: 'Customer Support',
|
|
94
|
+
primaryColor: '#2d3e50',
|
|
95
|
+
accentColor: '#4e8cff',
|
|
96
|
+
welcomeMessage: 'Hi! How can I help you today?',
|
|
97
|
+
placeholderText: 'Type your message...',
|
|
98
|
+
position: 'bottom-right' as 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left',
|
|
99
|
+
width: '350',
|
|
100
|
+
height: '500',
|
|
101
|
+
showMinimizeButton: true,
|
|
102
|
+
showTimestamps: true,
|
|
103
|
+
enableFileUpload: false,
|
|
104
|
+
enableSpeech: false,
|
|
105
|
+
showPoweredBy: true
|
|
106
|
+
};
|
|
107
|
+
|
|
70
108
|
onMessageSent(event: { message: string; timestamp: Date }) {
|
|
71
109
|
console.log('Message sent:', event);
|
|
110
|
+
// Handle message sent event
|
|
72
111
|
}
|
|
73
112
|
|
|
74
113
|
onWidgetOpened() {
|
|
75
114
|
console.log('Widget opened');
|
|
115
|
+
// Handle widget opened event
|
|
76
116
|
}
|
|
77
117
|
|
|
78
118
|
onWidgetClosed() {
|
|
79
119
|
console.log('Widget closed');
|
|
120
|
+
// Handle widget closed event
|
|
80
121
|
}
|
|
81
122
|
}
|
|
82
123
|
```
|
|
83
124
|
|
|
84
|
-
##
|
|
125
|
+
## Configuration Options
|
|
85
126
|
|
|
86
|
-
### Properties
|
|
127
|
+
### Input Properties
|
|
87
128
|
|
|
88
129
|
| Property | Type | Default | Description |
|
|
89
130
|
|----------|------|---------|-------------|
|
|
90
|
-
| `agentName` | `string` | `'Support Agent'` | Name of the
|
|
131
|
+
| `agentName` | `string` | `'Support Agent'` | Name of the support agent |
|
|
91
132
|
| `agentRole` | `string` | `'Customer Support'` | Role/title of the agent |
|
|
92
|
-
| `primaryColor` | `string` | `'#2d3e50'` | Primary theme
|
|
93
|
-
| `accentColor` | `string` | `'#4e8cff'` | Accent color
|
|
94
|
-
| `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial message
|
|
133
|
+
| `primaryColor` | `string` | `'#2d3e50'` | Primary color theme |
|
|
134
|
+
| `accentColor` | `string` | `'#4e8cff'` | Accent color theme |
|
|
135
|
+
| `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial welcome message |
|
|
95
136
|
| `placeholderText` | `string` | `'Type your message...'` | Input placeholder text |
|
|
96
|
-
| `position` | `WidgetPosition` | `'bottom-right'` | Widget position |
|
|
137
|
+
| `position` | `WidgetPosition` | `'bottom-right'` | Widget position on screen |
|
|
97
138
|
| `width` | `string` | `'350'` | Widget width in pixels |
|
|
98
139
|
| `height` | `string` | `'500'` | Widget height in pixels |
|
|
99
|
-
| `showMinimizeButton` | `boolean` | `true` | Show
|
|
100
|
-
| `showTimestamps` | `boolean` | `true` | Show
|
|
140
|
+
| `showMinimizeButton` | `boolean` | `true` | Show minimize/maximize button |
|
|
141
|
+
| `showTimestamps` | `boolean` | `true` | Show message timestamps |
|
|
101
142
|
| `enableFileUpload` | `boolean` | `false` | Enable file upload feature |
|
|
102
|
-
| `enableSpeech` | `boolean` | `false` | Enable speech
|
|
103
|
-
| `showPoweredBy` | `boolean` | `true` | Show
|
|
143
|
+
| `enableSpeech` | `boolean` | `false` | Enable speech recognition |
|
|
144
|
+
| `showPoweredBy` | `boolean` | `true` | Show "Powered by" branding |
|
|
104
145
|
|
|
105
|
-
###
|
|
146
|
+
### WidgetPosition Type
|
|
147
|
+
|
|
148
|
+
```typescript
|
|
149
|
+
type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### Output Events
|
|
106
153
|
|
|
107
154
|
| Event | Type | Description |
|
|
108
155
|
|-------|------|-------------|
|
|
109
|
-
| `messageSent` | `{ message: string; timestamp: Date }` |
|
|
110
|
-
| `widgetOpened` | `void` |
|
|
111
|
-
| `widgetClosed` | `void` |
|
|
156
|
+
| `messageSent` | `{ message: string; timestamp: Date }` | Fired when user sends a message |
|
|
157
|
+
| `widgetOpened` | `void` | Fired when widget is opened |
|
|
158
|
+
| `widgetClosed` | `void` | Fired when widget is closed |
|
|
159
|
+
|
|
160
|
+
## Advanced Usage
|
|
112
161
|
|
|
113
|
-
###
|
|
162
|
+
### Dynamic Configuration
|
|
114
163
|
|
|
115
164
|
```typescript
|
|
116
|
-
|
|
165
|
+
export class AppComponent {
|
|
166
|
+
config = {
|
|
167
|
+
agentName: 'AI Assistant',
|
|
168
|
+
agentRole: 'Virtual Support',
|
|
169
|
+
primaryColor: '#007bff',
|
|
170
|
+
accentColor: '#28a745',
|
|
171
|
+
welcomeMessage: 'Hello! I\'m here to help.',
|
|
172
|
+
position: 'bottom-left' as WidgetPosition,
|
|
173
|
+
width: '400',
|
|
174
|
+
height: '600',
|
|
175
|
+
showMinimizeButton: true,
|
|
176
|
+
showTimestamps: true,
|
|
177
|
+
enableFileUpload: true,
|
|
178
|
+
enableSpeech: true,
|
|
179
|
+
showPoweredBy: false
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
updateConfig() {
|
|
183
|
+
// Update configuration dynamically
|
|
184
|
+
this.config.primaryColor = '#ff6b6b';
|
|
185
|
+
this.config.position = 'top-right';
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### Custom Styling
|
|
191
|
+
|
|
192
|
+
The widget uses CSS custom properties for theming. You can override these in your global styles:
|
|
193
|
+
|
|
194
|
+
```css
|
|
195
|
+
:root {
|
|
196
|
+
--primary-color: #your-color;
|
|
197
|
+
--accent-color: #your-accent;
|
|
198
|
+
--widget-width: 400px;
|
|
199
|
+
--widget-height: 600px;
|
|
200
|
+
--font-family: 'Your Font', sans-serif;
|
|
201
|
+
}
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
## Browser Support
|
|
205
|
+
|
|
206
|
+
- Chrome 60+
|
|
207
|
+
- Firefox 55+
|
|
208
|
+
- Safari 10+
|
|
209
|
+
- Edge 79+
|
|
210
|
+
|
|
211
|
+
## TypeScript Support
|
|
212
|
+
|
|
213
|
+
Full TypeScript definitions are included. Import types as needed:
|
|
214
|
+
|
|
215
|
+
```typescript
|
|
216
|
+
import { WidgetPosition } from 'nerdagent-chat-widget-angular';
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## Troubleshooting
|
|
220
|
+
|
|
221
|
+
### Common Issues
|
|
222
|
+
|
|
223
|
+
1. **Widget not appearing**: Ensure the module is imported in your app module
|
|
224
|
+
2. **Styling issues**: Check that FontAwesome is loaded for icons
|
|
225
|
+
3. **Events not firing**: Verify event handlers are properly bound
|
|
226
|
+
|
|
227
|
+
### Debug Mode
|
|
228
|
+
|
|
229
|
+
Enable debug logging by setting the browser's localStorage:
|
|
230
|
+
|
|
231
|
+
```javascript
|
|
232
|
+
localStorage.setItem('nerdagent-chat-widget-debug', 'true');
|
|
117
233
|
```
|
|
118
234
|
|
|
235
|
+
## Contributing
|
|
236
|
+
|
|
237
|
+
We welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
|
|
238
|
+
|
|
119
239
|
## License
|
|
120
240
|
|
|
121
|
-
MIT
|
|
241
|
+
MIT License - see [LICENSE](../../LICENSE) for details.
|
|
242
|
+
|
|
243
|
+
## Support
|
|
244
|
+
|
|
245
|
+
- 📧 Email: support@nerdagent.ai
|
|
246
|
+
- 📖 Documentation: [docs.nerdagent.ai](https://docs.nerdagent.ai)
|
|
247
|
+
- 🐛 Issues: [GitHub Issues](https://github.com/nerdagent/chat-widget/issues)
|
|
248
|
+
|
|
249
|
+
## Changelog
|
|
250
|
+
|
|
251
|
+
### v1.0.6
|
|
252
|
+
- Fixed infinite recursion issue in component template
|
|
253
|
+
- Improved AOT compilation support
|
|
254
|
+
- Enhanced TypeScript definitions
|
|
255
|
+
|
|
256
|
+
### v1.0.5
|
|
257
|
+
- Fixed package entry points for proper module resolution
|
|
258
|
+
- Improved build configuration
|
|
259
|
+
|
|
260
|
+
### v1.0.4
|
|
261
|
+
- Added proper AOT compilation support
|
|
262
|
+
- Fixed Angular Ivy compatibility
|
|
263
|
+
|
|
264
|
+
### v1.0.3
|
|
265
|
+
- Initial release with Angular wrapper
|
|
266
|
+
- Full TypeScript support
|
|
267
|
+
- Event handling integration
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nerdagent-chat-widget-angular",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "NerdAgent Chat Widget for Angular",
|
|
5
5
|
"main": "dist/fesm2022/nerdagent-chat-widget-angular.mjs",
|
|
6
6
|
"module": "dist/fesm2022/nerdagent-chat-widget-angular.mjs",
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
"@angular/common": "^18.0.0",
|
|
33
33
|
"@angular/core": "^18.0.0",
|
|
34
34
|
"@types/node": "^20.0.0",
|
|
35
|
-
"
|
|
36
|
-
"
|
|
35
|
+
"ng-packagr": "^18.0.0",
|
|
36
|
+
"typescript": "^5.0.0"
|
|
37
37
|
},
|
|
38
38
|
"repository": {
|
|
39
39
|
"type": "git",
|
|
40
40
|
"url": "https://github.com/nerdagent/chat-widget.git",
|
|
41
41
|
"directory": "packages/angular"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "c8f93bc623e36bcb74a3641f07ae6ee1cccd4941"
|
|
44
44
|
}
|