@memberjunction/ng-conversations 6.2.0-edge.3 → 6.2.0-edge.4

package/dist/lib/components/realtime/avatar/realtime-avatar-channel.d.ts

@@ -0,0 +1,34 @@
+import type { Type } from '@angular/core';
+import type { RealtimeTrackDescriptor } from '@memberjunction/ai';
+import { type RealtimeChannelDescriptor } from '@memberjunction/ai-core-plus';
+import { BaseRealtimeChannelClient } from '@memberjunction/realtime-runtime';
+import { RealtimeAvatarSurfaceComponent } from './realtime-avatar-surface.component';
+/** The registry keys (`MJ: AI Agent Channels` → `Name` and `ClientPluginClass`) of the Avatar channel. */
+export declare const REALTIME_AVATAR_CHANNEL_NAME = "Avatar";
+export declare const REALTIME_AVATAR_CHANNEL_CLASS = "RealtimeAvatarChannel";
+/**
+ * The AVATAR channel: the agent's video, when the model sends it (an avatar).
+ *
+ * **In every call, inert without video.** It is open from the start of every call (`all-sessions`, `open-on-start`) and
+ * gives the agent nothing: no verbs, no nouns and no instructions, so the agent's channel note leaves it out, and it
+ * shows the agent nothing (`MaxExposure: 'none'`). It sinks outbound video, so the session requests the agent's video
+ * when it connects; a model that sends none reports that track unsupported, and the channel stays out of sight. When the
+ * video arrives, the runtime marks the channel as used, so the host shows its surface where its registry row places it.
+ *
+ * Its server half is the generic `ClientOnlyChannelServer`.
+ */
+export declare class RealtimeAvatarChannel extends BaseRealtimeChannelClient<RealtimeAvatarSurfaceComponent> {
+    get ChannelName(): string;
+    get TabTitle(): string;
+    get TabIcon(): string;
+    GetDescriptor(): RealtimeChannelDescriptor;
+    GetSunkTracks(): readonly RealtimeTrackDescriptor[];
+    GetSurfaceComponent(): Type<RealtimeAvatarSurfaceComponent>;
+    BindSurface(instance: RealtimeAvatarSurfaceComponent): void;
+}
+/**
+ * Tree-shaking prevention: the channel is resolved through the ClassFactory by its registry row's `ClientPluginClass`
+ * key, so this static call keeps its `@RegisterClass` side effect alive.
+ */
+export declare function LoadRealtimeAvatarChannel(): void;
+//# sourceMappingURL=realtime-avatar-channel.d.ts.map

package/dist/lib/components/realtime/avatar/realtime-avatar-channel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-avatar-channel.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/avatar/realtime-avatar-channel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAqC,KAAK,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACjH,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAErF,0GAA0G;AAC1G,eAAO,MAAM,4BAA4B,WAAW,CAAC;AACrD,eAAO,MAAM,6BAA6B,0BAA0B,CAAC;AAKrE;;;;;;;;;;GAUG;AACH,qBACa,qBAAsB,SAAQ,yBAAyB,CAAC,8BAA8B,CAAC;IAClG,IAAW,WAAW,IAAI,MAAM,CAE/B;IAED,IAAoB,QAAQ,IAAI,MAAM,CAErC;IAED,IAAoB,OAAO,IAAI,MAAM,CAEpC;IAEe,aAAa,IAAI,yBAAyB;IAe1C,aAAa,IAAI,SAAS,uBAAuB,EAAE;IAInD,mBAAmB,IAAI,IAAI,CAAC,8BAA8B,CAAC;IAI3D,WAAW,CAAC,QAAQ,EAAE,8BAA8B,GAAG,IAAI;CAM5E;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,IAAI,IAAI,CAEhD"}

package/dist/lib/components/realtime/avatar/realtime-avatar-channel.js

@@ -0,0 +1,75 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { RegisterClass } from '@memberjunction/global';
+import { REALTIME_CHANNEL_CONTRACT_VERSION } from '@memberjunction/ai-core-plus';
+import { BaseRealtimeChannelClient } from '@memberjunction/realtime-runtime';
+import { RealtimeAvatarSurfaceComponent } from './realtime-avatar-surface.component';
+/** The registry keys (`MJ: AI Agent Channels` → `Name` and `ClientPluginClass`) of the Avatar channel. */
+export const REALTIME_AVATAR_CHANNEL_NAME = 'Avatar';
+export const REALTIME_AVATAR_CHANNEL_CLASS = 'RealtimeAvatarChannel';
+/** What the Avatar channel sinks: the agent's video, in whatever encoding the model sends. */
+const AGENT_VIDEO_TRACK = { Modality: 'video', Direction: 'outbound' };
+/**
+ * The AVATAR channel: the agent's video, when the model sends it (an avatar).
+ *
+ * **In every call, inert without video.** It is open from the start of every call (`all-sessions`, `open-on-start`) and
+ * gives the agent nothing: no verbs, no nouns and no instructions, so the agent's channel note leaves it out, and it
+ * shows the agent nothing (`MaxExposure: 'none'`). It sinks outbound video, so the session requests the agent's video
+ * when it connects; a model that sends none reports that track unsupported, and the channel stays out of sight. When the
+ * video arrives, the runtime marks the channel as used, so the host shows its surface where its registry row places it.
+ *
+ * Its server half is the generic `ClientOnlyChannelServer`.
+ */
+let RealtimeAvatarChannel = class RealtimeAvatarChannel extends BaseRealtimeChannelClient {
+    get ChannelName() {
+        return REALTIME_AVATAR_CHANNEL_NAME;
+    }
+    get TabTitle() {
+        return 'Avatar';
+    }
+    get TabIcon() {
+        return 'fa-solid fa-circle-user';
+    }
+    GetDescriptor() {
+        return {
+            Key: REALTIME_AVATAR_CHANNEL_NAME,
+            Version: REALTIME_CHANNEL_CONTRACT_VERSION,
+            DisplayName: 'Avatar',
+            OwningPackage: '@memberjunction/ng-conversations',
+            Instructions: '',
+            Nouns: [],
+            Verbs: [],
+            DisplayPolicy: 'open-on-start',
+            DefaultAvailability: 'all-sessions',
+            MaxExposure: 'none',
+        };
+    }
+    GetSunkTracks() {
+        return [AGENT_VIDEO_TRACK];
+    }
+    GetSurfaceComponent() {
+        return RealtimeAvatarSurfaceComponent;
+    }
+    BindSurface(instance) {
+        instance.AgentName = this.Context?.AgentName ?? 'The assistant';
+        instance.Video$ = this.Context?.AgentVideo$ ?? null;
+        instance.State$ = this.Context?.ConnectionState$ ?? null;
+        instance.Resuming$ = this.Context?.Resuming$ ?? null;
+    }
+};
+RealtimeAvatarChannel = __decorate([
+    RegisterClass(BaseRealtimeChannelClient, REALTIME_AVATAR_CHANNEL_CLASS)
+], RealtimeAvatarChannel);
+export { RealtimeAvatarChannel };
+/**
+ * Tree-shaking prevention: the channel is resolved through the ClassFactory by its registry row's `ClientPluginClass`
+ * key, so this static call keeps its `@RegisterClass` side effect alive.
+ */
+export function LoadRealtimeAvatarChannel() {
+    // intentional no-op: the import side effect performs the registration
+}
+//# sourceMappingURL=realtime-avatar-channel.js.map

