@copilotkitnext/angular 0.0.2 → 0.0.4

package/src/components/chat/copilot-chat-audio-recorder.component.ts

@@ -1,241 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ViewChild,
-  ElementRef,
-  AfterViewInit,
-  OnDestroy,
-  signal,
-  computed,
-  ChangeDetectionStrategy,
-  ViewEncapsulation
-} from '@angular/core';
-import { AudioRecorderState, AudioRecorderError } from './copilot-chat-input.types';
-
-@Component({
-  selector: 'copilot-chat-audio-recorder',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <div [class]="computedClass()">
-      <canvas
-        #canvasRef
-        class="w-full h-full"
-        [style.imageRendering]="'pixelated'"
-      ></canvas>
-    </div>
-  `,
-  styles: [],
-  host: {
-    '[class.copilot-chat-audio-recorder]': 'true'
-  }
-})
-export class CopilotChatAudioRecorderComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('canvasRef', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;
-  
-  @Input() set inputClass(val: string | undefined) {
-    this.customClass.set(val);
-  }
-  
-  @Input() set inputShowControls(val: boolean | undefined) {
-    this.showControls.set(val ?? false);
-  }
-  
-  @Output() stateChange = new EventEmitter<AudioRecorderState>();
-  @Output() error = new EventEmitter<AudioRecorderError>();
-  
-  // Signals for state management
-  state = signal<AudioRecorderState>('idle');
-  customClass = signal<string | undefined>(undefined);
-  showControls = signal<boolean>(false);
-  
-  // Computed values
-  computedClass = computed(() => {
-    const baseClasses = 'h-11 w-full px-5';
-    return `${baseClasses} ${this.customClass() || ''}`;
-  });
-  
-  statusText = computed(() => {
-    switch (this.state()) {
-      case 'recording':
-        return 'Recording...';
-      case 'processing':
-        return 'Processing...';
-      default:
-        return 'Ready';
-    }
-  });
-  
-  // Animation and canvas properties
-  private animationFrameId?: number;
-  
-  ngAfterViewInit(): void {
-    this.startAnimation();
-  }
-  
-  ngOnDestroy(): void {
-    this.dispose();
-  }
-  
-  /**
-   * Start recording audio
-   */
-  async start(): Promise<void> {
-    try {
-      if (this.state() === 'recording') {
-        return;
-      }
-      
-      this.setState('recording');
-      this.startAnimation();
-      
-      // In a real implementation, this would start actual audio recording
-      // For now, we just simulate the recording state
-      
-    } catch (err) {
-      const error = new AudioRecorderError(
-        err instanceof Error ? err.message : 'Failed to start recording'
-      );
-      this.error.emit(error);
-      this.setState('idle');
-      throw error;
-    }
-  }
-  
-  /**
-   * Stop recording audio and return blob
-   */
-  async stop(): Promise<Blob> {
-    try {
-      this.setState('idle');
-      // Return empty blob - stub implementation
-      const emptyBlob = new Blob([], { type: 'audio/webm' });
-      return emptyBlob;
-    } catch (err) {
-      const error = new AudioRecorderError(
-        err instanceof Error ? err.message : 'Failed to stop recording'
-      );
-      this.error.emit(error);
-      this.setState('idle');
-      throw error;
-    }
-  }
-  
-  /**
-   * Get current recorder state
-   */
-  getState(): AudioRecorderState {
-    return this.state();
-  }
-  
-  /**
-   * Dispose of resources
-   */
-  dispose(): void {
-    this.stopAnimation();
-  }
-
-  private setState(state: AudioRecorderState): void {
-    this.state.set(state);
-    this.stateChange.emit(state);
-  }
-  
-  private startAnimation(): void {
-    const canvas = this.canvasRef.nativeElement;
-    if (!canvas) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    const draw = () => {
-      const rect = canvas.getBoundingClientRect();
-      const dpr = window.devicePixelRatio || 1;
-
-      // Update canvas dimensions if container resized
-      if (
-        canvas.width !== rect.width * dpr ||
-        canvas.height !== rect.height * dpr
-      ) {
-        canvas.width = rect.width * dpr;
-        canvas.height = rect.height * dpr;
-        ctx.scale(dpr, dpr);
-        ctx.imageSmoothingEnabled = false;
-      }
-
-      // Configuration
-      const barWidth = 2;
-      const minHeight = 2;
-      const maxHeight = 20;
-      const gap = 2;
-      const numSamples = Math.ceil(rect.width / (barWidth + gap));
-
-      // Get loudness data
-      const loudnessData = this.getLoudness(numSamples);
-
-      // Clear canvas
-      ctx.clearRect(0, 0, rect.width, rect.height);
-
-      // Get current foreground color
-      const computedStyle = getComputedStyle(canvas);
-      const currentForeground = computedStyle.color;
-
-      // Draw bars
-      ctx.fillStyle = currentForeground;
-      const centerY = rect.height / 2;
-
-      for (let i = 0; i < loudnessData.length; i++) {
-        const sample = loudnessData[i] ?? 0;
-        const barHeight = Math.round(
-          sample * (maxHeight - minHeight) + minHeight
-        );
-        const x = Math.round(i * (barWidth + gap));
-        const y = Math.round(centerY - barHeight / 2);
-
-        ctx.fillRect(x, y, barWidth, barHeight);
-      }
-
-      this.animationFrameId = requestAnimationFrame(draw);
-    };
-
-    draw();
-  }
-  
-  private stopAnimation(): void {
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-      this.animationFrameId = undefined;
-    }
-  }
-
-  private getLoudness(n: number): number[] {
-    const elapsed = Date.now() / 1000; // Use current timestamp directly
-    const samples: number[] = [];
-
-    for (let i = 0; i < n; i++) {
-      // Create a position that moves from left to right over time
-      const position = (i / n) * 10 + elapsed * 0.5; // Scroll speed (slower)
-
-      // Generate waveform using multiple sine waves for realism
-      const wave1 = Math.sin(position * 2) * 0.3;
-      const wave2 = Math.sin(position * 5 + elapsed) * 0.2;
-      const wave3 = Math.sin(position * 0.5 + elapsed * 0.3) * 0.4;
-
-      // Add some randomness for natural variation
-      const noise = (Math.random() - 0.5) * 0.1;
-
-      // Combine waves and add envelope for realistic amplitude variation
-      const envelope = Math.sin(elapsed * 0.7) * 0.5 + 0.5; // Slow amplitude modulation
-      let amplitude = (wave1 + wave2 + wave3 + noise) * envelope;
-
-      // Clamp to 0-1 range
-      amplitude = Math.max(0, Math.min(1, amplitude * 0.5 + 0.3));
-
-      samples.push(amplitude);
-    }
-
-    return samples;
-  }
-}

package/src/components/chat/copilot-chat-buttons.component.ts

@@ -1,308 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ChangeDetectionStrategy,
-  inject,
-  signal,
-  computed,
-  ViewEncapsulation
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { 
-  LucideAngularModule,
-  ArrowUp,
-  Mic,
-  X,
-  Check,
-  Plus
-} from 'lucide-angular';
-import { CopilotChatConfigurationService } from '../../core/chat-configuration/chat-configuration.service';
-import { CopilotTooltipDirective } from '../../lib/directives/tooltip.directive';
-import { cn } from '../../lib/utils';
-
-// Base button classes matching React's button variants
-const buttonBase = cn(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium',
-  'transition-all disabled:pointer-events-none disabled:opacity-50',
-  'shrink-0 outline-none',
-  'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]'
-);
-
-const chatInputToolbarPrimary = cn(
-  'cursor-pointer',
-  // Background and text
-  'bg-black text-white',
-  // Dark mode
-  'dark:bg-white dark:text-black dark:focus-visible:outline-white',
-  // Shape and sizing
-  'rounded-full h-9 w-9',
-  // Interactions
-  'transition-colors',
-  // Focus states
-  'focus:outline-none',
-  // Hover states
-  'hover:opacity-70 disabled:hover:opacity-100',
-  // Disabled states
-  'disabled:cursor-not-allowed disabled:bg-[#00000014] disabled:text-[rgb(13,13,13)]',
-  'dark:disabled:bg-[#454545] dark:disabled:text-white'
-);
-
-const chatInputToolbarSecondary = cn(
-  'cursor-pointer',
-  // Background and text
-  'bg-transparent text-[#444444]',
-  // Dark mode
-  'dark:text-white dark:border-[#404040]',
-  // Shape and sizing
-  'rounded-full h-9 w-9',
-  // Interactions
-  'transition-colors',
-  // Focus states
-  'focus:outline-none',
-  // Hover states
-  'hover:bg-[#f8f8f8] hover:text-[#333333]',
-  'dark:hover:bg-[#404040] dark:hover:text-[#FFFFFF]',
-  // Disabled states
-  'disabled:cursor-not-allowed disabled:opacity-50',
-  'disabled:hover:bg-transparent disabled:hover:text-[#444444]',
-  'dark:disabled:hover:bg-transparent dark:disabled:hover:text-[#CCCCCC]'
-);
-
-@Component({
-  selector: 'copilot-chat-send-button',
-  standalone: true,
-  imports: [CommonModule, LucideAngularModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <div class="mr-[10px]">
-      <button
-        type="button"
-        [disabled]="disabled"
-        [class]="buttonClass"
-        (click)="onClick()"
-      >
-        <lucide-angular [img]="ArrowUpIcon" [size]="18"></lucide-angular>
-      </button>
-    </div>
-  `,
-  styles: [``]
-})
-export class CopilotChatSendButtonComponent {
-  @Input() disabled = false;
-  @Output() clicked = new EventEmitter<void>();
-  
-  readonly ArrowUpIcon = ArrowUp;
-  buttonClass = cn(buttonBase, chatInputToolbarPrimary);
-  
-  onClick(): void {
-    if (!this.disabled) {
-      this.clicked.emit();
-    }
-  }
-}
-
-@Component({
-  selector: 'copilot-chat-start-transcribe-button',
-  standalone: true,
-  imports: [CommonModule, LucideAngularModule, CopilotTooltipDirective],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <button
-      type="button"
-      [disabled]="disabled"
-      [class]="buttonClass"
-      [copilotTooltip]="label"
-      tooltipPosition="below"
-      (click)="onClick()"
-    >
-      <lucide-angular [img]="MicIcon" [size]="18"></lucide-angular>
-    </button>
-  `,
-  styles: [``]
-})
-export class CopilotChatStartTranscribeButtonComponent {
-  @Input() disabled = false;
-  @Output() clicked = new EventEmitter<void>();
-  
-  private chatConfig = inject(CopilotChatConfigurationService);
-  
-  readonly MicIcon = Mic;
-  buttonClass = cn(buttonBase, chatInputToolbarSecondary, 'mr-2');
-  
-  get label(): string {
-    return this.chatConfig.labels().chatInputToolbarStartTranscribeButtonLabel;
-  }
-  
-  onClick(): void {
-    if (!this.disabled) {
-      this.clicked.emit();
-    }
-  }
-}
-
-@Component({
-  selector: 'copilot-chat-cancel-transcribe-button',
-  standalone: true,
-  imports: [CommonModule, LucideAngularModule, CopilotTooltipDirective],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <button
-      type="button"
-      [disabled]="disabled"
-      [class]="buttonClass"
-      [copilotTooltip]="label"
-      tooltipPosition="below"
-      (click)="onClick()"
-    >
-      <lucide-angular [img]="XIcon" [size]="18"></lucide-angular>
-    </button>
-  `,
-  styles: [``]
-})
-export class CopilotChatCancelTranscribeButtonComponent {
-  @Input() disabled = false;
-  @Output() clicked = new EventEmitter<void>();
-  
-  private chatConfig = inject(CopilotChatConfigurationService);
-  
-  readonly XIcon = X;
-  buttonClass = cn(buttonBase, chatInputToolbarSecondary, 'mr-2');
-  
-  get label(): string {
-    return this.chatConfig.labels().chatInputToolbarCancelTranscribeButtonLabel;
-  }
-  
-  onClick(): void {
-    if (!this.disabled) {
-      this.clicked.emit();
-    }
-  }
-}
-
-@Component({
-  selector: 'copilot-chat-finish-transcribe-button',
-  standalone: true,
-  imports: [CommonModule, LucideAngularModule, CopilotTooltipDirective],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <button
-      type="button"
-      [disabled]="disabled"
-      [class]="buttonClass"
-      [copilotTooltip]="label"
-      tooltipPosition="below"
-      (click)="onClick()"
-    >
-      <lucide-angular [img]="CheckIcon" [size]="18"></lucide-angular>
-    </button>
-  `,
-  styles: [``]
-})
-export class CopilotChatFinishTranscribeButtonComponent {
-  @Input() disabled = false;
-  @Output() clicked = new EventEmitter<void>();
-  
-  private chatConfig = inject(CopilotChatConfigurationService);
-  
-  readonly CheckIcon = Check;
-  buttonClass = cn(buttonBase, chatInputToolbarSecondary, 'mr-[10px]');
-  
-  get label(): string {
-    return this.chatConfig.labels().chatInputToolbarFinishTranscribeButtonLabel;
-  }
-  
-  onClick(): void {
-    if (!this.disabled) {
-      this.clicked.emit();
-    }
-  }
-}
-
-@Component({
-  selector: 'copilot-chat-add-file-button',
-  standalone: true,
-  imports: [CommonModule, LucideAngularModule, CopilotTooltipDirective],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <button
-      type="button"
-      [disabled]="disabled"
-      [class]="buttonClass"
-      [copilotTooltip]="label"
-      tooltipPosition="below"
-      (click)="onClick()"
-    >
-      <lucide-angular [img]="PlusIcon" [size]="20"></lucide-angular>
-    </button>
-  `,
-  styles: [``]
-})
-export class CopilotChatAddFileButtonComponent {
-  @Input() disabled = false;
-  @Output() clicked = new EventEmitter<void>();
-  
-  private chatConfig = inject(CopilotChatConfigurationService);
-  
-  readonly PlusIcon = Plus;
-  buttonClass = cn(buttonBase, chatInputToolbarSecondary, 'ml-2');
-  
-  get label(): string {
-    return this.chatConfig.labels().chatInputToolbarAddButtonLabel;
-  }
-  
-  onClick(): void {
-    if (!this.disabled) {
-      this.clicked.emit();
-    }
-  }
-}
-
-// Base toolbar button component that other buttons can use
-@Component({
-  selector: 'copilot-chat-toolbar-button',
-  standalone: true,
-  imports: [CommonModule, CopilotTooltipDirective],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <button
-      type="button"
-      [disabled]="disabled()"
-      [class]="computedClass()"
-      [copilotTooltip]="title()"
-      tooltipPosition="below"
-      (click)="onClick()"
-    >
-      <ng-content></ng-content>
-    </button>
-  `,
-  styles: [``]
-})
-export class CopilotChatToolbarButtonComponent {
-  disabled = signal(false);
-  variant = signal<'primary' | 'secondary'>('secondary');
-  customClass = signal('');
-  title = signal('');
-  
-  @Output() clicked = new EventEmitter<void>();
-  
-  computedClass = computed(() => {
-    const variantClass = this.variant() === 'primary' 
-      ? chatInputToolbarPrimary 
-      : chatInputToolbarSecondary;
-    return cn(buttonBase, variantClass, this.customClass());
-  });
-  
-  onClick(): void {
-    if (!this.disabled()) {
-      this.clicked.emit();
-    }
-  }
-}