@edvak99/voice-receptionist-widget 1.1.13 → 1.1.14

package/fesm2022/edvak99-voice-receptionist-widget-call-history-detail-page.component-estyUMH9.mjs

@@ -0,0 +1,509 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, signal, computed, ChangeDetectionStrategy, Component, output, viewChild, effect, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterLink, ActivatedRoute } from '@angular/router';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { switchMap, EMPTY, interval, startWith, tap, catchError, finalize } from 'rxjs';
+import { A as AiReceptionistApiService, D as DashboardSocketService, T as ToastService, g as toolEventTrackKey, I as IconComponent, m as activityTypeLabel, V as VOICE_RECEPTIONIST_CONFIG, i as isUnknownCaller } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-D5VJ5SkB.mjs';
+import { A as ApiLogsTableComponent, a as ApiLogDetailDrawerComponent } from './edvak99-voice-receptionist-widget-api-logs-table.component-Bl7gMi0P.mjs';
+import { DatePipe } from '@angular/common';
+import { C as CallRecordingPlayerComponent } from './edvak99-voice-receptionist-widget-call-recording-player.component-BqgXwDNi.mjs';
+import { C as CallReviewService } from './edvak99-voice-receptionist-widget-call-review.service-ft4auA6j.mjs';
+import { i as isNeedsReview } from './edvak99-voice-receptionist-widget-call-review.util-rWIPxDtQ.mjs';
+
+const POLL_MS = 5000;
+class ApiLogsCallPanelComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.socket = inject(DashboardSocketService);
+        this.destroyRef = inject(DestroyRef);
+        this.callId = input.required();
+        this.live = input(false);
+        this.dark = input(false);
+        this.items = signal([]);
+        this.loading = signal(true);
+        this.error = signal(null);
+        this.selected = signal(null);
+        this.drawerOpen = signal(false);
+        this.panelState = computed(() => ({
+            callId: this.callId(),
+            live: this.live(),
+        }));
+        this.onApiLogUpdated = (payload) => {
+            if (payload.callId === this.callId()) {
+                this.refetchQuietly();
+            }
+        };
+        toObservable(this.panelState)
+            .pipe(switchMap(({ callId, live }) => {
+            if (!callId) {
+                this.items.set([]);
+                this.loading.set(false);
+                this.error.set(null);
+                return EMPTY;
+            }
+            if (live) {
+                this.socket.acquire();
+                this.socket.on('api_log_updated', this.onApiLogUpdated);
+            }
+            const logs$ = live
+                ? interval(POLL_MS).pipe(startWith(0), switchMap(() => this.api.getCallApiLogs(callId)))
+                : this.api.getCallApiLogs(callId);
+            return logs$.pipe(tap(({ items }) => {
+                this.items.set(items);
+                this.loading.set(false);
+                this.error.set(null);
+            }), catchError(() => {
+                this.loading.set(false);
+                this.error.set('Failed to load API logs.');
+                return EMPTY;
+            }), finalize(() => {
+                if (live) {
+                    this.socket.off('api_log_updated', this.onApiLogUpdated);
+                    this.socket.release();
+                }
+            }));
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+        // Show loading when callId changes (before first emission).
+        toObservable(this.callId)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((id) => {
+            if (id) {
+                this.loading.set(true);
+                this.error.set(null);
+            }
+        });
+    }
+    onRowSelected(item) {
+        this.selected.set(item);
+        this.drawerOpen.set(true);
+    }
+    closeDrawer() {
+        this.drawerOpen.set(false);
+        this.selected.set(null);
+    }
+    refetchQuietly() {
+        const id = this.callId();
+        if (!id)
+            return;
+        this.api.getCallApiLogs(id).subscribe({
+            next: ({ items }) => this.items.set(items),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ApiLogsCallPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ApiLogsCallPanelComponent, isStandalone: true, selector: "eds-api-logs-call-panel", inputs: { callId: { classPropertyName: "callId", publicName: "callId", isSignal: true, isRequired: true, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"api-logs-call-panel min-h-[120px]\" [class.api-logs-call-panel--dark]=\"dark()\">\n  @if (loading()) {\n    <p class=\"fs-sm text-light\">Loading API logs\u2026</p>\n  } @else if (error()) {\n    <p class=\"api-logs-call-panel__error fs-sm text-light\" role=\"alert\">{{ error() }}</p>\n  } @else if (items().length === 0) {\n    <p class=\"fs-sm text-light api-logs-call-panel__empty py-6 text-center\">No external API calls recorded for this call.</p>\n  } @else {\n    <eds-api-logs-table [items]=\"items()\" (rowSelected)=\"onRowSelected($event)\" />\n  }\n\n  <eds-api-log-detail-drawer\n    [open]=\"drawerOpen()\"\n    [listItem]=\"selected()\"\n    (closed)=\"closeDrawer()\"\n  />\n</div>\n", styles: [".api-logs-call-panel--dark{color:var(--eds-monitor-text, #e8eaed)}.api-logs-call-panel__empty{color:var(--eds-text-secondary)}.api-logs-call-panel__error{color:#b91c1c}\n"], dependencies: [{ kind: "component", type: ApiLogsTableComponent, selector: "eds-api-logs-table", inputs: ["items", "showCallId", "showPracticeId", "callLinkBase"], outputs: ["rowSelected"] }, { kind: "component", type: ApiLogDetailDrawerComponent, selector: "eds-api-log-detail-drawer", inputs: ["open", "listItem", "listOnly"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ApiLogsCallPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-api-logs-call-panel', imports: [ApiLogsTableComponent, ApiLogDetailDrawerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"api-logs-call-panel min-h-[120px]\" [class.api-logs-call-panel--dark]=\"dark()\">\n  @if (loading()) {\n    <p class=\"fs-sm text-light\">Loading API logs\u2026</p>\n  } @else if (error()) {\n    <p class=\"api-logs-call-panel__error fs-sm text-light\" role=\"alert\">{{ error() }}</p>\n  } @else if (items().length === 0) {\n    <p class=\"fs-sm text-light api-logs-call-panel__empty py-6 text-center\">No external API calls recorded for this call.</p>\n  } @else {\n    <eds-api-logs-table [items]=\"items()\" (rowSelected)=\"onRowSelected($event)\" />\n  }\n\n  <eds-api-log-detail-drawer\n    [open]=\"drawerOpen()\"\n    [listItem]=\"selected()\"\n    (closed)=\"closeDrawer()\"\n  />\n</div>\n", styles: [".api-logs-call-panel--dark{color:var(--eds-monitor-text, #e8eaed)}.api-logs-call-panel__empty{color:var(--eds-text-secondary)}.api-logs-call-panel__error{color:#b91c1c}\n"] }]
+        }], ctorParameters: () => [] });
+
+/** Parse tool timestamp strings like "1:02" or "0:42" into seconds. */
+function parseClockTime(value) {
+    const trimmed = value?.trim();
+    if (!trimmed)
+        return null;
+    const parts = trimmed.split(':').map((p) => Number(p));
+    if (parts.some((n) => Number.isNaN(n)))
+        return null;
+    if (parts.length === 2)
+        return parts[0] * 60 + parts[1];
+    if (parts.length === 3)
+        return parts[0] * 3600 + parts[1] * 60 + parts[2];
+    return null;
+}
+function resolveLineStart(line) {
+    if (line.at != null && line.at >= 0)
+        return line.at;
+    const raw = line;
+    if (raw.offsetSeconds != null && raw.offsetSeconds >= 0)
+        return raw.offsetSeconds;
+    if (raw.startTime != null && raw.startTime >= 0)
+        return raw.startTime;
+    return null;
+}
+/**
+ * Assign start/end seconds to transcript lines for audio sync.
+ * Uses explicit `at` when present; otherwise estimates from call duration.
+ */
+function buildTimedTranscript(lines, durationSeconds) {
+    if (!lines.length)
+        return [];
+    const total = Math.max(durationSeconds, 1);
+    const explicit = lines.map((line) => resolveLineStart(line));
+    const allExplicit = explicit.every((t) => t != null);
+    const starts = new Array(lines.length).fill(0);
+    if (allExplicit) {
+        for (let i = 0; i < lines.length; i += 1) {
+            starts[i] = explicit[i];
+        }
+    }
+    else {
+        const speakableCount = lines.filter((l) => l.who !== 'system').length;
+        const step = total / Math.max(speakableCount, 1);
+        let speakableIdx = 0;
+        for (let i = 0; i < lines.length; i += 1) {
+            if (explicit[i] != null) {
+                starts[i] = explicit[i];
+                continue;
+            }
+            const line = lines[i];
+            if (line.who === 'system') {
+                starts[i] = i > 0 ? starts[i - 1] : 0;
+                continue;
+            }
+            starts[i] = speakableIdx * step;
+            speakableIdx += 1;
+        }
+    }
+    return lines.map((line, index) => {
+        const startSec = starts[index];
+        const nextStart = starts.slice(index + 1).find((s) => s > startSec);
+        const endSec = nextStart ?? total;
+        return { ...line, startSec, endSec: Math.max(endSec, startSec + 0.5), index };
+    });
+}
+function activeTranscriptIndex(lines, currentSec) {
+    if (!lines.length || currentSec < 0)
+        return -1;
+    for (let i = lines.length - 1; i >= 0; i -= 1) {
+        if (currentSec >= lines[i].startSec)
+            return i;
+    }
+    return 0;
+}
+function formatPlaybackTime(seconds) {
+    const s = Math.max(0, Math.floor(seconds));
+    const m = Math.floor(s / 60);
+    const r = s % 60;
+    return `${m}:${r.toString().padStart(2, '0')}`;
+}
+function toolStateClass(state) {
+    const map = {
+        ok: 'call-conversation__tool--ok',
+        warn: 'call-conversation__tool--warn',
+        error: 'call-conversation__tool--error',
+        active: 'call-conversation__tool--active',
+    };
+    return map[state] ?? '';
+}
+function transcriptRoleLabel(who, callerName, callerMatched) {
+    if (who === 'patient') {
+        const name = String(callerName ?? '').trim();
+        if (!name || callerMatched === false || /^unknown/i.test(name) || name === '?') {
+            return 'Unknown caller';
+        }
+        return name;
+    }
+    const labels = {
+        ai: 'AI receptionist',
+        staff: 'Staff',
+        system: 'System',
+    };
+    return labels[who] ?? who;
+}
+
+class CallConversationPanelComponent {
+    roleLabel(who) {
+        return transcriptRoleLabel(who, this.callerName(), this.callerMatched() ?? undefined);
+    }
+    speakerIcon(who) {
+        switch (who) {
+            case 'ai':
+                return 'graph_new';
+            case 'staff':
+                return 'Robot';
+            case 'patient':
+                return 'person';
+            default:
+                return 'info';
+        }
+    }
+    toolTone(state) {
+        switch (state) {
+            case 'ok':
+                return 'success';
+            case 'warn':
+                return 'warning';
+            case 'error':
+                return 'danger';
+            case 'active':
+                return 'primary';
+            default:
+                return 'light';
+        }
+    }
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.toast = inject(ToastService);
+        this.callId = input.required();
+        this.summary = input.required();
+        this.transcript = input.required();
+        this.tools = input.required();
+        this.callDurationSec = input(0);
+        this.allowRegenerate = input(true);
+        this.callerName = input(null);
+        this.callerMatched = input(null);
+        this.summaryRegenerated = output();
+        this.player = viewChild(CallRecordingPlayerComponent);
+        this.scrollHost = viewChild('scrollHost');
+        this.currentTime = signal(0);
+        this.playbackDuration = signal(0);
+        this.summaryExpanded = signal(false);
+        this.regeneratedSummary = signal(null);
+        this.displaySummary = computed(() => this.regeneratedSummary() ?? this.summary());
+        this.regenerating = signal(false);
+        this.summaryMeta = signal(null);
+        this.timedLines = computed(() => buildTimedTranscript(this.transcript(), this.playbackDuration() || this.callDurationSec() || 120));
+        this.activeIndex = computed(() => activeTranscriptIndex(this.timedLines(), this.currentTime()));
+        this.hasExplicitTiming = computed(() => this.transcript().some((line) => line.at != null));
+        this.formatTime = formatPlaybackTime;
+        this.toolTrackKey = toolEventTrackKey;
+        effect(() => {
+            this.callId();
+            this.regeneratedSummary.set(null);
+        }, { allowSignalWrites: true });
+        effect(() => {
+            const idx = this.activeIndex();
+            const host = this.scrollHost()?.nativeElement;
+            if (idx < 0 || !host)
+                return;
+            const row = host.querySelector(`[data-line-index="${idx}"]`);
+            if (row instanceof HTMLElement) {
+                row.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        });
+    }
+    onPlaybackTime(sec) {
+        this.currentTime.set(sec);
+    }
+    onPlaybackDuration(sec) {
+        this.playbackDuration.set(sec);
+    }
+    seekLine(line) {
+        if (line.who === 'system')
+            return;
+        this.player()?.seekTo(line.startSec);
+    }
+    toggleSummary() {
+        this.summaryExpanded.update((v) => !v);
+    }
+    regenerateSummary() {
+        if (this.regenerating())
+            return;
+        this.regenerating.set(true);
+        this.api.regenerateCallSummary(this.callId()).subscribe({
+            next: ({ data }) => {
+                this.regenerating.set(false);
+                this.regeneratedSummary.set(data.summary);
+                this.summaryExpanded.set(true);
+                this.summaryMeta.set({
+                    model: data.summaryModel,
+                    generatedAt: data.summaryGeneratedAt,
+                    turnCount: data.transcriptTurnCount,
+                });
+                this.summaryRegenerated.emit();
+                this.toast.show('Call summary regenerated', 'success');
+            },
+            error: (err) => {
+                this.regenerating.set(false);
+                this.toast.show(err.message ?? 'Failed to regenerate summary', 'error');
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CallConversationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CallConversationPanelComponent, isStandalone: true, selector: "eds-call-conversation-panel", inputs: { callId: { classPropertyName: "callId", publicName: "callId", isSignal: true, isRequired: true, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: true, transformFunction: null }, transcript: { classPropertyName: "transcript", publicName: "transcript", isSignal: true, isRequired: true, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: true, transformFunction: null }, callDurationSec: { classPropertyName: "callDurationSec", publicName: "callDurationSec", isSignal: true, isRequired: false, transformFunction: null }, allowRegenerate: { classPropertyName: "allowRegenerate", publicName: "allowRegenerate", isSignal: true, isRequired: false, transformFunction: null }, callerName: { classPropertyName: "callerName", publicName: "callerName", isSignal: true, isRequired: false, transformFunction: null }, callerMatched: { classPropertyName: "callerMatched", publicName: "callerMatched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { summaryRegenerated: "summaryRegenerated" }, viewQueries: [{ propertyName: "player", first: true, predicate: CallRecordingPlayerComponent, descendants: true, isSignal: true }, { propertyName: "scrollHost", first: true, predicate: ["scrollHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <div class=\"grid grid-cols-1 items-stretch gap-4 lg:grid-cols-2\">\n    <section class=\"rounded-lg border border-base bg-white p-4 shadow-sm\">\n      <div class=\"flex items-center justify-between gap-3\">\n        <button type=\"button\" class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left\" (click)=\"toggleSummary()\">\n          <ed-icon [name]=\"summaryExpanded() ? 'expand_less' : 'expand_more'\" [size]=\"20\" />\n          <h2 class=\"m-0\">Call summary</h2>\n        </button>\n        @if (allowRegenerate()) {\n          <button\n            type=\"button\"\n            class=\"btn is-secondary is-sm inline-flex items-center gap-2xs\"\n            [disabled]=\"regenerating()\"\n            (click)=\"regenerateSummary()\"\n          >\n            <ed-icon name=\"refresh\" [size]=\"18\" />\n            {{ regenerating() ? 'Regenerating\u2026' : 'Regenerate' }}\n          </button>\n        }\n      </div>\n      @if (summaryExpanded() || displaySummary().length < 180) {\n        <p class=\"fs-base text-dark mt-3 leading-relaxed\">{{ displaySummary() }}</p>\n      } @else {\n        <p class=\"fs-base text-dark mt-3 line-clamp-2 leading-relaxed\">\n          {{ displaySummary() }}\n        </p>\n        <button\n          type=\"button\"\n          class=\"cursor-pointer border-none bg-transparent px-0 pt-1 text-sm text-blue-600\"\n          (click)=\"toggleSummary()\"\n        >\n          Read full summary\n        </button>\n      }\n      @if (summaryMeta(); as meta) {\n        <p class=\"fs-sm text-light mt-3 flex flex-wrap gap-3 text-zinc-500\">\n          @if (meta.model) {\n            <span>Model: {{ meta.model }}</span>\n          }\n          @if (meta.generatedAt) {\n            <span>Generated {{ meta.generatedAt | date: 'medium' }}</span>\n          }\n          @if (meta.turnCount != null) {\n            <span>{{ meta.turnCount }} transcript turns</span>\n          }\n        </p>\n      }\n    </section>\n    <ng-content select=\"[summary-side]\" />\n  </div>\n\n  <section class=\"rounded-lg border border-base bg-white overflow-hidden bg-white p-0 shadow-sm\">\n    <eds-call-recording-player\n      [callId]=\"callId()\"\n      (currentTimeChange)=\"onPlaybackTime($event)\"\n      (durationChange)=\"onPlaybackDuration($event)\"\n    />\n  </section>\n\n  <div class=\"grid grid-cols-1 items-start gap-4 lg:grid-cols-[1fr_300px]\">\n    <section class=\"rounded-lg border border-base bg-white p-4 shadow-sm\" aria-labelledby=\"call-transcript-title\">\n      <header class=\"mb-3 flex items-center justify-between gap-3\">\n        <h2 id=\"call-transcript-title\" class=\"m-0\">Transcript</h2>\n        @if (playbackDuration() > 0) {\n          <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light text-zinc-500\">\n            {{ formatTime(currentTime()) }} / {{ formatTime(playbackDuration()) }}\n          </span>\n        }\n      </header>\n\n      <div #scrollHost class=\"flex max-h-[62vh] flex-col gap-3 overflow-y-auto rounded-xl border border-zinc-200 bg-zinc-50 p-3\" role=\"log\">\n        @for (line of timedLines(); track line.index) {\n          @if (line.who === 'system') {\n            <div\n              [class]=\"\n                'inline-flex max-w-[90%] items-center gap-2 self-center rounded-full bg-zinc-100 px-3 py-2 text-xs leading-snug text-zinc-500' +\n                (line.index === activeIndex() ? ' outline outline-2 outline-blue-200' : '')\n              \"\n              [attr.data-line-index]=\"line.index\"\n            >\n              <ed-icon name=\"info\" [size]=\"14\" />\n              <span>{{ line.text }}</span>\n            </div>\n          } @else {\n            <article\n              [class]=\"\n                'flex max-w-[72%] cursor-pointer gap-3 border-none bg-transparent p-0 text-left max-lg:max-w-[92%] ' +\n                (line.who === 'patient' ? 'mr-auto self-start' : 'ml-auto flex-row-reverse self-end')\n              \"\n              [attr.data-line-index]=\"line.index\"\n              [attr.data-who]=\"line.who\"\n              tabindex=\"0\"\n              role=\"button\"\n              [attr.aria-current]=\"line.index === activeIndex() ? 'true' : null\"\n              (click)=\"seekLine(line)\"\n              (keyup.enter)=\"seekLine(line)\"\n            >\n              <div\n                [class]=\"\n                  'flex h-8 w-8 shrink-0 items-center justify-center rounded-full ' +\n                  (line.who === 'ai'\n                    ? 'bg-gradient-to-br from-blue-600 to-violet-500 text-white'\n                    : line.who === 'staff'\n                      ? 'border border-violet-200 bg-violet-50 text-violet-700'\n                      : 'bg-zinc-200 text-zinc-600')\n                \"\n              >\n                <ed-icon [name]=\"speakerIcon(line.who)\" [size]=\"16\" />\n              </div>\n              <div\n                [class]=\"\n                  'flex min-w-0 flex-col gap-1 ' +\n                  (line.who === 'patient' ? 'items-start' : 'items-end')\n                \"\n              >\n                <span\n                  [class]=\"\n                    'inline-flex items-center gap-2 text-xs font-medium leading-none ' +\n                    (line.who === 'ai'\n                      ? 'text-blue-600'\n                      : line.who === 'staff'\n                        ? 'text-violet-700'\n                        : 'text-zinc-500')\n                  \"\n                >\n                  {{ roleLabel(line.who) }}\n                  <span class=\"font-mono text-xs font-normal leading-none text-zinc-400\">{{ formatTime(line.startSec) }}</span>\n                </span>\n                <div\n                  [class]=\"\n                    'rounded-xl border px-4 py-2 ' +\n                    (line.who === 'patient'\n                      ? 'rounded-tl rounded-tr-xl rounded-br-xl rounded-bl-xl border-zinc-200 bg-white'\n                      : line.who === 'staff'\n                        ? 'rounded-tl-xl rounded-tr rounded-br-xl rounded-bl-xl border-violet-200 bg-violet-50'\n                        : 'rounded-tl-xl rounded-tr rounded-br-xl rounded-bl-xl border-blue-200 bg-blue-50') +\n                    (line.index === activeIndex() ? ' ring-2 ring-blue-200' : '')\n                  \"\n                >\n                  <p\n                    [class]=\"\n                      'm-0 text-sm leading-snug ' +\n                      (line.who === 'staff' ? 'text-violet-900' : 'text-zinc-900')\n                    \"\n                  >{{ line.text }}</p>\n                </div>\n              </div>\n            </article>\n          }\n        } @empty {\n          <p class=\"fs-sm text-light py-3 text-zinc-500\">No transcript available for this call.</p>\n        }\n      </div>\n    </section>\n\n    <aside class=\"rounded-lg border border-base bg-white p-4 shadow-sm\" aria-labelledby=\"call-goal-timeline-title\">\n      <header class=\"mb-3 flex items-center justify-between gap-3\">\n        <h2 id=\"call-goal-timeline-title\" class=\"m-0\">Goal Timeline</h2>\n        <span class=\"fs-sm text-light\">{{ tools().length }}</span>\n      </header>\n\n      <ul class=\"flex max-h-[62vh] list-none flex-col gap-3 overflow-y-auto p-0\">\n        @for (tool of tools(); track toolTrackKey(tool, $index)) {\n          <li\n            [class]=\"\n              'grid grid-cols-[auto_1fr_auto] items-start gap-3 rounded-md border-l-4 bg-zinc-50 p-3 ' +\n              (tool.state === 'ok'\n                ? 'border-l-green-500'\n                : tool.state === 'warn'\n                  ? 'border-l-amber-500'\n                  : tool.state === 'error'\n                    ? 'border-l-red-500'\n                    : tool.state === 'active'\n                      ? 'border-l-blue-600'\n                      : 'border-l-zinc-400')\n            \"\n          >\n            <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light whitespace-nowrap text-zinc-500\">{{ tool.t }}</span>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <span class=\"fs-sm font-semibold text-dark\">{{ tool.name }}</span>\n              <span class=\"fs-sm text-light\">{{ tool.result }}</span>\n            </div>\n            <ed-badge-2 [attr.variant]=\"toolTone(tool.state)\">{{ tool.state }}</ed-badge-2>\n          </li>\n        } @empty {\n          <li class=\"fs-sm text-light py-3 text-zinc-500\">No goal activity recorded.</li>\n        }\n      </ul>\n    </aside>\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: CallRecordingPlayerComponent, selector: "eds-call-recording-player", inputs: ["callId"], outputs: ["currentTimeChange", "durationChange"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CallConversationPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-call-conversation-panel', imports: [
+                        DatePipe,
+                        CallRecordingPlayerComponent,
+                        IconComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"flex flex-col gap-4\">\n  <div class=\"grid grid-cols-1 items-stretch gap-4 lg:grid-cols-2\">\n    <section class=\"rounded-lg border border-base bg-white p-4 shadow-sm\">\n      <div class=\"flex items-center justify-between gap-3\">\n        <button type=\"button\" class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left\" (click)=\"toggleSummary()\">\n          <ed-icon [name]=\"summaryExpanded() ? 'expand_less' : 'expand_more'\" [size]=\"20\" />\n          <h2 class=\"m-0\">Call summary</h2>\n        </button>\n        @if (allowRegenerate()) {\n          <button\n            type=\"button\"\n            class=\"btn is-secondary is-sm inline-flex items-center gap-2xs\"\n            [disabled]=\"regenerating()\"\n            (click)=\"regenerateSummary()\"\n          >\n            <ed-icon name=\"refresh\" [size]=\"18\" />\n            {{ regenerating() ? 'Regenerating\u2026' : 'Regenerate' }}\n          </button>\n        }\n      </div>\n      @if (summaryExpanded() || displaySummary().length < 180) {\n        <p class=\"fs-base text-dark mt-3 leading-relaxed\">{{ displaySummary() }}</p>\n      } @else {\n        <p class=\"fs-base text-dark mt-3 line-clamp-2 leading-relaxed\">\n          {{ displaySummary() }}\n        </p>\n        <button\n          type=\"button\"\n          class=\"cursor-pointer border-none bg-transparent px-0 pt-1 text-sm text-blue-600\"\n          (click)=\"toggleSummary()\"\n        >\n          Read full summary\n        </button>\n      }\n      @if (summaryMeta(); as meta) {\n        <p class=\"fs-sm text-light mt-3 flex flex-wrap gap-3 text-zinc-500\">\n          @if (meta.model) {\n            <span>Model: {{ meta.model }}</span>\n          }\n          @if (meta.generatedAt) {\n            <span>Generated {{ meta.generatedAt | date: 'medium' }}</span>\n          }\n          @if (meta.turnCount != null) {\n            <span>{{ meta.turnCount }} transcript turns</span>\n          }\n        </p>\n      }\n    </section>\n    <ng-content select=\"[summary-side]\" />\n  </div>\n\n  <section class=\"rounded-lg border border-base bg-white overflow-hidden bg-white p-0 shadow-sm\">\n    <eds-call-recording-player\n      [callId]=\"callId()\"\n      (currentTimeChange)=\"onPlaybackTime($event)\"\n      (durationChange)=\"onPlaybackDuration($event)\"\n    />\n  </section>\n\n  <div class=\"grid grid-cols-1 items-start gap-4 lg:grid-cols-[1fr_300px]\">\n    <section class=\"rounded-lg border border-base bg-white p-4 shadow-sm\" aria-labelledby=\"call-transcript-title\">\n      <header class=\"mb-3 flex items-center justify-between gap-3\">\n        <h2 id=\"call-transcript-title\" class=\"m-0\">Transcript</h2>\n        @if (playbackDuration() > 0) {\n          <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light text-zinc-500\">\n            {{ formatTime(currentTime()) }} / {{ formatTime(playbackDuration()) }}\n          </span>\n        }\n      </header>\n\n      <div #scrollHost class=\"flex max-h-[62vh] flex-col gap-3 overflow-y-auto rounded-xl border border-zinc-200 bg-zinc-50 p-3\" role=\"log\">\n        @for (line of timedLines(); track line.index) {\n          @if (line.who === 'system') {\n            <div\n              [class]=\"\n                'inline-flex max-w-[90%] items-center gap-2 self-center rounded-full bg-zinc-100 px-3 py-2 text-xs leading-snug text-zinc-500' +\n                (line.index === activeIndex() ? ' outline outline-2 outline-blue-200' : '')\n              \"\n              [attr.data-line-index]=\"line.index\"\n            >\n              <ed-icon name=\"info\" [size]=\"14\" />\n              <span>{{ line.text }}</span>\n            </div>\n          } @else {\n            <article\n              [class]=\"\n                'flex max-w-[72%] cursor-pointer gap-3 border-none bg-transparent p-0 text-left max-lg:max-w-[92%] ' +\n                (line.who === 'patient' ? 'mr-auto self-start' : 'ml-auto flex-row-reverse self-end')\n              \"\n              [attr.data-line-index]=\"line.index\"\n              [attr.data-who]=\"line.who\"\n              tabindex=\"0\"\n              role=\"button\"\n              [attr.aria-current]=\"line.index === activeIndex() ? 'true' : null\"\n              (click)=\"seekLine(line)\"\n              (keyup.enter)=\"seekLine(line)\"\n            >\n              <div\n                [class]=\"\n                  'flex h-8 w-8 shrink-0 items-center justify-center rounded-full ' +\n                  (line.who === 'ai'\n                    ? 'bg-gradient-to-br from-blue-600 to-violet-500 text-white'\n                    : line.who === 'staff'\n                      ? 'border border-violet-200 bg-violet-50 text-violet-700'\n                      : 'bg-zinc-200 text-zinc-600')\n                \"\n              >\n                <ed-icon [name]=\"speakerIcon(line.who)\" [size]=\"16\" />\n              </div>\n              <div\n                [class]=\"\n                  'flex min-w-0 flex-col gap-1 ' +\n                  (line.who === 'patient' ? 'items-start' : 'items-end')\n                \"\n              >\n                <span\n                  [class]=\"\n                    'inline-flex items-center gap-2 text-xs font-medium leading-none ' +\n                    (line.who === 'ai'\n                      ? 'text-blue-600'\n                      : line.who === 'staff'\n                        ? 'text-violet-700'\n                        : 'text-zinc-500')\n                  \"\n                >\n                  {{ roleLabel(line.who) }}\n                  <span class=\"font-mono text-xs font-normal leading-none text-zinc-400\">{{ formatTime(line.startSec) }}</span>\n                </span>\n                <div\n                  [class]=\"\n                    'rounded-xl border px-4 py-2 ' +\n                    (line.who === 'patient'\n                      ? 'rounded-tl rounded-tr-xl rounded-br-xl rounded-bl-xl border-zinc-200 bg-white'\n                      : line.who === 'staff'\n                        ? 'rounded-tl-xl rounded-tr rounded-br-xl rounded-bl-xl border-violet-200 bg-violet-50'\n                        : 'rounded-tl-xl rounded-tr rounded-br-xl rounded-bl-xl border-blue-200 bg-blue-50') +\n                    (line.index === activeIndex() ? ' ring-2 ring-blue-200' : '')\n                  \"\n                >\n                  <p\n                    [class]=\"\n                      'm-0 text-sm leading-snug ' +\n                      (line.who === 'staff' ? 'text-violet-900' : 'text-zinc-900')\n                    \"\n                  >{{ line.text }}</p>\n                </div>\n              </div>\n            </article>\n          }\n        } @empty {\n          <p class=\"fs-sm text-light py-3 text-zinc-500\">No transcript available for this call.</p>\n        }\n      </div>\n    </section>\n\n    <aside class=\"rounded-lg border border-base bg-white p-4 shadow-sm\" aria-labelledby=\"call-goal-timeline-title\">\n      <header class=\"mb-3 flex items-center justify-between gap-3\">\n        <h2 id=\"call-goal-timeline-title\" class=\"m-0\">Goal Timeline</h2>\n        <span class=\"fs-sm text-light\">{{ tools().length }}</span>\n      </header>\n\n      <ul class=\"flex max-h-[62vh] list-none flex-col gap-3 overflow-y-auto p-0\">\n        @for (tool of tools(); track toolTrackKey(tool, $index)) {\n          <li\n            [class]=\"\n              'grid grid-cols-[auto_1fr_auto] items-start gap-3 rounded-md border-l-4 bg-zinc-50 p-3 ' +\n              (tool.state === 'ok'\n                ? 'border-l-green-500'\n                : tool.state === 'warn'\n                  ? 'border-l-amber-500'\n                  : tool.state === 'error'\n                    ? 'border-l-red-500'\n                    : tool.state === 'active'\n                      ? 'border-l-blue-600'\n                      : 'border-l-zinc-400')\n            \"\n          >\n            <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light whitespace-nowrap text-zinc-500\">{{ tool.t }}</span>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <span class=\"fs-sm font-semibold text-dark\">{{ tool.name }}</span>\n              <span class=\"fs-sm text-light\">{{ tool.result }}</span>\n            </div>\n            <ed-badge-2 [attr.variant]=\"toolTone(tool.state)\">{{ tool.state }}</ed-badge-2>\n          </li>\n        } @empty {\n          <li class=\"fs-sm text-light py-3 text-zinc-500\">No goal activity recorded.</li>\n        }\n      </ul>\n    </aside>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+const PREVIEW_LIMIT = 4;
+class CallTasksPanelComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.callId = input.required();
+        this.compact = input(false);
+        this.activities = signal([]);
+        this.total = signal(0);
+        this.loading = signal(true);
+        this.previewLimit = PREVIEW_LIMIT;
+        this.activityTypeLabel = activityTypeLabel;
+        this.previewActivities = computed(() => this.activities().slice(0, PREVIEW_LIMIT));
+    }
+    ngOnInit() {
+        this.api
+            .getActivities({
+            callId: this.callId(),
+            page: 1,
+            limit: 50,
+        })
+            .subscribe({
+            next: ({ items, total }) => {
+                this.activities.set(items);
+                this.total.set(total);
+                this.loading.set(false);
+            },
+            error: () => this.loading.set(false),
+        });
+    }
+    activitySubline(item) {
+        const bits = [
+            item.patientName,
+            item.visitType,
+            item.providerName,
+        ].filter(Boolean);
+        return bits.join(' · ') || item.detail || '—';
+    }
+    activityTone(type) {
+        switch (type) {
+            case 'appointment_booked':
+                return 'primary';
+            case 'patient_created':
+                return 'success';
+            case 'task_created':
+                return 'warning';
+            default:
+                return 'light';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CallTasksPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CallTasksPanelComponent, isStandalone: true, selector: "eds-call-tasks-panel", inputs: { callId: { classPropertyName: "callId", publicName: "callId", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"call-tasks rounded-lg border border-base bg-white px-5 py-4 mt-5 shadow-sm\" [class.call-tasks--compact]=\"compact()\">\n  <header class=\"mb-4 flex items-center justify-between gap-3\">\n    <h2>Activities from this call</h2>\n    <a\n      routerLink=\"../activities\"\n      [queryParams]=\"{ callId: callId() }\"\n      class=\"call-tasks__all-link fs-sm text-light\"\n    >\n      View all Activities\n    </a>\n  </header>\n\n  @if (loading()) {\n    <p class=\"fs-sm text-light call-tasks__empty\">Loading activities\u2026</p>\n  } @else if (activities().length === 0) {\n    <p class=\"fs-sm text-light call-tasks__empty\">No activities linked to this call.</p>\n  } @else {\n    <ul class=\"call-tasks__list overflow-hidden rounded-lg border border-base\">\n      @for (item of previewActivities(); track item.id) {\n        <li class=\"call-tasks__item border-b border-base last:border-b-0\">\n          <div class=\"call-tasks__row grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-none bg-transparent px-4 py-3 text-left font-[inherit]\">\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <span class=\"call-tasks__title min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold\">{{ item.title || activityTypeLabel(item.type) }}</span>\n              <span class=\"call-tasks__sub overflow-hidden text-ellipsis whitespace-nowrap text-xs\">{{ activitySubline(item) }}</span>\n            </div>\n            <ed-badge-2 [attr.variant]=\"activityTone(item.type)\">{{ activityTypeLabel(item.type) }}</ed-badge-2>\n          </div>\n        </li>\n      }\n    </ul>\n    @if (total() > previewLimit) {\n      <p class=\"call-tasks__more fs-sm text-light mt-3\">\n        +{{ total() - previewLimit }} more \u2014\n        <a routerLink=\"../activities\" [queryParams]=\"{ callId: callId() }\" class=\"call-tasks__all-link\">\n          View all Activities\n        </a>\n      </p>\n    }\n  }\n</section>\n", styles: [".call-tasks--compact{margin-top:0;height:100%}.call-tasks__head .eds-h2{margin:0}.call-tasks__all-link{color:var(--eds-text-brand, #2162f0);text-decoration:none;font-weight:500}.call-tasks__all-link:hover{text-decoration:underline}.call-tasks__empty{margin:0;color:var(--eds-text-secondary, #53575c)}.call-tasks__list{list-style:none;margin:0;padding:0}.call-tasks__row--static{cursor:default}.call-tasks__title{color:var(--eds-text-primary, #41464c)}.call-tasks__sub,.call-tasks__more{color:var(--eds-text-secondary, #53575c)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CallTasksPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-call-tasks-panel', imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<section class=\"call-tasks rounded-lg border border-base bg-white px-5 py-4 mt-5 shadow-sm\" [class.call-tasks--compact]=\"compact()\">\n  <header class=\"mb-4 flex items-center justify-between gap-3\">\n    <h2>Activities from this call</h2>\n    <a\n      routerLink=\"../activities\"\n      [queryParams]=\"{ callId: callId() }\"\n      class=\"call-tasks__all-link fs-sm text-light\"\n    >\n      View all Activities\n    </a>\n  </header>\n\n  @if (loading()) {\n    <p class=\"fs-sm text-light call-tasks__empty\">Loading activities\u2026</p>\n  } @else if (activities().length === 0) {\n    <p class=\"fs-sm text-light call-tasks__empty\">No activities linked to this call.</p>\n  } @else {\n    <ul class=\"call-tasks__list overflow-hidden rounded-lg border border-base\">\n      @for (item of previewActivities(); track item.id) {\n        <li class=\"call-tasks__item border-b border-base last:border-b-0\">\n          <div class=\"call-tasks__row grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-none bg-transparent px-4 py-3 text-left font-[inherit]\">\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <span class=\"call-tasks__title min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold\">{{ item.title || activityTypeLabel(item.type) }}</span>\n              <span class=\"call-tasks__sub overflow-hidden text-ellipsis whitespace-nowrap text-xs\">{{ activitySubline(item) }}</span>\n            </div>\n            <ed-badge-2 [attr.variant]=\"activityTone(item.type)\">{{ activityTypeLabel(item.type) }}</ed-badge-2>\n          </div>\n        </li>\n      }\n    </ul>\n    @if (total() > previewLimit) {\n      <p class=\"call-tasks__more fs-sm text-light mt-3\">\n        +{{ total() - previewLimit }} more \u2014\n        <a routerLink=\"../activities\" [queryParams]=\"{ callId: callId() }\" class=\"call-tasks__all-link\">\n          View all Activities\n        </a>\n      </p>\n    }\n  }\n</section>\n", styles: [".call-tasks--compact{margin-top:0;height:100%}.call-tasks__head .eds-h2{margin:0}.call-tasks__all-link{color:var(--eds-text-brand, #2162f0);text-decoration:none;font-weight:500}.call-tasks__all-link:hover{text-decoration:underline}.call-tasks__empty{margin:0;color:var(--eds-text-secondary, #53575c)}.call-tasks__list{list-style:none;margin:0;padding:0}.call-tasks__row--static{cursor:default}.call-tasks__title{color:var(--eds-text-primary, #41464c)}.call-tasks__sub,.call-tasks__more{color:var(--eds-text-secondary, #53575c)}\n"] }]
+        }] });
+
+/** Known history outcomes from GET /calls/history (HistoryCallDto.outcome). */
+const HISTORY_OUTCOMES = [
+    'completed',
+    'failed',
+    'transferred',
+    'escalated',
+];
+function normalizeHistoryOutcome(outcome) {
+    const key = outcome.trim().toLowerCase();
+    if (HISTORY_OUTCOMES.includes(key)) {
+        return key;
+    }
+    return 'custom';
+}
+/** Badge tone for history table / detail — separate from lifecycle or live UI status. */
+function outcomeBadgeTone(outcome) {
+    switch (normalizeHistoryOutcome(outcome)) {
+        case 'completed':
+            return 'success';
+        case 'failed':
+            return 'danger';
+        case 'transferred':
+            return 'opened';
+        case 'escalated':
+            return 'danger';
+        default: {
+            const key = outcome.trim().toLowerCase();
+            if (key.includes('transfer'))
+                return 'opened';
+            if (key.includes('fail') || key.includes('escalat') || key.includes('abandon'))
+                return 'danger';
+            if (key.includes('voicemail'))
+                return 'light';
+            if (key.includes('complete') || key.includes('book') || key.includes('task'))
+                return 'success';
+            return 'primary';
+        }
+    }
+}
+function formatOutcomeLabel(outcome) {
+    const trimmed = outcome.trim();
+    if (!trimmed)
+        return 'Unknown';
+    const known = normalizeHistoryOutcome(trimmed);
+    if (known === 'custom')
+        return trimmed;
+    return known.charAt(0).toUpperCase() + known.slice(1);
+}
+
+class CallHistoryDetailPageComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.reviewService = inject(CallReviewService);
+        this.toast = inject(ToastService);
+        this.route = inject(ActivatedRoute);
+        this.config = inject(VOICE_RECEPTIONIST_CONFIG);
+        /** Standalone dashboard only — hidden in EHR embed. */
+        this.showApiLogs = !!this.config.showModuleNav;
+        /** Parent shell route — back targets sibling `history`, not `history/history`. */
+        this.historyListLink = ['history'];
+        this.historyListRelativeTo = this.route.parent;
+        this.detail = signal(null);
+        this.loading = signal(true);
+        this.markingReview = signal(false);
+        this.isNeedsReview = isNeedsReview;
+        this.outcomeTone = outcomeBadgeTone;
+        this.outcomeLabel = formatOutcomeLabel;
+    }
+    isUnknownName(name) {
+        return isUnknownCaller(name);
+    }
+    ngOnInit() {
+        const id = this.route.snapshot.paramMap.get('id') ?? '';
+        this.api.getCallDetail(id).subscribe(({ data }) => {
+            this.detail.set(data);
+            this.loading.set(false);
+        });
+    }
+    markReviewed() {
+        const d = this.detail();
+        if (!d || !isNeedsReview(d.review) || this.markingReview())
+            return;
+        this.markingReview.set(true);
+        const prev = d.review;
+        this.detail.update((current) => current ? { ...current, review: 'reviewed' } : current);
+        this.reviewService.markReviewed(d.id).subscribe({
+            next: () => {
+                this.markingReview.set(false);
+                this.toast.show('Call marked as reviewed', 'success');
+            },
+            error: () => {
+                this.markingReview.set(false);
+                this.detail.update((current) => current ? { ...current, review: prev } : current);
+                this.toast.show('Failed to mark call as reviewed', 'error');
+            },
+        });
+    }
+    refreshCallDetail() {
+        const id = this.detail()?.id;
+        if (!id)
+            return;
+        this.api.getCallDetail(id).subscribe(({ data }) => {
+            if (data)
+                this.detail.set(data);
+        });
+    }
+    formatDuration(sec) {
+        const m = Math.floor(sec / 60);
+        const s = sec % 60;
+        return `${m}:${s.toString().padStart(2, '0')}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CallHistoryDetailPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CallHistoryDetailPageComponent, isStandalone: true, selector: "eds-call-history-detail-page", ngImport: i0, template: "<div class=\"p-md bg-lighter min-h-full call-history-detail-page\">\n  <a\n    class=\"call-history-detail-page__back fs-sm text-light mb-4 inline-flex items-center gap-1 no-underline\"\n    [routerLink]=\"historyListLink\"\n    [relativeTo]=\"historyListRelativeTo\"\n  >\n    <ed-icon name=\"arrow_back\" [size]=\"18\" /> Back to history\n  </a>\n\n  @if (loading()) {\n    <p class=\"fs-sm text-light\">Loading call detail\u2026</p>\n  } @else if (detail()) {\n    <header class=\"mb-4 flex flex-wrap items-start justify-between gap-4\">\n      <div>\n        <h4>{{ detail()!.name }}</h4>\n        <p class=\"fs-sm text-light\">{{ detail()!.phone }} \u00B7 {{ detail()!.reason }}</p>\n      </div>\n      @if (isNeedsReview(detail()!.review)) {\n        <button\n          type=\"button\"\n          class=\"btn is-primary is-sm inline-flex items-center gap-2xs\"\n          [disabled]=\"markingReview()\"\n          (click)=\"markReviewed()\"\n        >\n          <ed-icon name=\"check_circle\" [size]=\"18\" />\n          {{ markingReview() ? 'Saving\u2026' : 'Mark as reviewed' }}\n        </button>\n      }\n    </header>\n\n    <dl class=\"call-history-detail-page__meta mx-0 mt-0 mb-5 grid grid-cols-2 gap-4 sm:grid-cols-2\">\n      <div><dt class=\"fs-sm font-semibold text-light\">Outcome</dt><dd>\n        <ed-badge-2 [attr.variant]=\"outcomeTone(detail()!.outcome)\">\n          {{ outcomeLabel(detail()!.outcome) }}\n        </ed-badge-2>\n      </dd></div>\n      <div><dt class=\"fs-sm font-semibold text-light\">Duration</dt><dd>{{ detail()!.durationLabel ?? formatDuration(detail()!.duration) }}</dd></div>\n    </dl>\n\n    <eds-call-conversation-panel\n      [callId]=\"detail()!.id\"\n      [summary]=\"detail()!.summary\"\n      [transcript]=\"detail()!.transcript\"\n      [tools]=\"detail()!.tools\"\n      [callDurationSec]=\"detail()!.duration\"\n      [callerName]=\"detail()!.name\"\n      [callerMatched]=\"!isUnknownName(detail()!.name)\"\n      (summaryRegenerated)=\"refreshCallDetail()\"\n    >\n      <eds-call-tasks-panel\n        summary-side\n        [callId]=\"detail()!.id\"\n        [compact]=\"true\"\n      />\n    </eds-call-conversation-panel>\n\n    @if (showApiLogs) {\n      <section class=\"mt-5\">\n        <h2 class=\"mb-3\">API Logs</h2>\n        <eds-api-logs-call-panel [callId]=\"detail()!.id\" />\n      </section>\n    }\n  } @else {\n    <p class=\"fs-sm text-light\">Call not found.</p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.call-history-detail-page__back{color:var(--eds-text-secondary)}.call-history-detail-page__badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.call-history-detail-page__meta dd{margin:4px 0 0;font-size:14px}.call-history-detail-page__tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--eds-border-default)}.call-history-detail-page__tab{padding:10px 16px;border:none;background:none;font-size:14px;font-weight:500;color:var(--eds-text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}.call-history-detail-page__tab--active{color:var(--eds-text-brand);border-bottom-color:var(--eds-brand-500)}.call-history-detail-page__panel{padding:20px}@media(max-width:800px){.call-history-detail-page__meta{grid-template-columns:repeat(2,1fr)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: CallConversationPanelComponent, selector: "eds-call-conversation-panel", inputs: ["callId", "summary", "transcript", "tools", "callDurationSec", "allowRegenerate", "callerName", "callerMatched"], outputs: ["summaryRegenerated"] }, { kind: "component", type: CallTasksPanelComponent, selector: "eds-call-tasks-panel", inputs: ["callId", "compact"] }, { kind: "component", type: ApiLogsCallPanelComponent, selector: "eds-api-logs-call-panel", inputs: ["callId", "live", "dark"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CallHistoryDetailPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-call-history-detail-page', imports: [
+                        RouterLink,
+                        IconComponent,
+                        CallConversationPanelComponent,
+                        CallTasksPanelComponent,
+                        ApiLogsCallPanelComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"p-md bg-lighter min-h-full call-history-detail-page\">\n  <a\n    class=\"call-history-detail-page__back fs-sm text-light mb-4 inline-flex items-center gap-1 no-underline\"\n    [routerLink]=\"historyListLink\"\n    [relativeTo]=\"historyListRelativeTo\"\n  >\n    <ed-icon name=\"arrow_back\" [size]=\"18\" /> Back to history\n  </a>\n\n  @if (loading()) {\n    <p class=\"fs-sm text-light\">Loading call detail\u2026</p>\n  } @else if (detail()) {\n    <header class=\"mb-4 flex flex-wrap items-start justify-between gap-4\">\n      <div>\n        <h4>{{ detail()!.name }}</h4>\n        <p class=\"fs-sm text-light\">{{ detail()!.phone }} \u00B7 {{ detail()!.reason }}</p>\n      </div>\n      @if (isNeedsReview(detail()!.review)) {\n        <button\n          type=\"button\"\n          class=\"btn is-primary is-sm inline-flex items-center gap-2xs\"\n          [disabled]=\"markingReview()\"\n          (click)=\"markReviewed()\"\n        >\n          <ed-icon name=\"check_circle\" [size]=\"18\" />\n          {{ markingReview() ? 'Saving\u2026' : 'Mark as reviewed' }}\n        </button>\n      }\n    </header>\n\n    <dl class=\"call-history-detail-page__meta mx-0 mt-0 mb-5 grid grid-cols-2 gap-4 sm:grid-cols-2\">\n      <div><dt class=\"fs-sm font-semibold text-light\">Outcome</dt><dd>\n        <ed-badge-2 [attr.variant]=\"outcomeTone(detail()!.outcome)\">\n          {{ outcomeLabel(detail()!.outcome) }}\n        </ed-badge-2>\n      </dd></div>\n      <div><dt class=\"fs-sm font-semibold text-light\">Duration</dt><dd>{{ detail()!.durationLabel ?? formatDuration(detail()!.duration) }}</dd></div>\n    </dl>\n\n    <eds-call-conversation-panel\n      [callId]=\"detail()!.id\"\n      [summary]=\"detail()!.summary\"\n      [transcript]=\"detail()!.transcript\"\n      [tools]=\"detail()!.tools\"\n      [callDurationSec]=\"detail()!.duration\"\n      [callerName]=\"detail()!.name\"\n      [callerMatched]=\"!isUnknownName(detail()!.name)\"\n      (summaryRegenerated)=\"refreshCallDetail()\"\n    >\n      <eds-call-tasks-panel\n        summary-side\n        [callId]=\"detail()!.id\"\n        [compact]=\"true\"\n      />\n    </eds-call-conversation-panel>\n\n    @if (showApiLogs) {\n      <section class=\"mt-5\">\n        <h2 class=\"mb-3\">API Logs</h2>\n        <eds-api-logs-call-panel [callId]=\"detail()!.id\" />\n      </section>\n    }\n  } @else {\n    <p class=\"fs-sm text-light\">Call not found.</p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.call-history-detail-page__back{color:var(--eds-text-secondary)}.call-history-detail-page__badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.call-history-detail-page__meta dd{margin:4px 0 0;font-size:14px}.call-history-detail-page__tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--eds-border-default)}.call-history-detail-page__tab{padding:10px 16px;border:none;background:none;font-size:14px;font-weight:500;color:var(--eds-text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}.call-history-detail-page__tab--active{color:var(--eds-text-brand);border-bottom-color:var(--eds-brand-500)}.call-history-detail-page__panel{padding:20px}@media(max-width:800px){.call-history-detail-page__meta{grid-template-columns:repeat(2,1fr)}}\n"] }]
+        }] });
+
+export { CallHistoryDetailPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-call-history-detail-page.component-estyUMH9.mjs.map