package/dist/lib/components/realtime/avatar/realtime-avatar-channel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-avatar-channel.js","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/avatar/realtime-avatar-channel.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAE,iCAAiC,EAAkC,MAAM,8BAA8B,CAAC;AACjH,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAErF,0GAA0G;AAC1G,MAAM,CAAC,MAAM,4BAA4B,GAAG,QAAQ,CAAC;AACrD,MAAM,CAAC,MAAM,6BAA6B,GAAG,uBAAuB,CAAC;AAErE,8FAA8F;AAC9F,MAAM,iBAAiB,GAA4B,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AAEhG;;;;;;;;;;GAUG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,yBAAyD;IAClG,IAAW,WAAW;QACpB,OAAO,4BAA4B,CAAC;IACtC,CAAC;IAED,IAAoB,QAAQ;QAC1B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAoB,OAAO;QACzB,OAAO,yBAAyB,CAAC;IACnC,CAAC;IAEe,aAAa;QAC3B,OAAO;YACL,GAAG,EAAE,4BAA4B;YACjC,OAAO,EAAE,iCAAiC;YAC1C,WAAW,EAAE,QAAQ;YACrB,aAAa,EAAE,kCAAkC;YACjD,YAAY,EAAE,EAAE;YAChB,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,EAAE;YACT,aAAa,EAAE,eAAe;YAC9B,mBAAmB,EAAE,cAAc;YACnC,WAAW,EAAE,MAAM;SACpB,CAAC;IACJ,CAAC;IAEe,aAAa;QAC3B,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC7B,CAAC;IAEe,mBAAmB;QACjC,OAAO,8BAA8B,CAAC;IACxC,CAAC;IAEe,WAAW,CAAC,QAAwC;QAClE,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,eAAe,CAAC;QAChE,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC;QACpD,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,gBAAgB,IAAI,IAAI,CAAC;QACzD,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,IAAI,CAAC;IACvD,CAAC;CACF,CAAA;AA1CY,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,EAAE,6BAA6B,CAAC;GAC3D,qBAAqB,CA0CjC;;AAED;;;GAGG;AACH,MAAM,UAAU,yBAAyB;IACvC,sEAAsE;AACxE,CAAC","sourcesContent":["import type { Type } from '@angular/core';\nimport { RegisterClass } from '@memberjunction/global';\nimport type { RealtimeTrackDescriptor } from '@memberjunction/ai';\nimport { REALTIME_CHANNEL_CONTRACT_VERSION, type RealtimeChannelDescriptor } from '@memberjunction/ai-core-plus';\nimport { BaseRealtimeChannelClient } from '@memberjunction/realtime-runtime';\nimport { RealtimeAvatarSurfaceComponent } from './realtime-avatar-surface.component';\n\n/** The registry keys (`MJ: AI Agent Channels` → `Name` and `ClientPluginClass`) of the Avatar channel. */\nexport const REALTIME_AVATAR_CHANNEL_NAME = 'Avatar';\nexport const REALTIME_AVATAR_CHANNEL_CLASS = 'RealtimeAvatarChannel';\n\n/** What the Avatar channel sinks: the agent's video, in whatever encoding the model sends. */\nconst AGENT_VIDEO_TRACK: RealtimeTrackDescriptor = { Modality: 'video', Direction: 'outbound' };\n\n/**\n * The AVATAR channel: the agent's video, when the model sends it (an avatar).\n *\n * **In every call, inert without video.** It is open from the start of every call (`all-sessions`, `open-on-start`) and\n * gives the agent nothing: no verbs, no nouns and no instructions, so the agent's channel note leaves it out, and it\n * shows the agent nothing (`MaxExposure: 'none'`). It sinks outbound video, so the session requests the agent's video\n * when it connects; a model that sends none reports that track unsupported, and the channel stays out of sight. When the\n * video arrives, the runtime marks the channel as used, so the host shows its surface where its registry row places it.\n *\n * Its server half is the generic `ClientOnlyChannelServer`.\n */\n@RegisterClass(BaseRealtimeChannelClient, REALTIME_AVATAR_CHANNEL_CLASS)\nexport class RealtimeAvatarChannel extends BaseRealtimeChannelClient<RealtimeAvatarSurfaceComponent> {\n  public get ChannelName(): string {\n    return REALTIME_AVATAR_CHANNEL_NAME;\n  }\n\n  public override get TabTitle(): string {\n    return 'Avatar';\n  }\n\n  public override get TabIcon(): string {\n    return 'fa-solid fa-circle-user';\n  }\n\n  public override GetDescriptor(): RealtimeChannelDescriptor {\n    return {\n      Key: REALTIME_AVATAR_CHANNEL_NAME,\n      Version: REALTIME_CHANNEL_CONTRACT_VERSION,\n      DisplayName: 'Avatar',\n      OwningPackage: '@memberjunction/ng-conversations',\n      Instructions: '',\n      Nouns: [],\n      Verbs: [],\n      DisplayPolicy: 'open-on-start',\n      DefaultAvailability: 'all-sessions',\n      MaxExposure: 'none',\n    };\n  }\n\n  public override GetSunkTracks(): readonly RealtimeTrackDescriptor[] {\n    return [AGENT_VIDEO_TRACK];\n  }\n\n  public override GetSurfaceComponent(): Type<RealtimeAvatarSurfaceComponent> {\n    return RealtimeAvatarSurfaceComponent;\n  }\n\n  public override BindSurface(instance: RealtimeAvatarSurfaceComponent): void {\n    instance.AgentName = this.Context?.AgentName ?? 'The assistant';\n    instance.Video$ = this.Context?.AgentVideo$ ?? null;\n    instance.State$ = this.Context?.ConnectionState$ ?? null;\n    instance.Resuming$ = this.Context?.Resuming$ ?? null;\n  }\n}\n\n/**\n * Tree-shaking prevention: the channel is resolved through the ClassFactory by its registry row's `ClientPluginClass`\n * key, so this static call keeps its `@RegisterClass` side effect alive.\n */\nexport function LoadRealtimeAvatarChannel(): void {\n  // intentional no-op: the import side effect performs the registration\n}\n"]}

package/dist/lib/components/realtime/avatar/realtime-avatar-surface.component.d.ts

@@ -0,0 +1,80 @@
+import { OnDestroy } from '@angular/core';
+import type { Observable } from 'rxjs';
+import type { MediaParticipant, MediaVideoSource } from '@memberjunction/ai-realtime-client/media';
+import type { RealtimeConnectionState } from '@memberjunction/realtime-runtime';
+import { type RealtimeAgentOrbState } from '../realtime-agent-orb.component';
+import * as i0 from "@angular/core";
+/** After this long without a frame, the agent's video gives way to its placeholder (plan §5: about a second). */
+export declare const AGENT_VIDEO_STALL_MS = 1000;
+/**
+ * How long the agent's last frame can hold while the call resumes on a new connection, from the resume's start, before
+ * the orb takes its place (plan §5). New video came about 3 s after each move in the live runs on Vertex AI.
+ */
+export declare const AGENT_VIDEO_RESUME_HOLD_MS = 5000;
+/**
+ * `mj-realtime-avatar-surface`: the Avatar channel's surface. The agent's video (an avatar) in a media tile, with the
+ * agent's name and the "AI-generated video" label the tile shows while it plays an avatar, and a chip that says what the
+ * agent is doing. A ring frames the tile while the agent speaks, following its voice where the call overlay meters it.
+ * Until the video's first frame, and after {@link AGENT_VIDEO_STALL_MS} without one, the call's orb takes its place,
+ * following the agent's turn. While the call resumes on a new connection, the last frame holds instead, until new
+ * frames come, {@link AGENT_VIDEO_RESUME_HOLD_MS} pass, or the call fails or ends.
+ */
+export declare class RealtimeAvatarSurfaceComponent implements OnDestroy {
+    private readonly cdr;
+    private agentName;
+    private video;
+    private video$;
+    private videoSub;
+    private state$;
+    private stateSub;
+    private resuming$;
+    private resumingSub;
+    /** The last value {@link Resuming$} gave: a hold starts when a resume does. */
+    private resuming;
+    /** Ends the hold {@link AGENT_VIDEO_RESUME_HOLD_MS} after the resume started. */
+    private holdTimer;
+    /** The agent's turn, as the orb shows it. */
+    OrbState: RealtimeAgentOrbState;
+    /** What the tile's chip says the agent is doing, or `null` before the call's state is known. */
+    StatusLabel: string | null;
+    /** The agent as the tile shows it. */
+    Agent: MediaParticipant;
+    /** How long without a frame the tile waits before showing the placeholder. */
+    readonly StallAfterMs = 1000;
+    /**
+     * Whether the tile keeps the agent's last frame on show while the video is out of frames: from the start of a resume
+     * until new frames come, {@link AGENT_VIDEO_RESUME_HOLD_MS} pass, or the call fails or ends.
+     */
+    HoldLastFrame: boolean;
+    /** The agent's name, shown on the tile. */
+    set AgentName(value: string);
+    get AgentName(): string;
+    /** The agent's video, now and on every change (the session's `AgentVideo$`). */
+    set Video$(value: Observable<MediaVideoSource | null> | null);
+    get Video$(): Observable<MediaVideoSource | null> | null;
+    /**
+     * The call's state, now and on every change (the session's `ConnectionState$`): the orb follows the agent's turn, and
+     * an error or the call's end stops holding the last frame.
+     */
+    set State$(value: Observable<RealtimeConnectionState> | null);
+    get State$(): Observable<RealtimeConnectionState> | null;
+    /**
+     * Whether the call is resuming on a new connection, now and on every change (the session's `Resuming$`): a resume's
+     * start holds the agent's last frame ({@link HoldLastFrame}).
+     */
+    set Resuming$(value: Observable<boolean> | null);
+    get Resuming$(): Observable<boolean> | null;
+    /** The tile's frames stopped or came back: frames that come back end a hold. */
+    OnFramesFlowingChange(flowing: boolean): void;
+    ngOnDestroy(): void;
+    /** A resume that starts holds the last frame; the hold ends on its own terms, not when the resume does. */
+    private onResuming;
+    /** Holds the last frame for up to {@link AGENT_VIDEO_RESUME_HOLD_MS}, counted again from a new resume's start. */
+    private startHold;
+    /** Stops holding the last frame: the orb shows if the video is still out of frames. */
+    private endHold;
+    private clearHoldTimer;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RealtimeAvatarSurfaceComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RealtimeAvatarSurfaceComponent, "mj-realtime-avatar-surface", never, { "AgentName": { "alias": "AgentName"; "required": false; }; "Video$": { "alias": "Video$"; "required": false; }; "State$": { "alias": "State$"; "required": false; }; "Resuming$": { "alias": "Resuming$"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=realtime-avatar-surface.component.d.ts.map

package/dist/lib/components/realtime/avatar/realtime-avatar-surface.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-avatar-surface.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/avatar/realtime-avatar-surface.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgE,SAAS,EAAU,MAAM,eAAe,CAAC;AAChH,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,MAAM,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACnG,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAEhF,OAAO,EAA+C,KAAK,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;;AAE1H,iHAAiH;AACjH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,0BAA0B,OAAO,CAAC;AAE/C;;;;;;;GAOG;AACH,qBAQa,8BAA+B,YAAW,SAAS;IAC9D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA6B;IACjD,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,MAAM,CAAoD;IAClE,OAAO,CAAC,QAAQ,CAA6B;IAC7C,OAAO,CAAC,MAAM,CAAoD;IAClE,OAAO,CAAC,QAAQ,CAA6B;IAC7C,OAAO,CAAC,SAAS,CAAoC;IACrD,OAAO,CAAC,WAAW,CAA6B;IAChD,+EAA+E;IAC/E,OAAO,CAAC,QAAQ,CAAS;IACzB,iFAAiF;IACjF,OAAO,CAAC,SAAS,CAA8C;IAE/D,6CAA6C;IACtC,QAAQ,EAAE,qBAAqB,CAAe;IAErD,gGAAgG;IACzF,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC,sCAAsC;IAC/B,KAAK,EAAE,gBAAgB,CAA0C;IAExE,8EAA8E;IAC9E,SAAgB,YAAY,QAAwB;IAEpD;;;OAGG;IACI,aAAa,UAAS;IAE7B,2CAA2C;IAC3C,IACW,SAAS,CAAC,KAAK,EAAE,MAAM,EAGjC;IACD,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED,gFAAgF;IAChF,IACW,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,EAYlE;IACD,IAAW,MAAM,IAAI,UAAU,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAE9D;IAED;;;OAGG;IACH,IACW,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,uBAAuB,CAAC,GAAG,IAAI,EAelE;IACD,IAAW,MAAM,IAAI,UAAU,CAAC,uBAAuB,CAAC,GAAG,IAAI,CAE9D;IAED;;;OAGG;IACH,IACW,SAAS,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,EAQrD;IACD,IAAW,SAAS,IAAI,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,CAEjD;IAED,gFAAgF;IACzE,qBAAqB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAM7C,WAAW,IAAI,IAAI;IAU1B,2GAA2G;IAC3G,OAAO,CAAC,UAAU;IAOlB,kHAAkH;IAClH,OAAO,CAAC,SAAS;IAOjB,uFAAuF;IACvF,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,cAAc;yCAnJX,8BAA8B;2CAA9B,8BAA8B;CAyJ1C"}

package/dist/lib/components/realtime/avatar/realtime-avatar-surface.component.js

@@ -0,0 +1,202 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, inject } from '@angular/core';
+import { MediaTileComponent, MediaTilePlaceholderDirective } from '@memberjunction/ng-realtime-media';
+import { AgentOrbStateFor, RealtimeAgentOrbComponent } from '../realtime-agent-orb.component';
+import * as i0 from "@angular/core";
+/** After this long without a frame, the agent's video gives way to its placeholder (plan §5: about a second). */
+export const AGENT_VIDEO_STALL_MS = 1000;
+/**
+ * How long the agent's last frame can hold while the call resumes on a new connection, from the resume's start, before
+ * the orb takes its place (plan §5). New video came about 3 s after each move in the live runs on Vertex AI.
+ */
+export const AGENT_VIDEO_RESUME_HOLD_MS = 5000;
+/**
+ * `mj-realtime-avatar-surface`: the Avatar channel's surface. The agent's video (an avatar) in a media tile, with the
+ * agent's name and the "AI-generated video" label the tile shows while it plays an avatar, and a chip that says what the
+ * agent is doing. A ring frames the tile while the agent speaks, following its voice where the call overlay meters it.
+ * Until the video's first frame, and after {@link AGENT_VIDEO_STALL_MS} without one, the call's orb takes its place,
+ * following the agent's turn. While the call resumes on a new connection, the last frame holds instead, until new
+ * frames come, {@link AGENT_VIDEO_RESUME_HOLD_MS} pass, or the call fails or ends.
+ */
+export class RealtimeAvatarSurfaceComponent {
+    cdr = inject(ChangeDetectorRef);
+    agentName = 'The assistant';
+    video = null;
+    video$ = null;
+    videoSub = null;
+    state$ = null;
+    stateSub = null;
+    resuming$ = null;
+    resumingSub = null;
+    /** The last value {@link Resuming$} gave: a hold starts when a resume does. */
+    resuming = false;
+    /** Ends the hold {@link AGENT_VIDEO_RESUME_HOLD_MS} after the resume started. */
+    holdTimer = null;
+    /** The agent's turn, as the orb shows it. */
+    OrbState = 'listening';
+    /** What the tile's chip says the agent is doing, or `null` before the call's state is known. */
+    StatusLabel = null;
+    /** The agent as the tile shows it. */
+    Agent = agentParticipant(this.agentName, null);
+    /** How long without a frame the tile waits before showing the placeholder. */
+    StallAfterMs = AGENT_VIDEO_STALL_MS;
+    /**
+     * Whether the tile keeps the agent's last frame on show while the video is out of frames: from the start of a resume
+     * until new frames come, {@link AGENT_VIDEO_RESUME_HOLD_MS} pass, or the call fails or ends.
+     */
+    HoldLastFrame = false;
+    /** The agent's name, shown on the tile. */
+    set AgentName(value) {
+        this.agentName = value;
+        this.Agent = agentParticipant(value, this.video);
+    }
+    get AgentName() {
+        return this.agentName;
+    }
+    /** The agent's video, now and on every change (the session's `AgentVideo$`). */
+    set Video$(value) {
+        if (value === this.video$) {
+            return;
+        }
+        this.videoSub?.unsubscribe();
+        this.video$ = value;
+        this.videoSub =
+            value?.subscribe((video) => {
+                this.video = video;
+                this.Agent = agentParticipant(this.agentName, video);
+                this.cdr.markForCheck();
+            }) ?? null;
+    }
+    get Video$() {
+        return this.video$;
+    }
+    /**
+     * The call's state, now and on every change (the session's `ConnectionState$`): the orb follows the agent's turn, and
+     * an error or the call's end stops holding the last frame.
+     */
+    set State$(value) {
+        if (value === this.state$) {
+            return;
+        }
+        this.stateSub?.unsubscribe();
+        this.state$ = value;
+        this.stateSub =
+            value?.subscribe((state) => {
+                this.OrbState = AgentOrbStateFor(state);
+                this.StatusLabel = statusLabelFor(state);
+                if (state === 'error' || state === 'closed') {
+                    this.endHold();
+                }
+                this.cdr.markForCheck();
+            }) ?? null;
+    }
+    get State$() {
+        return this.state$;
+    }
+    /**
+     * Whether the call is resuming on a new connection, now and on every change (the session's `Resuming$`): a resume's
+     * start holds the agent's last frame ({@link HoldLastFrame}).
+     */
+    set Resuming$(value) {
+        if (value === this.resuming$) {
+            return;
+        }
+        this.resumingSub?.unsubscribe();
+        this.resuming$ = value;
+        this.resuming = false;
+        this.resumingSub = value?.subscribe((resuming) => this.onResuming(resuming)) ?? null;
+    }
+    get Resuming$() {
+        return this.resuming$;
+    }
+    /** The tile's frames stopped or came back: frames that come back end a hold. */
+    OnFramesFlowingChange(flowing) {
+        if (flowing) {
+            this.endHold();
+        }
+    }
+    ngOnDestroy() {
+        this.videoSub?.unsubscribe();
+        this.videoSub = null;
+        this.stateSub?.unsubscribe();
+        this.stateSub = null;
+        this.resumingSub?.unsubscribe();
+        this.resumingSub = null;
+        this.clearHoldTimer();
+    }
+    /** A resume that starts holds the last frame; the hold ends on its own terms, not when the resume does. */
+    onResuming(resuming) {
+        if (resuming && !this.resuming) {
+            this.startHold();
+        }
+        this.resuming = resuming;
+    }
+    /** Holds the last frame for up to {@link AGENT_VIDEO_RESUME_HOLD_MS}, counted again from a new resume's start. */
+    startHold() {
+        this.clearHoldTimer();
+        this.HoldLastFrame = true;
+        this.holdTimer = setTimeout(() => this.endHold(), AGENT_VIDEO_RESUME_HOLD_MS);
+        this.cdr.markForCheck();
+    }
+    /** Stops holding the last frame: the orb shows if the video is still out of frames. */
+    endHold() {
+        this.clearHoldTimer();
+        if (this.HoldLastFrame) {
+            this.HoldLastFrame = false;
+            this.cdr.markForCheck();
+        }
+    }
+    clearHoldTimer() {
+        if (this.holdTimer !== null) {
+            clearTimeout(this.holdTimer);
+            this.holdTimer = null;
+        }
+    }
+    static ɵfac = function RealtimeAvatarSurfaceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeAvatarSurfaceComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeAvatarSurfaceComponent, selectors: [["mj-realtime-avatar-surface"]], inputs: { AgentName: "AgentName", Video$: "Video$", State$: "State$", Resuming$: "Resuming$" }, decls: 3, vars: 10, consts: [[1, "avatar"], [1, "avatar__tile", 3, "FramesFlowingChange", "Participant", "ShowMeter", "ShowConnectionQuality", "ShowActiveSpeakerRing", "StallAfterMs", "HoldLastFrame", "Status"], ["mjMediaTilePlaceholder", "", 1, "avatar__orb", 3, "State"]], template: function RealtimeAvatarSurfaceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "mj-media-tile", 1);
+            i0.ɵɵlistener("FramesFlowingChange", function RealtimeAvatarSurfaceComponent_Template_mj_media_tile_FramesFlowingChange_1_listener($event) { return ctx.OnFramesFlowingChange($event); });
+            i0.ɵɵelement(2, "mj-realtime-agent-orb", 2);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("avatar--speaking", ctx.OrbState === "speaking");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Participant", ctx.Agent)("ShowMeter", false)("ShowConnectionQuality", false)("ShowActiveSpeakerRing", false)("StallAfterMs", ctx.StallAfterMs)("HoldLastFrame", ctx.HoldLastFrame)("Status", ctx.StatusLabel);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("State", ctx.OrbState);
+        } }, dependencies: [MediaTileComponent, MediaTilePlaceholderDirective, RealtimeAgentOrbComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  \n  container-type: size;\n}\n\n.avatar[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 12px;\n}\n\n\n\n.avatar[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  transition: box-shadow 140ms ease;\n}\n\n.avatar--speaking[_ngcontent-%COMP%]::after {\n  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n}\n\n\n.call-overlay[data-audio-live='true'][_nghost-%COMP%]   .avatar--speaking[_ngcontent-%COMP%]::after, .call-overlay[data-audio-live='true']   [_nghost-%COMP%]   .avatar--speaking[_ngcontent-%COMP%]::after {\n  box-shadow: inset 0 0 0 calc(2px + var(--voice-out, 0) * 6px) color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n  transition: box-shadow 70ms linear;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .avatar[_ngcontent-%COMP%]::after {\n    transition: none;\n  }\n}\n\n\n.avatar__orb[_ngcontent-%COMP%] {\n  --mj-realtime-orb-size: 30cqmin;\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeAvatarSurfaceComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-avatar-surface', imports: [MediaTileComponent, MediaTilePlaceholderDirective, RealtimeAgentOrbComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [class.avatar--speaking]=\"OrbState === 'speaking'\">\n  <mj-media-tile\n    class=\"avatar__tile\"\n    [Participant]=\"Agent\"\n    [ShowMeter]=\"false\"\n    [ShowConnectionQuality]=\"false\"\n    [ShowActiveSpeakerRing]=\"false\"\n    [StallAfterMs]=\"StallAfterMs\"\n    [HoldLastFrame]=\"HoldLastFrame\"\n    [Status]=\"StatusLabel\"\n    (FramesFlowingChange)=\"OnFramesFlowingChange($event)\">\n    <mj-realtime-agent-orb mjMediaTilePlaceholder class=\"avatar__orb\" [State]=\"OrbState\"></mj-realtime-agent-orb>\n  </mj-media-tile>\n</div>\n", styles: [":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  /* The orb sizes itself to this surface, wherever it is placed. */\n  container-type: size;\n}\n\n.avatar {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 12px;\n}\n\n/* The ring that frames the agent's tile while it speaks: inside the tile's edge, so the box the stage gives the surface\n   never clips it. */\n.avatar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  transition: box-shadow 140ms ease;\n}\n\n.avatar--speaking::after {\n  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n}\n\n/* Where the call overlay meters the agent's voice, the ring follows it (--voice-out, inherited). */\n:host-context(.call-overlay[data-audio-live='true']) .avatar--speaking::after {\n  box-shadow: inset 0 0 0 calc(2px + var(--voice-out, 0) * 6px) color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n  transition: box-shadow 70ms linear;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .avatar::after {\n    transition: none;\n  }\n}\n\n/* The orb's diameter: about a third of the surface's shorter side, so its rings fit. */\n.avatar__orb {\n  --mj-realtime-orb-size: 30cqmin;\n}\n"] }]
+    }], null, { AgentName: [{
+            type: Input
+        }], Video$: [{
+            type: Input
+        }], State$: [{
+            type: Input
+        }], Resuming$: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeAvatarSurfaceComponent, { className: "RealtimeAvatarSurfaceComponent", filePath: "src/lib/components/realtime/avatar/realtime-avatar-surface.component.ts", lineNumber: 33 }); })();
+/** What the tile's chip says for a state of the call, or `null` for none (the call has ended). */
+function statusLabelFor(state) {
+    switch (state) {
+        case 'speaking':
+            return 'Speaking';
+        case 'thinking':
+            return 'Thinking';
+        case 'listening':
+            return 'Listening';
+        case 'connecting':
+            return 'Connecting';
+        case 'error':
+            return 'Connection error';
+        default:
+            return null;
+    }
+}
+/** The agent as a media tile shows it: its name, and its video as the avatar when there is one. */
+function agentParticipant(name, video) {
+    return { Identity: 'agent', DisplayName: name, Role: 'agent', IsSpeaking: false, Video: video ? { avatar: video } : {} };
+}
+//# sourceMappingURL=realtime-avatar-surface.component.js.map

