sf-aiembedded
v0.6.1
Published
GeneralAgent UI (standalone) para Angular: chat con agentes y modo agente por voz
Readme
GeneralAgent
This project was generated using Angular CLI version 19.2.0.
Modo agente por voz (lib-voice-agent)
Pantalla completa de conversación en vivo con un agente de Azure AI Foundry (Voice Live) a
través del relay de AIService (/ai/voice): chat claro, notas de voz transcritas, tarjetas con
los resultados de las herramientas del agente (cliente, simulación, venta creada) y barra
"Escuchando" mientras la sesión está abierta. El micrófono escucha de forma continua y el
usuario puede interrumpir al agente.
La app provee el puerto VOICE_AGENTS (dos llamadas HTTP al gateway, con su propio
HttpClient e interceptor de autenticación) y monta el componente en una ruta propia, fuera
de su layout, porque ocupa todo el viewport:
// app.config.ts
{ provide: VOICE_AGENTS, useExisting: VoiceAgentGatewayService }
// voice-agent.gateway.service.ts (en la app)
export class VoiceAgentGatewayService implements VoiceAgentsGatewayService {
listAgents(idKatios: string) { /* GET {ai}/voice/{idKatios}/agents */ }
createSession(idKatios: string, agentId: string) { /* POST {ai}/voice/{idKatios}/{agentId}/sessions */ }
}<lib-voice-agent [idKatios]="idKatios" [userName]="nombre" [autoStart]="true"
(exit)="volver()" (openSale)="verVenta($event)"></lib-voice-agent>Arranque automático (autoStart). Para que el agente empiece a hablar apenas se entra, la app
debe desbloquear el audio en el toque que lleva a la pantalla, antes de navegar (iOS no deja sonar
audio sin un gesto del usuario):
import { unlockVoiceAudio } from 'sf-aiembedded';
entrarAlModoAgente() {
unlockVoiceAudio(); // dentro del manejador del clic
this.router.navigate(['/agent']);
}Si no hubo ese toque (por ejemplo, la app redirigió sola), autoStart no hace nada y la persona
toca el micrófono.
Abrir la venta (openSale). Si la app escucha este evento, la tarjeta "Venta creada" muestra
"Ver detalle de la venta" y al tocarla emite { idConsumo, idContrato, cedula }; la app navega a su
detalle. Si no lo escucha, la tarjeta es solo informativa.
El componente pide un ticket de un solo uso con createSession y abre el WebSocket al wsUrl
que devuelve el relay; nunca ve credenciales de Azure. Los agentes de voz se registran en
TFNBXAI.Agents (ver docs/modo-voz.md en el repo AIService).
Code scaffolding
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
ng generate component component-nameFor a complete list of available schematics (such as components, directives, or pipes), run:
ng generate --helpBuilding
To build the library, run:
ng build general-agentThis command will compile your project, and the build artifacts will be placed in the dist/ directory.
Publishing the Library
Once the project is built, you can publish your library by following these steps:
Navigate to the
distdirectory:cd dist/general-agentRun the
npm publishcommand to publish your library to the npm registry:npm publish
Running unit tests
To execute unit tests with the Karma test runner, use the following command:
ng testRunning end-to-end tests
For end-to-end (e2e) testing, run:
ng e2eAngular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
Additional Resources
For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.
