@medc-com-br/ngx-jaimes-scribe 0.1.2 → 0.1.4

package/src/lib/components/recorder/recorder.component.ts

@@ -1,743 +0,0 @@
-import { Component, inject, signal, input, output, OnDestroy, computed, HostListener, ElementRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Subscription } from 'rxjs';
-import { AudioCaptureService } from '../../services/audio-capture.service';
-import { ScribeSocketService, ConnectionState } from '../../services/scribe-socket.service';
-import type { TranscriptionEvent, TemplateOption, GeneratedDocument } from '@medc-com-br/jaimes-shared';
-
-interface TranscriptEntry {
-  id: number;
-  text: string;
-  speaker?: number;
-  isFinal: boolean;
-  startTime?: number;
-  endTime?: number;
-}
-
-interface SpeakerGroup {
-  speaker?: number;
-  entries: TranscriptEntry[];
-}
-
-const SPEAKER_LABELS: Record<number, string> = {
-  0: 'Pessoa 1',
-  1: 'Pessoa 2',
-  2: 'Pessoa 3',
-  3: 'Pessoa 4',
-};
-
-@Component({
-  selector: 'ngx-jaimes-scribe-recorder',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div class="scribe-recorder">
-      <div class="scribe-controls">
-        <button
-          class="scribe-btn scribe-btn--mic"
-          [class.scribe-btn--active]="isRecording() && !isPaused()"
-          [class.scribe-btn--paused]="isPaused()"
-          [class.scribe-btn--connecting]="connectionState() === 'connecting'"
-          [disabled]="connectionState() === 'connecting'"
-          (click)="toggleRecording()"
-          [attr.aria-label]="getMicButtonLabel()"
-        >
-          @if (connectionState() === 'connecting') {
-            <svg class="scribe-icon scribe-icon--spinner" viewBox="0 0 24 24" width="24" height="24">
-              <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="32" stroke-linecap="round"/>
-            </svg>
-          } @else if (isPaused()) {
-            <!-- Play icon when paused -->
-            <svg class="scribe-icon" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-              <path d="M8 5v14l11-7z"/>
-            </svg>
-          } @else if (isRecording()) {
-            <!-- Pause icon when recording -->
-            <svg class="scribe-icon" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-              <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
-            </svg>
-          } @else {
-            <!-- Mic icon when idle -->
-            <svg class="scribe-icon" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-              <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5z"/>
-              <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
-            </svg>
-          }
-        </button>
-
-        <div class="scribe-level" [class.scribe-level--active]="isRecording() && !isPaused()">
-          <div class="scribe-level__fill" [style.width.%]="isPaused() ? 0 : audioLevel()"></div>
-        </div>
-
-        <button
-          class="scribe-btn scribe-btn--finish"
-          [disabled]="!isRecording() && !isPaused()"
-          (click)="finishSession()"
-          aria-label="Finalizar gravação"
-        >
-          <svg class="scribe-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
-            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-          </svg>
-          <span>Finalizar</span>
-        </button>
-
-        @if (hasFinishedSession() && templates().length > 0) {
-          <div class="scribe-generate-container">
-            <button
-              class="scribe-btn scribe-btn--generate"
-              [disabled]="isGenerating()"
-              [attr.aria-expanded]="showTemplateMenu()"
-              aria-haspopup="menu"
-              (click)="toggleTemplateMenu()"
-              aria-label="Gerar resumo"
-            >
-              @if (isGenerating()) {
-                <svg class="scribe-icon scribe-icon--spinner" viewBox="0 0 24 24" width="20" height="20">
-                  <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="32" stroke-linecap="round"/>
-                </svg>
-                <span>Gerando...</span>
-              } @else {
-                <svg class="scribe-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
-                  <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zm-3-7h-2v2h-2v-2H9v-2h2V9h2v2h2v2z"/>
-                </svg>
-                <span>Gerar Resumo</span>
-              }
-            </button>
-
-            @if (showTemplateMenu()) {
-              <div class="scribe-template-menu" role="menu">
-                @for (template of templates(); track template.id) {
-                  <button
-                    class="scribe-template-item"
-                    role="menuitem"
-                    (click)="selectTemplate(template)"
-                  >
-                    <span class="scribe-template-name">{{ template.name }}</span>
-                    @if (template.description) {
-                      <span class="scribe-template-desc">{{ template.description }}</span>
-                    }
-                  </button>
-                }
-              </div>
-            }
-          </div>
-        }
-      </div>
-
-      <div class="scribe-transcript" [class.scribe-transcript--empty]="speakerGroups().length === 0 && !partialText()">
-        @if (speakerGroups().length === 0 && !partialText()) {
-          <span class="scribe-placeholder">A transcrição aparecerá aqui...</span>
-        } @else {
-          @for (group of speakerGroups(); track $index) {
-            <div class="scribe-speaker-block" [attr.data-speaker]="group.speaker">
-              @if (group.speaker !== undefined && group.speaker !== null) {
-                <span class="scribe-speaker-label" [class]="'scribe-speaker--' + group.speaker">
-                  {{ getSpeakerLabel(group.speaker) }}
-                </span>
-              }
-              <div class="scribe-speaker-text">
-                @for (entry of group.entries; track entry.id) {
-                  <span class="scribe-text scribe-text--final">{{ entry.text }} </span>
-                }
-              </div>
-            </div>
-          }
-          @if (partialText()) {
-            <div class="scribe-speaker-block scribe-speaker-block--partial">
-              @if (currentSpeaker() !== undefined && currentSpeaker() !== null) {
-                <span class="scribe-speaker-label" [class]="'scribe-speaker--' + currentSpeaker()">
-                  {{ getSpeakerLabel(currentSpeaker()!) }}
-                </span>
-              }
-              <div class="scribe-speaker-text">
-                <span class="scribe-text scribe-text--partial">{{ partialText() }}</span>
-              </div>
-            </div>
-          }
-        }
-      </div>
-    </div>
-  `,
-  styles: [`
-    :host {
-      --scribe-primary: #4caf50;
-      --scribe-primary-dark: #388e3c;
-      --scribe-primary-light: #81c784;
-      --scribe-danger: #f44336;
-      --scribe-danger-dark: #d32f2f;
-      --scribe-text-color: #212121;
-      --scribe-text-partial: #9e9e9e;
-      --scribe-font-family: inherit;
-      --scribe-font-size: 1rem;
-      --scribe-bg: #ffffff;
-      --scribe-bg-transcript: #f5f5f5;
-      --scribe-border-radius: 8px;
-      --scribe-border-color: #e0e0e0;
-      --scribe-level-bg: #e0e0e0;
-      --scribe-level-fill: #4caf50;
-
-      --scribe-speaker-0: #2196f3;
-      --scribe-speaker-1: #9c27b0;
-      --scribe-speaker-2: #ff9800;
-      --scribe-speaker-3: #009688;
-
-      display: block;
-      font-family: var(--scribe-font-family);
-      font-size: var(--scribe-font-size);
-    }
-
-    .scribe-recorder {
-      background: var(--scribe-bg);
-      border-radius: var(--scribe-border-radius);
-    }
-
-    .scribe-controls {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      padding: 1rem;
-    }
-
-    .scribe-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-      padding: 0.75rem;
-      border: none;
-      border-radius: var(--scribe-border-radius);
-      font-family: var(--scribe-font-family);
-      font-size: 0.875rem;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-
-    .scribe-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .scribe-btn--mic {
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      background: var(--scribe-bg-transcript);
-      color: var(--scribe-text-color);
-    }
-
-    .scribe-btn--mic:hover:not(:disabled) {
-      background: var(--scribe-border-color);
-    }
-
-    .scribe-btn--mic.scribe-btn--active {
-      background: var(--scribe-danger);
-      color: white;
-      animation: pulse-recording 1.5s ease-in-out infinite;
-    }
-
-    .scribe-btn--mic.scribe-btn--paused {
-      background: var(--scribe-primary);
-      color: white;
-    }
-
-    .scribe-btn--mic.scribe-btn--paused:hover:not(:disabled) {
-      background: var(--scribe-primary-dark);
-    }
-
-    .scribe-btn--mic.scribe-btn--connecting {
-      background: var(--scribe-primary-light);
-      color: white;
-    }
-
-    .scribe-btn--finish {
-      padding: 0.75rem 1.25rem;
-      background: var(--scribe-primary);
-      color: white;
-    }
-
-    .scribe-btn--finish:hover:not(:disabled) {
-      background: var(--scribe-primary-dark);
-    }
-
-    .scribe-icon {
-      flex-shrink: 0;
-    }
-
-    .scribe-icon--spinner {
-      animation: spin 1s linear infinite;
-    }
-
-    .scribe-level {
-      flex: 1;
-      height: 8px;
-      background: var(--scribe-level-bg);
-      border-radius: 4px;
-      overflow: hidden;
-      opacity: 0.5;
-      transition: opacity 0.2s ease;
-    }
-
-    .scribe-level--active {
-      opacity: 1;
-    }
-
-    .scribe-level__fill {
-      height: 100%;
-      background: var(--scribe-level-fill);
-      border-radius: 4px;
-      transition: width 0.05s ease-out;
-    }
-
-    .scribe-transcript {
-      min-height: 120px;
-      max-height: 400px;
-      overflow-y: auto;
-      padding: 1rem;
-      margin: 0 1rem 1rem;
-      background: var(--scribe-bg-transcript);
-      border-radius: var(--scribe-border-radius);
-      line-height: 1.6;
-    }
-
-    .scribe-transcript--empty {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .scribe-placeholder {
-      color: var(--scribe-text-partial);
-      font-style: italic;
-    }
-
-    .scribe-speaker-block {
-      margin-bottom: 0.75rem;
-      padding-left: 0.5rem;
-      border-left: 3px solid var(--scribe-border-color);
-    }
-
-    .scribe-speaker-block--partial {
-      opacity: 0.7;
-    }
-
-    .scribe-speaker-block[data-speaker="0"] {
-      border-left-color: var(--scribe-speaker-0);
-    }
-
-    .scribe-speaker-block[data-speaker="1"] {
-      border-left-color: var(--scribe-speaker-1);
-    }
-
-    .scribe-speaker-block[data-speaker="2"] {
-      border-left-color: var(--scribe-speaker-2);
-    }
-
-    .scribe-speaker-block[data-speaker="3"] {
-      border-left-color: var(--scribe-speaker-3);
-    }
-
-    .scribe-speaker-label {
-      display: inline-block;
-      font-size: 0.75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      padding: 0.125rem 0.5rem;
-      border-radius: 4px;
-      margin-bottom: 0.25rem;
-      color: white;
-      background: var(--scribe-border-color);
-    }
-
-    .scribe-speaker--0 {
-      background: var(--scribe-speaker-0);
-    }
-
-    .scribe-speaker--1 {
-      background: var(--scribe-speaker-1);
-    }
-
-    .scribe-speaker--2 {
-      background: var(--scribe-speaker-2);
-    }
-
-    .scribe-speaker--3 {
-      background: var(--scribe-speaker-3);
-    }
-
-    .scribe-speaker-text {
-      margin-top: 0.25rem;
-    }
-
-    .scribe-text {
-      word-wrap: break-word;
-    }
-
-    .scribe-text--final {
-      color: var(--scribe-text-color);
-    }
-
-    .scribe-text--partial {
-      color: var(--scribe-text-partial);
-      font-style: italic;
-    }
-
-    .scribe-generate-container {
-      position: relative;
-      margin-left: 0.5rem;
-    }
-
-    .scribe-btn--generate {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.75rem 1.25rem;
-      background: var(--scribe-primary);
-      color: white;
-      border: none;
-      border-radius: var(--scribe-border-radius);
-      font-family: var(--scribe-font-family);
-      font-size: 0.875rem;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-
-    .scribe-btn--generate:hover:not(:disabled) {
-      background: var(--scribe-primary-dark);
-    }
-
-    .scribe-btn--generate:disabled {
-      opacity: 0.7;
-      cursor: not-allowed;
-    }
-
-    .scribe-template-menu {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      margin-top: 0.25rem;
-      min-width: 220px;
-      background: var(--scribe-bg);
-      border: 1px solid var(--scribe-border-color);
-      border-radius: var(--scribe-border-radius);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      z-index: 100;
-      overflow: hidden;
-    }
-
-    .scribe-template-item {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      width: 100%;
-      padding: 0.75rem 1rem;
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      text-align: left;
-      transition: background 0.15s ease;
-    }
-
-    .scribe-template-item:hover {
-      background: var(--scribe-bg-transcript);
-    }
-
-    .scribe-template-item:not(:last-child) {
-      border-bottom: 1px solid var(--scribe-border-color);
-    }
-
-    .scribe-template-name {
-      font-weight: 500;
-      color: var(--scribe-text-color);
-    }
-
-    .scribe-template-desc {
-      font-size: 0.75rem;
-      color: var(--scribe-text-partial);
-      margin-top: 0.25rem;
-    }
-
-    @keyframes pulse-recording {
-      0%, 100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4); }
-      50% { box-shadow: 0 0 0 8px rgba(244, 67, 54, 0); }
-    }
-
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-  `],
-})
-export class RecorderComponent implements OnDestroy {
-  private audioCapture = inject(AudioCaptureService);
-  private socket = inject(ScribeSocketService);
-  private elementRef = inject(ElementRef);
-  private subscriptions: Subscription[] = [];
-  private entryIdCounter = 0;
-  private generateAbortController: AbortController | null = null;
-
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: MouseEvent): void {
-    if (!this.showTemplateMenu()) return;
-    const target = event.target as HTMLElement;
-    if (!this.elementRef.nativeElement.contains(target)) {
-      this.showTemplateMenu.set(false);
-    }
-  }
-
-  wsUrl = input.required<string>();
-  token = input<string>('');
-  speakerLabels = input<Record<number, string>>({});
-  premium = input<boolean>(false);
-  templates = input<TemplateOption[]>([]);
-  lambdaUrl = input<string>('');
-
-  sessionStarted = output<string>();
-  sessionFinished = output<{ transcript: string; entries: TranscriptEntry[] }>();
-  error = output<Error>();
-  documentGenerated = output<GeneratedDocument>();
-  generationError = output<Error>();
-
-  isRecording = signal(false);
-  isPaused = signal(false);
-  audioLevel = signal(0);
-  connectionState = signal<ConnectionState>('disconnected');
-  entries = signal<TranscriptEntry[]>([]);
-  partialText = signal('');
-  currentSpeaker = signal<number | undefined>(undefined);
-  showTemplateMenu = signal(false);
-  isGenerating = signal(false);
-  lastSessionId = signal<string | null>(null);
-
-  hasFinishedSession = computed(() =>
-    this.lastSessionId() !== null &&
-    !this.isRecording() &&
-    !this.isPaused()
-  );
-
-  speakerGroups = computed<SpeakerGroup[]>(() => {
-    const allEntries = this.entries();
-    if (allEntries.length === 0) return [];
-
-    const groups: SpeakerGroup[] = [];
-    let currentGroup: SpeakerGroup | null = null;
-
-    for (const entry of allEntries) {
-      if (!currentGroup || currentGroup.speaker !== entry.speaker) {
-        currentGroup = { speaker: entry.speaker, entries: [] };
-        groups.push(currentGroup);
-      }
-      currentGroup.entries.push(entry);
-    }
-
-    return groups;
-  });
-
-  constructor() {
-    this.subscriptions.push(
-      this.audioCapture.audioLevel$.subscribe((level) => {
-        this.audioLevel.set(level);
-      }),
-      this.socket.connectionState$.subscribe((state) => {
-        this.connectionState.set(state);
-      }),
-      this.socket.transcription$.subscribe((event) => {
-        this.handleTranscription(event);
-      }),
-      this.socket.error$.subscribe((err) => {
-        this.error.emit(err);
-      }),
-      this.audioCapture.error$.subscribe((err) => {
-        this.error.emit(err);
-      }),
-      this.audioCapture.audioChunk$.subscribe(({ data, isSilence }) => {
-        this.socket.sendAudioChunk(data, isSilence);
-      })
-    );
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach((sub) => sub.unsubscribe());
-    this.generateAbortController?.abort();
-    this.cleanup();
-  }
-
-  getSpeakerLabel(speaker: number): string {
-    const customLabels = this.speakerLabels();
-    if (customLabels[speaker]) {
-      return customLabels[speaker];
-    }
-    return SPEAKER_LABELS[speaker] || `Pessoa ${speaker + 1}`;
-  }
-
-  getMicButtonLabel(): string {
-    if (this.isPaused()) {
-      return 'Retomar gravação';
-    }
-    if (this.isRecording()) {
-      return 'Pausar gravação';
-    }
-    return 'Iniciar gravação';
-  }
-
-  async toggleRecording(): Promise<void> {
-    if (this.isPaused()) {
-      this.resumeRecording();
-    } else if (this.isRecording()) {
-      this.pauseRecording();
-    } else {
-      await this.startRecording();
-    }
-  }
-
-  pauseRecording(): void {
-    if (!this.isRecording() || this.isPaused()) return;
-    this.audioCapture.pauseCapture();
-    this.isPaused.set(true);
-  }
-
-  resumeRecording(): void {
-    if (!this.isPaused()) return;
-    this.audioCapture.resumeCapture();
-    this.isPaused.set(false);
-  }
-
-  async finishSession(): Promise<void> {
-    if (!this.isRecording() && !this.isPaused()) return;
-
-    const sessionId = this.socket.getSessionId();
-
-    await this.stopRecording();
-
-    const allEntries = this.entries();
-    const fullTranscript = allEntries.map((e) => e.text).join(' ');
-
-    this.sessionFinished.emit({ transcript: fullTranscript, entries: allEntries });
-
-    this.entries.set([]);
-    this.partialText.set('');
-    this.currentSpeaker.set(undefined);
-    this.entryIdCounter = 0;
-
-    this.lastSessionId.set(sessionId);
-  }
-
-  toggleTemplateMenu(): void {
-    this.showTemplateMenu.update((v) => !v);
-  }
-
-  async selectTemplate(template: TemplateOption): Promise<void> {
-    if (this.isGenerating()) return;
-
-    this.showTemplateMenu.set(false);
-
-    const lambdaUrl = this.lambdaUrl();
-    if (!lambdaUrl) {
-      this.generationError.emit(new Error('Lambda URL not provided'));
-      return;
-    }
-
-    const sessionId = this.lastSessionId();
-    if (!sessionId) {
-      this.generationError.emit(new Error('No session available'));
-      return;
-    }
-
-    this.generateAbortController?.abort();
-    this.generateAbortController = new AbortController();
-
-    this.isGenerating.set(true);
-
-    try {
-      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-      const token = this.token();
-      if (token) {
-        headers['Authorization'] = `Bearer ${token}`;
-      }
-
-      const response = await fetch(`${lambdaUrl}/generate`, {
-        method: 'POST',
-        headers,
-        signal: this.generateAbortController.signal,
-        body: JSON.stringify({
-          sessionId,
-          outputSchema: template.content,
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || `HTTP ${response.status}`);
-      }
-
-      const result = await response.json();
-
-      this.documentGenerated.emit({
-        sessionId,
-        templateId: template.id,
-        content: result.content,
-        generatedAt: result.generatedAt,
-      });
-    } catch (err) {
-      if (err instanceof Error && err.name === 'AbortError') return;
-      this.generationError.emit(err instanceof Error ? err : new Error(String(err)));
-    } finally {
-      this.isGenerating.set(false);
-    }
-  }
-
-  private async startRecording(): Promise<void> {
-    try {
-      await this.socket.connect(this.wsUrl(), this.token(), this.premium());
-      await this.audioCapture.startCapture();
-      this.isRecording.set(true);
-      this.isPaused.set(false);
-
-      const sessionId = this.socket.getSessionId();
-      if (sessionId) {
-        this.sessionStarted.emit(sessionId);
-      }
-    } catch (err) {
-      this.error.emit(err instanceof Error ? err : new Error('Failed to start recording'));
-      await this.cleanup();
-    }
-  }
-
-  private async stopRecording(): Promise<void> {
-    await this.audioCapture.stopCapture();
-    this.socket.disconnect();
-    this.isRecording.set(false);
-    this.isPaused.set(false);
-  }
-
-  private async cleanup(): Promise<void> {
-    await this.audioCapture.stopCapture();
-    this.socket.disconnect();
-    this.isRecording.set(false);
-    this.isPaused.set(false);
-  }
-
-  private handleTranscription(event: TranscriptionEvent): void {
-    if (!event.transcript) return;
-
-    if (event.type === 'final') {
-      const entry: TranscriptEntry = {
-        id: ++this.entryIdCounter,
-        text: event.transcript,
-        speaker: event.speaker,
-        isFinal: true,
-        startTime: event.start,
-        endTime: event.end,
-      };
-
-      this.entries.update((entries) => [...entries, entry]);
-      this.partialText.set('');
-      this.currentSpeaker.set(undefined);
-    } else if (event.type === 'partial') {
-      this.partialText.set(event.transcript);
-      this.currentSpeaker.set(event.speaker);
-    }
-  }
-}