package/dist/lib/components/realtime/avatar/realtime-avatar-surface.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-avatar-surface.component.js","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/avatar/realtime-avatar-surface.component.ts","../../../../../src/lib/components/realtime/avatar/realtime-avatar-surface.component.html"],"names":[],"mappings":"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","sourcesContent":["import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, inject } from '@angular/core';\nimport type { Observable, Subscription } from 'rxjs';\nimport type { MediaParticipant, MediaVideoSource } from '@memberjunction/ai-realtime-client/media';\nimport type { RealtimeConnectionState } from '@memberjunction/realtime-runtime';\nimport { MediaTileComponent, MediaTilePlaceholderDirective } from '@memberjunction/ng-realtime-media';\nimport { AgentOrbStateFor, RealtimeAgentOrbComponent, type RealtimeAgentOrbState } from '../realtime-agent-orb.component';\n\n/** After this long without a frame, the agent's video gives way to its placeholder (plan §5: about a second). */\nexport const AGENT_VIDEO_STALL_MS = 1000;\n\n/**\n * How long the agent's last frame can hold while the call resumes on a new connection, from the resume's start, before\n * the orb takes its place (plan §5). New video came about 3 s after each move in the live runs on Vertex AI.\n */\nexport const AGENT_VIDEO_RESUME_HOLD_MS = 5000;\n\n/**\n * `mj-realtime-avatar-surface`: the Avatar channel's surface. The agent's video (an avatar) in a media tile, with the\n * agent's name and the \"AI-generated video\" label the tile shows while it plays an avatar, and a chip that says what the\n * agent is doing. A ring frames the tile while the agent speaks, following its voice where the call overlay meters it.\n * Until the video's first frame, and after {@link AGENT_VIDEO_STALL_MS} without one, the call's orb takes its place,\n * following the agent's turn. While the call resumes on a new connection, the last frame holds instead, until new\n * frames come, {@link AGENT_VIDEO_RESUME_HOLD_MS} pass, or the call fails or ends.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-avatar-surface',\n  imports: [MediaTileComponent, MediaTilePlaceholderDirective, RealtimeAgentOrbComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './realtime-avatar-surface.component.html',\n  styleUrls: ['./realtime-avatar-surface.component.css'],\n})\nexport class RealtimeAvatarSurfaceComponent implements OnDestroy {\n  private readonly cdr = inject(ChangeDetectorRef);\n  private agentName = 'The assistant';\n  private video: MediaVideoSource | null = null;\n  private video$: Observable<MediaVideoSource | null> | null = null;\n  private videoSub: Subscription | null = null;\n  private state$: Observable<RealtimeConnectionState> | null = null;\n  private stateSub: Subscription | null = null;\n  private resuming$: Observable<boolean> | null = null;\n  private resumingSub: Subscription | null = null;\n  /** The last value {@link Resuming$} gave: a hold starts when a resume does. */\n  private resuming = false;\n  /** Ends the hold {@link AGENT_VIDEO_RESUME_HOLD_MS} after the resume started. */\n  private holdTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** The agent's turn, as the orb shows it. */\n  public OrbState: RealtimeAgentOrbState = 'listening';\n\n  /** What the tile's chip says the agent is doing, or `null` before the call's state is known. */\n  public StatusLabel: string | null = null;\n\n  /** The agent as the tile shows it. */\n  public Agent: MediaParticipant = agentParticipant(this.agentName, null);\n\n  /** How long without a frame the tile waits before showing the placeholder. */\n  public readonly StallAfterMs = AGENT_VIDEO_STALL_MS;\n\n  /**\n   * Whether the tile keeps the agent's last frame on show while the video is out of frames: from the start of a resume\n   * until new frames come, {@link AGENT_VIDEO_RESUME_HOLD_MS} pass, or the call fails or ends.\n   */\n  public HoldLastFrame = false;\n\n  /** The agent's name, shown on the tile. */\n  @Input()\n  public set AgentName(value: string) {\n    this.agentName = value;\n    this.Agent = agentParticipant(value, this.video);\n  }\n  public get AgentName(): string {\n    return this.agentName;\n  }\n\n  /** The agent's video, now and on every change (the session's `AgentVideo$`). */\n  @Input()\n  public set Video$(value: Observable<MediaVideoSource | null> | null) {\n    if (value === this.video$) {\n      return;\n    }\n    this.videoSub?.unsubscribe();\n    this.video$ = value;\n    this.videoSub =\n      value?.subscribe((video) => {\n        this.video = video;\n        this.Agent = agentParticipant(this.agentName, video);\n        this.cdr.markForCheck();\n      }) ?? null;\n  }\n  public get Video$(): Observable<MediaVideoSource | null> | null {\n    return this.video$;\n  }\n\n  /**\n   * The call's state, now and on every change (the session's `ConnectionState$`): the orb follows the agent's turn, and\n   * an error or the call's end stops holding the last frame.\n   */\n  @Input()\n  public set State$(value: Observable<RealtimeConnectionState> | null) {\n    if (value === this.state$) {\n      return;\n    }\n    this.stateSub?.unsubscribe();\n    this.state$ = value;\n    this.stateSub =\n      value?.subscribe((state) => {\n        this.OrbState = AgentOrbStateFor(state);\n        this.StatusLabel = statusLabelFor(state);\n        if (state === 'error' || state === 'closed') {\n          this.endHold();\n        }\n        this.cdr.markForCheck();\n      }) ?? null;\n  }\n  public get State$(): Observable<RealtimeConnectionState> | null {\n    return this.state$;\n  }\n\n  /**\n   * Whether the call is resuming on a new connection, now and on every change (the session's `Resuming$`): a resume's\n   * start holds the agent's last frame ({@link HoldLastFrame}).\n   */\n  @Input()\n  public set Resuming$(value: Observable<boolean> | null) {\n    if (value === this.resuming$) {\n      return;\n    }\n    this.resumingSub?.unsubscribe();\n    this.resuming$ = value;\n    this.resuming = false;\n    this.resumingSub = value?.subscribe((resuming) => this.onResuming(resuming)) ?? null;\n  }\n  public get Resuming$(): Observable<boolean> | null {\n    return this.resuming$;\n  }\n\n  /** The tile's frames stopped or came back: frames that come back end a hold. */\n  public OnFramesFlowingChange(flowing: boolean): void {\n    if (flowing) {\n      this.endHold();\n    }\n  }\n\n  public ngOnDestroy(): void {\n    this.videoSub?.unsubscribe();\n    this.videoSub = null;\n    this.stateSub?.unsubscribe();\n    this.stateSub = null;\n    this.resumingSub?.unsubscribe();\n    this.resumingSub = null;\n    this.clearHoldTimer();\n  }\n\n  /** A resume that starts holds the last frame; the hold ends on its own terms, not when the resume does. */\n  private onResuming(resuming: boolean): void {\n    if (resuming && !this.resuming) {\n      this.startHold();\n    }\n    this.resuming = resuming;\n  }\n\n  /** Holds the last frame for up to {@link AGENT_VIDEO_RESUME_HOLD_MS}, counted again from a new resume's start. */\n  private startHold(): void {\n    this.clearHoldTimer();\n    this.HoldLastFrame = true;\n    this.holdTimer = setTimeout(() => this.endHold(), AGENT_VIDEO_RESUME_HOLD_MS);\n    this.cdr.markForCheck();\n  }\n\n  /** Stops holding the last frame: the orb shows if the video is still out of frames. */\n  private endHold(): void {\n    this.clearHoldTimer();\n    if (this.HoldLastFrame) {\n      this.HoldLastFrame = false;\n      this.cdr.markForCheck();\n    }\n  }\n\n  private clearHoldTimer(): void {\n    if (this.holdTimer !== null) {\n      clearTimeout(this.holdTimer);\n      this.holdTimer = null;\n    }\n  }\n}\n\n/** What the tile's chip says for a state of the call, or `null` for none (the call has ended). */\nfunction statusLabelFor(state: RealtimeConnectionState): string | null {\n  switch (state) {\n    case 'speaking':\n      return 'Speaking';\n    case 'thinking':\n      return 'Thinking';\n    case 'listening':\n      return 'Listening';\n    case 'connecting':\n      return 'Connecting';\n    case 'error':\n      return 'Connection error';\n    default:\n      return null;\n  }\n}\n\n/** The agent as a media tile shows it: its name, and its video as the avatar when there is one. */\nfunction agentParticipant(name: string, video: MediaVideoSource | null): MediaParticipant {\n  return { Identity: 'agent', DisplayName: name, Role: 'agent', IsSpeaking: false, Video: video ? { avatar: video } : {} };\n}\n","<div class=\"avatar\" [class.avatar--speaking]=\"OrbState === 'speaking'\">\n  <mj-media-tile\n    class=\"avatar__tile\"\n    [Participant]=\"Agent\"\n    [ShowMeter]=\"false\"\n    [ShowConnectionQuality]=\"false\"\n    [ShowActiveSpeakerRing]=\"false\"\n    [StallAfterMs]=\"StallAfterMs\"\n    [HoldLastFrame]=\"HoldLastFrame\"\n    [Status]=\"StatusLabel\"\n    (FramesFlowingChange)=\"OnFramesFlowingChange($event)\">\n    <mj-realtime-agent-orb mjMediaTilePlaceholder class=\"avatar__orb\" [State]=\"OrbState\"></mj-realtime-agent-orb>\n  </mj-media-tile>\n</div>\n"]}

