WebChat: Soporte de Audio y Documentos¶

Implementado: 2026-03-10 Componentes: UpeChat.razor, UpeWebChatHub.cs, AudioTranscriptionService.cs, upe-chat-audio.js

Resumen¶

El WebChat de UPE ahora soporta:

Grabacion de audio — Boton de microfono que graba audio del navegador y lo transcribe con Whisper
Adjuntar documentos — Boton de clip para subir archivos (PDF, TXT, JSON, CSV, etc.)
Indicadores visuales — Barra de progreso, indicador de grabacion con temporizador, preview de archivo pendiente

Flujo de Audio¶

[Usuario pulsa mic] → MediaRecorder API (JS) → base64 audio
  → SignalR SendAudioMessage(bytes, fileName)
    → AudioTranscriptionService.TranscribeFromBytesAsync()
      → OpenAI Whisper API (whisper-1, es)
        → Texto transcrito → AgentMessageProcessor
          → Respuesta del agente via ReceiveMessage

Limites: - Max 2 minutos de grabacion (auto-stop) - Max 25 MB de audio (configurado via OpenAI:MaxAudioSizeMB) - Formato: webm/opus (preferido) o fallback del navegador

Flujo de Documentos¶

[Usuario selecciona archivo] → Preview en UI → [Pulsa enviar]
  → IBrowserFile.OpenReadStream() → byte[]
    → SignalR SendDocumentMessage(bytes, fileName, mimeType)
      → Extraccion de texto (para text/*, JSON, XML, CSV)
      → AgentMessageProcessor → Respuesta del agente

Tipos soportados: .pdf, .txt, .md, .json, .xml, .csv, .doc, .docx, .xls, .xlsx Limite: 10 MB

Archivos Modificados¶

Archivo	Cambio
`Orchestrator.Admin/Components/Pages/Upe/UpeChat.razor`	UI: mic, attach, recording bar, upload progress, pending file preview + logica C#
`Orchestrator.Api/Hubs/UpeWebChatHub.cs`	Nuevos metodos: `SendAudioMessage`, `SendDocumentMessage`
`Shared.Admin/Services/AudioTranscriptionService.cs`	Nuevo metodo: `TranscribeFromBytesAsync`
`Orchestrator.Admin/wwwroot/js/upe-chat-audio.js`	JS interop para MediaRecorder API
`Orchestrator.Admin/Components/App.razor`	Script reference para upe-chat-audio.js

Nuevos Eventos SignalR (Server → Client)¶

Evento	Parametros	Descripcion
`UploadProgress`	`string state`	Estado: `uploading`, `transcribing`, `processing`, `idle`
`AudioTranscribed`	`string text`	Texto transcrito del audio (se muestra como mensaje del usuario)

Nuevos Metodos SignalR (Client → Server)¶

Metodo	Parametros	Descripcion
`SendAudioMessage`	`byte[] audioData, string fileName`	Envia audio grabado para transcripcion
`SendDocumentMessage`	`byte[] fileData, string fileName, string mimeType`	Envia documento adjunto