wally-ui 1.14.1 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
   "bin": {
     "wally": "dist/cli.js"

package/playground/showcase/public/sitemap.xml

@@ -68,6 +68,21 @@
         <priority>0.8</priority>
     </url>
 
+    <url>
+        <loc>https://wally-ui.com/documentation/components/selection-popover</loc>
+        <lastmod>2025-10-18</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
+    <!-- Audio Waveform Documentation -->
+    <url>
+        <loc>https://wally-ui.com/documentation/components/audio-waveform</loc>
+        <lastmod>2025-10-18</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
     <!-- Chat SDK Documentation -->
     <url>
         <loc>https://wally-ui.com/documentation/chat-sdk</loc>

package/playground/showcase/src/app/app.routes.server.ts

@@ -37,6 +37,10 @@ export const serverRoutes: ServerRoute[] = [
     path: 'documentation/components/selection-popover',
     renderMode: RenderMode.Prerender,
   },
+  {
+    path: 'documentation/components/audio-waveform',
+    renderMode: RenderMode.Prerender,
+  },
   {
     path: 'documentation/chat-sdk',
     renderMode: RenderMode.Prerender,

package/playground/showcase/src/app/components/ai/ai-composer/ai-composer.html

@@ -35,10 +35,18 @@
     </div>
     }
 
-    <div class="w-full px-4 pt-4">
+    <div class="w-full px-4 pt-4 transition-all duration-1000 ease-in-out overflow-hidden" [class.opacity-0]="isStartRecoding()" [class.opacity-100]="!isStartRecoding()"
+        [class.max-h-0]="isStartRecoding()" [class.max-h-96]="!isStartRecoding()">
         <wally-ai-prompt-input></wally-ai-prompt-input>
     </div>
 
+    <div class="w-full transition-all duration-700 ease-in-out overflow-hidden" [class.opacity-0]="!isStartRecoding()"
+        [class.opacity-100]="isStartRecoding()" [class.scale-95]="!isStartRecoding()"
+        [class.scale-100]="isStartRecoding()" [class.max-h-0]="!isStartRecoding()" [class.max-h-32]="isStartRecoding()">
+        <wally-audio-waveform [isStartRecording]="isStartRecoding()" [isStopRecording]="isStopRecoding()">
+        </wally-audio-waveform>
+    </div>
+
     <!-- Action Buttons -->
     <div class="w-full flex items-center justify-between p-1" role="toolbar" aria-label="Composer actions">
         <div class="w-full flex items-center gap-1">
@@ -186,7 +194,8 @@
         <div class="w-full size-10 flex gap-2 justify-end">
             <div>
                 <wally-tooltip [text]="'Use voice input'" position="bottom">
-                    <wally-button [variant]="'ghost'" [rounded]="true" [ariaLabel]="'Send message'">
+                    <wally-button (buttonClick)="toggleInputVoice()" [variant]="'ghost'" [rounded]="true"
+                        [ariaLabel]="'Send message'">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                             stroke="currentColor" class="size-6">
                             <path stroke-linecap="round" stroke-linejoin="round"

package/playground/showcase/src/app/components/ai/ai-composer/ai-composer.ts

@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { Component, input, InputSignal, signal, WritableSignal } from '@angular/core';
 
 import { DropdownMenuSubTrigger } from '../../dropdown-menu/dropdown-menu-sub-trigger/dropdown-menu-sub-trigger';
 import { DropdownMenuSubContent } from '../../dropdown-menu/dropdown-menu-sub-content/dropdown-menu-sub-content';
@@ -9,6 +9,7 @@ import { DropdownMenuLabel } from '../../dropdown-menu/dropdown-menu-label/dropd
 import { DropdownMenuGroup } from '../../dropdown-menu/dropdown-menu-group/dropdown-menu-group';
 import { DropdownMenuItem } from '../../dropdown-menu/dropdown-menu-item/dropdown-menu-item';
 import { DropdownMenuSub } from '../../dropdown-menu/dropdown-menu-sub/dropdown-menu-sub';
+import { AudioWaveform } from '../../audio-waveform/audio-waveform';
 import { AiPromptInput } from '../ai-prompt-input/ai-prompt-input';
 import { DropdownMenu } from '../../dropdown-menu/dropdown-menu';
 import { Tooltip } from '../../tooltip/tooltip';
@@ -29,15 +30,24 @@ import { Button } from '../../button/button';
     DropdownMenuGroup,
     DropdownMenuSub,
     DropdownMenuSubTrigger,
-    DropdownMenuSubContent
+    DropdownMenuSubContent,
+    AudioWaveform
   ],
   templateUrl: './ai-composer.html',
   styleUrl: './ai-composer.css'
 })
 export class AiComposer {
-  textSelected = input<string>('');
+  textSelected: InputSignal<string> = input<string>('');
+
+  isStartRecoding: WritableSignal<boolean> = signal<boolean>(false);
+  isStopRecoding: WritableSignal<boolean> = signal<boolean>(true);
 
   onItemClick(): void {
     console.log('Item clicked');
   }
+
+  toggleInputVoice(): void {
+    this.isStartRecoding.set(!this.isStartRecoding());
+    this.isStopRecoding.set(!this.isStartRecoding());
+  }
 }