package/dist/lib/components/realtime/capture/realtime-camera-check-card.component.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from '@angular/core';
+import type { MediaDevice, MediaDeviceSelection, MediaVideoSource } from '@memberjunction/ai-realtime-client/media';
+import type { RealtimeCaptureState } from '@memberjunction/realtime-runtime';
+import * as i0 from "@angular/core";
+/**
+ * `mj-realtime-camera-check-card`: the camera check over the call. The first time the user turns the camera on in a call,
+ * the camera opens for them alone ({@link RealtimeCaptureState.Checking}) and this card shows it, mirrored, with the
+ * cameras to choose from. It checks the camera only: it gives `mj-camera-check` no microphones, no level and no buttons. "Turn on camera" lets the agent see it ({@link Confirmed}); "Not now", the close button,
+ * Escape and a click outside turn it off ({@link Declined}).
+ *
+ * Presentational: the overlay gives it the camera's state and a way to {@link Switch} cameras, and calls the session for
+ * each answer.
+ */
+export declare class RealtimeCameraCheckCardComponent {
+    private readonly cdr;
+    private camera;
+    private source;
+    /** The camera being switched to, while the switch runs. */
+    private switchingTo;
+    /** Who the user is about to show the camera to. */
+    AgentName: string;
+    /** Moves the camera to another device and resolves once it has, or has gone back to the one in use. */
+    Switch: ((deviceId: string) => Promise<unknown>) | null;
+    /** The camera being checked: its stream, the camera in use and the cameras to choose from. */
+    set Camera(value: RealtimeCaptureState | null);
+    get Camera(): RealtimeCaptureState | null;
+    /** The user turned the camera on for the agent. */
+    Confirmed: EventEmitter<void>;
+    /** The user said not now. */
+    Declined: EventEmitter<void>;
+    /** The preview: the camera's stream, the same object while the stream is the same. */
+    get Source(): MediaVideoSource | null;
+    /** The cameras to choose from. */
+    get Devices(): readonly MediaDevice[];
+    /** The picker's camera: the one being switched to, else the one in use. */
+    get SelectedCameraID(): string | null;
+    /**
+     * A camera picked in the check. The picker shows it while the camera switches, then the camera in use: the new one, or
+     * the old one when the new one could not open. A pick of the camera in use changes nothing.
+     */
+    OnDeviceSelected(selection: MediaDeviceSelection): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RealtimeCameraCheckCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RealtimeCameraCheckCardComponent, "mj-realtime-camera-check-card", never, { "AgentName": { "alias": "AgentName"; "required": false; }; "Switch": { "alias": "Switch"; "required": false; }; "Camera": { "alias": "Camera"; "required": false; }; }, { "Confirmed": "Confirmed"; "Declined": "Declined"; }, never, never, true, never>;
+}
+//# sourceMappingURL=realtime-camera-check-card.component.d.ts.map

