@foisit/angular-wrapper 2.5.0 → 3.0.0

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 CHANGED
@@ -33,7 +33,7 @@ Transform your Angular app into an intelligent, voice-ready platform. Foisit pro
33
33
  - **Programmatic UI Triggers** - Direct command execution via `runCommand()`
34
34
  - **Rich Markdown Rendering** - Enhanced response formatting with headings, code, and links
35
35
  - **Advanced File Validations** - Comprehensive client-side file validation with size, type, and dimension checks
36
- - **Premium UI** - Glassmorphic overlay with dark/light mode support
36
+ - **Premium UI** - Glass or solid theme with dark/light mode support
37
37
  - **Zero Backend Required** - Secure proxy architecture keeps API keys server-side
38
38
  - **Angular Native** - Uses Dependency Injection, Signals, and RxJS
39
39
  - **Type-Safe** - Full TypeScript support with comprehensive types
@@ -51,8 +51,8 @@ npm install @foisit/angular-wrapper
51
51
 
52
52
  ```json
53
53
  {
54
- "@angular/core": "^17.0.0 || ^18.0.0",
55
- "@angular/common": "^17.0.0 || ^18.0.0"
54
+ "@angular/core": "^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
55
+ "@angular/common": "^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
56
56
  }
57
57
  ```
58
58
 
@@ -471,9 +471,49 @@ interface AssistantConfig {
471
471
  customHtml?: string;
472
472
  position?: { bottom: string; right: string };
473
473
  };
474
+
475
+ // Theme mode: 'glass' (default) or 'solid'
476
+ theme?: 'glass' | 'solid';
477
+
478
+ // Custom colors for solid theme (ignored in glass mode)
479
+ themeColors?: ThemeColors;
480
+ }
481
+ ```
482
+
483
+ ### `ThemeColors`
484
+
485
+ Custom colors for solid theme mode:
486
+
487
+ ```typescript
488
+ interface ThemeColors {
489
+ background?: string; // Background color (e.g., '#1e1e2e')
490
+ text?: string; // Primary text color (e.g., '#ffffff')
491
+ accent?: string; // Accent color for highlights (e.g., '#89b4fa' or a gradient)
492
+ userBubbleBg?: string; // User message bubble background
493
+ systemBubbleBg?: string; // System message bubble background
494
+ border?: string; // Border color
474
495
  }
475
496
  ```
476
497
 
498
+ ### Theme Customization Example
499
+
500
+ ```typescript
501
+ AssistantModule.forRoot({
502
+ commands: [...],
503
+ // Use solid theme with custom colors
504
+ theme: 'solid',
505
+ themeColors: {
506
+ background: '#1e1e2e',
507
+ text: '#cdd6f4',
508
+ accent: '#89b4fa',
509
+ userBubbleBg: 'rgba(137, 180, 250, 0.2)',
510
+ systemBubbleBg: 'rgba(255, 255, 255, 0.05)',
511
+ },
512
+ })
513
+ ```
514
+
515
+ > **Note**: Glass theme (default) uses glassmorphism with blur effects and adapts to light/dark mode via `prefers-color-scheme`. Solid theme ignores system preferences and uses configured colors.
516
+
477
517
  ---
478
518
 
479
519
  ## Advanced Usage