@memberjunction/ng-conversations 6.2.0-edge.0 → 6.2.0-edge.1

package/README.md

@@ -10,8 +10,8 @@ The widget exposes three layers of extension:
 
 | Surface | What it lets you do |
 |---|---|
-| **7 named slots** (`mjChatSlot` directive) | Replace the `header`, `emptyState`, `agentPresence`, `messageRenderer`, `messageExtra`, or `demonstrationSurface` regions with your own templates — or ADD to the default header with `headerActions` (renders inside the default header's action strip, after the stock buttons; suppressed when a full `header` replacement is projected). Three consumption modes: project an ad-hoc template, wrap the exported default for containment, or subclass the default. |
-| **Before/After cancelable events** | `(beforeAgentTurn)`, `(beforeToolInvoked)`, `(beforeResponseFormSubmitted)` let you observe AND veto (`event.Cancel = true`) before the action runs. Plus informational `(sessionStarted)` / `(sessionChannelStateChanged)` / `(sessionEnded)` for realtime lifecycle. |
+| **8 named slots** (`mjChatSlot` directive) | Replace the `header`, `emptyState`, `agentPresence`, `messageRenderer`, `messageExtra`, or `demonstrationSurface` regions with your own templates — or ADD to the default header with `headerActions` (renders inside the default header's action strip, after the stock buttons; suppressed when a full `header` replacement is projected), or above the composer with `composerExtra`. Three consumption modes: project an ad-hoc template, wrap the exported default for containment, or subclass the default. |
+| **Before/After cancelable events** | `(beforeAgentTurn)`, `(beforeToolInvoked)`, `(beforeResponseFormSubmitted)` let you observe AND veto (`event.Cancel = true`) before the action runs. `(beforeAgentTurn)` fires once per agent turn, before any reply row exists, and can also send the turn to another agent (`event.RedirectAgentId`). Plus informational `(sessionStarted)` / `(sessionChannelStateChanged)` / `(sessionEnded)` for realtime lifecycle. |
 | **`--mj-chat-*` design tokens** | Override bubble colors, composer chrome, character accents, and voice-state hues via standard CSS custom-property overrides. Defaults adapt to dark mode through semantic `--mj-*` tokens. |
 
 Slot interfaces + cloneable default components + the `ChatSlotDirective` are exported — see the public API.
@@ -205,6 +205,39 @@ Two gating rules are worth knowing:
 - **`includeTheme` gates only the token AUTO-SNAPSHOT.** An explicitly supplied `brandTokens` map, plus `logoUrl` / `title` / `trademark`, apply whenever `branding` is present. In the modal, "Include branding" is the single user-facing switch for all of it, and it sits with the general options because it affects every format — not just HTML.
 
 `trademark` and `title` are **not** markdown-escaped; a value containing `_`, `]`, `)`, or a newline can break the surrounding markdown. Supply plain text (the HTML and JSON paths are escaped).
+#### Chats with several people
+
+A host that puts several people in one conversation (a team room, a shared chat) sets when agents answer through these inputs, without forking the chat area. Each defaults to today's behavior:
+
+| Input | Default | Effect when set |
+|---|---|---|
+| `AgentReplyMode` | `'Always'` | `'MentionOnly'` starts an agent turn only for a message that tags an agent. Any other message is posted with no turn: no reply row, no placeholder, no turn events |
+| `AllowedAgentIDs` | `null` (every agent) | The agents that may answer. Narrows the `@` list, every route (a tagged agent, continuity, the pinned and host default agents, the conversation manager), the manager's delegation, including each agent step of a workflow it plans, and the pin and voice pickers. An empty list allows none |
+| `MentionPeople` | `null` (the current user only) | The people the `@` list offers, such as the chat's members (`MentionPerson` from `@memberjunction/conversations-runtime`). Each composer keeps its own list |
+| `AgentHistoryFrom` | `null` (the whole conversation) | The first moment of the conversation an agent turn may read. The server loads the agent's history from there, uses no summary of earlier messages, and holds the same floor in the run's other reads of the conversation. Sent only when set, so leaving it null keeps working against an older MJAPI |
+| `AgentTurnHandler` | `null` (MJ's own path) | An async hook that runs each turn on the host's server. The chat area calls it once per turn, after `BeforeAgentTurn` and before any reply row exists, and shows the rows it reports |
+| `AutoNameConversation` | `true` | `false` stops MJ naming a new conversation from its first message or first voice utterance |
+
+Routing picks one agent per turn, in this order: a tagged agent, then (under `'Always'` only) the last agent that answered other than the conversation manager, the conversation's pinned agent, the host's `DefaultAgentId`, and the conversation manager. An agent `AllowedAgentIDs` leaves out is skipped. `BeforeAgentTurn` then fires once, carrying the resolved `AgentId`, `AgentName`, `Route` and `UserMessageId`: a listener can cancel the turn, which then writes nothing more, or set `RedirectAgentId` to another allowed agent.
+
+The `composerExtra` slot renders host UI directly above the composer, wherever the chat area shows one (the new-conversation composer and the empty state's included). Its context is `IMJChatComposerExtraContext`: the conversation as `$implicit`, plus `ConversationId` and `IsProcessing`.
+
+```html
+<mj-conversation-chat-area
+  [conversationId]="conversationId"
+  AgentReplyMode="MentionOnly"
+  [AllowedAgentIDs]="spaceAgentIds"
+  [MentionPeople]="members"
+  [AgentHistoryFrom]="historyFloor"
+  [AgentTurnHandler]="runTurnOnServer"
+  [AutoNameConversation]="false"
+  (BeforeAgentTurn)="onBeforeAgentTurn($event)">
+  <ng-template mjChatSlot="composerExtra" let-busy="IsProcessing">
+    <div class="audience-line">Everyone in this chat sees your message</div>
+  </ng-template>
+</mj-conversation-chat-area>
+```
+
 #### Assistant identity
 
 White-label hosts can brand the AI side of the message feed through the component contract (no CSS on `.message-sender` / `.avatar-circle` internals). Both default to `null` — the engine-resolved agent identity, today's behavior:

package/dist/lib/components/active-tasks/active-tasks-panel.component.d.ts

@@ -7,11 +7,27 @@ import * as i0 from "@angular/core";
  */
 export declare class ActiveTasksPanelComponent {
     private activeTasksService;
-    tasks$: Observable<ActiveTask[]>;
-    taskCount$: Observable<number>;
-    isExpanded: boolean;
+    Tasks$: Observable<ActiveTask[]>;
+    /** @deprecated Use {@link Tasks$}. */
+    get tasks$(): Observable<ActiveTask[]>;
+    /** @deprecated Use {@link Tasks$}. */
+    set tasks$(value: Observable<ActiveTask[]>);
+    TaskCount$: Observable<number>;
+    /** @deprecated Use {@link TaskCount$}. */
+    get taskCount$(): Observable<number>;
+    /** @deprecated Use {@link TaskCount$}. */
+    set taskCount$(value: Observable<number>);
+    IsExpanded: boolean;
+    /** @deprecated Use {@link IsExpanded}. */
+    get isExpanded(): boolean;
+    /** @deprecated Use {@link IsExpanded}. */
+    set isExpanded(value: boolean);
     constructor(activeTasksService: ActiveTasksService);
+    GetElapsedTime(task: ActiveTask): string;
+    /** @deprecated Use {@link GetElapsedTime}. */
     getElapsedTime(task: ActiveTask): string;
+    GetTrimmedStatus(status: string): string;
+    /** @deprecated Use {@link GetTrimmedStatus}. */
     getTrimmedStatus(status: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActiveTasksPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ActiveTasksPanelComponent, "mj-active-tasks-panel", never, {}, {}, never, never, false, never>;

package/dist/lib/components/active-tasks/active-tasks-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"active-tasks-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/active-tasks/active-tasks-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;;AAErF;;;GAGG;AACH,qBAmGa,yBAAyB;IAKxB,OAAO,CAAC,kBAAkB;IAJtC,MAAM,EAAE,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC/B,UAAU,UAAQ;gBAEE,kBAAkB,EAAE,kBAAkB;IAK1D,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAaxC,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;yCAvB7B,yBAAyB;2CAAzB,yBAAyB;CA8BrC"}
+{"version":3,"file":"active-tasks-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/active-tasks/active-tasks-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;;AAErF;;;GAGG;AACH,qBAmGa,yBAAyB;IAgCxB,OAAO,CAAC,kBAAkB;IA/BtC,MAAM,EAAE,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC;IAEjC,sCAAsC;IACtC,IAAI,MAAM,IAAI,UAAU,CAAC,UAAU,EAAE,CAAC,CAErC;IACD,sCAAsC;IACtC,IAAI,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,CAAC,EAEzC;IACD,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAE/B,0CAA0C;IAC1C,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,CAAC,CAEnC;IACD,0CAA0C;IAC1C,IAAI,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,EAEvC;IACD,UAAU,UAAQ;IAElB,0CAA0C;IAC1C,IAAI,UAAU,YAEb;IACD,0CAA0C;IAC1C,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;gBAEmB,kBAAkB,EAAE,kBAAkB;IAK1D,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAaxC,8CAA8C;IAC9C,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAIxC,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAQxC,gDAAgD;IAChD,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;yCAhE7B,yBAAyB;2CAAzB,yBAAyB;CAmErC"}

package/dist/lib/components/active-tasks/active-tasks-panel.component.js

@@ -64,15 +64,39 @@ function ActiveTasksPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
  */
 export class ActiveTasksPanelComponent {
     activeTasksService;
-    tasks$;
-    taskCount$;
-    isExpanded = true;
+    Tasks$;
+    /** @deprecated Use {@link Tasks$}. */
+    get tasks$() {
+        return this.Tasks$;
+    }
+    /** @deprecated Use {@link Tasks$}. */
+    set tasks$(value) {
+        this.Tasks$ = value;
+    }
+    TaskCount$;
+    /** @deprecated Use {@link TaskCount$}. */
+    get taskCount$() {
+        return this.TaskCount$;
+    }
+    /** @deprecated Use {@link TaskCount$}. */
+    set taskCount$(value) {
+        this.TaskCount$ = value;
+    }
+    IsExpanded = true;
+    /** @deprecated Use {@link IsExpanded}. */
+    get isExpanded() {
+        return this.IsExpanded;
+    }
+    /** @deprecated Use {@link IsExpanded}. */
+    set isExpanded(value) {
+        this.IsExpanded = value;
+    }
     constructor(activeTasksService) {
         this.activeTasksService = activeTasksService;
-        this.tasks$ = this.activeTasksService.tasks$;
-        this.taskCount$ = this.activeTasksService.taskCount$;
+        this.Tasks$ = this.activeTasksService.tasks$;
+        this.TaskCount$ = this.activeTasksService.taskCount$;
     }
-    getElapsedTime(task) {
+    GetElapsedTime(task) {
         const elapsed = Date.now() - task.startTime;
         const seconds = Math.floor(elapsed / 1000);
         if (seconds < 60) {
@@ -82,13 +106,21 @@ export class ActiveTasksPanelComponent {
         const remainingSeconds = seconds % 60;
         return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
     }
-    getTrimmedStatus(status) {
+    /** @deprecated Use {@link GetElapsedTime}. */
+    getElapsedTime(task) {
+        return this.GetElapsedTime(task);
+    }
+    GetTrimmedStatus(status) {
         const maxLength = 50;
         if (status.length <= maxLength) {
             return status;
         }
         return status.substring(0, maxLength) + '...';
     }
+    /** @deprecated Use {@link GetTrimmedStatus}. */
+    getTrimmedStatus(status) {
+        return this.GetTrimmedStatus(status);
+    }
     static ɵfac = function ActiveTasksPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActiveTasksPanelComponent)(i0.ɵɵdirectiveInject(i1.ActiveTasksService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActiveTasksPanelComponent, selectors: [["mj-active-tasks-panel"]], standalone: false, decls: 2, vars: 3, consts: [[1, "active-tasks-panel"], ["Size", "sm", 3, "ExpandedChange", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionBody", ""], [1, "fas", "fa-tasks", "active-tasks-title-icon"], [1, "panel-content"], [1, "task-item"], [1, "task-header"], [1, "fas", "fa-circle-notch", "fa-spin"], [1, "task-agent"], [1, "task-elapsed"], [1, "task-status"]], template: function ActiveTasksPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ActiveTasksPanelComponent_Conditional_0_Template, 4, 2, "div", 0);

package/dist/lib/components/active-tasks/active-tasks-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"active-tasks-panel.component.js","sourceRoot":"","sources":["../../../../src/lib/components/active-tasks/active-tasks-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;;;IAoB9B,uBAAoD;IACpD,4BAAM;IAAA,YAAuC;;IAAA,iBAAO;;;IAA9C,eAAuC;IAAvC,qFAAuC;;;IAMvC,AADF,8BAAuB,aACI;IACvB,uBAA2C;IAC3C,+BAAyB;IAAA,YAAoB;IAAA,iBAAO;IACpD,gCAA2B;IAAA,YAA0B;IACvD,AADuD,iBAAO,EACxD;IACN,+BAAyB;IAAA,YAAmC;IAC9D,AAD8D,iBAAM,EAC9D;;;;IAJuB,eAAoB;IAApB,uCAAoB;IAClB,eAA0B;IAA1B,oDAA0B;IAE9B,eAAmC;IAAnC,6DAAmC;;;IARlE,8BAA2B;IACzB,0IASC;;IACH,iBAAM;;;IAVJ,cASC;IATD,kDASC;;;;IAhBP,AALF,8BAAgC,4BAK6C;IAA1B,oUAAyB;IAKxE,AAJA,wGAA8B,2FAID;IAejC,AADE,iBAAqB,EACjB;;;IApB0B,cAAkB;IAAlB,gCAAkB;IAAC,kDAAyB;;AAdlF;;;GAGG;AAoGH,MAAM,OAAO,yBAAyB;IAKhB;IAJpB,MAAM,CAA2B;IACjC,UAAU,CAAqB;IAC/B,UAAU,GAAG,IAAI,CAAC;IAElB,YAAoB,kBAAsC;QAAtC,uBAAkB,GAAlB,kBAAkB,CAAoB;QACxD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC;IACvD,CAAC;IAED,cAAc,CAAC,IAAgB;QAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;QAE3C,IAAI,OAAO,GAAG,EAAE,EAAE,CAAC;YACjB,OAAO,GAAG,OAAO,GAAG,CAAC;QACvB,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;QACzC,MAAM,gBAAgB,GAAG,OAAO,GAAG,EAAE,CAAC;QACtC,OAAO,GAAG,OAAO,IAAI,gBAAgB,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IACtE,CAAC;IAED,gBAAgB,CAAC,MAAc;QAC7B,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,IAAI,MAAM,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC;YAC/B,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC;IAChD,CAAC;mHA7BU,yBAAyB;6DAAzB,yBAAyB;YA/FlC,2FAAiC;;;YAAjC,mEA2BC;;;iFAoEQ,yBAAyB;cAnGrC,SAAS;6BACI,KAAK,YACP,uBAAuB,YACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BP;;kFAmEQ,yBAAyB","sourcesContent":["import { Component } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { ActiveTasksService, ActiveTask } from '../../services/active-tasks.service';\n\n/**\n * Panel component that displays currently running agent tasks.\n * Shows as a floating panel in bottom-right corner when tasks are active.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-active-tasks-panel',\n  template: `\n    @if ((taskCount$ | async)! > 0) {\n      <div class=\"active-tasks-panel\">\n        <!-- Migrated from a bespoke header/chevron + @if(isExpanded) disclosure to\n             mj-accordion-panel. The floating fixed-position wrapper is preserved; only\n             the header→task-list disclosure became the accordion (content disclosure,\n             not a whole-panel collapse). -->\n        <mj-accordion-panel Size=\"sm\" [FlushBody]=\"true\" [(Expanded)]=\"isExpanded\">\n          <ng-template mjAccordionTitle>\n            <i class=\"fas fa-tasks active-tasks-title-icon\"></i>\n            <span>Active Tasks ({{ taskCount$ | async }})</span>\n          </ng-template>\n          <ng-template mjAccordionBody>\n            <div class=\"panel-content\">\n              @for (task of (tasks$ | async); track task) {\n                <div class=\"task-item\">\n                  <div class=\"task-header\">\n                    <i class=\"fas fa-circle-notch fa-spin\"></i>\n                    <span class=\"task-agent\">{{ task.agentName }}</span>\n                    <span class=\"task-elapsed\">{{ getElapsedTime(task) }}</span>\n                  </div>\n                  <div class=\"task-status\">{{ getTrimmedStatus(task.status) }}</div>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </mj-accordion-panel>\n      </div>\n    }\n    `,\n  styles: [`\n    .active-tasks-panel {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      width: 320px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      z-index: 1000;\n    }\n\n    /* Removed bespoke .panel-header chrome (header bar, hover, chevron, flex span) —\n       the disclosure header is now owned by mj-accordion-panel. Only the title icon's\n       brand color is preserved below. */\n    .active-tasks-title-icon {\n      color: var(--mj-brand-primary);\n    }\n\n    .panel-content {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .task-item {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .task-item:last-child {\n      border-bottom: none;\n    }\n\n    .task-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .task-header i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .task-agent {\n      flex: 1;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .task-elapsed {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .task-status {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      padding-left: 22px;\n    }\n  `]\n})\nexport class ActiveTasksPanelComponent {\n  tasks$: Observable<ActiveTask[]>;\n  taskCount$: Observable<number>;\n  isExpanded = true;\n\n  constructor(private activeTasksService: ActiveTasksService) {\n    this.tasks$ = this.activeTasksService.tasks$;\n    this.taskCount$ = this.activeTasksService.taskCount$;\n  }\n\n  getElapsedTime(task: ActiveTask): string {\n    const elapsed = Date.now() - task.startTime;\n    const seconds = Math.floor(elapsed / 1000);\n\n    if (seconds < 60) {\n      return `${seconds}s`;\n    }\n\n    const minutes = Math.floor(seconds / 60);\n    const remainingSeconds = seconds % 60;\n    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n  }\n\n  getTrimmedStatus(status: string): string {\n    const maxLength = 50;\n    if (status.length <= maxLength) {\n      return status;\n    }\n    return status.substring(0, maxLength) + '...';\n  }\n}\n"]}
+{"version":3,"file":"active-tasks-panel.component.js","sourceRoot":"","sources":["../../../../src/lib/components/active-tasks/active-tasks-panel.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { ActiveTasksService, ActiveTask } from '../../services/active-tasks.service';\n\n/**\n * Panel component that displays currently running agent tasks.\n * Shows as a floating panel in bottom-right corner when tasks are active.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-active-tasks-panel',\n  template: `\n    @if ((taskCount$ | async)! > 0) {\n      <div class=\"active-tasks-panel\">\n        <!-- Migrated from a bespoke header/chevron + @if(isExpanded) disclosure to\n             mj-accordion-panel. The floating fixed-position wrapper is preserved; only\n             the header→task-list disclosure became the accordion (content disclosure,\n             not a whole-panel collapse). -->\n        <mj-accordion-panel Size=\"sm\" [FlushBody]=\"true\" [(Expanded)]=\"isExpanded\">\n          <ng-template mjAccordionTitle>\n            <i class=\"fas fa-tasks active-tasks-title-icon\"></i>\n            <span>Active Tasks ({{ taskCount$ | async }})</span>\n          </ng-template>\n          <ng-template mjAccordionBody>\n            <div class=\"panel-content\">\n              @for (task of (tasks$ | async); track task) {\n                <div class=\"task-item\">\n                  <div class=\"task-header\">\n                    <i class=\"fas fa-circle-notch fa-spin\"></i>\n                    <span class=\"task-agent\">{{ task.agentName }}</span>\n                    <span class=\"task-elapsed\">{{ getElapsedTime(task) }}</span>\n                  </div>\n                  <div class=\"task-status\">{{ getTrimmedStatus(task.status) }}</div>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </mj-accordion-panel>\n      </div>\n    }\n    `,\n  styles: [`\n    .active-tasks-panel {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      width: 320px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      z-index: 1000;\n    }\n\n    /* Removed bespoke .panel-header chrome (header bar, hover, chevron, flex span) —\n       the disclosure header is now owned by mj-accordion-panel. Only the title icon's\n       brand color is preserved below. */\n    .active-tasks-title-icon {\n      color: var(--mj-brand-primary);\n    }\n\n    .panel-content {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .task-item {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .task-item:last-child {\n      border-bottom: none;\n    }\n\n    .task-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .task-header i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .task-agent {\n      flex: 1;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .task-elapsed {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .task-status {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      padding-left: 22px;\n    }\n  `]\n})\nexport class ActiveTasksPanelComponent {\n  Tasks$: Observable<ActiveTask[]>;\n\n  /** @deprecated Use {@link Tasks$}. */\n  get tasks$(): Observable<ActiveTask[]> {\n    return this.Tasks$;\n  }\n  /** @deprecated Use {@link Tasks$}. */\n  set tasks$(value: Observable<ActiveTask[]>) {\n    this.Tasks$ = value;\n  }\n  TaskCount$: Observable<number>;\n\n  /** @deprecated Use {@link TaskCount$}. */\n  get taskCount$(): Observable<number> {\n    return this.TaskCount$;\n  }\n  /** @deprecated Use {@link TaskCount$}. */\n  set taskCount$(value: Observable<number>) {\n    this.TaskCount$ = value;\n  }\n  IsExpanded = true;\n\n  /** @deprecated Use {@link IsExpanded}. */\n  get isExpanded() {\n    return this.IsExpanded;\n  }\n  /** @deprecated Use {@link IsExpanded}. */\n  set isExpanded(value) {\n    this.IsExpanded = value;\n  }\n\n  constructor(private activeTasksService: ActiveTasksService) {\n    this.Tasks$ = this.activeTasksService.tasks$;\n    this.TaskCount$ = this.activeTasksService.taskCount$;\n  }\n\n  GetElapsedTime(task: ActiveTask): string {\n    const elapsed = Date.now() - task.startTime;\n    const seconds = Math.floor(elapsed / 1000);\n\n    if (seconds < 60) {\n      return `${seconds}s`;\n    }\n\n    const minutes = Math.floor(seconds / 60);\n    const remainingSeconds = seconds % 60;\n    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n  }\n\n  /** @deprecated Use {@link GetElapsedTime}. */\n  getElapsedTime(task: ActiveTask): string {\n    return this.GetElapsedTime(task);\n  }\n\n  GetTrimmedStatus(status: string): string {\n    const maxLength = 50;\n    if (status.length <= maxLength) {\n      return status;\n    }\n    return status.substring(0, maxLength) + '...';\n  }\n\n  /** @deprecated Use {@link GetTrimmedStatus}. */\n  getTrimmedStatus(status: string): string {\n    return this.GetTrimmedStatus(status);\n  }\n}\n"]}

package/dist/lib/components/agent/active-agent-indicator.component.d.ts

@@ -9,40 +9,108 @@ import * as i0 from "@angular/core";
  */
 export declare class ActiveAgentIndicatorComponent implements OnInit, OnDestroy {
     private agentStateService;
-    conversationId?: string;
-    currentUser: UserInfo;
-    maxVisibleAgents: number;
+    ConversationId?: string;
+    /** @deprecated Use {@link ConversationId}. */
+    set conversationId(value: string | undefined);
+    /** @deprecated Use {@link ConversationId}. */
+    get conversationId(): string | undefined;
+    CurrentUser: UserInfo;
+    /** @deprecated Use {@link CurrentUser}. */
+    set currentUser(value: UserInfo);
+    /** @deprecated Use {@link CurrentUser}. */
+    get currentUser(): UserInfo;
+    MaxVisibleAgents: number;
+    /** @deprecated Use {@link MaxVisibleAgents}. */
+    set maxVisibleAgents(value: number);
+    /** @deprecated Use {@link MaxVisibleAgents}. */
+    get maxVisibleAgents(): number;
+    TogglePanel: EventEmitter<void>;
+    /**
+     * @deprecated Use {@link TogglePanel}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (togglePanel) keeps working. Must stay AFTER TogglePanel: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
     togglePanel: EventEmitter<void>;
+    AgentSelected: EventEmitter<MJAIAgentRunEntity>;
+    /**
+     * @deprecated Use {@link AgentSelected}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (agentSelected) keeps working. Must stay AFTER AgentSelected: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
     agentSelected: EventEmitter<MJAIAgentRunEntity>;
-    activeAgents: Array<{
+    ActiveAgents: Array<{
         run: MJAIAgentRunEntity;
         status: AgentStatus;
         confidence: number | null;
     }>;
-    isExpanded: boolean;
+    /** @deprecated Use {@link ActiveAgents}. */
+    get activeAgents(): Array<{
+        run: MJAIAgentRunEntity;
+        status: AgentStatus;
+        confidence: number | null;
+    }>;
+    /** @deprecated Use {@link ActiveAgents}. */
+    set activeAgents(value: Array<{
+        run: MJAIAgentRunEntity;
+        status: AgentStatus;
+        confidence: number | null;
+    }>);
+    IsExpanded: boolean;
+    /** @deprecated Use {@link IsExpanded}. */
+    get isExpanded(): boolean;
+    /** @deprecated Use {@link IsExpanded}. */
+    set isExpanded(value: boolean);
     private subscription?;
     constructor(agentStateService: AgentStateService);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    get DisplayAgents(): Array<{
+        run: MJAIAgentRunEntity;
+        status: AgentStatus;
+        confidence: number | null;
+    }>;
+    /** @deprecated Use {@link DisplayAgents}. */
     get displayAgents(): Array<{
         run: MJAIAgentRunEntity;
         status: AgentStatus;
         confidence: number | null;
     }>;
+    GetAgentTooltip(agent: {
+        run: MJAIAgentRunEntity;
+        status: AgentStatus;
+        confidence: number | null;
+    }): string;
+    /** @deprecated Use {@link GetAgentTooltip}. */
     getAgentTooltip(agent: {
         run: MJAIAgentRunEntity;
         status: AgentStatus;
         confidence: number | null;
     }): string;
+    GetStatusText(status: AgentStatus): string;
+    /** @deprecated Use {@link GetStatusText}. */
     getStatusText(status: AgentStatus): string;
+    ToggleExpanded(): void;
+    /** @deprecated Use {@link ToggleExpanded}. */
     toggleExpanded(): void;
+    OnAgentClick(agent: {
+        run: MJAIAgentRunEntity;
+        status: AgentStatus;
+        confidence: number | null;
+    }): void;
+    /** @deprecated Use {@link OnAgentClick}. */
     onAgentClick(agent: {
         run: MJAIAgentRunEntity;
         status: AgentStatus;
         confidence: number | null;
     }): void;
+    OnTogglePanel(): void;
+    /** @deprecated Use {@link OnTogglePanel}. */
     onTogglePanel(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActiveAgentIndicatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ActiveAgentIndicatorComponent, "mj-active-agent-indicator", never, { "conversationId": { "alias": "conversationId"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "maxVisibleAgents": { "alias": "maxVisibleAgents"; "required": false; }; }, { "togglePanel": "togglePanel"; "agentSelected": "agentSelected"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActiveAgentIndicatorComponent, "mj-active-agent-indicator", never, { "ConversationId": { "alias": "ConversationId"; "required": false; }; "conversationId": { "alias": "conversationId"; "required": false; }; "CurrentUser": { "alias": "CurrentUser"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "MaxVisibleAgents": { "alias": "MaxVisibleAgents"; "required": false; }; "maxVisibleAgents": { "alias": "maxVisibleAgents"; "required": false; }; }, { "TogglePanel": "TogglePanel"; "togglePanel": "togglePanel"; "AgentSelected": "AgentSelected"; "agentSelected": "agentSelected"; }, never, never, false, never>;
 }
 //# sourceMappingURL=active-agent-indicator.component.d.ts.map

package/dist/lib/components/agent/active-agent-indicator.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"active-agent-indicator.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/agent/active-agent-indicator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;;AAGpF;;;GAGG;AACH,qBA+Oa,6BAA8B,YAAW,MAAM,EAAE,SAAS;IAazD,OAAO,CAAC,iBAAiB;IAZ5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,EAAG,QAAQ,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAK;IAE5B,WAAW,qBAA4B;IACvC,aAAa,mCAA0C;IAE1D,YAAY,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAM;IACtG,UAAU,EAAE,OAAO,CAAS;IAEnC,OAAO,CAAC,YAAY,CAAC,CAAe;gBAEhB,iBAAiB,EAAE,iBAAiB;IAExD,QAAQ,IAAI,IAAI;IAShB,WAAW,IAAI,IAAI;IAInB,IAAI,aAAa,IAAI,KAAK,CAAC;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAKtG;IAED,eAAe,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,MAAM;IAQ3G,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM;IAW1C,cAAc,IAAI,IAAI;IAItB,YAAY,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI;IAItG,aAAa,IAAI,IAAI;yCA9DV,6BAA6B;2CAA7B,6BAA6B;CAiEzC"}
+{"version":3,"file":"active-agent-indicator.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/agent/active-agent-indicator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;;AAGpF;;;GAGG;AACH,qBA+Oa,6BAA8B,YAAW,MAAM,EAAE,SAAS;IA4EzD,OAAO,CAAC,iBAAiB;IA3E5B,cAAc,CAAC,EAAE,MAAM,CAAC;IAEjC,8CAA8C;IAC9C,IAAa,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAEpD;IACD,8CAA8C;IAC9C,IAAI,cAAc,IAAI,MAAM,GAAG,SAAS,CAEvC;IACQ,WAAW,EAAG,QAAQ,CAAC;IAEhC,2CAA2C;IAC3C,IAAa,WAAW,CAAC,KAAK,EAAE,QAAQ,EAEvC;IACD,2CAA2C;IAC3C,IAAI,WAAW,IAAI,QAAQ,CAE1B;IACQ,gBAAgB,EAAE,MAAM,CAAK;IAEtC,gDAAgD;IAChD,IAAa,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAE1C;IACD,gDAAgD;IAChD,IAAI,gBAAgB,IAAI,MAAM,CAE7B;IAES,WAAW,qBAA4B;IAEjD;;;;;;OAMG;IACO,WAAW,qBAAoB;IAC/B,aAAa,mCAA0C;IAEjE;;;;;;OAMG;IACO,aAAa,mCAAsB;IAEtC,YAAY,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAM;IAE7G,4CAA4C;IAC5C,IAAW,YAAY,IAAI,KAAK,CAAC;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAE5G;IACD,4CAA4C;IAC5C,IAAW,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,EAEhH;IACM,UAAU,EAAE,OAAO,CAAS;IAEnC,0CAA0C;IAC1C,IAAW,UAAU,IAAI,OAAO,CAE/B;IACD,0CAA0C;IAC1C,IAAW,UAAU,CAAC,KAAK,EAAE,OAAO,EAEnC;IAED,OAAO,CAAC,YAAY,CAAC,CAAe;gBAEhB,iBAAiB,EAAE,iBAAiB;IAExD,QAAQ,IAAI,IAAI;IAShB,WAAW,IAAI,IAAI;IAInB,IAAI,aAAa,IAAI,KAAK,CAAC;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAKtG;IAED,6CAA6C;IAC7C,IAAI,aAAa,IAAI,KAAK,CAAC;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAEtG;IAED,eAAe,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,MAAM;IAQ3G,+CAA+C;IAC/C,eAAe,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,MAAM;IAI3G,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM;IAW1C,6CAA6C;IAC7C,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM;IAI1C,cAAc,IAAI,IAAI;IAItB,8CAA8C;IAC9C,cAAc,IAAI,IAAI;IAItB,YAAY,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI;IAItG,4CAA4C;IAC5C,YAAY,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI;IAItG,aAAa,IAAI,IAAI;IAIrB,6CAA6C;IAC7C,aAAa,IAAI,IAAI;yCA3JV,6BAA6B;2CAA7B,6BAA6B;CA8JzC"}

package/dist/lib/components/agent/active-agent-indicator.component.js

@@ -81,13 +81,69 @@ function ActiveAgentIndicatorComponent_Conditional_0_Template(rf, ctx) { if (rf
  */
 export class ActiveAgentIndicatorComponent {
     agentStateService;
-    conversationId;
-    currentUser;
-    maxVisibleAgents = 3;
-    togglePanel = new EventEmitter();
-    agentSelected = new EventEmitter();
-    activeAgents = [];
-    isExpanded = false;
+    ConversationId;
+    /** @deprecated Use {@link ConversationId}. */
+    set conversationId(value) {
+        this.ConversationId = value;
+    }
+    /** @deprecated Use {@link ConversationId}. */
+    get conversationId() {
+        return this.ConversationId;
+    }
+    CurrentUser;
+    /** @deprecated Use {@link CurrentUser}. */
+    set currentUser(value) {
+        this.CurrentUser = value;
+    }
+    /** @deprecated Use {@link CurrentUser}. */
+    get currentUser() {
+        return this.CurrentUser;
+    }
+    MaxVisibleAgents = 3;
+    /** @deprecated Use {@link MaxVisibleAgents}. */
+    set maxVisibleAgents(value) {
+        this.MaxVisibleAgents = value;
+    }
+    /** @deprecated Use {@link MaxVisibleAgents}. */
+    get maxVisibleAgents() {
+        return this.MaxVisibleAgents;
+    }
+    TogglePanel = new EventEmitter();
+    /**
+     * @deprecated Use {@link TogglePanel}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (togglePanel) keeps working. Must stay AFTER TogglePanel: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    togglePanel = this.TogglePanel;
+    AgentSelected = new EventEmitter();
+    /**
+     * @deprecated Use {@link AgentSelected}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (agentSelected) keeps working. Must stay AFTER AgentSelected: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    agentSelected = this.AgentSelected;
+    ActiveAgents = [];
+    /** @deprecated Use {@link ActiveAgents}. */
+    get activeAgents() {
+        return this.ActiveAgents;
+    }
+    /** @deprecated Use {@link ActiveAgents}. */
+    set activeAgents(value) {
+        this.ActiveAgents = value;
+    }
+    IsExpanded = false;
+    /** @deprecated Use {@link IsExpanded}. */
+    get isExpanded() {
+        return this.IsExpanded;
+    }
+    /** @deprecated Use {@link IsExpanded}. */
+    set isExpanded(value) {
+        this.IsExpanded = value;
+    }
     subscription;
     constructor(agentStateService) {
         this.agentStateService = agentStateService;
@@ -95,28 +151,36 @@ export class ActiveAgentIndicatorComponent {
     ngOnInit() {
         // Subscribe to active agents for this conversation
         this.subscription = this.agentStateService
-            .getActiveAgents(this.conversationId)
+            .getActiveAgents(this.ConversationId)
             .subscribe(agents => {
-            this.activeAgents = agents;
+            this.ActiveAgents = agents;
         });
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
-    get displayAgents() {
-        if (this.isExpanded) {
-            return this.activeAgents;
+    get DisplayAgents() {
+        if (this.IsExpanded) {
+            return this.ActiveAgents;
         }
-        return this.activeAgents.slice(0, this.maxVisibleAgents);
+        return this.ActiveAgents.slice(0, this.MaxVisibleAgents);
     }
-    getAgentTooltip(agent) {
-        const statusText = this.getStatusText(agent.status);
+    /** @deprecated Use {@link DisplayAgents}. */
+    get displayAgents() {
+        return this.DisplayAgents;
+    }
+    GetAgentTooltip(agent) {
+        const statusText = this.GetStatusText(agent.status);
         const confidenceText = agent.confidence != null
             ? ` (Confidence: ${(agent.confidence * 100).toFixed(0)}%)`
             : '';
         return `${agent.run.Agent || 'Agent'} - ${statusText}${confidenceText}`;
     }
-    getStatusText(status) {
+    /** @deprecated Use {@link GetAgentTooltip}. */
+    getAgentTooltip(agent) {
+        return this.GetAgentTooltip(agent);
+    }
+    GetStatusText(status) {
         switch (status) {
             case 'acknowledging': return 'Acknowledging request';
             case 'working': return 'Working on task';
@@ -126,17 +190,33 @@ export class ActiveAgentIndicatorComponent {
             default: return 'Active';
         }
     }
+    /** @deprecated Use {@link GetStatusText}. */
+    getStatusText(status) {
+        return this.GetStatusText(status);
+    }
+    ToggleExpanded() {
+        this.IsExpanded = !this.IsExpanded;
+    }
+    /** @deprecated Use {@link ToggleExpanded}. */
     toggleExpanded() {
-        this.isExpanded = !this.isExpanded;
+        return this.ToggleExpanded();
+    }
+    OnAgentClick(agent) {
+        this.AgentSelected.emit(agent.run);
     }
+    /** @deprecated Use {@link OnAgentClick}. */
     onAgentClick(agent) {
-        this.agentSelected.emit(agent.run);
+        return this.OnAgentClick(agent);
     }
+    OnTogglePanel() {
+        this.TogglePanel.emit();
+    }
+    /** @deprecated Use {@link OnTogglePanel}. */
     onTogglePanel() {
-        this.togglePanel.emit();
+        return this.OnTogglePanel();
     }
     static ɵfac = function ActiveAgentIndicatorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActiveAgentIndicatorComponent)(i0.ɵɵdirectiveInject(i1.AgentStateService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActiveAgentIndicatorComponent, selectors: [["mj-active-agent-indicator"]], inputs: { conversationId: "conversationId", currentUser: "currentUser", maxVisibleAgents: "maxVisibleAgents" }, outputs: { togglePanel: "togglePanel", agentSelected: "agentSelected" }, standalone: false, decls: 1, vars: 1, consts: [[1, "active-agents-container"], [1, "active-agents-label"], [1, "agents-wrapper"], [1, "agent-avatar", 3, "status-acknowledging", "status-working", "status-completing", "status-completed", "status-error", "title"], [1, "more-agents", 3, "title"], ["title", "Open agent process panel", 1, "panel-toggle", 3, "click"], [1, "fas", "fa-chart-line"], [1, "agent-count"], [1, "agent-avatar", 3, "click", "title"], [1, "avatar-content"], [1, "fas", "fa-robot"], [1, "status-indicator"], [1, "confidence-badge", 3, "title"], [1, "pulse-ring"], [1, "more-agents", 3, "click", "title"]], template: function ActiveAgentIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActiveAgentIndicatorComponent, selectors: [["mj-active-agent-indicator"]], inputs: { ConversationId: "ConversationId", conversationId: "conversationId", CurrentUser: "CurrentUser", currentUser: "currentUser", MaxVisibleAgents: "MaxVisibleAgents", maxVisibleAgents: "maxVisibleAgents" }, outputs: { TogglePanel: "TogglePanel", togglePanel: "togglePanel", AgentSelected: "AgentSelected", agentSelected: "agentSelected" }, standalone: false, decls: 1, vars: 1, consts: [[1, "active-agents-container"], [1, "active-agents-label"], [1, "agents-wrapper"], [1, "agent-avatar", 3, "status-acknowledging", "status-working", "status-completing", "status-completed", "status-error", "title"], [1, "more-agents", 3, "title"], ["title", "Open agent process panel", 1, "panel-toggle", 3, "click"], [1, "fas", "fa-chart-line"], [1, "agent-count"], [1, "agent-avatar", 3, "click", "title"], [1, "avatar-content"], [1, "fas", "fa-robot"], [1, "status-indicator"], [1, "confidence-badge", 3, "title"], [1, "pulse-ring"], [1, "more-agents", 3, "click", "title"]], template: function ActiveAgentIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ActiveAgentIndicatorComponent_Conditional_0_Template, 11, 4, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.activeAgents.length > 0 ? 0 : -1);
@@ -186,14 +266,24 @@ export class ActiveAgentIndicatorComponent {
       </div>
     }
     `, styles: ["\n    .active-agents-container {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 6px 12px;\n      background-color: #F4F4F4;\n      border-radius: 20px;\n      font-size: 12px;\n      color: #6B7280;\n      height: 32px;\n    }\n\n    .active-agents-label {\n      font-weight: 500;\n      color: #6B7280;\n    }\n\n    .agents-wrapper {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      max-width: 200px;\n      overflow: hidden;\n      transition: max-width 300ms ease;\n    }\n\n    .agents-wrapper.expanded {\n      max-width: 600px;\n    }\n\n    .agent-avatar {\n      position: relative;\n      width: 24px;\n      height: 24px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      transition: all 200ms ease;\n      flex-shrink: 0;\n      font-size: 10px;\n      font-weight: 600;\n    }\n\n    .agent-avatar:hover {\n      transform: scale(1.1);\n    }\n\n    .avatar-content {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      color: white;\n      position: relative;\n      z-index: 1;\n    }\n\n    /* Status-based colors */\n    .status-acknowledging .avatar-content {\n      background: linear-gradient(135deg, #3B82F6, #2563EB);\n    }\n\n    .status-working .avatar-content {\n      background: linear-gradient(135deg, #F59E0B, #D97706);\n    }\n\n    .status-completing .avatar-content {\n      background: linear-gradient(135deg, #10B981, #059669);\n    }\n\n    .status-completed .avatar-content {\n      background: linear-gradient(135deg, #6B7280, #4B5563);\n      opacity: 0.6;\n    }\n\n    .status-error .avatar-content {\n      background: linear-gradient(135deg, #EF4444, #DC2626);\n    }\n\n    /* Animated status indicator */\n    .status-indicator {\n      position: absolute;\n      top: -2px;\n      right: -2px;\n      width: 10px;\n      height: 10px;\n      z-index: 2;\n    }\n\n    .pulse-ring {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: currentColor;\n      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    .status-acknowledging .pulse-ring {\n      background: #3B82F6;\n    }\n\n    .status-working .pulse-ring {\n      background: #F59E0B;\n      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    .status-completing .pulse-ring {\n      background: #10B981;\n      animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n      50% {\n        opacity: 0.5;\n        transform: scale(1.5);\n      }\n    }\n\n    /* Confidence badge */\n    .confidence-badge {\n      position: absolute;\n      bottom: -4px;\n      right: -4px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 4px;\n      padding: 1px 3px;\n      font-size: 9px;\n      font-weight: 600;\n      color: #374151;\n      z-index: 3;\n      line-height: 1;\n    }\n\n    .more-agents {\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      background: #E5E7EB;\n      border: none;\n      color: #6B7280;\n      font-size: 11px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 200ms ease;\n      flex-shrink: 0;\n    }\n\n    .more-agents:hover {\n      background: #D1D5DB;\n      transform: scale(1.05);\n    }\n\n    .panel-toggle {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 6px 10px;\n      background: #3B82F6;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 200ms ease;\n      position: relative;\n    }\n\n    .panel-toggle:hover {\n      background: #2563EB;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\n    }\n\n    .agent-count {\n      background: rgba(255, 255, 255, 0.2);\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-weight: 600;\n      min-width: 20px;\n      text-align: center;\n    }\n  "] }]
-    }], () => [{ type: i1.AgentStateService }], { conversationId: [{
+    }], () => [{ type: i1.AgentStateService }], { ConversationId: [{
+            type: Input
+        }], conversationId: [{
+            type: Input
+        }], CurrentUser: [{
             type: Input
         }], currentUser: [{
             type: Input
+        }], MaxVisibleAgents: [{
+            type: Input
         }], maxVisibleAgents: [{
             type: Input
+        }], TogglePanel: [{
+            type: Output
         }], togglePanel: [{
             type: Output
+        }], AgentSelected: [{
+            type: Output
         }], agentSelected: [{
             type: Output
         }] }); })();

package/dist/lib/components/agent/active-agent-indicator.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"active-agent-indicator.component.js","sourceRoot":"","sources":["../../../../src/lib/components/agent/active-agent-indicator.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';\nimport { UserInfo } from '@memberjunction/core';\nimport { MJAIAgentRunEntity } from '@memberjunction/core-entities';\nimport { AgentStateService, AgentStatus } from '../../services/agent-state.service';\nimport { Subscription } from 'rxjs';\n\n/**\n * Displays active agent indicators in the chat header with status animations\n * Shows multiple agents with avatars, status colors, and click-to-expand functionality\n */\n@Component({\n  standalone: false,\n  selector: 'mj-active-agent-indicator',\n  template: `\n    @if (activeAgents.length > 0) {\n      <div class=\"active-agents-container\">\n        <span class=\"active-agents-label\">Active:</span>\n        <div class=\"agents-wrapper\" [class.expanded]=\"isExpanded\">\n          @for (agent of displayAgents; track agent.run.ID) {\n            <div class=\"agent-avatar\"\n              [class.status-acknowledging]=\"agent.status === 'acknowledging'\"\n              [class.status-working]=\"agent.status === 'working'\"\n              [class.status-completing]=\"agent.status === 'completing'\"\n              [class.status-completed]=\"agent.status === 'completed'\"\n              [class.status-error]=\"agent.status === 'error'\"\n              [title]=\"getAgentTooltip(agent)\"\n              (click)=\"onAgentClick(agent)\">\n              <div class=\"avatar-content\">\n                <i class=\"fas fa-robot\"></i>\n              </div>\n              @if (agent.status !== 'completed') {\n                <div class=\"status-indicator\">\n                  <div class=\"pulse-ring\"></div>\n                </div>\n              }\n              @if (agent.confidence != null) {\n                <div class=\"confidence-badge\" [title]=\"'Confidence: ' + (agent.confidence * 100).toFixed(0) + '%'\">\n                  {{ (agent.confidence * 100).toFixed(0) }}%\n                </div>\n              }\n            </div>\n          }\n          @if (activeAgents.length > maxVisibleAgents && !isExpanded) {\n            <button class=\"more-agents\" (click)=\"toggleExpanded()\" [title]=\"'Show all ' + activeAgents.length + ' agents'\">\n              +{{ activeAgents.length - maxVisibleAgents }}\n            </button>\n          }\n        </div>\n        <button class=\"panel-toggle\" (click)=\"onTogglePanel()\" title=\"Open agent process panel\">\n          <i class=\"fas fa-chart-line\"></i>\n          <span class=\"agent-count\">{{ activeAgents.length }}</span>\n        </button>\n      </div>\n    }\n    `,\n  styles: [`\n    .active-agents-container {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 6px 12px;\n      background-color: #F4F4F4;\n      border-radius: 20px;\n      font-size: 12px;\n      color: #6B7280;\n      height: 32px;\n    }\n\n    .active-agents-label {\n      font-weight: 500;\n      color: #6B7280;\n    }\n\n    .agents-wrapper {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      max-width: 200px;\n      overflow: hidden;\n      transition: max-width 300ms ease;\n    }\n\n    .agents-wrapper.expanded {\n      max-width: 600px;\n    }\n\n    .agent-avatar {\n      position: relative;\n      width: 24px;\n      height: 24px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      transition: all 200ms ease;\n      flex-shrink: 0;\n      font-size: 10px;\n      font-weight: 600;\n    }\n\n    .agent-avatar:hover {\n      transform: scale(1.1);\n    }\n\n    .avatar-content {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      color: white;\n      position: relative;\n      z-index: 1;\n    }\n\n    /* Status-based colors */\n    .status-acknowledging .avatar-content {\n      background: linear-gradient(135deg, #3B82F6, #2563EB);\n    }\n\n    .status-working .avatar-content {\n      background: linear-gradient(135deg, #F59E0B, #D97706);\n    }\n\n    .status-completing .avatar-content {\n      background: linear-gradient(135deg, #10B981, #059669);\n    }\n\n    .status-completed .avatar-content {\n      background: linear-gradient(135deg, #6B7280, #4B5563);\n      opacity: 0.6;\n    }\n\n    .status-error .avatar-content {\n      background: linear-gradient(135deg, #EF4444, #DC2626);\n    }\n\n    /* Animated status indicator */\n    .status-indicator {\n      position: absolute;\n      top: -2px;\n      right: -2px;\n      width: 10px;\n      height: 10px;\n      z-index: 2;\n    }\n\n    .pulse-ring {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: currentColor;\n      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    .status-acknowledging .pulse-ring {\n      background: #3B82F6;\n    }\n\n    .status-working .pulse-ring {\n      background: #F59E0B;\n      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    .status-completing .pulse-ring {\n      background: #10B981;\n      animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n      50% {\n        opacity: 0.5;\n        transform: scale(1.5);\n      }\n    }\n\n    /* Confidence badge */\n    .confidence-badge {\n      position: absolute;\n      bottom: -4px;\n      right: -4px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 4px;\n      padding: 1px 3px;\n      font-size: 9px;\n      font-weight: 600;\n      color: #374151;\n      z-index: 3;\n      line-height: 1;\n    }\n\n    .more-agents {\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      background: #E5E7EB;\n      border: none;\n      color: #6B7280;\n      font-size: 11px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 200ms ease;\n      flex-shrink: 0;\n    }\n\n    .more-agents:hover {\n      background: #D1D5DB;\n      transform: scale(1.05);\n    }\n\n    .panel-toggle {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 6px 10px;\n      background: #3B82F6;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 200ms ease;\n      position: relative;\n    }\n\n    .panel-toggle:hover {\n      background: #2563EB;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\n    }\n\n    .agent-count {\n      background: rgba(255, 255, 255, 0.2);\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-weight: 600;\n      min-width: 20px;\n      text-align: center;\n    }\n  `]\n})\nexport class ActiveAgentIndicatorComponent implements OnInit, OnDestroy {\n  @Input() conversationId?: string;\n  @Input() currentUser!: UserInfo;\n  @Input() maxVisibleAgents: number = 3;\n\n  @Output() togglePanel = new EventEmitter<void>();\n  @Output() agentSelected = new EventEmitter<MJAIAgentRunEntity>();\n\n  public activeAgents: Array<{ run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }> = [];\n  public isExpanded: boolean = false;\n\n  private subscription?: Subscription;\n\n  constructor(private agentStateService: AgentStateService) {}\n\n  ngOnInit(): void {\n    // Subscribe to active agents for this conversation\n    this.subscription = this.agentStateService\n      .getActiveAgents(this.conversationId)\n      .subscribe(agents => {\n        this.activeAgents = agents;\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.subscription?.unsubscribe();\n  }\n\n  get displayAgents(): Array<{ run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }> {\n    if (this.isExpanded) {\n      return this.activeAgents;\n    }\n    return this.activeAgents.slice(0, this.maxVisibleAgents);\n  }\n\n  getAgentTooltip(agent: { run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }): string {\n    const statusText = this.getStatusText(agent.status);\n    const confidenceText = agent.confidence != null\n      ? ` (Confidence: ${(agent.confidence * 100).toFixed(0)}%)`\n      : '';\n    return `${agent.run.Agent || 'Agent'} - ${statusText}${confidenceText}`;\n  }\n\n  getStatusText(status: AgentStatus): string {\n    switch (status) {\n      case 'acknowledging': return 'Acknowledging request';\n      case 'working': return 'Working on task';\n      case 'completing': return 'Completing';\n      case 'completed': return 'Completed';\n      case 'error': return 'Error occurred';\n      default: return 'Active';\n    }\n  }\n\n  toggleExpanded(): void {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  onAgentClick(agent: { run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }): void {\n    this.agentSelected.emit(agent.run);\n  }\n\n  onTogglePanel(): void {\n    this.togglePanel.emit();\n  }\n}\n"]}
+{"version":3,"file":"active-agent-indicator.component.js","sourceRoot":"","sources":["../../../../src/lib/components/agent/active-agent-indicator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAqB,MAAM,eAAe,CAAC;;;;;IA+B1E,+BAA8B;IAC5B,0BAA8B;IAChC,iBAAM;;;IAGN,+BAAmG;IACjG,YACF;IAAA,iBAAM;;;IAFwB,qFAAoE;IAChG,cACF;IADE,wEACF;;;;IAnBJ,8BAOgC;IAA9B,gOAAS,6BAAmB,KAAC;IAC7B,8BAA4B;IAC1B,wBAA4B;IAC9B,iBAAM;IACN,oHAAoC;IAKpC,oHAAgC;IAKlC,iBAAM;;;;IAhBJ,AADA,AADA,AADA,AADA,2EAA+D,iDACZ,uDACM,qDACF,6CACR;IAC/C,wDAAgC;IAKhC,eAIC;IAJD,0DAIC;IACD,cAIC;IAJD,sDAIC;;;;IAIH,kCAA+G;IAAnF,gNAAS,uBAAgB,KAAC;IACpD,YACF;IAAA,iBAAS;;;IAF8C,4EAAuD;IAC5G,cACF;IADE,sFACF;;;;IA7BJ,AADF,8BAAqC,cACD;IAAA,uBAAO;IAAA,iBAAO;IAChD,8BAA0D;IACxD,+GAuBC;IACD,gHAA6D;IAK/D,iBAAM;IACN,iCAAwF;IAA3D,iMAAS,sBAAe,KAAC;IACpD,uBAAiC;IACjC,+BAA0B;IAAA,aAAyB;IAEvD,AADE,AADqD,iBAAO,EACnD,EACL;;;IAnCwB,eAA6B;IAA7B,6CAA6B;IACvD,cAuBC;IAvBD,mCAuBC;IACD,eAIC;IAJD,qGAIC;IAIyB,eAAyB;IAAzB,gDAAyB;;AA5C7D;;;GAGG;AAgPH,MAAM,OAAO,6BAA6B;IA4EpB;IA3EX,cAAc,CAAU;IAEjC,8CAA8C;IAC9C,IAAa,cAAc,CAAC,KAAyB;QACnD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC;IACD,8CAA8C;IAC9C,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IACQ,WAAW,CAAY;IAEhC,2CAA2C;IAC3C,IAAa,WAAW,CAAC,KAAe;QACtC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IACD,2CAA2C;IAC3C,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IACQ,gBAAgB,GAAW,CAAC,CAAC;IAEtC,gDAAgD;IAChD,IAAa,gBAAgB,CAAC,KAAa;QACzC,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAChC,CAAC;IACD,gDAAgD;IAChD,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAES,WAAW,GAAG,IAAI,YAAY,EAAQ,CAAC;IAEjD;;;;;;OAMG;IACO,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IAC/B,aAAa,GAAG,IAAI,YAAY,EAAsB,CAAC;IAEjE;;;;;;OAMG;IACO,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;IAEtC,YAAY,GAAuF,EAAE,CAAC;IAE7G,4CAA4C;IAC5C,IAAW,YAAY;QACrB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IACD,4CAA4C;IAC5C,IAAW,YAAY,CAAC,KAAyF;QAC/G,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC5B,CAAC;IACM,UAAU,GAAY,KAAK,CAAC;IAEnC,0CAA0C;IAC1C,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IACD,0CAA0C;IAC1C,IAAW,UAAU,CAAC,KAAc;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAEO,YAAY,CAAgB;IAEpC,YAAoB,iBAAoC;QAApC,sBAAiB,GAAjB,iBAAiB,CAAmB;IAAG,CAAC;IAE5D,QAAQ;QACN,mDAAmD;QACnD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,iBAAiB;aACvC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC;aACpC,SAAS,CAAC,MAAM,CAAC,EAAE;YAClB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC7B,CAAC,CAAC,CAAC;IACP,CAAC;IAED,WAAW;QACT,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,CAAC;IACnC,CAAC;IAED,IAAI,aAAa;QACf,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,YAAY,CAAC;QAC3B,CAAC;QACD,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC3D,CAAC;IAED,6CAA6C;IAC7C,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED,eAAe,CAAC,KAAkF;QAChG,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACpD,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,IAAI,IAAI;YAC7C,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;YAC1D,CAAC,CAAC,EAAE,CAAC;QACP,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,OAAO,MAAM,UAAU,GAAG,cAAc,EAAE,CAAC;IAC1E,CAAC;IAED,+CAA+C;IAC/C,eAAe,CAAC,KAAkF;QAChG,OAAO,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,aAAa,CAAC,MAAmB;QAC/B,QAAQ,MAAM,EAAE,CAAC;YACf,KAAK,eAAe,CAAC,CAAC,OAAO,uBAAuB,CAAC;YACrD,KAAK,SAAS,CAAC,CAAC,OAAO,iBAAiB,CAAC;YACzC,KAAK,YAAY,CAAC,CAAC,OAAO,YAAY,CAAC;YACvC,KAAK,WAAW,CAAC,CAAC,OAAO,WAAW,CAAC;YACrC,KAAK,OAAO,CAAC,CAAC,OAAO,gBAAgB,CAAC;YACtC,OAAO,CAAC,CAAC,OAAO,QAAQ,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,6CAA6C;IAC7C,aAAa,CAAC,MAAmB;QAC/B,OAAO,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,8CAA8C;IAC9C,cAAc;QACZ,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;IAC/B,CAAC;IAED,YAAY,CAAC,KAAkF;QAC7F,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrC,CAAC;IAED,4CAA4C;IAC5C,YAAY,CAAC,KAAkF;QAC7F,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC;IAED,6CAA6C;IAC7C,aAAa;QACX,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;IAC9B,CAAC;uHA7JU,6BAA6B;6DAA7B,6BAA6B;YA3OtC,gGAA+B;;YAA/B,sDAuCC;;;iFAoMQ,6BAA6B;cA/OzC,SAAS;6BACI,KAAK,YACP,2BAA2B,YAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCP;;kBAoMF,KAAK;;kBAGL,KAAK;;kBAOL,KAAK;;kBAGL,KAAK;;kBAOL,KAAK;;kBAGL,KAAK;;kBAQL,MAAM;;kBASN,MAAM;;kBACN,MAAM;;kBASN,MAAM;;kFAnDI,6BAA6B","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';\nimport { UserInfo } from '@memberjunction/core';\nimport { MJAIAgentRunEntity } from '@memberjunction/core-entities';\nimport { AgentStateService, AgentStatus } from '../../services/agent-state.service';\nimport { Subscription } from 'rxjs';\n\n/**\n * Displays active agent indicators in the chat header with status animations\n * Shows multiple agents with avatars, status colors, and click-to-expand functionality\n */\n@Component({\n  standalone: false,\n  selector: 'mj-active-agent-indicator',\n  template: `\n    @if (activeAgents.length > 0) {\n      <div class=\"active-agents-container\">\n        <span class=\"active-agents-label\">Active:</span>\n        <div class=\"agents-wrapper\" [class.expanded]=\"isExpanded\">\n          @for (agent of displayAgents; track agent.run.ID) {\n            <div class=\"agent-avatar\"\n              [class.status-acknowledging]=\"agent.status === 'acknowledging'\"\n              [class.status-working]=\"agent.status === 'working'\"\n              [class.status-completing]=\"agent.status === 'completing'\"\n              [class.status-completed]=\"agent.status === 'completed'\"\n              [class.status-error]=\"agent.status === 'error'\"\n              [title]=\"getAgentTooltip(agent)\"\n              (click)=\"onAgentClick(agent)\">\n              <div class=\"avatar-content\">\n                <i class=\"fas fa-robot\"></i>\n              </div>\n              @if (agent.status !== 'completed') {\n                <div class=\"status-indicator\">\n                  <div class=\"pulse-ring\"></div>\n                </div>\n              }\n              @if (agent.confidence != null) {\n                <div class=\"confidence-badge\" [title]=\"'Confidence: ' + (agent.confidence * 100).toFixed(0) + '%'\">\n                  {{ (agent.confidence * 100).toFixed(0) }}%\n                </div>\n              }\n            </div>\n          }\n          @if (activeAgents.length > maxVisibleAgents && !isExpanded) {\n            <button class=\"more-agents\" (click)=\"toggleExpanded()\" [title]=\"'Show all ' + activeAgents.length + ' agents'\">\n              +{{ activeAgents.length - maxVisibleAgents }}\n            </button>\n          }\n        </div>\n        <button class=\"panel-toggle\" (click)=\"onTogglePanel()\" title=\"Open agent process panel\">\n          <i class=\"fas fa-chart-line\"></i>\n          <span class=\"agent-count\">{{ activeAgents.length }}</span>\n        </button>\n      </div>\n    }\n    `,\n  styles: [`\n    .active-agents-container {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 6px 12px;\n      background-color: #F4F4F4;\n      border-radius: 20px;\n      font-size: 12px;\n      color: #6B7280;\n      height: 32px;\n    }\n\n    .active-agents-label {\n      font-weight: 500;\n      color: #6B7280;\n    }\n\n    .agents-wrapper {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      max-width: 200px;\n      overflow: hidden;\n      transition: max-width 300ms ease;\n    }\n\n    .agents-wrapper.expanded {\n      max-width: 600px;\n    }\n\n    .agent-avatar {\n      position: relative;\n      width: 24px;\n      height: 24px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      transition: all 200ms ease;\n      flex-shrink: 0;\n      font-size: 10px;\n      font-weight: 600;\n    }\n\n    .agent-avatar:hover {\n      transform: scale(1.1);\n    }\n\n    .avatar-content {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      color: white;\n      position: relative;\n      z-index: 1;\n    }\n\n    /* Status-based colors */\n    .status-acknowledging .avatar-content {\n      background: linear-gradient(135deg, #3B82F6, #2563EB);\n    }\n\n    .status-working .avatar-content {\n      background: linear-gradient(135deg, #F59E0B, #D97706);\n    }\n\n    .status-completing .avatar-content {\n      background: linear-gradient(135deg, #10B981, #059669);\n    }\n\n    .status-completed .avatar-content {\n      background: linear-gradient(135deg, #6B7280, #4B5563);\n      opacity: 0.6;\n    }\n\n    .status-error .avatar-content {\n      background: linear-gradient(135deg, #EF4444, #DC2626);\n    }\n\n    /* Animated status indicator */\n    .status-indicator {\n      position: absolute;\n      top: -2px;\n      right: -2px;\n      width: 10px;\n      height: 10px;\n      z-index: 2;\n    }\n\n    .pulse-ring {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: currentColor;\n      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    .status-acknowledging .pulse-ring {\n      background: #3B82F6;\n    }\n\n    .status-working .pulse-ring {\n      background: #F59E0B;\n      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    .status-completing .pulse-ring {\n      background: #10B981;\n      animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n      50% {\n        opacity: 0.5;\n        transform: scale(1.5);\n      }\n    }\n\n    /* Confidence badge */\n    .confidence-badge {\n      position: absolute;\n      bottom: -4px;\n      right: -4px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 4px;\n      padding: 1px 3px;\n      font-size: 9px;\n      font-weight: 600;\n      color: #374151;\n      z-index: 3;\n      line-height: 1;\n    }\n\n    .more-agents {\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      background: #E5E7EB;\n      border: none;\n      color: #6B7280;\n      font-size: 11px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 200ms ease;\n      flex-shrink: 0;\n    }\n\n    .more-agents:hover {\n      background: #D1D5DB;\n      transform: scale(1.05);\n    }\n\n    .panel-toggle {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 6px 10px;\n      background: #3B82F6;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 200ms ease;\n      position: relative;\n    }\n\n    .panel-toggle:hover {\n      background: #2563EB;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\n    }\n\n    .agent-count {\n      background: rgba(255, 255, 255, 0.2);\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-weight: 600;\n      min-width: 20px;\n      text-align: center;\n    }\n  `]\n})\nexport class ActiveAgentIndicatorComponent implements OnInit, OnDestroy {\n  @Input() ConversationId?: string;\n\n  /** @deprecated Use {@link ConversationId}. */\n  @Input() set conversationId(value: string | undefined) {\n    this.ConversationId = value;\n  }\n  /** @deprecated Use {@link ConversationId}. */\n  get conversationId(): string | undefined {\n    return this.ConversationId;\n  }\n  @Input() CurrentUser!: UserInfo;\n\n  /** @deprecated Use {@link CurrentUser}. */\n  @Input() set currentUser(value: UserInfo) {\n    this.CurrentUser = value;\n  }\n  /** @deprecated Use {@link CurrentUser}. */\n  get currentUser(): UserInfo {\n    return this.CurrentUser;\n  }\n  @Input() MaxVisibleAgents: number = 3;\n\n  /** @deprecated Use {@link MaxVisibleAgents}. */\n  @Input() set maxVisibleAgents(value: number) {\n    this.MaxVisibleAgents = value;\n  }\n  /** @deprecated Use {@link MaxVisibleAgents}. */\n  get maxVisibleAgents(): number {\n    return this.MaxVisibleAgents;\n  }\n\n  @Output() TogglePanel = new EventEmitter<void>();\n\n  /**\n   * @deprecated Use {@link TogglePanel}.\n   *\n   * The same emitter under the old binding name, so a template still binding\n   * (togglePanel) keeps working. Must stay AFTER TogglePanel: class fields\n   * initialise in order, and the other way round this captures undefined.\n   */\n  @Output() togglePanel = this.TogglePanel;\n  @Output() AgentSelected = new EventEmitter<MJAIAgentRunEntity>();\n\n  /**\n   * @deprecated Use {@link AgentSelected}.\n   *\n   * The same emitter under the old binding name, so a template still binding\n   * (agentSelected) keeps working. Must stay AFTER AgentSelected: class fields\n   * initialise in order, and the other way round this captures undefined.\n   */\n  @Output() agentSelected = this.AgentSelected;\n\n  public ActiveAgents: Array<{ run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }> = [];\n\n  /** @deprecated Use {@link ActiveAgents}. */\n  public get activeAgents(): Array<{ run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }> {\n    return this.ActiveAgents;\n  }\n  /** @deprecated Use {@link ActiveAgents}. */\n  public set activeAgents(value: Array<{ run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }>) {\n    this.ActiveAgents = value;\n  }\n  public IsExpanded: boolean = false;\n\n  /** @deprecated Use {@link IsExpanded}. */\n  public get isExpanded(): boolean {\n    return this.IsExpanded;\n  }\n  /** @deprecated Use {@link IsExpanded}. */\n  public set isExpanded(value: boolean) {\n    this.IsExpanded = value;\n  }\n\n  private subscription?: Subscription;\n\n  constructor(private agentStateService: AgentStateService) {}\n\n  ngOnInit(): void {\n    // Subscribe to active agents for this conversation\n    this.subscription = this.agentStateService\n      .getActiveAgents(this.ConversationId)\n      .subscribe(agents => {\n        this.ActiveAgents = agents;\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.subscription?.unsubscribe();\n  }\n\n  get DisplayAgents(): Array<{ run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }> {\n    if (this.IsExpanded) {\n      return this.ActiveAgents;\n    }\n    return this.ActiveAgents.slice(0, this.MaxVisibleAgents);\n  }\n\n  /** @deprecated Use {@link DisplayAgents}. */\n  get displayAgents(): Array<{ run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }> {\n    return this.DisplayAgents;\n  }\n\n  GetAgentTooltip(agent: { run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }): string {\n    const statusText = this.GetStatusText(agent.status);\n    const confidenceText = agent.confidence != null\n      ? ` (Confidence: ${(agent.confidence * 100).toFixed(0)}%)`\n      : '';\n    return `${agent.run.Agent || 'Agent'} - ${statusText}${confidenceText}`;\n  }\n\n  /** @deprecated Use {@link GetAgentTooltip}. */\n  getAgentTooltip(agent: { run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }): string {\n    return this.GetAgentTooltip(agent);\n  }\n\n  GetStatusText(status: AgentStatus): string {\n    switch (status) {\n      case 'acknowledging': return 'Acknowledging request';\n      case 'working': return 'Working on task';\n      case 'completing': return 'Completing';\n      case 'completed': return 'Completed';\n      case 'error': return 'Error occurred';\n      default: return 'Active';\n    }\n  }\n\n  /** @deprecated Use {@link GetStatusText}. */\n  getStatusText(status: AgentStatus): string {\n    return this.GetStatusText(status);\n  }\n\n  ToggleExpanded(): void {\n    this.IsExpanded = !this.IsExpanded;\n  }\n\n  /** @deprecated Use {@link ToggleExpanded}. */\n  toggleExpanded(): void {\n    return this.ToggleExpanded();\n  }\n\n  OnAgentClick(agent: { run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }): void {\n    this.AgentSelected.emit(agent.run);\n  }\n\n  /** @deprecated Use {@link OnAgentClick}. */\n  onAgentClick(agent: { run: MJAIAgentRunEntity; status: AgentStatus; confidence: number | null }): void {\n    return this.OnAgentClick(agent);\n  }\n\n  OnTogglePanel(): void {\n    this.TogglePanel.emit();\n  }\n\n  /** @deprecated Use {@link OnTogglePanel}. */\n  onTogglePanel(): void {\n    return this.OnTogglePanel();\n  }\n}\n"]}