package/dist/lib/components/realtime/capture/realtime-camera-check-card.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-camera-check-card.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/capture/realtime-camera-check-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyD,YAAY,EAAyB,MAAM,eAAe,CAAC;AAG3H,OAAO,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACpH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;;AAE7E;;;;;;;;GAQG;AACH,qBAyBa,gCAAgC;IAC3C,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA6B;IACjD,OAAO,CAAC,MAAM,CAAqC;IACnD,OAAO,CAAC,MAAM,CAAiC;IAC/C,2DAA2D;IAC3D,OAAO,CAAC,WAAW,CAAuB;IAE1C,mDAAmD;IACnC,SAAS,SAAmB;IAE5C,uGAAuG;IACvF,MAAM,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI,CAAQ;IAE/E,8FAA8F;IAC9F,IACW,MAAM,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,EAGnD;IACD,IAAW,MAAM,IAAI,oBAAoB,GAAG,IAAI,CAE/C;IAED,mDAAmD;IAClC,SAAS,qBAA4B;IACtD,6BAA6B;IACZ,QAAQ,qBAA4B;IAErD,sFAAsF;IACtF,IAAW,MAAM,IAAI,gBAAgB,GAAG,IAAI,CAE3C;IAED,kCAAkC;IAClC,IAAW,OAAO,IAAI,SAAS,WAAW,EAAE,CAE3C;IAED,2EAA2E;IAC3E,IAAW,gBAAgB,IAAI,MAAM,GAAG,IAAI,CAE3C;IAED;;;OAGG;IACU,gBAAgB,CAAC,SAAS,EAAE,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC;yCA/ClE,gCAAgC;2CAAhC,gCAAgC;CA4D5C"}