package/playground/showcase/src/app/components/audio-waveform/audio-waveform.html

@@ -0,0 +1,41 @@
+<div class="w-full flex flex-col items-center gap-4 p-3">
+
+    <!-- Waveform Bars Container -->
+    @if (isStartRecording()) {
+    <div class="flex items-center justify-center gap-1 h-11 w-full">
+        @if (audioWaveformService.isRecording()) {
+        <!-- Active Recording: Animated Bars -->
+        @for (barHeight of audioWaveformService.audioData(); track $index) {
+        <div class="flex-1 min-w-[2px] max-w-[7px] bg-[#0a0a0a] dark:bg-white rounded-full transition-all duration-200 ease-out"
+            [style.height.%]="barHeight || 5" [style.min-height.px]="4">
+        </div>
+        }
+        } 
+        
+    </div>
+    }
+
+    <!-- Recording Timer -->
+    @if (showTimer() && audioWaveformService.isRecording()) {
+    <div class="text-sm text-[#0a0a0a] dark:text-white">
+        {{ formattedTime }}
+    </div>
+    }
+
+    <!-- Controls -->
+    <!-- <div class="flex gap-2">
+        @if (!audioWaveformService.isRecording()) {
+        <button (click)="startRecording()"
+            class="px-4 py-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
+            aria-label="Start recording">
+            Start Recording
+        </button>
+        } @else {
+        <button (click)="stopRecording()"
+            class="px-4 py-2 bg-neutral-500 text-white rounded-full  hover:bg-neutral-600 transition-colors"
+            aria-label="Stop recording">
+            Stop Recording
+        </button>
+        }
+    </div> -->
+</div>

