@foisit/angular-wrapper 2.5.1 → 3.0.0

package/README.md

@@ -33,7 +33,7 @@ Transform your Angular app into an intelligent, voice-ready platform. Foisit pro
 - **Programmatic UI Triggers** - Direct command execution via `runCommand()`
 - **Rich Markdown Rendering** - Enhanced response formatting with headings, code, and links
 - **Advanced File Validations** - Comprehensive client-side file validation with size, type, and dimension checks
-- **Premium UI** - Glassmorphic overlay with dark/light mode support
+- **Premium UI** - Glass or solid theme with dark/light mode support
 - **Zero Backend Required** - Secure proxy architecture keeps API keys server-side
 - **Angular Native** - Uses Dependency Injection, Signals, and RxJS
 - **Type-Safe** - Full TypeScript support with comprehensive types
@@ -51,8 +51,8 @@ npm install @foisit/angular-wrapper
 
 ```json
 {
-  "@angular/core": "^17.0.0 || ^18.0.0",
-  "@angular/common": "^17.0.0 || ^18.0.0"
+  "@angular/core": "^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+  "@angular/common": "^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
 }
 ```
 
@@ -471,9 +471,49 @@ interface AssistantConfig {
     customHtml?: string;
     position?: { bottom: string; right: string };
   };
