@memberjunction/ng-core-entity-forms 6.1.0-edge.1 → 6.1.0-edge.3

package/dist/lib/custom/Companies/company-overview.panel.js

@@ -0,0 +1,180 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectionStrategy, inject, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RunView } from '@memberjunction/core';
+import { RegisterClassEx } from '@memberjunction/global';
+import { BaseFormPanel } from '@memberjunction/ng-base-forms';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.ID;
+function CompanyOverviewPanel_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 7);
+    i0.ɵɵtext(1, "No employees assigned directly to this company.");
+    i0.ɵɵdomElementEnd();
+} }
+function CompanyOverviewPanel_Conditional_10_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 9)(1, "span", 10);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span", 13);
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const emp_r1 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", emp_r1.FirstName, " ", emp_r1.LastName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(emp_r1.Title || "Staff");
+} }
+function CompanyOverviewPanel_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, CompanyOverviewPanel_Conditional_10_For_1_Template, 5, 3, "div", 9, _forTrack0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r1.Employees);
+} }
+let CompanyOverviewPanel = class CompanyOverviewPanel extends BaseFormPanel {
+    constructor() {
+        super(...arguments);
+        this.cdr = inject(ChangeDetectorRef);
+        this.Employees = [];
+    }
+    get Company() {
+        return this.Record;
+    }
+    ngOnInit() {
+        this.LoadEmployees();
+    }
+    async LoadEmployees() {
+        if (!this.Record?.ID)
+            return;
+        try {
+            const rv = new RunView();
+            const res = await rv.RunView({
+                EntityName: 'Employees',
+                ExtraFilter: `CompanyID = '${this.Record.ID}'`,
+                Fields: ['ID', 'FirstName', 'LastName', 'Title'],
+                MaxRows: 20,
+                ResultType: 'simple'
+            });
+            if (res.Success && res.Results) {
+                this.Employees = res.Results;
+                this.cdr.markForCheck();
+            }
+        }
+        catch (e) {
+            console.error('Failed to load company employees:', e);
+        }
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵCompanyOverviewPanel_BaseFactory; return function CompanyOverviewPanel_Factory(__ngFactoryType__) { return (ɵCompanyOverviewPanel_BaseFactory || (ɵCompanyOverviewPanel_BaseFactory = i0.ɵɵgetInheritedFactory(CompanyOverviewPanel)))(__ngFactoryType__ || CompanyOverviewPanel); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CompanyOverviewPanel, selectors: [["mj-company-overview-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 34, vars: 4, consts: [[1, "mj-company-overview-grid"], [1, "mj-overview-card"], [1, "mj-card-header"], [1, "mj-card-title"], [1, "fa-solid", "fa-users", 2, "color", "var(--mj-brand-primary, #38bdf8)"], [1, "mj-card-badge"], [1, "mj-card-body"], [2, "font-size", "12px", "color", "var(--mj-text-muted)"], [1, "fa-solid", "fa-building-shield", 2, "color", "#10b981"], [1, "mj-metric-row"], [1, "mj-metric-label"], [1, "mj-metric-val"], [1, "mj-pill", "mj-pill-green"], [1, "mj-pill", "mj-pill-blue"]], template: function CompanyOverviewPanel_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
+            i0.ɵɵdomElement(4, "i", 4);
+            i0.ɵɵtext(5, " Company Team");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(6, "span", 5);
+            i0.ɵɵtext(7);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(8, "div", 6);
+            i0.ɵɵconditionalCreate(9, CompanyOverviewPanel_Conditional_9_Template, 2, 0, "span", 7)(10, CompanyOverviewPanel_Conditional_10_Template, 2, 0);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(11, "div", 1)(12, "div", 2)(13, "div", 3);
+            i0.ɵɵdomElement(14, "i", 8);
+            i0.ɵɵtext(15, " Company Governance");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(16, "span", 5);
+            i0.ɵɵtext(17, "Profile");
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(18, "div", 6)(19, "div", 9)(20, "span", 10);
+            i0.ɵɵtext(21, "Company Name");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(22, "span", 11);
+            i0.ɵɵtext(23);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(24, "div", 9)(25, "span", 10);
+            i0.ɵɵtext(26, "Website");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(27, "span", 11);
+            i0.ɵɵtext(28);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(29, "div", 9)(30, "span", 10);
+            i0.ɵɵtext(31, "Record Type");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(32, "span", 12);
+            i0.ɵɵtext(33, "Corporate Entity");
+            i0.ɵɵdomElementEnd()()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate1("", ctx.Employees.length, " Members");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.Employees.length === 0 ? 9 : 10);
+            i0.ɵɵadvance(14);
+            i0.ɵɵtextInterpolate(ctx.Company == null ? null : ctx.Company.Name);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate((ctx.Company == null ? null : ctx.Company.Website) || "None Listed");
+        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-company-overview-grid[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header[_ngcontent-%COMP%] {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title[_ngcontent-%COMP%] {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge[_ngcontent-%COMP%] {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body[_ngcontent-%COMP%] {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label[_ngcontent-%COMP%] { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val[_ngcontent-%COMP%] { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-pill[_ngcontent-%COMP%] { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green[_ngcontent-%COMP%] { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue[_ngcontent-%COMP%] { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }"], changeDetection: 0 }); }
+};
+CompanyOverviewPanel = __decorate([
+    RegisterClassEx(BaseFormPanel, {
+        key: 'form-panel:Companies:overview',
+        metadata: {
+            entity: 'Companies',
+            slot: 'before-fields',
+            sortKey: 10,
+        },
+    })
+], CompanyOverviewPanel);
+export { CompanyOverviewPanel };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompanyOverviewPanel, [{
+        type: Component,
+        args: [{ selector: 'mj-company-overview-panel', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <div class="mj-company-overview-grid">
+            <!-- Card 1: Team & Staff -->
+            <div class="mj-overview-card">
+                <div class="mj-card-header">
+                    <div class="mj-card-title"><i class="fa-solid fa-users" style="color: var(--mj-brand-primary, #38bdf8);"></i> Company Team</div>
+                    <span class="mj-card-badge">{{ Employees.length }} Members</span>
+                </div>
+                <div class="mj-card-body">
+                    @if (Employees.length === 0) {
+                        <span style="font-size: 12px; color: var(--mj-text-muted);">No employees assigned directly to this company.</span>
+                    } @else {
+                        @for (emp of Employees; track emp.ID) {
+                            <div class="mj-metric-row">
+                                <span class="mj-metric-label">{{ emp.FirstName }} {{ emp.LastName }}</span>
+                                <span class="mj-pill mj-pill-blue">{{ emp.Title || 'Staff' }}</span>
+                            </div>
+                        }
+                    }
+                </div>
+            </div>
+
+            <!-- Card 2: Company Setup & Profile -->
+            <div class="mj-overview-card">
+                <div class="mj-card-header">
+                    <div class="mj-card-title"><i class="fa-solid fa-building-shield" style="color: #10b981;"></i> Company Governance</div>
+                    <span class="mj-card-badge">Profile</span>
+                </div>
+                <div class="mj-card-body">
+                    <div class="mj-metric-row">
+                        <span class="mj-metric-label">Company Name</span>
+                        <span class="mj-metric-val">{{ Company?.Name }}</span>
+                    </div>
+                    <div class="mj-metric-row">
+                        <span class="mj-metric-label">Website</span>
+                        <span class="mj-metric-val">{{ Company?.Website || 'None Listed' }}</span>
+                    </div>
+                    <div class="mj-metric-row">
+                        <span class="mj-metric-label">Record Type</span>
+                        <span class="mj-pill mj-pill-green">Corporate Entity</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `, styles: ["\n        :host { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-company-overview-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-pill { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }\n    "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompanyOverviewPanel, { className: "CompanyOverviewPanel", filePath: "src/lib/custom/Companies/company-overview.panel.ts", lineNumber: 131 }); })();
+//# sourceMappingURL=company-overview.panel.js.map

package/dist/lib/custom/Companies/company-overview.panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-overview.panel.js","sourceRoot":"","sources":["../../../../src/lib/custom/Companies/company-overview.panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ChangeDetectionStrategy, OnInit, inject, ChangeDetectorRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RunView } from '@memberjunction/core';\nimport { RegisterClassEx } from '@memberjunction/global';\nimport { BaseFormPanel } from '@memberjunction/ng-base-forms';\nimport { MJCompanyEntity } from '@memberjunction/core-entities';\n\ninterface EmployeeRow {\n    ID: string;\n    FirstName: string;\n    LastName: string;\n    Title: string;\n}\n\n@RegisterClassEx(BaseFormPanel, {\n    key: 'form-panel:Companies:overview',\n    metadata: {\n        entity: 'Companies',\n        slot: 'before-fields',\n        sortKey: 10,\n    },\n})\n@Component({\n    selector: 'mj-company-overview-panel',\n    standalone: true,\n    imports: [CommonModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        <div class=\"mj-company-overview-grid\">\n            <!-- Card 1: Team & Staff -->\n            <div class=\"mj-overview-card\">\n                <div class=\"mj-card-header\">\n                    <div class=\"mj-card-title\"><i class=\"fa-solid fa-users\" style=\"color: var(--mj-brand-primary, #38bdf8);\"></i> Company Team</div>\n                    <span class=\"mj-card-badge\">{{ Employees.length }} Members</span>\n                </div>\n                <div class=\"mj-card-body\">\n                    @if (Employees.length === 0) {\n                        <span style=\"font-size: 12px; color: var(--mj-text-muted);\">No employees assigned directly to this company.</span>\n                    } @else {\n                        @for (emp of Employees; track emp.ID) {\n                            <div class=\"mj-metric-row\">\n                                <span class=\"mj-metric-label\">{{ emp.FirstName }} {{ emp.LastName }}</span>\n                                <span class=\"mj-pill mj-pill-blue\">{{ emp.Title || 'Staff' }}</span>\n                            </div>\n                        }\n                    }\n                </div>\n            </div>\n\n            <!-- Card 2: Company Setup & Profile -->\n            <div class=\"mj-overview-card\">\n                <div class=\"mj-card-header\">\n                    <div class=\"mj-card-title\"><i class=\"fa-solid fa-building-shield\" style=\"color: #10b981;\"></i> Company Governance</div>\n                    <span class=\"mj-card-badge\">Profile</span>\n                </div>\n                <div class=\"mj-card-body\">\n                    <div class=\"mj-metric-row\">\n                        <span class=\"mj-metric-label\">Company Name</span>\n                        <span class=\"mj-metric-val\">{{ Company?.Name }}</span>\n                    </div>\n                    <div class=\"mj-metric-row\">\n                        <span class=\"mj-metric-label\">Website</span>\n                        <span class=\"mj-metric-val\">{{ Company?.Website || 'None Listed' }}</span>\n                    </div>\n                    <div class=\"mj-metric-row\">\n                        <span class=\"mj-metric-label\">Record Type</span>\n                        <span class=\"mj-pill mj-pill-green\">Corporate Entity</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    `,\n    styles: [`\n        :host { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-company-overview-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-pill { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }\n    `]\n})\nexport class CompanyOverviewPanel extends BaseFormPanel<MJCompanyEntity> implements OnInit {\n    private cdr = inject(ChangeDetectorRef);\n    public Employees: EmployeeRow[] = [];\n\n    public get Company(): MJCompanyEntity | null {\n        return this.Record;\n    }\n\n    public ngOnInit(): void {\n        this.LoadEmployees();\n    }\n\n    private async LoadEmployees(): Promise<void> {\n        if (!this.Record?.ID) return;\n        try {\n            const rv = new RunView();\n            const res = await rv.RunView<EmployeeRow>({\n                EntityName: 'Employees',\n                ExtraFilter: `CompanyID = '${this.Record.ID}'`,\n                Fields: ['ID', 'FirstName', 'LastName', 'Title'],\n                MaxRows: 20,\n                ResultType: 'simple'\n            });\n            if (res.Success && res.Results) {\n                this.Employees = res.Results;\n                this.cdr.markForCheck();\n            }\n        } catch (e) {\n            console.error('Failed to load company employees:', e);\n        }\n    }\n}\n"]}

package/dist/lib/custom/Conversations/conversation-header.panel.d.ts

@@ -0,0 +1,12 @@
+import { BaseFormPanel } from '@memberjunction/ng-base-forms';
+import { MJConversationEntity } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+export declare class ConversationHeaderPanel extends BaseFormPanel<MJConversationEntity> {
+    IsCollapsed: boolean;
+    ngOnInit(): void;
+    get Conversation(): MJConversationEntity | null;
+    ToggleCollapsed(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConversationHeaderPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConversationHeaderPanel, "mj-conversation-header-panel", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=conversation-header.panel.d.ts.map

package/dist/lib/custom/Conversations/conversation-header.panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-header.panel.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Conversations/conversation-header.panel.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAkB,MAAM,+BAA+B,CAAC;;AAIrF,qBAmFa,uBAAwB,SAAQ,aAAa,CAAC,oBAAoB,CAAC;IACrE,WAAW,UAAS;IAEpB,QAAQ,IAAI,IAAI;IAKvB,IAAW,YAAY,IAAI,oBAAoB,GAAG,IAAI,CAErD;IAEM,eAAe,IAAI,IAAI;yCAZrB,uBAAuB;2CAAvB,uBAAuB;CAgBnC"}

package/dist/lib/custom/Conversations/conversation-header.panel.js

@@ -0,0 +1,150 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RegisterClassEx } from '@memberjunction/global';
+import { BaseFormPanel } from '@memberjunction/ng-base-forms';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+function ConversationHeaderPanel_Conditional_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 10)(1, "div", 11)(2, "span", 12);
+    i0.ɵɵtext(3, "Conversation ID");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "span", 13);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(6, "div", 11)(7, "span", 12);
+    i0.ɵɵtext(8, "Status");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(9, "span", 14);
+    i0.ɵɵtext(10, "Active Session");
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.Conversation.ID == null ? null : ctx_r1.Conversation.ID.substring(0, 8));
+} }
+function ConversationHeaderPanel_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
+    i0.ɵɵdomElement(4, "i", 4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "div")(6, "h1", 5);
+    i0.ɵɵtext(7);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "div", 6)(9, "span");
+    i0.ɵɵtext(10);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(11, "span");
+    i0.ɵɵtext(12, "\u2022");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(13, "span");
+    i0.ɵɵtext(14);
+    i0.ɵɵpipe(15, "date");
+    i0.ɵɵdomElementEnd()()()();
+    i0.ɵɵdomElementStart(16, "div", 7)(17, "button", 8);
+    i0.ɵɵdomListener("click", function ConversationHeaderPanel_Conditional_0_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCollapsed()); });
+    i0.ɵɵdomElement(18, "i", 9);
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵconditionalCreate(19, ConversationHeaderPanel_Conditional_0_Conditional_19_Template, 11, 1, "div", 10);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.Conversation.Name || "AI Conversation");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("User: ", ctx_r1.Conversation.User || "User Session");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Created: ", i0.ɵɵpipeBind2(15, 9, ctx_r1.Conversation.CreatedAt, "medium"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵdomProperty("title", ctx_r1.IsCollapsed ? "Expand Header" : "Collapse Header");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-up", !ctx_r1.IsCollapsed)("fa-chevron-down", ctx_r1.IsCollapsed);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.IsCollapsed ? 19 : -1);
+} }
+const SETTING_KEY = 'mj.form.conversations.headerCollapsed';
+let ConversationHeaderPanel = class ConversationHeaderPanel extends BaseFormPanel {
+    constructor() {
+        super(...arguments);
+        this.IsCollapsed = false;
+    }
+    ngOnInit() {
+        const raw = UserInfoEngine.Instance.GetSetting(SETTING_KEY);
+        if (raw)
+            this.IsCollapsed = raw === 'true';
+    }
+    get Conversation() {
+        return this.Record;
+    }
+    ToggleCollapsed() {
+        this.IsCollapsed = !this.IsCollapsed;
+        UserInfoEngine.Instance.SetSettingDebounced(SETTING_KEY, String(this.IsCollapsed));
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵConversationHeaderPanel_BaseFactory; return function ConversationHeaderPanel_Factory(__ngFactoryType__) { return (ɵConversationHeaderPanel_BaseFactory || (ɵConversationHeaderPanel_BaseFactory = i0.ɵɵgetInheritedFactory(ConversationHeaderPanel)))(__ngFactoryType__ || ConversationHeaderPanel); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationHeaderPanel, selectors: [["mj-conversation-header-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[1, "mj-entity-hero-header"], [1, "mj-hero-top"], [1, "mj-hero-identity"], [1, "mj-hero-avatar", 2, "background", "linear-gradient(135deg, #38bdf8, #0284c7)"], [1, "fa-solid", "fa-comments"], [1, "mj-hero-title"], [1, "mj-hero-subline"], [1, "mj-hero-actions"], ["type", "button", 1, "mj-hero-toggle-btn", 3, "click", "title"], [1, "fa-solid"], [1, "mj-hero-metrics-row"], [1, "mj-hero-metric"], [1, "mj-hero-metric-label"], [1, "mj-hero-metric-val"], [1, "mj-hero-metric-val", 2, "color", "#38bdf8"]], template: function ConversationHeaderPanel_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, ConversationHeaderPanel_Conditional_0_Template, 20, 12, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.Conversation ? 0 : -1);
+        } }, dependencies: [CommonModule, i1.DatePipe], styles: ["[_nghost-%COMP%] { display: block; width: 100%; }\n        .mj-entity-hero-header[_ngcontent-%COMP%] {\n            background: linear-gradient(180deg, var(--mj-bg-surface, #111a2e) 0%, var(--mj-bg-surface-card, #141f36) 100%);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            padding: 16px 24px;\n        }\n        .mj-hero-top[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n        .mj-hero-identity[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 14px; }\n        .mj-hero-avatar[_ngcontent-%COMP%] {\n            width: 44px; height: 44px; border-radius: 10px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 18px; color: #fff; flex-shrink: 0;\n        }\n        .mj-hero-title[_ngcontent-%COMP%] { font-size: 18px; font-weight: 800; color: var(--mj-text-primary, #f8fafc); }\n        .mj-hero-subline[_ngcontent-%COMP%] { font-size: 12.5px; color: var(--mj-text-secondary, #94a3b8); margin-top: 2px; display: flex; gap: 8px; align-items: center; }\n        .mj-hero-toggle-btn[_ngcontent-%COMP%] {\n            background: none; border: 1px solid var(--mj-border-default, #223254);\n            color: var(--mj-text-muted, #64748b); border-radius: 6px;\n            padding: 6px 10px; cursor: pointer;\n        }\n        .mj-hero-metrics-row[_ngcontent-%COMP%] {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 12px; margin-top: 14px; padding-top: 12px;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n        }\n        .mj-hero-metric[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; }\n        .mj-hero-metric-label[_ngcontent-%COMP%] { font-size: 10.5px; font-weight: 700; color: var(--mj-text-muted, #64748b); text-transform: uppercase; }\n        .mj-hero-metric-val[_ngcontent-%COMP%] { font-size: 14px; font-weight: 700; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }"], changeDetection: 0 }); }
+};
+ConversationHeaderPanel = __decorate([
+    RegisterClassEx(BaseFormPanel, {
+        key: 'form-panel:Conversations:header',
+        metadata: {
+            entity: 'Conversations',
+            slot: 'header',
+            sortKey: 10,
+        },
+    })
+], ConversationHeaderPanel);
+export { ConversationHeaderPanel };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationHeaderPanel, [{
+        type: Component,
+        args: [{ selector: 'mj-conversation-header-panel', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        @if (Conversation) {
+            <div class="mj-entity-hero-header">
+                <div class="mj-hero-top">
+                    <div class="mj-hero-identity">
+                        <div class="mj-hero-avatar" style="background: linear-gradient(135deg, #38bdf8, #0284c7);">
+                            <i class="fa-solid fa-comments"></i>
+                        </div>
+                        <div>
+                            <h1 class="mj-hero-title">{{ Conversation.Name || 'AI Conversation' }}</h1>
+                            <div class="mj-hero-subline">
+                                <span>User: {{ Conversation.User || 'User Session' }}</span>
+                                <span>•</span>
+                                <span>Created: {{ Conversation.CreatedAt | date:'medium' }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mj-hero-actions">
+                        <button type="button" class="mj-hero-toggle-btn" (click)="ToggleCollapsed()" [title]="IsCollapsed ? 'Expand Header' : 'Collapse Header'">
+                            <i class="fa-solid" [class.fa-chevron-up]="!IsCollapsed" [class.fa-chevron-down]="IsCollapsed"></i>
+                        </button>
+                    </div>
+                </div>
+
+                @if (!IsCollapsed) {
+                    <div class="mj-hero-metrics-row">
+                        <div class="mj-hero-metric">
+                            <span class="mj-hero-metric-label">Conversation ID</span>
+                            <span class="mj-hero-metric-val">{{ Conversation.ID?.substring(0, 8) }}</span>
+                        </div>
+                        <div class="mj-hero-metric">
+                            <span class="mj-hero-metric-label">Status</span>
+                            <span class="mj-hero-metric-val" style="color: #38bdf8;">Active Session</span>
+                        </div>
+                    </div>
+                }
+            </div>
+        }
+    `, styles: ["\n        :host { display: block; width: 100%; }\n        .mj-entity-hero-header {\n            background: linear-gradient(180deg, var(--mj-bg-surface, #111a2e) 0%, var(--mj-bg-surface-card, #141f36) 100%);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            padding: 16px 24px;\n        }\n        .mj-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n        .mj-hero-identity { display: flex; align-items: center; gap: 14px; }\n        .mj-hero-avatar {\n            width: 44px; height: 44px; border-radius: 10px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 18px; color: #fff; flex-shrink: 0;\n        }\n        .mj-hero-title { font-size: 18px; font-weight: 800; color: var(--mj-text-primary, #f8fafc); }\n        .mj-hero-subline { font-size: 12.5px; color: var(--mj-text-secondary, #94a3b8); margin-top: 2px; display: flex; gap: 8px; align-items: center; }\n        .mj-hero-toggle-btn {\n            background: none; border: 1px solid var(--mj-border-default, #223254);\n            color: var(--mj-text-muted, #64748b); border-radius: 6px;\n            padding: 6px 10px; cursor: pointer;\n        }\n        .mj-hero-metrics-row {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 12px; margin-top: 14px; padding-top: 12px;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n        }\n        .mj-hero-metric { display: flex; flex-direction: column; gap: 2px; }\n        .mj-hero-metric-label { font-size: 10.5px; font-weight: 700; color: var(--mj-text-muted, #64748b); text-transform: uppercase; }\n        .mj-hero-metric-val { font-size: 14px; font-weight: 700; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n    "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationHeaderPanel, { className: "ConversationHeaderPanel", filePath: "src/lib/custom/Conversations/conversation-header.panel.ts", lineNumber: 92 }); })();
+//# sourceMappingURL=conversation-header.panel.js.map

package/dist/lib/custom/Conversations/conversation-header.panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-header.panel.js","sourceRoot":"","sources":["../../../../src/lib/custom/Conversations/conversation-header.panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAwB,cAAc,EAAE,MAAM,+BAA+B,CAAC;;;;IA4CzD,AADJ,AADJ,kCAAiC,cACD,eACW;IAAA,+BAAe;IAAA,oBAAO;IACzD,mCAAiC;IAAA,YAAsC;IAC3E,AAD2E,oBAAO,EAC5E;IAEF,AADJ,kCAA4B,eACW;IAAA,sBAAM;IAAA,oBAAO;IAChD,mCAAyD;IAAA,+BAAc;IAE/E,AADI,AAD2E,oBAAO,EAC5E,EACJ;;;IANmC,eAAsC;IAAtC,oGAAsC;;;;IAvB3E,AADJ,AADJ,AADJ,iCAAmC,aACN,aACS,aACiE;IACvF,0BAAoC;IACxC,oBAAM;IAEF,AADJ,8BAAK,YACyB;IAAA,YAA4C;IAAA,oBAAK;IAEvE,AADJ,iCAA6B,WACnB;IAAA,aAA+C;IAAA,oBAAO;IAC5D,gCAAM;IAAA,uBAAC;IAAA,oBAAO;IACd,gCAAM;IAAA,aAAqD;;IAGvE,AADI,AADI,AAD+D,oBAAO,EAChE,EACJ,EACJ;IAEF,AADJ,kCAA6B,iBACgH;IAAxF,+LAAS,wBAAiB,KAAC;IACxE,2BAAmG;IAG/G,AADI,AADI,oBAAS,EACP,EACJ;IAEN,2GAAoB;IAYxB,oBAAM;;;IA3BoC,eAA4C;IAA5C,mEAA4C;IAE5D,eAA+C;IAA/C,2EAA+C;IAE/C,eAAqD;IAArD,kGAAqD;IAKU,eAA2D;IAA3D,mFAA2D;IAChH,cAAoC;IAAC,AAArC,oDAAoC,uCAAsC;IAK1G,cAWC;IAXD,+CAWC;;AAlDjB,MAAM,WAAW,GAAG,uCAAuC,CAAC;AAqFrD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,aAAmC;IAAzE;;QACI,gBAAW,GAAG,KAAK,CAAC;KAe9B;IAbU,QAAQ;QACX,MAAM,GAAG,GAAG,cAAc,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAC5D,IAAI,GAAG;YAAE,IAAI,CAAC,WAAW,GAAG,GAAG,KAAK,MAAM,CAAC;IAC/C,CAAC;IAED,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAEM,eAAe;QAClB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;QACrC,cAAc,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IACvF,CAAC;gRAfQ,uBAAuB,yBAAvB,uBAAuB;oEAAvB,uBAAuB;YArE5B,2FAAoB;;YAApB,2CAoCC;4BAvCK,YAAY;;AAwEb,uBAAuB;IAnFnC,eAAe,CAAC,aAAa,EAAE;QAC5B,GAAG,EAAE,iCAAiC;QACtC,QAAQ,EAAE;YACN,MAAM,EAAE,eAAe;YACvB,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,EAAE;SACd;KACJ,CAAC;GA4EW,uBAAuB,CAgBnC;;iFAhBY,uBAAuB;cA3EnC,SAAS;2BACI,8BAA8B,cAC5B,IAAI,WACP,CAAC,YAAY,CAAC,mBACN,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT;;kFAgCQ,uBAAuB","sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RegisterClassEx } from '@memberjunction/global';\nimport { BaseFormPanel } from '@memberjunction/ng-base-forms';\nimport { MJConversationEntity, UserInfoEngine } from '@memberjunction/core-entities';\n\nconst SETTING_KEY = 'mj.form.conversations.headerCollapsed';\n\n@RegisterClassEx(BaseFormPanel, {\n    key: 'form-panel:Conversations:header',\n    metadata: {\n        entity: 'Conversations',\n        slot: 'header',\n        sortKey: 10,\n    },\n})\n@Component({\n    selector: 'mj-conversation-header-panel',\n    standalone: true,\n    imports: [CommonModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        @if (Conversation) {\n            <div class=\"mj-entity-hero-header\">\n                <div class=\"mj-hero-top\">\n                    <div class=\"mj-hero-identity\">\n                        <div class=\"mj-hero-avatar\" style=\"background: linear-gradient(135deg, #38bdf8, #0284c7);\">\n                            <i class=\"fa-solid fa-comments\"></i>\n                        </div>\n                        <div>\n                            <h1 class=\"mj-hero-title\">{{ Conversation.Name || 'AI Conversation' }}</h1>\n                            <div class=\"mj-hero-subline\">\n                                <span>User: {{ Conversation.User || 'User Session' }}</span>\n                                <span>•</span>\n                                <span>Created: {{ Conversation.CreatedAt | date:'medium' }}</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"mj-hero-actions\">\n                        <button type=\"button\" class=\"mj-hero-toggle-btn\" (click)=\"ToggleCollapsed()\" [title]=\"IsCollapsed ? 'Expand Header' : 'Collapse Header'\">\n                            <i class=\"fa-solid\" [class.fa-chevron-up]=\"!IsCollapsed\" [class.fa-chevron-down]=\"IsCollapsed\"></i>\n                        </button>\n                    </div>\n                </div>\n\n                @if (!IsCollapsed) {\n                    <div class=\"mj-hero-metrics-row\">\n                        <div class=\"mj-hero-metric\">\n                            <span class=\"mj-hero-metric-label\">Conversation ID</span>\n                            <span class=\"mj-hero-metric-val\">{{ Conversation.ID?.substring(0, 8) }}</span>\n                        </div>\n                        <div class=\"mj-hero-metric\">\n                            <span class=\"mj-hero-metric-label\">Status</span>\n                            <span class=\"mj-hero-metric-val\" style=\"color: #38bdf8;\">Active Session</span>\n                        </div>\n                    </div>\n                }\n            </div>\n        }\n    `,\n    styles: [`\n        :host { display: block; width: 100%; }\n        .mj-entity-hero-header {\n            background: linear-gradient(180deg, var(--mj-bg-surface, #111a2e) 0%, var(--mj-bg-surface-card, #141f36) 100%);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            padding: 16px 24px;\n        }\n        .mj-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n        .mj-hero-identity { display: flex; align-items: center; gap: 14px; }\n        .mj-hero-avatar {\n            width: 44px; height: 44px; border-radius: 10px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 18px; color: #fff; flex-shrink: 0;\n        }\n        .mj-hero-title { font-size: 18px; font-weight: 800; color: var(--mj-text-primary, #f8fafc); }\n        .mj-hero-subline { font-size: 12.5px; color: var(--mj-text-secondary, #94a3b8); margin-top: 2px; display: flex; gap: 8px; align-items: center; }\n        .mj-hero-toggle-btn {\n            background: none; border: 1px solid var(--mj-border-default, #223254);\n            color: var(--mj-text-muted, #64748b); border-radius: 6px;\n            padding: 6px 10px; cursor: pointer;\n        }\n        .mj-hero-metrics-row {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 12px; margin-top: 14px; padding-top: 12px;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n        }\n        .mj-hero-metric { display: flex; flex-direction: column; gap: 2px; }\n        .mj-hero-metric-label { font-size: 10.5px; font-weight: 700; color: var(--mj-text-muted, #64748b); text-transform: uppercase; }\n        .mj-hero-metric-val { font-size: 14px; font-weight: 700; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n    `]\n})\nexport class ConversationHeaderPanel extends BaseFormPanel<MJConversationEntity> {\n    public IsCollapsed = false;\n\n    public ngOnInit(): void {\n        const raw = UserInfoEngine.Instance.GetSetting(SETTING_KEY);\n        if (raw) this.IsCollapsed = raw === 'true';\n    }\n\n    public get Conversation(): MJConversationEntity | null {\n        return this.Record;\n    }\n\n    public ToggleCollapsed(): void {\n        this.IsCollapsed = !this.IsCollapsed;\n        UserInfoEngine.Instance.SetSettingDebounced(SETTING_KEY, String(this.IsCollapsed));\n    }\n}\n"]}

package/dist/lib/custom/Conversations/conversation-overview.panel.d.ts

@@ -0,0 +1,23 @@
+import { OnInit } from '@angular/core';
+import { BaseFormPanel } from '@memberjunction/ng-base-forms';
+import { MJConversationEntity } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+interface ConversationDetailRow {
+    ID: string;
+    Role: string;
+    Message: string;
+    CreatedAt: string;
+}
+export declare class ConversationOverviewPanel extends BaseFormPanel<MJConversationEntity> implements OnInit {
+    private cdr;
+    Messages: ConversationDetailRow[];
+    ngOnInit(): void;
+    get UserMessageCount(): number;
+    get AgentMessageCount(): number;
+    get RecentMessages(): ConversationDetailRow[];
+    private LoadConversationMessages;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConversationOverviewPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConversationOverviewPanel, "mj-conversation-overview-panel", never, {}, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=conversation-overview.panel.d.ts.map

package/dist/lib/custom/Conversations/conversation-overview.panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview.panel.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Conversations/conversation-overview.panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,MAAM,EAA6B,MAAM,eAAe,CAAC;AAItG,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;;AAErE,UAAU,qBAAqB;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,qBAwHa,yBAA0B,SAAQ,aAAa,CAAC,oBAAoB,CAAE,YAAW,MAAM;IAChG,OAAO,CAAC,GAAG,CAA6B;IACjC,QAAQ,EAAE,qBAAqB,EAAE,CAAM;IAEvC,QAAQ,IAAI,IAAI;IAIvB,IAAW,gBAAgB,IAAI,MAAM,CAEpC;IAED,IAAW,iBAAiB,IAAI,MAAM,CAErC;IAED,IAAW,cAAc,IAAI,qBAAqB,EAAE,CAEnD;YAEa,wBAAwB;yCApB7B,yBAAyB;2CAAzB,yBAAyB;CAwCrC"}