package/playground/showcase/src/app/components/audio-waveform/audio-waveform.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AudioWaveformService } from './audio-waveform.service';
+
+describe('AudioWaveformService', () => {
+  let service: AudioWaveformService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AudioWaveformService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/audio-waveform/audio-waveform.service.ts

@@ -0,0 +1,175 @@
+import { Injectable, signal, WritableSignal } from '@angular/core';
+
+@Injectable()
+export class AudioWaveformService {
+  isRecording: WritableSignal<boolean> = signal<boolean>(false);
+  audioData: WritableSignal<number[]> = signal<number[]>([]); // Frequency values for bars
+
+  // Recorded audio signals
+  recordedAudioBlob: WritableSignal<Blob | null> = signal<Blob | null>(null);
+  recordedAudioUrl: WritableSignal<string | null> = signal<string | null>(null);
+
+  // Audio API references
+  private audioContext: AudioContext | null = null;
+  private analyser: AnalyserNode | null = null;
+  private microphone: MediaStreamAudioSourceNode | null = null;
+  private animationFrame: number | null = null;
+  private stream: MediaStream | null = null;
+
+  // Configuration
+  private readonly FFT_SIZE = 256; // Higher = more frequency detail
+  private readonly SMOOTHING = 0.8; // 0 (no smoothing) to 1 (max smoothing)
+
+  // Responsive bar count based on screen width
+  private get BAR_COUNT(): number {
+    if (typeof window === 'undefined') return 30; // SSR fallback
+    return window.innerWidth < 768 ? 30 : 65; // Mobile: 30 bars, Desktop: 65 bars
+  }
+
+  // MediaRecorded
+  private mediaRecorder: MediaRecorder | null = null;
+  private audioChunks: Blob[] = [];
+
+  async startRecording(): Promise<void> {
+    try {
+      // Request microphone access
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true
+        }
+      });
+
+      // Create audio context
+      this.audioContext = new AudioContext();
+
+      // Create analyzer
+      this.analyser = this.audioContext.createAnalyser();
+      this.analyser.fftSize = this.FFT_SIZE;
+      this.analyser.smoothingTimeConstant = this.SMOOTHING;
+
+      // Connect microphone to analyzer
+      this.microphone = this.audioContext.createMediaStreamSource(this.stream);
+      this.microphone?.connect(this.analyser);
+
+      // Init MediaRecorded
+      this.audioChunks = [];
+      this.mediaRecorder = new MediaRecorder(this.stream);
+
+      this.mediaRecorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          this.audioChunks.push(event.data);
+        }
+      };
+
+      this.mediaRecorder.onstop = () => {
+        const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });
+        this.recordedAudioBlob.set(audioBlob);
+
+        const audioUrl = URL.createObjectURL(audioBlob);
+        this.recordedAudioUrl.set(audioUrl);
+      };
+
+      this.mediaRecorder.start();
+
+      // Start animation loop
+      this.isRecording.set(true);
+      this.updateWaveForm();
+
+    } catch (error) {
+      console.error('Microphone access denied:', error);
+      throw error;
+    }
+  }
+
+  stopRecording(): void {
+    // Stop animation
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+    }
+
+    if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+      this.mediaRecorder.stop();
+    }
+
+    // Disconnect audio nodes
+    this.microphone?.disconnect();
+    this.audioContext?.close();
+
+    // Stop microphone strem
+    this.stream?.getTracks().forEach(track => track.stop());
+
+    // Reset state
+    this.isRecording.set(false);
+    this.audioData.set([]);
+
+    // Clean up references
+    this.audioContext = null;
+    this.analyser = null;
+    this.microphone = null;
+    this.stream = null;
+    this.mediaRecorder = null;
+  }
+
+  // Download recorded audio
+  downloadRecording(filename: string = `recording-${Date.now()}.webm`): void {
+    const url = this.recordedAudioUrl();
+    
+    if (!url) {
+      console.error('No recorded audio available');
+      return;
+    }
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+  }
+
+  // Clear recorded audio and free memory
+  clearRecording(): void {
+    // Revoke URL to free memory
+    const url = this.recordedAudioUrl();
+    if (url) {
+      URL.revokeObjectURL(url);
+    }
+
+    this.recordedAudioBlob.set(null);
+    this.recordedAudioUrl.set(null);
+    this.audioChunks = [];
+  }
+
+  private updateWaveForm(): void {
+    if (!this.analyser || !this.isRecording()) return;
+
+    // Get frequency data
+    const bufferLength: number = this.analyser.frequencyBinCount; // 128 (FFT_SIZE/2)
+    const dataArray: Uint8Array<ArrayBuffer> = new Uint8Array(bufferLength);
+    this.analyser.getByteFrequencyData(dataArray); // Values 0-255
+
+    // Reduce to BAR_COUNT bars (average frequencies)
+    const bars: number[] = [];
+    const samplesPerBar: number = Math.floor(bufferLength / this.BAR_COUNT);
+
+    for (let i = 0; i < this.BAR_COUNT; i++) {
+      const start = i * samplesPerBar;
+      const end = start + samplesPerBar;
+
+      // Average frequency values for this bar
+      let sum = 0;
+      for (let j = start; j < end; j++) {
+        sum += dataArray[j];
+      }
+      const average = sum / samplesPerBar;
+
+      // Normalize to 0-100 range for height percentage
+      const normalized = (average / 255) * 100;
+      bars.push(normalized);
+    }
+
+    this.audioData.set(bars);
+
+    this.animationFrame = requestAnimationFrame(() => this.updateWaveForm());
+  }
+}

