nerdagent-chat-widget-angular 1.0.25 → 1.0.27

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.
Files changed (3) hide show
  1. package/README.md +14 -166
  2. package/dist/README.md +14 -166
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -1,15 +1,6 @@
1
1
  # NerdAgent Chat Widget for Angular
2
2
 
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
3
+ A customizable chat widget component for Angular applications.
13
4
 
14
5
  ## Installation
15
6
 
@@ -17,7 +8,7 @@ A powerful, customizable chat widget component for Angular applications. Built w
17
8
  npm install nerdagent-chat-widget-angular
18
9
  ```
19
10
 
20
- ## Quick Start
11
+ ## Usage
21
12
 
22
13
  ### 1. Import the Module
23
14
 
@@ -31,7 +22,6 @@ import { NerdChatWidgetModule } from 'nerdagent-chat-widget-angular';
31
22
  BrowserModule,
32
23
  NerdChatWidgetModule
33
24
  ],
34
- // ... rest of your module
35
25
  })
36
26
  export class AppModule { }
37
27
  ```
@@ -40,11 +30,14 @@ export class AppModule { }
40
30
 
41
31
  ```html
42
32
  <nerd-chat-widget
33
+ [apikey]="'your-api-key'"
34
+ [agent-id]="'your-agent-id'"
43
35
  [agent-name]="'Support Agent'"
44
36
  [agent-role]="'Customer Support'"
45
37
  [primary-color]="'#2d3e50'"
46
38
  [accent-color]="'#4e8cff'"
47
39
  [welcome-message]="'Hi! How can I help you today?'"
40
+ [placeholder-text]="'Type your message...'"
48
41
  [position]="'bottom-right'"
49
42
  [width]="'350'"
50
43
  [height]="'500'"
@@ -66,75 +59,37 @@ import { Component } from '@angular/core';
66
59
 
67
60
  @Component({
68
61
  selector: 'app-root',
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
- `
62
+ templateUrl: './app.component.html'
89
63
  })
90
64
  export class AppComponent {
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
-
108
65
  onMessageSent(event: { message: string; timestamp: Date }) {
109
66
  console.log('Message sent:', event);
110
- // Handle message sent event
111
67
  }
112
68
 
113
69
  onWidgetOpened() {
114
70
  console.log('Widget opened');
115
- // Handle widget opened event
116
71
  }
117
72
 
118
73
  onWidgetClosed() {
119
74
  console.log('Widget closed');
120
- // Handle widget closed event
121
75
  }
122
76
  }
123
77
  ```
124
78
 
125
- ## Configuration Options
126
-
127
- ### Input Properties
79
+ ## Properties
128
80
 
129
81
  | Property | Type | Default | Description |
130
82
  |----------|------|---------|-------------|
83
+ | `apikey` | `string` | - | API key for authentication |
84
+ | `agent-id` | `string` | - | Agent ID to connect to |
85
+ | `token` | `string` | - | JWT token for authentication |
131
86
  | `agentName` | `string` | `'Support Agent'` | Name of the support agent |
132
87
  | `agentRole` | `string` | `'Customer Support'` | Role/title of the agent |
133
88
  | `primaryColor` | `string` | `'#2d3e50'` | Primary color theme |
134
89
  | `accentColor` | `string` | `'#4e8cff'` | Accent color theme |
135
90
  | `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial welcome message |
136
91
  | `placeholderText` | `string` | `'Type your message...'` | Input placeholder text |
137
- | `position` | `WidgetPosition` | `'bottom-right'` | Widget position on screen |
92
+ | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Widget position on screen |
138
93
  | `width` | `string` | `'350'` | Widget width in pixels |
139
94
  | `height` | `string` | `'500'` | Widget height in pixels |
140
95
  | `showMinimizeButton` | `boolean` | `true` | Show minimize/maximize button |
