@weldsuite/helpdesk-widget-sdk 1.0.2

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.
@@ -0,0 +1,764 @@
1
+ import { OnInit, OnDestroy } from '@angular/core';
2
+
3
+ /**
4
+ * Weld SDK - Configuration Types
5
+ * Type definitions for SDK initialization and configuration
6
+ */
7
+ /**
8
+ * Event types for widget events
9
+ */
10
+ type WidgetEventType = 'ready' | 'open' | 'close' | 'error' | 'message' | 'minimize' | 'maximize' | 'destroy';
11
+ /**
12
+ * Widget event structure
13
+ */
14
+ interface WidgetEvent {
15
+ type: WidgetEventType;
16
+ data?: any;
17
+ timestamp: number;
18
+ }
19
+ /**
20
+ * Event handler function type
21
+ */
22
+ type WidgetEventHandler = (event?: WidgetEvent | any) => void;
23
+ /**
24
+ * Position configuration
25
+ */
26
+ interface PositionConfig {
27
+ bottom?: string;
28
+ right?: string;
29
+ left?: string;
30
+ top?: string;
31
+ }
32
+ /**
33
+ * Customization configuration
34
+ */
35
+ interface CustomizationConfig {
36
+ primaryColor?: string;
37
+ accentColor?: string;
38
+ backgroundColor?: string;
39
+ textColor?: string;
40
+ fontFamily?: string;
41
+ fontSize?: string;
42
+ borderRadius?: string;
43
+ }
44
+ /**
45
+ * Feature flags
46
+ */
47
+ interface FeatureConfig {
48
+ attachments?: boolean;
49
+ reactions?: boolean;
50
+ typing?: boolean;
51
+ readReceipts?: boolean;
52
+ offlineMode?: boolean;
53
+ fileUpload?: boolean;
54
+ imageUpload?: boolean;
55
+ voiceMessages?: boolean;
56
+ videoMessages?: boolean;
57
+ }
58
+ /**
59
+ * Mobile configuration
60
+ */
61
+ interface MobileConfig {
62
+ fullScreen?: boolean;
63
+ scrollLock?: boolean;
64
+ keyboardHandling?: 'auto' | 'manual';
65
+ safeAreaInsets?: boolean;
66
+ }
67
+ /**
68
+ * Iframe configuration
69
+ */
70
+ interface IframeConfig {
71
+ launcher: {
72
+ url: string;
73
+ name: string;
74
+ position: PositionConfig;
75
+ size: string;
76
+ };
77
+ widget: {
78
+ url: string;
79
+ name: string;
80
+ position: PositionConfig;
81
+ width: string;
82
+ height: string;
83
+ };
84
+ backdrop?: {
85
+ enabled: boolean;
86
+ closeOnClick: boolean;
87
+ };
88
+ }
89
+ /**
90
+ * API configuration
91
+ */
92
+ interface ApiConfig {
93
+ baseUrl: string;
94
+ widgetId: string;
95
+ endpoints?: {
96
+ messages?: string;
97
+ users?: string;
98
+ conversations?: string;
99
+ upload?: string;
100
+ };
101
+ timeout?: number;
102
+ retries?: number;
103
+ }
104
+ /**
105
+ * Authentication configuration
106
+ */
107
+ interface AuthConfig {
108
+ enabled?: boolean;
109
+ mode?: 'anonymous' | 'identified';
110
+ userId?: string;
111
+ email?: string;
112
+ name?: string;
113
+ avatar?: string;
114
+ metadata?: Record<string, any>;
115
+ token?: string;
116
+ }
117
+ /**
118
+ * Locale configuration
119
+ */
120
+ interface LocaleConfig {
121
+ locale?: string;
122
+ translations?: Record<string, Record<string, string>>;
123
+ dateFormat?: string;
124
+ timeFormat?: string;
125
+ timezone?: string;
126
+ }
127
+ /**
128
+ * Logging configuration
129
+ */
130
+ interface LogConfig {
131
+ enabled?: boolean;
132
+ level?: 'debug' | 'info' | 'warn' | 'error';
133
+ prefix?: string;
134
+ includeTimestamp?: boolean;
135
+ }
136
+ /**
137
+ * Performance configuration
138
+ */
139
+ interface PerformanceConfig {
140
+ lazyLoad?: boolean;
141
+ preload?: boolean;
142
+ caching?: boolean;
143
+ prefetch?: boolean;
144
+ }
145
+ /**
146
+ * Security configuration
147
+ */
148
+ interface SecurityConfig {
149
+ allowedOrigins?: string[];
150
+ validateMessages?: boolean;
151
+ sanitizeInput?: boolean;
152
+ contentSecurityPolicy?: string;
153
+ }
154
+ /**
155
+ * Main SDK configuration
156
+ */
157
+ interface WeldConfig {
158
+ widgetId: string;
159
+ api?: Partial<ApiConfig>;
160
+ iframes?: Partial<IframeConfig>;
161
+ position?: {
162
+ launcher?: PositionConfig;
163
+ widget?: PositionConfig;
164
+ };
165
+ customization?: CustomizationConfig;
166
+ features?: FeatureConfig;
167
+ mobile?: MobileConfig;
168
+ auth?: AuthConfig;
169
+ locale?: LocaleConfig;
170
+ logging?: LogConfig;
171
+ performance?: PerformanceConfig;
172
+ security?: SecurityConfig;
173
+ onReady?: () => void;
174
+ onError?: (error: Error) => void;
175
+ onOpen?: () => void;
176
+ onClose?: () => void;
177
+ onMessage?: (message: any) => void;
178
+ onMinimize?: () => void;
179
+ onMaximize?: () => void;
180
+ onDestroy?: () => void;
181
+ }
182
+ /**
183
+ * Runtime configuration (resolved from WeldConfig)
184
+ */
185
+ interface ResolvedConfig {
186
+ widgetId: string;
187
+ api: ApiConfig;
188
+ iframes: IframeConfig;
189
+ customization: CustomizationConfig;
190
+ features: FeatureConfig;
191
+ mobile: MobileConfig;
192
+ auth: AuthConfig;
193
+ locale: LocaleConfig;
194
+ logging: LogConfig;
195
+ performance: PerformanceConfig;
196
+ security: SecurityConfig;
197
+ onReady?: () => void;
198
+ onError?: (error: Error) => void;
199
+ onOpen?: () => void;
200
+ onClose?: () => void;
201
+ onMessage?: (message: any) => void;
202
+ onMinimize?: () => void;
203
+ onMaximize?: () => void;
204
+ onDestroy?: () => void;
205
+ }
206
+ /**
207
+ * Device detection
208
+ */
209
+ type DeviceType = 'mobile' | 'tablet' | 'desktop';
210
+ interface DeviceInfo {
211
+ type: DeviceType;
212
+ isMobile: boolean;
213
+ isTablet: boolean;
214
+ isDesktop: boolean;
215
+ isTouchDevice: boolean;
216
+ screenWidth: number;
217
+ screenHeight: number;
218
+ orientation: 'portrait' | 'landscape';
219
+ userAgent: string;
220
+ }
221
+ /**
222
+ * Default configuration values
223
+ */
224
+ declare const DEFAULT_CONFIG: Omit<ResolvedConfig, 'widgetId'>;
225
+
226
+ /**
227
+ * Weld SDK - State Types
228
+ * Type definitions for state management across iframes
229
+ */
230
+ /**
231
+ * Widget visibility state
232
+ */
233
+ declare enum WidgetVisibility {
234
+ HIDDEN = "hidden",
235
+ VISIBLE = "visible",
236
+ MINIMIZED = "minimized"
237
+ }
238
+ /**
239
+ * Widget view types
240
+ */
241
+ declare enum WidgetView {
242
+ HOME = "home",
243
+ CONVERSATION = "conversation",
244
+ CONVERSATIONS = "conversations",
245
+ HELP = "help",
246
+ SETTINGS = "settings",
247
+ SEARCH = "search"
248
+ }
249
+ /**
250
+ * Connection status
251
+ */
252
+ declare enum ConnectionStatus {
253
+ DISCONNECTED = "disconnected",
254
+ CONNECTING = "connecting",
255
+ CONNECTED = "connected",
256
+ RECONNECTING = "reconnecting",
257
+ ERROR = "error"
258
+ }
259
+ /**
260
+ * Message status
261
+ */
262
+ declare enum MessageStatus {
263
+ SENDING = "sending",
264
+ SENT = "sent",
265
+ DELIVERED = "delivered",
266
+ READ = "read",
267
+ FAILED = "failed"
268
+ }
269
+ /**
270
+ * User state
271
+ */
272
+ interface UserState {
273
+ id?: string;
274
+ email?: string;
275
+ name?: string;
276
+ avatar?: string;
277
+ metadata?: Record<string, any>;
278
+ isAuthenticated: boolean;
279
+ isAnonymous: boolean;
280
+ }
281
+ /**
282
+ * Conversation state
283
+ */
284
+ interface ConversationState {
285
+ id?: string;
286
+ messages: Message[];
287
+ participants: Participant[];
288
+ unreadCount: number;
289
+ lastMessageAt?: number;
290
+ isTyping: boolean;
291
+ typingUsers: string[];
292
+ }
293
+ /**
294
+ * Message interface
295
+ */
296
+ interface Message {
297
+ id: string;
298
+ conversationId: string;
299
+ text: string;
300
+ sender: {
301
+ id: string;
302
+ name: string;
303
+ avatar?: string;
304
+ type: 'user' | 'agent' | 'bot';
305
+ };
306
+ status: MessageStatus;
307
+ timestamp: number;
308
+ createdAt: number;
309
+ updatedAt?: number;
310
+ attachments?: Attachment[];
311
+ reactions?: Reaction[];
312
+ metadata?: Record<string, any>;
313
+ }
314
+ /**
315
+ * Attachment interface
316
+ */
317
+ interface Attachment {
318
+ id: string;
319
+ type: 'image' | 'file' | 'video' | 'audio';
320
+ url: string;
321
+ name: string;
322
+ size: number;
323
+ mimeType: string;
324
+ thumbnail?: string;
325
+ }
326
+ /**
327
+ * Reaction interface
328
+ */
329
+ interface Reaction {
330
+ emoji: string;
331
+ count: number;
332
+ users: string[];
333
+ }
334
+ /**
335
+ * Participant interface
336
+ */
337
+ interface Participant {
338
+ id: string;
339
+ name: string;
340
+ avatar?: string;
341
+ type: 'user' | 'agent' | 'bot';
342
+ isOnline: boolean;
343
+ lastSeenAt?: number;
344
+ }
345
+ /**
346
+ * Widget state
347
+ */
348
+ interface WidgetState {
349
+ visibility: WidgetVisibility;
350
+ view: WidgetView;
351
+ isOpen: boolean;
352
+ isMinimized: boolean;
353
+ dimensions: {
354
+ width: string;
355
+ height: string;
356
+ };
357
+ position: {
358
+ bottom: string;
359
+ right: string;
360
+ };
361
+ }
362
+ /**
363
+ * Launcher state
364
+ */
365
+ interface LauncherState {
366
+ isVisible: boolean;
367
+ badge: {
368
+ count: number;
369
+ text?: string;
370
+ show: boolean;
371
+ };
372
+ customColor?: string;
373
+ tooltip?: string;
374
+ }
375
+ /**
376
+ * Backdrop state
377
+ */
378
+ interface BackdropState {
379
+ isVisible: boolean;
380
+ closeOnClick: boolean;
381
+ opacity: number;
382
+ }
383
+ /**
384
+ * Mobile state
385
+ */
386
+ interface MobileState {
387
+ isFullScreen: boolean;
388
+ isScrollLocked: boolean;
389
+ keyboardHeight: number;
390
+ orientation: 'portrait' | 'landscape';
391
+ safeAreaInsets: {
392
+ top: number;
393
+ right: number;
394
+ bottom: number;
395
+ left: number;
396
+ };
397
+ }
398
+ /**
399
+ * Network state
400
+ */
401
+ interface NetworkState {
402
+ status: ConnectionStatus;
403
+ lastConnected?: number;
404
+ retryCount: number;
405
+ latency?: number;
406
+ }
407
+ /**
408
+ * UI state
409
+ */
410
+ interface UIState {
411
+ theme: 'light' | 'dark' | 'auto';
412
+ locale: string;
413
+ isLoading: boolean;
414
+ error?: {
415
+ code: string;
416
+ message: string;
417
+ recoverable: boolean;
418
+ };
419
+ }
420
+ /**
421
+ * Main application state
422
+ */
423
+ interface WeldState {
424
+ user: UserState;
425
+ conversation: ConversationState;
426
+ widget: WidgetState;
427
+ launcher: LauncherState;
428
+ backdrop: BackdropState;
429
+ mobile: MobileState;
430
+ network: NetworkState;
431
+ ui: UIState;
432
+ initialized: boolean;
433
+ lastUpdated: number;
434
+ }
435
+
436
+ /**
437
+ * User identification data
438
+ */
439
+ interface UserIdentity {
440
+ userId: string;
441
+ email?: string;
442
+ name?: string;
443
+ avatar?: string;
444
+ metadata?: Record<string, any>;
445
+ }
446
+ /**
447
+ * WeldSDK class
448
+ * Main SDK interface for embedding the widget
449
+ */
450
+ declare class WeldSDK {
451
+ private config;
452
+ private logger;
453
+ private iframeManager;
454
+ private messageBroker;
455
+ private stateCoordinator;
456
+ private status;
457
+ private readyPromise;
458
+ private readyResolve;
459
+ constructor(config: WeldConfig);
460
+ /**
461
+ * Initialize the SDK and render widget
462
+ */
463
+ init(): Promise<void>;
464
+ /**
465
+ * Setup ready message handlers
466
+ */
467
+ private setupReadyHandlers;
468
+ /**
469
+ * Map iframe name to type
470
+ */
471
+ private mapIframeNameToType;
472
+ /**
473
+ * Wait for all iframes to be ready
474
+ */
475
+ private waitForIframesReady;
476
+ /**
477
+ * Wait for SDK to be ready
478
+ */
479
+ ready(): Promise<void>;
480
+ /**
481
+ * Check if SDK is ready
482
+ */
483
+ isReady(): boolean;
484
+ /**
485
+ * Open the widget
486
+ */
487
+ open(): void;
488
+ /**
489
+ * Close the widget
490
+ */
491
+ close(): void;
492
+ /**
493
+ * Toggle widget open/close
494
+ */
495
+ toggle(): void;
496
+ /**
497
+ * Minimize the widget
498
+ */
499
+ minimize(): void;
500
+ /**
501
+ * Maximize the widget
502
+ */
503
+ maximize(): void;
504
+ /**
505
+ * Show the launcher
506
+ */
507
+ showLauncher(): void;
508
+ /**
509
+ * Hide the launcher
510
+ */
511
+ hideLauncher(): void;
512
+ /**
513
+ * Set badge count
514
+ */
515
+ setBadgeCount(count: number): void;
516
+ /**
517
+ * Clear badge
518
+ */
519
+ clearBadge(): void;
520
+ /**
521
+ * Send a message
522
+ */
523
+ sendMessage(text: string, metadata?: Record<string, any>): void;
524
+ /**
525
+ * Identify user
526
+ */
527
+ identify(identity: UserIdentity): void;
528
+ /**
529
+ * Logout user
530
+ */
531
+ logout(): void;
532
+ /**
533
+ * Update configuration
534
+ */
535
+ updateConfig(updates: Partial<WeldConfig>): void;
536
+ /**
537
+ * Update theme
538
+ */
539
+ setTheme(theme: 'light' | 'dark' | 'auto'): void;
540
+ /**
541
+ * Update locale
542
+ */
543
+ setLocale(locale: string): void;
544
+ /**
545
+ * Track custom event
546
+ */
547
+ track(eventName: string, properties?: Record<string, any>): void;
548
+ /**
549
+ * Get current state
550
+ */
551
+ getState(): WeldState;
552
+ /**
553
+ * Subscribe to state changes
554
+ */
555
+ onStateChange<T = any>(path: string, listener: (newValue: T, oldValue: T) => void): () => void;
556
+ /**
557
+ * Get device info
558
+ */
559
+ getDeviceInfo(): DeviceInfo;
560
+ /**
561
+ * Get SDK status
562
+ */
563
+ getStatus(): string;
564
+ /**
565
+ * Get SDK version
566
+ */
567
+ getVersion(): string;
568
+ /**
569
+ * Enable debug mode
570
+ */
571
+ enableDebug(): void;
572
+ /**
573
+ * Disable debug mode
574
+ */
575
+ disableDebug(): void;
576
+ /**
577
+ * Ensure SDK is ready before operation
578
+ */
579
+ private ensureReady;
580
+ /**
581
+ * Destroy SDK and cleanup
582
+ */
583
+ destroy(): void;
584
+ }
585
+
586
+ /**
587
+ * Angular component for the Helpdesk Widget
588
+ *
589
+ * This component provides a declarative way to add the widget to your app.
590
+ * The widget loads in an iframe and doesn't render any visible children.
591
+ *
592
+ * @example
593
+ * ```typescript
594
+ * // app.component.ts
595
+ * import { Component } from '@angular/core';
596
+ *
597
+ * @Component({
598
+ * selector: 'app-root',
599
+ * template: `
600
+ * <h1>My App</h1>
601
+ * <helpdesk-widget [widgetId]="'your-widget-id'"></helpdesk-widget>
602
+ * `
603
+ * })
604
+ * export class AppComponent {}
605
+ * ```
606
+ *
607
+ * @example With event handlers
608
+ * ```typescript
609
+ * @Component({
610
+ * selector: 'app-root',
611
+ * template: `
612
+ * <helpdesk-widget
613
+ * [widgetId]="'your-widget-id'"
614
+ * [onReady]="handleReady"
615
+ * [onOpen]="handleOpened">
616
+ * </helpdesk-widget>
617
+ * `
618
+ * })
619
+ * export class AppComponent {
620
+ * handleReady = () => {
621
+ * console.log('Widget ready');
622
+ * }
623
+ *
624
+ * handleOpened = () => {
625
+ * console.log('Widget opened');
626
+ * }
627
+ * }
628
+ * ```
629
+ */
630
+ declare class HelpdeskWidgetComponent implements OnInit, OnDestroy {
631
+ widgetId: string;
632
+ onReady?: WidgetEventHandler;
633
+ onOpen?: WidgetEventHandler;
634
+ onClose?: WidgetEventHandler;
635
+ onError?: WidgetEventHandler;
636
+ private widget;
637
+ ngOnInit(): void;
638
+ ngOnDestroy(): void;
639
+ /**
640
+ * Open the widget programmatically
641
+ */
642
+ open(): void;
643
+ /**
644
+ * Close the widget programmatically
645
+ */
646
+ close(): void;
647
+ /**
648
+ * Toggle widget visibility programmatically
649
+ */
650
+ toggle(): void;
651
+ /**
652
+ * Send a message to the widget
653
+ */
654
+ sendMessage(message: string): void;
655
+ }
656
+
657
+ /**
658
+ * Angular service for managing the Helpdesk Widget
659
+ *
660
+ * @example
661
+ * ```typescript
662
+ * import { Component } from '@angular/core';
663
+ * import { HelpdeskWidgetService } from '@weldsuite/helpdesk-widget-sdk/angular';
664
+ *
665
+ * @Component({
666
+ * selector: 'app-root',
667
+ * template: `
668
+ * <button (click)="openWidget()">Show Support</button>
669
+ * `
670
+ * })
671
+ * export class AppComponent {
672
+ * constructor(private helpdeskService: HelpdeskWidgetService) {
673
+ * this.helpdeskService.initialize({ widgetId: 'your-widget-id' });
674
+ * }
675
+ *
676
+ * openWidget() {
677
+ * this.helpdeskService.open();
678
+ * }
679
+ * }
680
+ * ```
681
+ */
682
+ declare class HelpdeskWidgetService implements OnDestroy {
683
+ private widget;
684
+ /**
685
+ * Initialize the widget with configuration
686
+ */
687
+ initialize(config: WeldConfig): void;
688
+ /**
689
+ * Open the widget
690
+ */
691
+ open(): void;
692
+ /**
693
+ * Close the widget
694
+ */
695
+ close(): void;
696
+ /**
697
+ * Toggle widget visibility
698
+ */
699
+ toggle(): void;
700
+ /**
701
+ * Send a message to the widget
702
+ */
703
+ sendMessage(message: string): void;
704
+ /**
705
+ * Subscribe to state changes
706
+ * @returns Unsubscribe function
707
+ */
708
+ onStateChange<T = any>(path: string, listener: (newValue: T, oldValue: T) => void): () => void;
709
+ /**
710
+ * Destroy the widget and clean up resources
711
+ */
712
+ destroy(): void;
713
+ /**
714
+ * Get the widget instance
715
+ */
716
+ getWidget(): WeldSDK | null;
717
+ /**
718
+ * Check if SDK is ready
719
+ */
720
+ isReady(): boolean;
721
+ ngOnDestroy(): void;
722
+ }
723
+
724
+ /**
725
+ * Angular module for the Helpdesk Widget
726
+ *
727
+ * This module is for backwards compatibility with Angular apps not using standalone components.
728
+ * For modern Angular apps (v14+), prefer importing the standalone component directly.
729
+ *
730
+ * @example
731
+ * ```typescript
732
+ * // app.module.ts
733
+ * import { HelpdeskWidgetModule } from '@weldsuite/helpdesk-widget-sdk/angular';
734
+ *
735
+ * @NgModule({
736
+ * declarations: [AppComponent],
737
+ * imports: [
738
+ * BrowserModule,
739
+ * HelpdeskWidgetModule
740
+ * ],
741
+ * providers: [],
742
+ * bootstrap: [AppComponent]
743
+ * })
744
+ * export class AppModule { }
745
+ * ```
746
+ *
747
+ * @example For standalone components (Angular 14+), import directly:
748
+ * ```typescript
749
+ * import { HelpdeskWidgetComponent } from '@weldsuite/helpdesk-widget-sdk/angular';
750
+ *
751
+ * @Component({
752
+ * selector: 'app-root',
753
+ * standalone: true,
754
+ * imports: [HelpdeskWidgetComponent],
755
+ * template: `<helpdesk-widget [widgetId]="'your-widget-id'"></helpdesk-widget>`
756
+ * })
757
+ * export class AppComponent {}
758
+ * ```
759
+ */
760
+ declare class HelpdeskWidgetModule {
761
+ }
762
+
763
+ export { DEFAULT_CONFIG, WeldSDK as HelpdeskWidget, HelpdeskWidgetComponent, HelpdeskWidgetModule, HelpdeskWidgetService, WeldSDK };
764
+ export type { WeldConfig as HelpdeskWidgetConfig, WeldConfig, WidgetEvent, WidgetEventHandler, WidgetEventType };