package/dist/lib/components/realtime/capture/realtime-camera-check-card.component.js

@@ -0,0 +1,123 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { MJDialogComponent } from '@memberjunction/ng-ui-components';
+import { CameraCheckComponent } from '@memberjunction/ng-realtime-media';
+import * as i0 from "@angular/core";
+/**
+ * `mj-realtime-camera-check-card`: the camera check over the call. The first time the user turns the camera on in a call,
+ * the camera opens for them alone ({@link RealtimeCaptureState.Checking}) and this card shows it, mirrored, with the
+ * cameras to choose from. It checks the camera only: it gives `mj-camera-check` no microphones, no level and no buttons. "Turn on camera" lets the agent see it ({@link Confirmed}); "Not now", the close button,
+ * Escape and a click outside turn it off ({@link Declined}).
+ *
+ * Presentational: the overlay gives it the camera's state and a way to {@link Switch} cameras, and calls the session for
+ * each answer.
+ */
+export class RealtimeCameraCheckCardComponent {
+    cdr = inject(ChangeDetectorRef);
+    camera = null;
+    source = null;
+    /** The camera being switched to, while the switch runs. */
+    switchingTo = null;
+    /** Who the user is about to show the camera to. */
+    AgentName = 'The assistant';
+    /** Moves the camera to another device and resolves once it has, or has gone back to the one in use. */
+    Switch = null;
+    /** The camera being checked: its stream, the camera in use and the cameras to choose from. */
+    set Camera(value) {
+        this.camera = value;
+        this.source = sourceFor(value?.Stream ?? null, this.source);
+    }
+    get Camera() {
+        return this.camera;
+    }
+    /** The user turned the camera on for the agent. */
+    Confirmed = new EventEmitter();
+    /** The user said not now. */
+    Declined = new EventEmitter();
+    /** The preview: the camera's stream, the same object while the stream is the same. */
+    get Source() {
+        return this.source;
+    }
+    /** The cameras to choose from. */
+    get Devices() {
+        return this.camera?.Devices ?? [];
+    }
+    /** The picker's camera: the one being switched to, else the one in use. */
+    get SelectedCameraID() {
+        return this.switchingTo ?? this.camera?.DeviceID ?? null;
+    }
+    /**
+     * A camera picked in the check. The picker shows it while the camera switches, then the camera in use: the new one, or
+     * the old one when the new one could not open. A pick of the camera in use changes nothing.
+     */
+    async OnDeviceSelected(selection) {
+        if (selection.Kind !== 'camera' || selection.DeviceID === this.camera?.DeviceID || !this.Switch) {
+            return;
+        }
+        this.switchingTo = selection.DeviceID;
+        this.cdr.markForCheck();
+        try {
+            await this.Switch(selection.DeviceID);
+        }
+        finally {
+            this.switchingTo = null;
+            this.cdr.markForCheck();
+        }
+    }
+    static ɵfac = function RealtimeCameraCheckCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeCameraCheckCardComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeCameraCheckCardComponent, selectors: [["mj-realtime-camera-check-card"]], inputs: { AgentName: "AgentName", Switch: "Switch", Camera: "Camera" }, outputs: { Confirmed: "Confirmed", Declined: "Declined" }, decls: 4, vars: 7, consts: [["Title", "Check your camera", "Size", "auto", 3, "Close", "Visible"], [1, "camera-check__note"], ["Heading", "", "ConfirmLabel", "Turn on camera", "CancelLabel", "Not now", 3, "Confirmed", "Cancelled", "DeviceSelected", "ShowControls", "CameraOn", "CameraSource", "Devices", "SelectedCameraID"]], template: function RealtimeCameraCheckCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-dialog", 0);
+            i0.ɵɵlistener("Close", function RealtimeCameraCheckCardComponent_Template_mj_dialog_Close_0_listener() { return ctx.Declined.emit(); });
+            i0.ɵɵelementStart(1, "p", 1);
+            i0.ɵɵtext(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "mj-camera-check", 2);
+            i0.ɵɵlistener("Confirmed", function RealtimeCameraCheckCardComponent_Template_mj_camera_check_Confirmed_3_listener() { return ctx.Confirmed.emit(); })("Cancelled", function RealtimeCameraCheckCardComponent_Template_mj_camera_check_Cancelled_3_listener() { return ctx.Declined.emit(); })("DeviceSelected", function RealtimeCameraCheckCardComponent_Template_mj_camera_check_DeviceSelected_3_listener($event) { return ctx.OnDeviceSelected($event); });
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("Visible", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("", ctx.AgentName, " sees your camera once you turn it on.");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ShowControls", false)("CameraOn", true)("CameraSource", ctx.Source)("Devices", ctx.Devices)("SelectedCameraID", ctx.SelectedCameraID);
+        } }, dependencies: [MJDialogComponent, CameraCheckComponent], styles: ["\n.camera-check__note[_ngcontent-%COMP%] {\n  margin: 0 20px;\n  font-size: 0.9rem;\n  color: var(--mj-text-secondary);\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeCameraCheckCardComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-camera-check-card', imports: [MJDialogComponent, CameraCheckComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <mj-dialog [Visible]="true" Title="Check your camera" Size="auto" (Close)="Declined.emit()">
+      <p class="camera-check__note">{{ AgentName }} sees your camera once you turn it on.</p>
+      <mj-camera-check
+        Heading=""
+        ConfirmLabel="Turn on camera"
+        CancelLabel="Not now"
+        [ShowControls]="false"
+        [CameraOn]="true"
+        [CameraSource]="Source"
+        [Devices]="Devices"
+        [SelectedCameraID]="SelectedCameraID"
+        (Confirmed)="Confirmed.emit()"
+        (Cancelled)="Declined.emit()"
+        (DeviceSelected)="OnDeviceSelected($event)"
+      ></mj-camera-check>
+    </mj-dialog>
+  `, styles: ["/* Lines up with the check's own padding below it. */\n.camera-check__note {\n  margin: 0 20px;\n  font-size: 0.9rem;\n  color: var(--mj-text-secondary);\n}\n"] }]
+    }], null, { AgentName: [{
+            type: Input
+        }], Switch: [{
+            type: Input
+        }], Camera: [{
+            type: Input
+        }], Confirmed: [{
+            type: Output
+        }], Declined: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeCameraCheckCardComponent, { className: "RealtimeCameraCheckCardComponent", filePath: "src/lib/components/realtime/capture/realtime-camera-check-card.component.ts", lineNumber: 41 }); })();
+/** The preview for a stream: the previous one while the stream is the same, so the check keeps its video bound. */
+function sourceFor(stream, previous) {
+    if (!stream) {
+        return null;
+    }
+    return previous?.Kind === 'stream' && previous.Stream === stream ? previous : { Kind: 'stream', Stream: stream };
+}
+//# sourceMappingURL=realtime-camera-check-card.component.js.map