@@ -143,13 +98,7 @@ export class AppComponent {
143
98
  | `enableSpeech` | `boolean` | `false` | Enable speech recognition |
144
99
  | `showPoweredBy` | `boolean` | `true` | Show "Powered by" branding |
145
100
 
146
- ### WidgetPosition Type
147
-
148
- ```typescript
149
- type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
150
- ```
151
-
152
- ### Output Events
101
+ ## Events
153
102
 
154
103
  | Event | Type | Description |
155
104
  |-------|------|-------------|
@@ -157,111 +106,10 @@ type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
157
106
  | `widgetOpened` | `void` | Fired when widget is opened |
158
107
  | `widgetClosed` | `void` | Fired when widget is closed |
159
108
 
160
- ## Advanced Usage
161
-
162
- ### Dynamic Configuration
163
-
164
- ```typescript
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
109
  ## TypeScript Support
212
110
 
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');
233
- ```
234
-
235
- ## Contributing
236
-
237
- We welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
111
+ Full TypeScript definitions are included.
238
112
 
239
113
  ## License
240
114
 
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
115
+ MIT
package/dist/README.md CHANGED
@@ -1,15 +1,6 @@
1
1
  # NerdAgent Chat Widget for Angular
2
2
 
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
3
+ A customizable chat widget component for Angular applications.
13
4
 
14
5
  ## Installation
15
6
 
@@ -17,7 +8,7 @@ A powerful, customizable chat widget component for Angular applications. Built w
17
8
  npm install nerdagent-chat-widget-angular
18
9
  ```
19
10
 
20
- ## Quick Start
11
+ ## Usage
21
12
 
22
13
  ### 1. Import the Module
23
14
 
@@ -31,7 +22,6 @@ import { NerdChatWidgetModule } from 'nerdagent-chat-widget-angular';
31
22
  BrowserModule,
32
23
  NerdChatWidgetModule
33
24
  ],
34
- // ... rest of your module
35
25
  })
36
26
  export class AppModule { }
37
27
  ```
@@ -40,11 +30,14 @@ export class AppModule { }
40
30
 
41
31
  ```html
42
32
  <nerd-chat-widget
33
+ [apikey]="'your-api-key'"
34
+ [agent-id]="'your-agent-id'"
43
35
  [agent-name]="'Support Agent'"
44
36
  [agent-role]="'Customer Support'"
45
37
  [primary-color]="'#2d3e50'"
46
38
  [accent-color]="'#4e8cff'"
47
39
  [welcome-message]="'Hi! How can I help you today?'"
40
+ [placeholder-text]="'Type your message...'"
48
41
  [position]="'bottom-right'"
49
42
  [width]="'350'"
50
43
  [height]="'500'"
@@ -66,75 +59,37 @@ import { Component } from '@angular/core';
66
59
 
67
60
  @Component({
68
61
  selector: 'app-root',
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
- `
62
+ templateUrl: './app.component.html'
89
63
  })
90
64
  export class AppComponent {
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
-
108
65
  onMessageSent(event: { message: string; timestamp: Date }) {
109
66
  console.log('Message sent:', event);
110
- // Handle message sent event
111
67
  }
112
68
 
113
69
  onWidgetOpened() {
114
70
  console.log('Widget opened');
115
- // Handle widget opened event
116
71
  }
117
72
 
118
73
  onWidgetClosed() {
119
74
  console.log('Widget closed');
120
- // Handle widget closed event
121
75
  }
122
76
  }
123
77
  ```
124
78
 
125
- ## Configuration Options
126
-
127
- ### Input Properties
79
+ ## Properties
128
80
 
129
81
  | Property | Type | Default | Description |
130
82
  |----------|------|---------|-------------|
83
+ | `apikey` | `string` | - | API key for authentication |
84
+ | `agent-id` | `string` | - | Agent ID to connect to |
85
+ | `token` | `string` | - | JWT token for authentication |
131
86
  | `agentName` | `string` | `'Support Agent'` | Name of the support agent |
132
87
  | `agentRole` | `string` | `'Customer Support'` | Role/title of the agent |
133
88
  | `primaryColor` | `string` | `'#2d3e50'` | Primary color theme |
134
89
  | `accentColor` | `string` | `'#4e8cff'` | Accent color theme |
135
90
  | `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial welcome message |
136
91
  | `placeholderText` | `string` | `'Type your message...'` | Input placeholder text |
137
- | `position` | `WidgetPosition` | `'bottom-right'` | Widget position on screen |
92
+ | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Widget position on screen |
138
93
  | `width` | `string` | `'350'` | Widget width in pixels |
139
94
  | `height` | `string` | `'500'` | Widget height in pixels |
140
95
  | `showMinimizeButton` | `boolean` | `true` | Show minimize/maximize button |
@@ -143,13 +98,7 @@ export class AppComponent {
143
98
  | `enableSpeech` | `boolean` | `false` | Enable speech recognition |
144
99
  | `showPoweredBy` | `boolean` | `true` | Show "Powered by" branding |
145
100
 
146
- ### WidgetPosition Type
147
-
148
- ```typescript
149
- type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
150
- ```
151
-
152
- ### Output Events
101
+ ## Events
153
102
 
154
103
  | Event | Type | Description |
155
104
  |-------|------|-------------|
@@ -157,111 +106,10 @@ type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
157
106
  | `widgetOpened` | `void` | Fired when widget is opened |
158
107
  | `widgetClosed` | `void` | Fired when widget is closed |
159
108
 
160
- ## Advanced Usage
161
-
162
- ### Dynamic Configuration
163
-
164
- ```typescript
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
109
  ## TypeScript Support
212
110
 
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');
233
- ```
234
-
235
- ## Contributing
236
-
237
- We welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
111
+ Full TypeScript definitions are included.
238
112
 
239
113
  ## License
240
114
 
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
115
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nerdagent-chat-widget-angular",
3
- "version": "1.0.25",
3
+ "version": "1.0.27",
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",
@@ -40,5 +40,5 @@
40
40
  "url": "https://github.com/nerdagent/chat-widget.git",
41
41
  "directory": "packages/angular"
42
42
  },
43
- "gitHead": "666d3708f1ec6bcbea570537554c5bc0ef3dc464"
43
+ "gitHead": "a56e9c37c719d12188589585aac8515aa14c6315"
44
44
  }