diff --git a/HeadySystems_v13/apps/heady_admin_ui/HEADY_COMPANION_README.md b/HeadySystems_v13/apps/heady_admin_ui/HEADY_COMPANION_README.md new file mode 100644 index 00000000..d02ae814 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/HEADY_COMPANION_README.md @@ -0,0 +1,350 @@ +# Heady AI Companion + +## Overview + +The Heady AI Companion is a personal AI assistant that functions seamlessly across all user UI and UX spaces. It features a welcoming, roundish, symmetrical, and pulsating visual design with an animated robotic face that responds to different states. + +## Features + +### 🎨 Visual Design +- **Roundish & Symmetrical**: Welcoming orb-shaped design based on natural patterns +- **Pulsating Animation**: Different pulse patterns for each state (idle, listening, speaking, thinking) +- **Robotic Face**: Friendly minimalist face with animated eyes and mouth +- **Wave-Form Mouth**: When speaking, displays moving wave functions representing sound +- **Customizable Colors**: Fully customizable primary, secondary, and accent colors + +### 🎤 Voice Capabilities +- **Multiple Voice Options**: Choose from all available system voices +- **Speech Synthesis**: Real-time text-to-speech with visual feedback +- **Custom Voice Training**: Framework for training personalized voice models (coming soon) +- **Voice Parameters**: Adjustable rate, pitch, and volume + +### 🔄 Interactive States +- **Idle**: Gentle pulsating when waiting +- **Listening**: Active pulse indicating attention +- **Speaking**: Dynamic animation with wave-form mouth visualization +- **Thinking**: Rotating pulse showing processing + +### ⚙️ Customization Options +- **Position**: Place anywhere (bottom-right, bottom-left, top-right, top-left) +- **Size**: Small, medium, or large +- **Theme**: Custom color schemes +- **Minimize**: Compact mode for less intrusion + +## Integration Guide + +### Standalone Page + +The companion can be viewed as a standalone demo page: + +```bash +cd HeadySystems_v13/apps/heady_admin_ui +open heady_companion.html # macOS +xdg-open heady_companion.html # Linux +start heady_companion.html # Windows +``` + +Or serve via HTTP: + +```bash +python3 -m http.server 8000 +# Navigate to http://127.0.0.1:8000/heady_companion.html +``` + +### Integration into Existing Pages + +#### Method 1: Script Include + +```html + + + + Your Page + + + + + +
+ + + + + + +``` + +#### Method 2: Auto-initialization + +```html + + + + Your Page + + + + + + + + + +``` + +### Usage Examples + +#### Basic Speaking + +```javascript +// Make the companion speak +companion.speak('Hello! Welcome to Heady Systems.'); + +// Speak with options +companion.speak('I can adjust my voice!', { + rate: 1.2, // Speak faster + pitch: 1.1, // Higher pitch + volume: 0.8 // Quieter +}); +``` + +#### Change States + +```javascript +// Set different states +companion.setState('idle'); // Resting state +companion.setState('listening'); // Paying attention +companion.setState('speaking'); // Talking +companion.setState('thinking'); // Processing +``` + +#### Customize Appearance + +```javascript +// Change colors +companion.setTheme('#ff6b6b', '#c92a2a', '#ff8787'); + +// Change position +companion.setPosition('top-left'); + +// Minimize/maximize +companion.minimize(); +``` + +#### Change Voice + +```javascript +// Set a specific voice +companion.setVoice('Google UK English Female'); + +// List available voices +console.log(companion.voices); +``` + +## API Reference + +### Constructor Options + +```javascript +new HeadyCompanion({ + container: string, // CSS selector or element (default: 'body') + position: string, // 'bottom-right', 'bottom-left', 'top-right', 'top-left' + size: string, // 'small', 'medium', 'large' + theme: string, // 'default' or custom + voice: string, // Voice name (e.g., 'Google US English') + autoInit: boolean, // Auto-initialize on creation (default: true) + primaryColor: string, // Hex color (default: '#97c97c') + secondaryColor: string,// Hex color (default: '#2c5f2d') + accentColor: string // Hex color (default: '#4ecdc4') +}) +``` + +### Methods + +#### `speak(text, options)` +Make the companion speak text using speech synthesis. + +```javascript +companion.speak('Hello world!', { + rate: 1.0, // Speed (0.1 to 10) + pitch: 1.0, // Pitch (0 to 2) + volume: 1.0 // Volume (0 to 1) +}); +``` + +#### `setState(state)` +Change the companion's visual state. + +```javascript +companion.setState('idle' | 'listening' | 'speaking' | 'thinking'); +``` + +#### `setPosition(position)` +Change the companion's screen position. + +```javascript +companion.setPosition('bottom-right' | 'bottom-left' | 'top-right' | 'top-left'); +``` + +#### `setVoice(voiceName)` +Set the speech synthesis voice. + +```javascript +companion.setVoice('Google US English'); +``` + +#### `setTheme(primaryColor, secondaryColor, accentColor)` +Update the color theme. + +```javascript +companion.setTheme('#97c97c', '#2c5f2d', '#4ecdc4'); +``` + +#### `minimize()` +Toggle minimized state. + +```javascript +companion.minimize(); +``` + +#### `destroy()` +Remove the companion from the page. + +```javascript +companion.destroy(); +``` + +### Properties + +- `companion.state` - Current state ('idle', 'listening', 'speaking', 'thinking') +- `companion.voices` - Array of available speech synthesis voices +- `companion.selectedVoice` - Currently selected voice object +- `companion.isMinimized` - Whether companion is minimized + +## Design Philosophy + +### Visual Design Principles + +1. **Welcoming & Friendly**: Round, soft shapes create an approachable presence +2. **Natural Motion**: Pulsating animations follow natural breathing rhythms +3. **Clear Communication**: Visual states clearly indicate what the companion is doing +4. **Non-intrusive**: Can be minimized and positioned to not block content +5. **Customizable**: Adapts to user preferences and brand requirements + +### Interaction Patterns + +- **Hover**: Shows attention when user's cursor is nearby +- **Click**: Reveals controls and options +- **Speaking**: Dynamic wave-form visualization provides clear feedback +- **State Changes**: Smooth transitions between states + +### Accessibility + +- **Visual Feedback**: Clear visual indicators for all states +- **Customizable Size**: Adjustable to user needs +- **Color Customization**: Can be themed for better contrast +- **Voice Options**: Multiple voice choices for different preferences + +## Future Enhancements + +### Custom Voice Training + +The companion includes a framework for custom voice training that will allow users to: + +1. **Record Voice Samples**: Record multiple sentences in their own voice +2. **Train Voice Model**: Process samples to create a personalized voice model +3. **Use Custom Voice**: Apply the trained model for speech synthesis +4. **Share Voice Models**: Export/import voice profiles (with consent) + +### Advanced Features (Planned) + +- **Emotion Detection**: Visual responses to user emotions +- **Context Awareness**: Different behaviors based on page context +- **Multi-language Support**: Automatic language detection and switching +- **Gesture Recognition**: Respond to user gestures +- **Integration with AI Services**: Connect to backend AI for conversations +- **Notification System**: Proactive alerts and reminders +- **Learning Preferences**: Adapt behavior based on user interactions + +## Technical Details + +### Browser Compatibility + +- **Chrome/Edge**: Full support +- **Firefox**: Full support +- **Safari**: Full support (iOS 14+) +- **Opera**: Full support + +### Dependencies + +- **None**: Pure vanilla JavaScript, no external libraries required +- **Web Speech API**: Uses browser's native speech synthesis + +### Performance + +- **Lightweight**: < 20KB minified +- **60 FPS Animations**: Smooth, hardware-accelerated +- **Low Memory**: Minimal resource usage +- **Lazy Loading**: Only loads when needed + +### Privacy & Security + +- **Local Processing**: All speech synthesis runs in the browser +- **No External Calls**: No data sent to external servers +- **No PII Storage**: Does not store personal information +- **User Consent**: Custom voice training requires explicit consent + +## Alignment with Heady Philosophy + +The AI Companion embodies key Heady principles: + +- **User Sovereignty**: Full control over appearance and behavior +- **Transparency**: Clear visual feedback for all operations +- **Privacy by Design**: Local processing, no data leakage +- **Natural Patterns**: Design inspired by golden ratio and nature +- **Ethical AI**: Respectful, helpful, and non-manipulative + +## Patent Portfolio Integration + +This component integrates concepts from: + +- **Patent #11**: MCP Gateway - AI Tool Safety +- **Patent #12**: PromptOps Governance - Ethical AI interaction patterns +- **Patent #31**: HeadyResonance - Wave-form visualizations +- **Patent #34**: HeadyPhi - Golden ratio-based design + +## Examples + +See `heady_companion.html` for a complete working demo with all features. + +## Support + +For issues, questions, or feature requests related to the Heady AI Companion: + +- **Repository**: HeadyConnection/Heady +- **Path**: HeadySystems_v13/apps/heady_admin_ui/ +- **Assignee**: HeadySystems Inc. +- **Inventor**: Eric Haywood + +--- + +*The Heady AI Companion - Your personal AI assistant across all user spaces* diff --git a/HeadySystems_v13/apps/heady_admin_ui/heady_companion.html b/HeadySystems_v13/apps/heady_admin_ui/heady_companion.html new file mode 100644 index 00000000..0ec2b786 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/heady_companion.html @@ -0,0 +1,607 @@ + + + + + + Heady AI Companion + + + +
+