+
+  // Theme mode: 'glass' (default) or 'solid'
+  theme?: 'glass' | 'solid';
+
+  // Custom colors for solid theme (ignored in glass mode)
+  themeColors?: ThemeColors;
+}
+```
+
+### `ThemeColors`
+
+Custom colors for solid theme mode:
+
+```typescript
+interface ThemeColors {
+  background?: string; // Background color (e.g., '#1e1e2e')
+  text?: string; // Primary text color (e.g., '#ffffff')
+  accent?: string; // Accent color for highlights (e.g., '#89b4fa' or a gradient)
+  userBubbleBg?: string; // User message bubble background
+  systemBubbleBg?: string; // System message bubble background
+  border?: string; // Border color
 }
 ```
 
+### Theme Customization Example
+
+```typescript
+AssistantModule.forRoot({
+  commands: [...],
+  // Use solid theme with custom colors
+  theme: 'solid',
+  themeColors: {
+    background: '#1e1e2e',
+    text: '#cdd6f4',
+    accent: '#89b4fa',
+    userBubbleBg: 'rgba(137, 180, 250, 0.2)',
+    systemBubbleBg: 'rgba(255, 255, 255, 0.05)',
+  },
+})
+```
+
+> **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.
+
 ---
 
 ## Advanced Usage

package/fesm2022/foisit-angular-wrapper.mjs

@@ -1136,7 +1136,7 @@ class OverlayManager {
     async runCommand(options) {
         if (!options || !options.commandId)
             throw new Error('runCommand requires a commandId');
-        const { commandId, params, openOverlay = true, showInvocation = true } = options;
+        const { commandId, params, openOverlay = true, showInvocation = true, } = options;
         if (openOverlay && !this.isOpen)
             this.toggle();
         const handler = this.commandHandlers.get(commandId);
@@ -1210,7 +1210,8 @@ class OverlayManager {
             this.chatWindow = existing.querySelector('.foisit-chat');
             this.messagesContainer = existing.querySelector('.foisit-messages');
             this.input = existing.querySelector('input.foisit-input');
-            if (this.config.floatingButton?.visible !== false && !existing.querySelector('.foisit-floating-btn')) {
+            if (this.config.floatingButton?.visible !== false &&
+                !existing.querySelector('.foisit-floating-btn')) {
                 this.renderFloatingButton();
             }
             if (!this.chatWindow) {
@@ -1376,7 +1377,8 @@ class OverlayManager {
         else {
             msg.textContent = text;
         }
-        msg.className = type === 'user' ? 'foisit-bubble user' : 'foisit-bubble system';
+        msg.className =
+            type === 'user' ? 'foisit-bubble user' : 'foisit-bubble system';
         // Entrance animation: fade + slight upward motion. Duration scales so
         // short messages animate a bit slower, long messages appear faster.
         const length = (text || '').length || 0;
@@ -1411,7 +1413,9 @@ class OverlayManager {
                     return;
                 }
                 // Otherwise fall back to value or label string
-                const value = (opt && typeof opt.value === 'string' && opt.value.trim()) ? opt.value : opt.label;
+                const value = opt && typeof opt.value === 'string' && opt.value.trim()
+                    ? opt.value
+                    : opt.label;
                 if (this.onSubmit)
                     this.onSubmit(value);
             };
@@ -1437,7 +1441,8 @@ class OverlayManager {
         const createLabel = (text, required) => {
             const label = document.createElement('div');
             label.className = 'foisit-form-label';
-            label.innerHTML = text + (required ? ' <span class="foisit-req-star">*</span>' : '');
+            label.innerHTML =
+                text + (required ? ' <span class="foisit-req-star">*</span>' : '');
             return label;
         };
         const createError = () => {
@@ -1530,7 +1535,7 @@ class OverlayManager {
                     }
                     const maxSize = ffield.maxSizeBytes ?? Infinity;
                     const total = files.reduce((s, f) => s + f.size, 0);
-                    if (files.some(f => f.size > maxSize)) {
+                    if (files.some((f) => f.size > maxSize)) {
                         errEl.textContent = `One or more files exceed the maximum size of ${Math.round(maxSize / 1024)} KB.`;
                         errEl.style.display = 'block';
                         return;
@@ -1547,7 +1552,10 @@ class OverlayManager {
                         const ok = files.every((file) => {
                             if (!file.type)
                                 return true; // can't tell
-                            return accepts.some(a => a.startsWith('.') ? file.name.toLowerCase().endsWith(a.toLowerCase()) : file.type === a || file.type.startsWith(a.split('/')[0] + '/'));
+                            return accepts.some((a) => a.startsWith('.')
+                                ? file.name.toLowerCase().endsWith(a.toLowerCase())
+                                : file.type === a ||
+                                    file.type.startsWith(a.split('/')[0] + '/'));
                         });
                         if (!ok) {
                             errEl.textContent = 'One or more files have an unsupported type.';
@@ -1617,11 +1625,11 @@ class OverlayManager {
             const data = {};
             let hasError = false;
             // Clear previous errors
-            form.querySelectorAll('.foisit-form-error').forEach(el => {
+            form.querySelectorAll('.foisit-form-error').forEach((el) => {
                 el.style.display = 'none';
                 el.textContent = '';
             });
-            form.querySelectorAll('.foisit-form-input').forEach(el => {
+            form.querySelectorAll('.foisit-form-input').forEach((el) => {
                 el.classList.remove('foisit-error-border');
             });
             for (const c of controls) {
@@ -1907,7 +1915,10 @@ class OverlayManager {
                 const url = URL.createObjectURL(file);
                 const img = new Image();
                 img.onload = () => {
-                    const dims = { width: img.naturalWidth || img.width, height: img.naturalHeight || img.height };
+                    const dims = {
+                        width: img.naturalWidth || img.width,
+                        height: img.naturalHeight || img.height,
+                    };
                     URL.revokeObjectURL(url);
                     resolve(dims);
                 };
@@ -1926,7 +1937,9 @@ class OverlayManager {
         return new Promise((resolve) => {
             try {
                 const url = URL.createObjectURL(file);
-                const el = file.type.startsWith('audio') ? document.createElement('audio') : document.createElement('video');
+                const el = file.type.startsWith('audio')
+                    ? document.createElement('audio')
+                    : document.createElement('video');
                 let settled = false;
                 const timeout = setTimeout(() => {
                     if (!settled) {
@@ -1966,57 +1979,105 @@ class OverlayManager {
             return;
         const style = document.createElement('style');
         style.id = 'foisit-overlay-styles';
-        style.textContent = `
-      :root {
-        /* LIGHT MODE (Default) - Smoother gradient */
-        /* Changed: Softer, right-focused radial highlight to avoid a heavy white bottom */
-        --foisit-bg: radial-gradient(ellipse at 75% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
-        --foisit-border: 1px solid rgba(255, 255, 255, 0.25);
-        --foisit-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-        --foisit-text: #333;
-
-        /* Input */
-        --foisit-input-color: #333;
-        --foisit-input-placeholder: rgba(60, 60, 67, 0.6);
-
-        /* Bubbles */
-        --foisit-bubble-user-bg: rgba(0, 0, 0, 0.04);
-        --foisit-bubble-user-text: #333;
-
-        --foisit-bubble-sys-bg: rgba(255, 255, 255, 0.45);
-        --foisit-bubble-sys-text: #333;
-
-        /* Form Colors */
-        --foisit-req-star: #ef4444; /* Red asterisk */
-        --foisit-error-text: #dc2626;
-        --foisit-error-border: #fca5a5;
-      }
-
-      @media (prefers-color-scheme: dark) {
+        // Determine theme mode (default: glass)
+        const theme = this.config.theme || 'glass';
+        const colors = this.config.themeColors || {};
+        if (theme === 'solid') {
+            // SOLID THEME: Opaque backgrounds with customizable colors
+            // Defaults: dark navy bg, white text, purple-blue gradient accent
+            const bg = colors.background || '#1a1a2e';
+            const text = colors.text || '#ffffff';
+            const accent = colors.accent || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+            const userBubbleBg = colors.userBubbleBg || 'rgba(102, 126, 234, 0.2)';
+            const systemBubbleBg = colors.systemBubbleBg || 'rgba(255, 255, 255, 0.08)';
+            const border = colors.border || 'rgba(255, 255, 255, 0.1)';
+            style.textContent = `
         :root {
-          /* DARK MODE */
-          --foisit-bg: linear-gradient(135deg, rgba(40, 40, 40, 0.65), rgba(40, 40, 40, 0.25));
-          --foisit-border: 1px solid rgba(255, 255, 255, 0.1);
-          --foisit-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
-          --foisit-text: #fff;
+          /* SOLID THEME - Custom Colors */
+          --foisit-bg: ${bg};
+          --foisit-border: 1px solid ${border};
+          --foisit-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
+          --foisit-text: ${text};
+          --foisit-accent: ${accent};
+          --foisit-backdrop: none;
 
           /* Input */
-          --foisit-input-color: white;
-          --foisit-input-placeholder: rgba(235, 235, 245, 0.5);
+          --foisit-input-color: ${text};
+          --foisit-input-placeholder: ${text}99;
 
           /* Bubbles */
-          --foisit-bubble-user-bg: rgba(255, 255, 255, 0.1);
-          --foisit-bubble-user-text: white;
+          --foisit-bubble-user-bg: ${userBubbleBg};
+          --foisit-bubble-user-text: ${text};
 
-          --foisit-bubble-sys-bg: rgba(255, 255, 255, 0.05);
-          --foisit-bubble-sys-text: rgba(255, 255, 255, 0.9);
+          --foisit-bubble-sys-bg: ${systemBubbleBg};
+          --foisit-bubble-sys-text: ${text}ee;
 
           /* Form Colors */
           --foisit-req-star: #f87171;
           --foisit-error-text: #fca5a5;
           --foisit-error-border: #f87171;
         }
-      }
+      `;
+        }
+        else {
+            // GLASS THEME (default): Glassmorphism with blur effects
+            style.textContent = `
+        :root {
+          /* LIGHT MODE (Default) - Smoother gradient */
+          /* Changed: Softer, right-focused radial highlight to avoid a heavy white bottom */
+          --foisit-bg: radial-gradient(ellipse at 75% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
+          --foisit-border: 1px solid rgba(255, 255, 255, 0.25);
+          --foisit-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+          --foisit-text: #333;
+          --foisit-backdrop: blur(20px);
+
+          /* Input */
+          --foisit-input-color: #333;
+          --foisit-input-placeholder: rgba(60, 60, 67, 0.6);
+
+          /* Bubbles */
+          --foisit-bubble-user-bg: rgba(0, 0, 0, 0.04);
+          --foisit-bubble-user-text: #333;
+
+          --foisit-bubble-sys-bg: rgba(255, 255, 255, 0.45);
+          --foisit-bubble-sys-text: #333;
+
+          /* Form Colors */
+          --foisit-req-star: #ef4444; /* Red asterisk */
+          --foisit-error-text: #dc2626;
+          --foisit-error-border: #fca5a5;
+        }
+
+        @media (prefers-color-scheme: dark) {
+          :root {
+            /* DARK MODE */
+            --foisit-bg: linear-gradient(135deg, rgba(40, 40, 40, 0.65), rgba(40, 40, 40, 0.25));
+            --foisit-border: 1px solid rgba(255, 255, 255, 0.1);
+            --foisit-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+            --foisit-text: #fff;
+            --foisit-backdrop: blur(20px);
+
+            /* Input */
+            --foisit-input-color: white;
+            --foisit-input-placeholder: rgba(235, 235, 245, 0.5);
+
+            /* Bubbles */
+            --foisit-bubble-user-bg: rgba(255, 255, 255, 0.1);
+            --foisit-bubble-user-text: white;
+
+            --foisit-bubble-sys-bg: rgba(255, 255, 255, 0.05);
+            --foisit-bubble-sys-text: rgba(255, 255, 255, 0.9);
+
+            /* Form Colors */
+            --foisit-req-star: #f87171;
+            --foisit-error-text: #fca5a5;
+            --foisit-error-border: #f87171;
+          }
+        }
+      `;
+        }
+        // Add common styles shared between both themes (animations, layouts, etc.)
+        style.textContent += `
 
       @keyframes foisitPulse {
         0%, 100% { transform: scale(0.8); opacity: 0.5; }
@@ -2064,8 +2125,8 @@ class OverlayManager {
         border: var(--foisit-border);
         box-shadow: var(--foisit-shadow);
 
-        backdrop-filter: blur(20px);
-        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: var(--foisit-backdrop);
+        -webkit-backdrop-filter: var(--foisit-backdrop);
 
         border-radius: 18px;
         display: none;
@@ -2274,8 +2335,8 @@ class OverlayManager {
         border: 1px solid rgba(255,255,255,0.2);
         background: var(--foisit-bg);
         color: var(--foisit-text);
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: var(--foisit-backdrop);
+        -webkit-backdrop-filter: var(--foisit-backdrop);
         box-shadow: 0 4px 12px rgba(0,0,0,0.15);
         cursor: pointer;
         pointer-events: auto;
@@ -2407,6 +2468,8 @@ class AssistantService {
                 floatingButton: this.config.floatingButton,
                 inputPlaceholder: this.config.inputPlaceholder,
                 enableGestureActivation: this.config.enableGestureActivation,
+                theme: this.config.theme,
+                themeColors: this.config.themeColors,
             });
             // Let the overlay delegate command execution to our CommandHandler when
             // a programmatic handler isn't registered on the overlay.
@@ -2572,7 +2635,8 @@ class AssistantService {
             });
             return;
         }
-        if ((response.type === 'ambiguous' || response.type === 'confirm') && response.options) {
+        if ((response.type === 'ambiguous' || response.type === 'confirm') &&
+            response.options) {
             if (response.message) {
                 this.overlayManager.addMessage(response.message, 'system');
             }