wally-ui 1.14.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.14.0",
+  "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/components/selection-popover/selection-popover.html

@@ -5,7 +5,9 @@
   <!-- Floating popover -->
   @if (isVisible()) {
   <div #popover
-    class="fixed z-50 bg-white dark:bg-neutral-900 shadow-lg rounded-xl border border-neutral-300 dark:border-neutral-700 p-1 transition-opacity duration-150"
+    class="fixed z-50 bg-white dark:bg-neutral-900 shadow-lg rounded-xl border border-neutral-300 dark:border-neutral-700 transition-opacity duration-150"
+    [class.p-1]="!isMobile()"
+    [class.p-2]="isMobile()"
     [class.opacity-0]="!isPositioned()"
     [class.opacity-100]="isPositioned()"
     [style.top.px]="adjustedPosition().top" [style.left.px]="adjustedPosition().left" role="dialog"
@@ -19,7 +21,11 @@
 
     <!-- Fallback: default button (hidden if custom actions exist) -->
     <button [class.hidden]="hasCustomActionsSignal()"
-      class="px-3 py-2 text-[#0a0a0a] text-sm font-mono hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-800 rounded transition-colors cursor-pointer">
+      class="text-[#0a0a0a] text-sm font-mono hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-800 rounded transition-colors cursor-pointer"
+      [class.px-3]="!isMobile()"
+      [class.py-2]="!isMobile()"
+      [class.px-4]="isMobile()"
+      [class.py-3]="isMobile()">
       Default Action
     </button>
   </div>

package/playground/showcase/src/app/components/selection-popover/selection-popover.ts

@@ -48,44 +48,77 @@ export class SelectionPopover implements AfterViewInit {
   /** Currently selected text */
   selectedText: WritableSignal<string> = signal<string>('');
 
+  /**
+   * Detects if user is on mobile device
+   */
+  isMobile = computed(() => {
+    if (typeof window === 'undefined') return false;
+
+    return 'ontouchstart' in window ||
+      navigator.maxTouchPoints > 0 ||
+      window.innerWidth < 768;
+  });
+
   /**
    * Computes adjusted position with viewport constraints
    * Prevents popover from overflowing screen edges
+   * Mobile-aware: accounts for virtual keyboard and smaller screens
    */
   adjustedPosition = computed(() => {
     const position = this.popoverPosition();
     const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
 
-    // Get real popover width if available, otherwise estimate
+    // Get real popover dimensions if available, otherwise estimate
     const popoverWidth = this.popoverElement?.nativeElement?.offsetWidth || 200;
+    const popoverHeight = this.popoverElement?.nativeElement?.offsetHeight || 50;
 
     let left = position.left;
+    let top = position.top;
 
-    // Prevent overflow on the right edge
+    // Horizontal adjustment
     if (left + popoverWidth > viewportWidth) {
       left = viewportWidth - popoverWidth - 10;
     }
-
-    // Prevent overflow on the left edge
     if (left < 10) {
       left = 10;
     }
 
-    return {
-      top: position.top,
-      left: left
-    };
+    // Vertical adjustment for mobile (avoid keyboard and screen edges)
+    if (this.isMobile()) {
+      // If too close to top, position below selection instead
+      if (top < 80) {
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0);
+          const rect = range.getBoundingClientRect();
+          top = rect.bottom + 10; // 10px below selection
+        }
+      }
+
+      // If too close to bottom (virtual keyboard area), keep visible
+      if (top + popoverHeight > viewportHeight - 100) {
+        top = viewportHeight - popoverHeight - 100;
+      }
+    }
+
+    return { top, left };
   });
 
   /**
-   * Handles mouseup event to detect text selection
-   * Uses setTimeout to ensure selection is complete
+   * Handles both mouse and touch selection events
+   * Mobile: touchend after long-press selection
+   * Desktop: mouseup after click-drag selection
    */
   @HostListener('mouseup', ['$event'])
-  onMouseUp(event: MouseEvent) {
+  @HostListener('touchend', ['$event'])
+  onMouseUp(event: MouseEvent | TouchEvent): void {
+    const isMobile = 'ontouchstart' in window;
+    const delay = isMobile ? 100 : 10;
+
     setTimeout(() => {
       this.handleTextSelection();
-    }, 10);
+    }, delay);
   }
 
   /**
@@ -111,6 +144,37 @@ export class SelectionPopover implements AfterViewInit {
     this.hide();
   }
 
+  /**
+  * Prevents native mobile selection menu from appearing
+  * This ensures only our custom popover is shown
+  */
+  @HostListener('selectionchange')
+  onNativeSelectionChange() {
+    const selection = window.getSelection();
+
+    if (selection && selection.toString().trim().length >= 3) {
+      // Prevent native menu only if valid selection exists
+      // and our popover will appear
+      event?.preventDefault?.();
+    }
+  }
+
+  /**
+   * Prevents scroll when touching the popover on mobile
+   * Ensures users can interact with actions without accidentally scrolling
+   */
+  @HostListener('touchmove', ['$event'])
+  onTouchMove(event: TouchEvent): void {
+    if (this.isVisible() && this.popoverElement) {
+      const target = event.target as Node;
+      const isPopoverTouch = this.popoverElement.nativeElement.contains(target);
+
+      if (isPopoverTouch) {
+        event.preventDefault();
+      }
+    }
+  }
+
   /**
    * Handles text selection and shows popover
    *

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

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