🤖 Heady AI Companion

+

Your Personal AI Assistant Across All User Spaces

+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ Idle +
+
+ +
+

⚙️ Companion Controls

+ +
+ +
+ + + + +
+
+ +
+ + +
Choose from available system voices
+
+ +
+ + + +
Type a message and click to hear the companion speak
+
+ +
+ +
+
+ + +
+
+ + +
+
+
Customize the companion's appearance
+
+ +
+ + +
Record your voice to create a personalized voice model
+
+ +
+

📦 Integration Guide

+ 
<!-- Include in your page -->
+<div id="heady-companion"></div>
+<script src="heady_companion.js"></script>
+<script>
+  const companion = new HeadyCompanion({
+    container: '#heady-companion',
+    voice: 'Google US English',
+    position: 'bottom-right',
+    theme: 'default'
+  });
+  
+  companion.speak('Hello! How can I help you today?');
+</script>
+
+
+ + + + diff --git a/HeadySystems_v13/apps/heady_admin_ui/heady_companion.js b/HeadySystems_v13/apps/heady_admin_ui/heady_companion.js new file mode 100644 index 00000000..dc6b6581 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/heady_companion.js @@ -0,0 +1,623 @@ +/** + * Heady AI Companion Component + * A welcoming, customizable AI companion that functions across all user UI/UX spaces + * + * Features: + * - Roundish, symmetrical, pulsating visual design + * - Animated robotic face with wave-form mouth when speaking + * - Multiple states: idle, listening, speaking, thinking + * - Customizable voices and appearance + * - Speech synthesis integration + * + * @author HeadySystems Inc. + * @version 1.0.0 + */ + +class HeadyCompanion { + constructor(options = {}) { + this.options = { + container: options.container || 'body', + position: options.position || 'bottom-right', + size: options.size || 'medium', + theme: options.theme || 'default', + voice: options.voice || null, + autoInit: options.autoInit !== false, + primaryColor: options.primaryColor || '#97c97c', + secondaryColor: options.secondaryColor || '#2c5f2d', + accentColor: options.accentColor || '#4ecdc4' + }; + + this.state = 'idle'; + this.voices = []; + this.selectedVoice = null; + this.synth = window.speechSynthesis; + this.isMinimized = false; + + if (this.options.autoInit) { + this.init(); + } + } + + init() { + this.createCompanionElement(); + this.applyStyles(); + this.initVoices(); + this.initMouthCanvas(); + this.attachEventListeners(); + this.startIdleAnimation(); + } + + createCompanionElement() { + const container = typeof this.options.container === 'string' + ? document.querySelector(this.options.container) + : this.options.container; + + if (!container) { + console.error('HeadyCompanion: Container not found'); + return; + } + + const sizeMap = { + small: '100px', + medium: '150px', + large: '200px' + }; + + const companionSize = sizeMap[this.options.size] || sizeMap.medium; + + const html = ` +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ Idle +
+
+ +
+ `; + + container.insertAdjacentHTML('beforeend', html); + + this.elements = { + wrapper: document.getElementById('headyCompanionWrapper'), + orb: document.getElementById('headyCompanionOrb'), + mouth: document.getElementById('headyCompanionMouth'), + mouthCanvas: document.getElementById('headyCompanionMouthCanvas'), + stateText: document.getElementById('headyCompanionStateText'), + controls: document.getElementById('headyCompanionControls') + }; + + // Set position + this.setPosition(this.options.position); + } + + applyStyles() { + if (document.getElementById('headyCompanionStyles')) return; + + const style = document.createElement('style'); + style.id = 'headyCompanionStyles'; + style.textContent = ` + .heady-companion-wrapper { + position: fixed; + z-index: 10000; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + } + + .heady-companion-wrapper.position-bottom-right { + bottom: 20px; + right: 20px; + } + + .heady-companion-wrapper.position-bottom-left { + bottom: 20px; + left: 20px; + } + + .heady-companion-wrapper.position-top-right { + top: 20px; + right: 20px; + } + + .heady-companion-wrapper.position-top-left { + top: 20px; + left: 20px; + } + + .heady-companion-wrapper.minimized .heady-companion-container { + transform: scale(0.5); + opacity: 0.6; + } + + .heady-companion-container { + position: relative; + width: 150px; + height: 150px; + transition: all 0.3s ease; + cursor: pointer; + } + + .heady-companion-orb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 120px; + height: 120px; + border-radius: 50%; + background: radial-gradient(circle at 30% 30%, + var(--heady-companion-primary, #97c97c), + var(--heady-companion-secondary, #2c5f2d)); + box-shadow: + 0 0 20px var(--heady-companion-glow, rgba(151, 201, 124, 0.3)), + 0 0 40px var(--heady-companion-glow, rgba(151, 201, 124, 0.3)), + inset 0 0 20px rgba(0, 0, 0, 0.3); + transition: all 0.3s ease; + } + + .heady-companion-orb.idle { + animation: heady-pulse-idle 3s ease-in-out infinite; + } + + .heady-companion-orb.listening { + animation: heady-pulse-listening 1s ease-in-out infinite; + box-shadow: + 0 0 30px var(--heady-companion-accent, #4ecdc4), + 0 0 60px var(--heady-companion-accent, #4ecdc4); + } + + .heady-companion-orb.speaking { + animation: heady-pulse-speaking 0.5s ease-in-out infinite; + } + + .heady-companion-orb.thinking { + animation: heady-pulse-thinking 2s ease-in-out infinite; + } + + @keyframes heady-pulse-idle { + 0%, 100% { transform: translate(-50%, -50%) scale(1); } + 50% { transform: translate(-50%, -50%) scale(1.05); } + } + + @keyframes heady-pulse-listening { + 0%, 100% { transform: translate(-50%, -50%) scale(1); } + 50% { transform: translate(-50%, -50%) scale(1.1); } + } + + @keyframes heady-pulse-speaking { + 0%, 100% { transform: translate(-50%, -50%) scale(1); } + 50% { transform: translate(-50%, -50%) scale(1.08); } + } + + @keyframes heady-pulse-thinking { + 0%, 100% { + transform: translate(-50%, -50%) scale(1) rotate(0deg); + opacity: 0.8; + } + 50% { + transform: translate(-50%, -50%) scale(1.03) rotate(5deg); + opacity: 1; + } + } + + .heady-companion-face { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100px; + height: 100px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + } + + .heady-companion-eyes { + display: flex; + gap: 20px; + } + + .heady-companion-eye { + width: 10px; + height: 10px; + background: #0a0e0a; + border-radius: 50%; + position: relative; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + } + + .heady-companion-eye::after { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 3px; + height: 3px; + background: white; + border-radius: 50%; + opacity: 0.8; + } + + .heady-companion-eye.blinking { + animation: heady-blink 3s infinite; + } + + @keyframes heady-blink { + 0%, 48%, 52%, 100% { height: 10px; } + 50% { height: 2px; } + } + + .heady-companion-mouth { + width: 50px; + height: 25px; + position: relative; + overflow: hidden; + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + } + + .heady-companion-mouth canvas { + width: 100%; + height: 100%; + } + + .heady-companion-mouth.idle { + width: 30px; + height: 3px; + border-radius: 2px; + background: #0a0e0a; + } + + .heady-companion-state-text { + position: absolute; + bottom: -25px; + left: 50%; + transform: translateX(-50%); + font-size: 0.75em; + color: var(--heady-companion-primary, #97c97c); + white-space: nowrap; + } + + .heady-companion-status-indicator { + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; + margin-right: 4px; + background: var(--heady-companion-accent, #4ecdc4); + box-shadow: 0 0 6px var(--heady-companion-accent, #4ecdc4); + } + + .heady-companion-controls { + margin-top: 10px; + display: flex; + gap: 5px; + justify-content: center; + } + + .heady-companion-btn { + background: var(--heady-companion-secondary, #2c5f2d); + color: white; + border: none; + padding: 8px 12px; + border-radius: 6px; + cursor: pointer; + font-size: 0.85em; + transition: all 0.3s ease; + } + + .heady-companion-btn:hover { + background: var(--heady-companion-primary, #97c97c); + color: #0a0e0a; + } + `; + document.head.appendChild(style); + + // Apply custom colors + this.updateColors(); + } + + updateColors() { + const root = document.documentElement; + root.style.setProperty('--heady-companion-primary', this.options.primaryColor); + root.style.setProperty('--heady-companion-secondary', this.options.secondaryColor); + root.style.setProperty('--heady-companion-accent', this.options.accentColor); + root.style.setProperty('--heady-companion-glow', + this.hexToRgba(this.options.primaryColor, 0.3)); + } + + hexToRgba(hex, alpha) { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + return `rgba(${r}, ${g}, ${b}, ${alpha})`; + } + + setPosition(position) { + const validPositions = ['bottom-right', 'bottom-left', 'top-right', 'top-left']; + if (validPositions.includes(position)) { + this.elements.wrapper.className = `heady-companion-wrapper position-${position}`; + } + } + + initVoices() { + const loadVoices = () => { + this.voices = this.synth.getVoices(); + + if (this.voices.length > 0) { + // Try to find the requested voice or use a default + if (this.options.voice) { + this.selectedVoice = this.voices.find(v => + v.name.includes(this.options.voice) + ) || this.voices[0]; + } else { + // Try to select a good default voice + this.selectedVoice = this.voices.find(v => + v.name.includes('Google') || v.name.includes('Female') + ) || this.voices[0]; + } + } + }; + + loadVoices(); + if (this.synth.onvoiceschanged !== undefined) { + this.synth.onvoiceschanged = loadVoices; + } + } + + initMouthCanvas() { + const canvas = this.elements.mouthCanvas; + canvas.width = 50; + canvas.height = 25; + this.mouthCtx = canvas.getContext('2d'); + } + + attachEventListeners() { + this.elements.orb.addEventListener('click', () => { + this.toggleControls(); + }); + + this.elements.orb.addEventListener('mouseenter', () => { + if (this.state === 'idle') { + this.setState('listening'); + setTimeout(() => { + if (this.state === 'listening') { + this.setState('idle'); + } + }, 2000); + } + }); + + // Add control button listeners + const greetBtn = document.getElementById('headyCompanionGreetBtn'); + const minimizeBtn = document.getElementById('headyCompanionMinimizeBtn'); + + if (greetBtn) { + greetBtn.addEventListener('click', () => { + this.speak('Hello! How can I help you today?'); + }); + } + + if (minimizeBtn) { + minimizeBtn.addEventListener('click', () => { + this.minimize(); + }); + } + } + + toggleControls() { + const controls = this.elements.controls; + if (controls.style.display === 'none') { + controls.style.display = 'flex'; + } else { + controls.style.display = 'none'; + } + } + + setState(newState) { + this.state = newState; + this.elements.orb.className = `heady-companion-orb ${newState}`; + + const stateEmojis = { + idle: '💤', + listening: '👂', + speaking: '💬', + thinking: '🤔' + }; + + const stateNames = { + idle: 'Idle', + listening: 'Listening', + speaking: 'Speaking', + thinking: 'Thinking' + }; + + this.elements.stateText.innerHTML = + `${stateEmojis[newState]} ${stateNames[newState]}`; + + if (newState === 'idle') { + this.elements.mouth.className = 'heady-companion-mouth idle'; + } else { + this.elements.mouth.className = 'heady-companion-mouth'; + } + } + + speak(text, options = {}) { + if (this.synth.speaking) { + this.synth.cancel(); + } + + const utterance = new SpeechSynthesisUtterance(text); + if (this.selectedVoice) { + utterance.voice = this.selectedVoice; + } + + utterance.rate = options.rate || 1.0; + utterance.pitch = options.pitch || 1.0; + utterance.volume = options.volume || 1.0; + + utterance.onstart = () => { + this.setState('speaking'); + this.startSpeakingAnimation(); + }; + + utterance.onend = () => { + this.setState('idle'); + this.stopSpeakingAnimation(); + }; + + this.synth.speak(utterance); + } + + startSpeakingAnimation() { + const canvas = this.elements.mouthCanvas; + const ctx = this.mouthCtx; + let time = 0; + + const animate = () => { + if (this.state !== 'speaking') return; + + ctx.fillStyle = 'rgba(10, 14, 10, 0.3)'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + // Draw multiple wave forms to simulate speech + const waves = [ + { freq: 0.3, amp: 6, color: this.options.accentColor, phase: 0 }, + { freq: 0.5, amp: 4, color: this.lightenColor(this.options.accentColor, 20), phase: Math.PI / 3 }, + { freq: 0.4, amp: 5, color: this.darkenColor(this.options.accentColor, 20), phase: Math.PI / 2 } + ]; + + waves.forEach(wave => { + ctx.strokeStyle = wave.color; + ctx.lineWidth = 1.5; + ctx.beginPath(); + + for (let x = 0; x < canvas.width; x++) { + const y = canvas.height / 2 + + Math.sin((x * wave.freq) + time + wave.phase) * wave.amp; + + if (x === 0) ctx.moveTo(x, y); + else ctx.lineTo(x, y); + } + ctx.stroke(); + }); + + time += 0.2; + this.speakingAnimationFrame = requestAnimationFrame(animate); + }; + + animate(); + } + + stopSpeakingAnimation() { + if (this.speakingAnimationFrame) { + cancelAnimationFrame(this.speakingAnimationFrame); + } + } + + startIdleAnimation() { + // Placeholder for future idle animations + // The pulsating effect is currently handled via CSS animations + // Additional JavaScript-based animations can be added here if needed + } + + minimize() { + this.isMinimized = !this.isMinimized; + if (this.isMinimized) { + this.elements.wrapper.classList.add('minimized'); + } else { + this.elements.wrapper.classList.remove('minimized'); + } + } + + setVoice(voiceName) { + const voice = this.voices.find(v => v.name === voiceName); + if (voice) { + this.selectedVoice = voice; + } + } + + setTheme(primaryColor, secondaryColor, accentColor) { + if (primaryColor) this.options.primaryColor = primaryColor; + if (secondaryColor) this.options.secondaryColor = secondaryColor; + if (accentColor) this.options.accentColor = accentColor; + this.updateColors(); + } + + lightenColor(color, percent) { + const num = parseInt(color.replace("#", ""), 16); + const amt = Math.round(2.55 * percent); + const R = (num >> 16) + amt; + const G = (num >> 8 & 0x00FF) + amt; + const B = (num & 0x0000FF) + amt; + return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + + (B < 255 ? B < 1 ? 0 : B : 255)) + .toString(16).slice(1); + } + + darkenColor(color, percent) { + const num = parseInt(color.replace("#", ""), 16); + const amt = Math.round(2.55 * percent); + const R = (num >> 16) - amt; + const G = (num >> 8 & 0x00FF) - amt; + const B = (num & 0x0000FF) - amt; + return "#" + (0x1000000 + (R > 0 ? R : 0) * 0x10000 + + (G > 0 ? G : 0) * 0x100 + + (B > 0 ? B : 0)) + .toString(16).slice(1); + } + + destroy() { + // Stop speaking animation + if (this.speakingAnimationFrame) { + cancelAnimationFrame(this.speakingAnimationFrame); + } + + // Cancel any ongoing speech + if (this.synth.speaking) { + this.synth.cancel(); + } + + // Remove DOM element + if (this.elements.wrapper) { + this.elements.wrapper.remove(); + } + } +} + +// Auto-initialize if data attribute is present +document.addEventListener('DOMContentLoaded', () => { + const autoInit = document.querySelector('[data-heady-companion-auto]'); + if (autoInit) { + window.headyCompanion = new HeadyCompanion({ + container: autoInit.getAttribute('data-heady-companion-container') || 'body', + position: autoInit.getAttribute('data-heady-companion-position') || 'bottom-right', + size: autoInit.getAttribute('data-heady-companion-size') || 'medium' + }); + } +}); + +// Export for module systems +if (typeof module !== 'undefined' && module.exports) { + module.exports = HeadyCompanion; +} diff --git a/HeadySystems_v13/apps/heady_admin_ui/heady_gaia_monitor.html b/HeadySystems_v13/apps/heady_admin_ui/heady_gaia_monitor.html index 1fdde107..08deebbe 100644 --- a/HeadySystems_v13/apps/heady_admin_ui/heady_gaia_monitor.html +++ b/HeadySystems_v13/apps/heady_admin_ui/heady_gaia_monitor.html @@ -740,5 +740,24 @@

⚡ Real-time System Status

drawNaturePatterns(); }); + + + +