package/playground/showcase/src/app/components/audio-waveform/audio-waveform.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AudioWaveform } from './audio-waveform';
+
+describe('AudioWaveform', () => {
+  let component: AudioWaveform;
+  let fixture: ComponentFixture<AudioWaveform>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AudioWaveform]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AudioWaveform);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/audio-waveform/audio-waveform.ts

@@ -0,0 +1,64 @@
+import { Component, effect, input, InputSignal, signal, WritableSignal } from '@angular/core';
+
+import { AudioWaveformService } from './audio-waveform.service';
+
+@Component({
+  selector: 'wally-audio-waveform',
+  imports: [],
+  providers: [AudioWaveformService],
+  templateUrl: './audio-waveform.html',
+  styleUrl: './audio-waveform.css'
+})
+export class AudioWaveform {
+  isStartRecording: InputSignal<boolean> = input<boolean>(false);
+  isStopRecording: InputSignal<boolean> = input<boolean>(false);
+  showTimer: InputSignal<boolean> = input<boolean>(false);
+
+  recordingTime: WritableSignal<number> = signal<number>(0);
+  private timerInterval: any = null;
+
+  constructor(
+    public audioWaveformService: AudioWaveformService
+  ) {
+    effect(() => {
+      if (this.isStartRecording()) {
+        this.startRecording();
+      }
+    });
+    effect(() => {
+      if (this.isStopRecording()) {
+        this.stopRecording();
+      }
+    });
+  }
+
+  async startRecording(): Promise<void> {
+    try {
+      await this.audioWaveformService.startRecording();
+
+      this.recordingTime.set(0);
+      this.timerInterval = setInterval(() => {
+        this.recordingTime.update(time => time + 1);
+      }, 1000);
+    } catch (error) {
+      console.error('Failed to start recording:', error);
+    }
+  }
+
+  stopRecording(): void {
+    this.audioWaveformService.stopRecording();
+
+    // Stop timer
+    if (this.timerInterval) {
+      clearInterval(this.timerInterval);
+    }
+  }
+
+  // Format seconds to MM:SS
+  get formattedTime(): string {
+    const time = this.recordingTime();
+    const minutes = Math.floor(time / 60);
+    const seconds = time % 60;
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  }
+}

package/playground/showcase/src/app/pages/documentation/components/audio-waveform-docs/audio-waveform-docs.css

@@ -0,0 +1 @@
+/* Audio Waveform Documentation Styles */

package/playground/showcase/src/app/pages/documentation/components/audio-waveform-docs/audio-waveform-docs.examples.ts

@@ -0,0 +1,146 @@
+// Audio Waveform documentation code examples
+export const AudioWaveformCodeExamples = {
+  // Installation
+  installation: `npx wally-ui add audio-waveform`,
+
+  // Import examples
+  import: `import { AudioWaveform } from './components/wally-ui/audio-waveform/audio-waveform';
+import { AudioWaveformService } from './components/wally-ui/audio-waveform/audio-waveform.service';`,
+
+  componentImport: `@Component({
+  selector: 'app-example',
+  imports: [AudioWaveform],
+  templateUrl: './example.html'
+})`,
+
+  // Basic usage
+  basicUsage: `<wally-audio-waveform
+  [isStartRecording]="isRecording()"
+  [isStopRecording]="!isRecording()">
+</wally-audio-waveform>`,
+
+  // With timer
+  withTimer: `<wally-audio-waveform
+  [isStartRecording]="isRecording()"
+  [isStopRecording]="!isRecording()"
+  [showTimer]="true">
+</wally-audio-waveform>`,
+
+  // Complete Example with Controls
+  completeExample: `<div class="flex flex-col gap-4">
+  <!-- Waveform Visualizer -->
+  <wally-audio-waveform
+    [isStartRecording]="isRecording()"
+    [isStopRecording]="!isRecording()"
+    [showTimer]="true">
+  </wally-audio-waveform>
+
+  <!-- Recording Controls -->
+  <div class="flex gap-2">
+    @if (!isRecording()) {
+      <button (click)="startRecording()"
+        class="px-4 py-2 bg-red-500 text-white rounded-full">
+        Start Recording
+      </button>
+    } @else {
+      <button (click)="stopRecording()"
+        class="px-4 py-2 bg-neutral-500 text-white rounded-full">
+        Stop Recording
+      </button>
+    }
+  </div>
+</div>`,
+
+  completeExampleTs: `export class RecordingComponent {
+  isRecording = signal(false);
+
+  startRecording() {
+    this.isRecording.set(true);
+  }
+
+  stopRecording() {
+    this.isRecording.set(false);
+  }
+}`,
+
+  // Service Integration
+  serviceIntegration: `// Access the service to get recorded audio
+export class RecordingComponent {
+  @ViewChild(AudioWaveform) audioWaveform!: AudioWaveform;
+
+  downloadRecording() {
+    const service = this.audioWaveform.audioWaveformService;
+    service.downloadRecording('my-recording.webm');
+  }
+
+  getRecordedBlob() {
+    const service = this.audioWaveform.audioWaveformService;
+    const blob = service.recordedAudioBlob();
+    return blob;
+  }
+
+  clearRecording() {
+    const service = this.audioWaveform.audioWaveformService;
+    service.clearRecording();
+  }
+}`,
+
+  // Responsive Configuration
+  responsiveConfig: `// Service Configuration (auto-responsive)
+// Mobile (< 768px): 30 bars
+// Desktop (>= 768px): 65 bars
+// Automatically adjusts based on screen width`,
+
+  // Future: Audio Transcription
+  futureTranscription: `// COMING SOON: Audio Transcription
+// The component will support automatic transcription in a future release
+
+<wally-audio-waveform
+  [isStartRecording]="isRecording()"
+  [isStopRecording]="!isRecording()"
+  [enableTranscription]="true"
+  (transcriptionComplete)="onTranscription($event)">
+</wally-audio-waveform>`,
+
+  // Web Audio API Concepts
+  webAudioConcepts: `// How it works under the hood:
+// 1. getUserMedia() - Request microphone access
+// 2. AudioContext - Process audio in real-time
+// 3. AnalyserNode - FFT analysis (256 samples → 128 frequencies)
+// 4. getByteFrequencyData() - Get frequency values (0-255)
+// 5. Normalize to 0-100% for bar heights
+// 6. requestAnimationFrame - Smooth 60fps animation`,
+
+  // Properties: Inputs
+  propertyIsStartRecording: `isStartRecording: InputSignal<boolean> = input<boolean>(false);`,
+  propertyIsStopRecording: `isStopRecording: InputSignal<boolean> = input<boolean>(false);`,
+  propertyShowTimer: `showTimer: InputSignal<boolean> = input<boolean>(false);`,
+
+  // Properties: Service Signals
+  servicePropertyIsRecording: `isRecording: WritableSignal<boolean>`,
+  servicePropertyAudioData: `audioData: WritableSignal<number[]>  // Bar heights (0-100%)`,
+  servicePropertyRecordedAudioBlob: `recordedAudioBlob: WritableSignal<Blob | null>`,
+  servicePropertyRecordedAudioUrl: `recordedAudioUrl: WritableSignal<string | null>`,
+
+  // Methods
+  methodDownloadRecording: `downloadRecording(filename?: string): void`,
+  methodClearRecording: `clearRecording(): void`,
+
+  // Configuration constants
+  configFFTSize: `FFT_SIZE = 256  // Higher = more frequency detail`,
+  configBarCount: `BAR_COUNT = 30 (mobile) | 65 (desktop)  // Auto-responsive`,
+  configSmoothing: `SMOOTHING = 0.8  // 0 (no smoothing) to 1 (max smoothing)`,
+
+  // Accessibility
+  accessibilityExample: `<!-- The component includes built-in accessibility -->
+<!-- Timer updates announced via aria-live region (when showTimer=true) -->
+<!-- Waveform visualizer is decorative (aria-hidden) -->`,
+
+  // Browser Support
+  browserSupport: `// Requires modern browsers with:
+// - Web Audio API
+// - MediaStream API
+// - MediaRecorder API
+//
+// Supported: Chrome 60+, Firefox 55+, Safari 14+, Edge 79+`,
+};