@memberjunction/ng-conversations 2.104.0

package/dist/lib/components/export/export-modal.component.js

@@ -0,0 +1,414 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/export.service";
+import * as i2 from "../../services/dialog.service";
+import * as i3 from "../../services/toast.service";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/forms";
+import * as i6 from "@progress/kendo-angular-dialog";
+import * as i7 from "@progress/kendo-angular-buttons";
+import * as i8 from "@progress/kendo-angular-indicators";
+const _forTrack0 = ($index, $item) => $item.value;
+function ExportModalComponent_kendo_dialog_0_For_10_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 25);
+} }
+function ExportModalComponent_kendo_dialog_0_For_10_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵlistener("click", function ExportModalComponent_kendo_dialog_0_For_10_Template_div_click_0_listener() { const format_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectFormat(format_r4.value)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementStart(2, "div", 22)(3, "div", 23);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 24);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(7, ExportModalComponent_kendo_dialog_0_For_10_Conditional_7_Template, 1, 0, "i", 25);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const format_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("selected", ctx_r1.selectedFormat === format_r4.value);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(format_r4.icon);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(format_r4.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(format_r4.description);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedFormat === format_r4.value ? 7 : -1);
+} }
+function ExportModalComponent_kendo_dialog_0_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "h4", 26);
+    i0.ɵɵtext(2, "JSON Options");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "label", 12)(4, "input", 13);
+    i0.ɵɵtwoWayListener("ngModelChange", function ExportModalComponent_kendo_dialog_0_Conditional_28_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.exportOptions.prettyPrint, $event) || (ctx_r1.exportOptions.prettyPrint = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6, "Pretty print");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "small");
+    i0.ɵɵtext(8, "Format JSON with indentation");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.exportOptions.prettyPrint);
+    i0.ɵɵproperty("disabled", ctx_r1.isExporting);
+} }
+function ExportModalComponent_kendo_dialog_0_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "h4", 26);
+    i0.ɵɵtext(2, "HTML Options");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "label", 12)(4, "input", 13);
+    i0.ɵɵtwoWayListener("ngModelChange", function ExportModalComponent_kendo_dialog_0_Conditional_29_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.exportOptions.includeCSS, $event) || (ctx_r1.exportOptions.includeCSS = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6, "Include CSS styling");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "small");
+    i0.ɵɵtext(8, "Embed styles for better presentation");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.exportOptions.includeCSS);
+    i0.ɵɵproperty("disabled", ctx_r1.isExporting);
+} }
+function ExportModalComponent_kendo_dialog_0_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.errorMessage, " ");
+} }
+function ExportModalComponent_kendo_dialog_0_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelement(1, "kendo-loader", 28);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Exporting conversation...");
+    i0.ɵɵelementEnd()();
+} }
+function ExportModalComponent_kendo_dialog_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 1);
+    i0.ɵɵlistener("close", function ExportModalComponent_kendo_dialog_0_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵelementStart(1, "div", 2)(2, "section", 3)(3, "h3", 4);
+    i0.ɵɵelement(4, "i", 5);
+    i0.ɵɵtext(5, " Export Format ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "p", 6);
+    i0.ɵɵtext(7, " Choose a format to export this conversation: ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 7);
+    i0.ɵɵrepeaterCreate(9, ExportModalComponent_kendo_dialog_0_For_10_Template, 8, 7, "div", 8, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "section", 9)(12, "h3", 4);
+    i0.ɵɵelement(13, "i", 10);
+    i0.ɵɵtext(14, " Export Options ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 11)(16, "label", 12)(17, "input", 13);
+    i0.ɵɵtwoWayListener("ngModelChange", function ExportModalComponent_kendo_dialog_0_Template_input_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.exportOptions.includeMessages, $event) || (ctx_r1.exportOptions.includeMessages = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "span");
+    i0.ɵɵtext(19, "Include messages");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "small");
+    i0.ɵɵtext(21, "Export all conversation messages");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "label", 12)(23, "input", 13);
+    i0.ɵɵtwoWayListener("ngModelChange", function ExportModalComponent_kendo_dialog_0_Template_input_ngModelChange_23_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.exportOptions.includeMetadata, $event) || (ctx_r1.exportOptions.includeMetadata = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "span");
+    i0.ɵɵtext(25, "Include metadata");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "small");
+    i0.ɵɵtext(27, "Add creation date, IDs, and other metadata");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(28, ExportModalComponent_kendo_dialog_0_Conditional_28_Template, 9, 2, "div", 14)(29, ExportModalComponent_kendo_dialog_0_Conditional_29_Template, 9, 2, "div", 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(30, ExportModalComponent_kendo_dialog_0_Conditional_30_Template, 3, 1, "div", 15)(31, ExportModalComponent_kendo_dialog_0_Conditional_31_Template, 4, 0, "div", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "kendo-dialog-actions")(33, "button", 17);
+    i0.ɵɵlistener("click", function ExportModalComponent_kendo_dialog_0_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵelement(34, "i", 18);
+    i0.ɵɵtext(35, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(36, "button", 19);
+    i0.ɵɵlistener("click", function ExportModalComponent_kendo_dialog_0_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onExport()); });
+    i0.ɵɵelement(37, "i", 20);
+    i0.ɵɵtext(38, " Export ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r1.exportTitle)("width", 600)("height", 600);
+    i0.ɵɵadvance(9);
+    i0.ɵɵrepeater(ctx_r1.formats);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.exportOptions.includeMessages);
+    i0.ɵɵproperty("disabled", ctx_r1.isExporting);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.exportOptions.includeMetadata);
+    i0.ɵɵproperty("disabled", ctx_r1.isExporting);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r1.selectedFormat === "json" ? 28 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedFormat === "html" ? 29 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.errorMessage ? 30 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isExporting ? 31 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isExporting);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("primary", true)("disabled", !ctx_r1.canExport);
+} }
+export class ExportModalComponent {
+    exportService;
+    dialogService;
+    toastService;
+    isVisible = false;
+    conversation;
+    currentUser;
+    cancelled = new EventEmitter();
+    exported = new EventEmitter();
+    selectedFormat = 'markdown';
+    isExporting = false;
+    errorMessage = '';
+    exportOptions = {
+        includeMessages: true,
+        includeMetadata: true,
+        prettyPrint: true,
+        includeCSS: true
+    };
+    get exportTitle() {
+        return `Export: ${this.conversation?.Name || 'Conversation'}`;
+    }
+    get canExport() {
+        return !this.isExporting &&
+            !!this.selectedFormat &&
+            (this.exportOptions.includeMessages === true);
+    }
+    formats = [
+        {
+            value: 'markdown',
+            name: 'Markdown',
+            description: 'Formatted text with markdown syntax',
+            icon: 'fa-solid fa-file-alt'
+        },
+        {
+            value: 'json',
+            name: 'JSON',
+            description: 'Structured data format',
+            icon: 'fa-solid fa-code'
+        },
+        {
+            value: 'html',
+            name: 'HTML',
+            description: 'Web page format',
+            icon: 'fa-solid fa-file-code'
+        },
+        {
+            value: 'text',
+            name: 'Plain Text',
+            description: 'Simple text file',
+            icon: 'fa-solid fa-file'
+        }
+    ];
+    constructor(exportService, dialogService, toastService) {
+        this.exportService = exportService;
+        this.dialogService = dialogService;
+        this.toastService = toastService;
+    }
+    selectFormat(format) {
+        if (!this.isExporting) {
+            this.selectedFormat = format;
+        }
+    }
+    async onExport() {
+        if (!this.canExport || !this.conversation) {
+            return;
+        }
+        if (!this.exportOptions.includeMessages) {
+            this.errorMessage = 'At least "Include messages" must be selected';
+            return;
+        }
+        this.isExporting = true;
+        this.errorMessage = '';
+        try {
+            await this.exportService.exportConversation(this.conversation.ID, this.selectedFormat, this.currentUser, this.exportOptions);
+            this.toastService.success('Conversation exported successfully');
+            this.exported.emit();
+            this.resetForm();
+        }
+        catch (error) {
+            console.error('Error exporting conversation:', error);
+            this.errorMessage = error instanceof Error ? error.message : 'Failed to export conversation';
+            this.toastService.error(this.errorMessage);
+        }
+        finally {
+            this.isExporting = false;
+        }
+    }
+    onCancel() {
+        this.cancelled.emit();
+        this.resetForm();
+    }
+    resetForm() {
+        this.selectedFormat = 'markdown';
+        this.errorMessage = '';
+        this.exportOptions = {
+            includeMessages: true,
+            includeMetadata: true,
+            prettyPrint: true,
+            includeCSS: true
+        };
+        this.isVisible = false;
+    }
+    static ɵfac = function ExportModalComponent_Factory(t) { return new (t || ExportModalComponent)(i0.ɵɵdirectiveInject(i1.ExportService), i0.ɵɵdirectiveInject(i2.DialogService), i0.ɵɵdirectiveInject(i3.ToastService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExportModalComponent, selectors: [["mj-export-modal"]], inputs: { isVisible: "isVisible", conversation: "conversation", currentUser: "currentUser" }, outputs: { cancelled: "cancelled", exported: "exported" }, decls: 1, vars: 1, consts: [[3, "title", "width", "height", "close", 4, "ngIf"], [3, "close", "title", "width", "height"], [1, "export-modal-content"], [1, "format-section"], [1, "section-title"], [1, "fa-solid", "fa-file-export"], [1, "section-description"], [1, "format-options"], [1, "format-option", 3, "selected"], [1, "options-section"], [1, "fa-solid", "fa-sliders"], [1, "option-checkboxes"], [1, "checkbox-label"], ["type", "checkbox", 3, "ngModelChange", "ngModel", "disabled"], [1, "format-specific-options"], [1, "error-message"], [1, "loading-indicator"], ["kendoButton", "", 3, "click", "disabled"], [1, "fa-solid", "fa-times"], ["kendoButton", "", 3, "click", "primary", "disabled"], [1, "fa-solid", "fa-download"], [1, "format-option", 3, "click"], [1, "format-details"], [1, "format-name"], [1, "format-description"], [1, "fa-solid", "fa-check-circle", "check-icon"], [1, "subsection-title"], [1, "fa-solid", "fa-exclamation-triangle"], ["type", "infinite-spinner", "size", "medium"]], template: function ExportModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ExportModalComponent_kendo_dialog_0_Template, 39, 14, "kendo-dialog", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.isVisible);
+        } }, dependencies: [i4.NgIf, i5.CheckboxControlValueAccessor, i5.NgControlStatus, i5.NgModel, i6.DialogComponent, i6.DialogActionsComponent, i7.ButtonComponent, i8.LoaderComponent], styles: [".export-modal-content[_ngcontent-%COMP%] {\n      padding: 20px;\n      max-height: calc(600px - 120px);\n      overflow-y: auto;\n    }\n\n    section[_ngcontent-%COMP%] {\n      margin-bottom: 24px;\n    }\n\n    .section-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 0 0 8px 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #007bff;\n    }\n\n    .section-description[_ngcontent-%COMP%] {\n      margin: 0 0 16px 0;\n      color: #666;\n      font-size: 14px;\n    }\n\n    .format-options[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    .format-option[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      border: 2px solid #e0e0e0;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .format-option[_ngcontent-%COMP%]:hover {\n      border-color: #007bff;\n      background: #f8f9fa;\n    }\n\n    .format-option.selected[_ngcontent-%COMP%] {\n      border-color: #007bff;\n      background: #e3f2fd;\n    }\n\n    .format-option[_ngcontent-%COMP%]    > i.fa-solid[_ngcontent-%COMP%], \n   .format-option[_ngcontent-%COMP%]    > i.fas[_ngcontent-%COMP%] {\n      font-size: 24px;\n      color: #666;\n      width: 32px;\n      text-align: center;\n    }\n\n    .format-option.selected[_ngcontent-%COMP%]    > i.fa-solid[_ngcontent-%COMP%], \n   .format-option.selected[_ngcontent-%COMP%]    > i.fas[_ngcontent-%COMP%] {\n      color: #007bff;\n    }\n\n    .format-details[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .format-name[_ngcontent-%COMP%] {\n      font-weight: 500;\n      font-size: 14px;\n      margin-bottom: 2px;\n    }\n\n    .format-description[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #666;\n    }\n\n    .check-icon[_ngcontent-%COMP%] {\n      font-size: 20px;\n      color: #28a745;\n    }\n\n    .option-checkboxes[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .checkbox-label[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      cursor: pointer;\n      padding: 8px;\n      border-radius: 4px;\n      transition: background 0.2s;\n    }\n\n    .checkbox-label[_ngcontent-%COMP%]:hover {\n      background: #f8f9fa;\n    }\n\n    .checkbox-label[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n      margin-right: 8px;\n      cursor: pointer;\n    }\n\n    .checkbox-label[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .checkbox-label[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%]:disabled {\n      cursor: not-allowed;\n    }\n\n    .checkbox-label[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n      margin-left: 28px;\n      font-size: 12px;\n      color: #666;\n    }\n\n    .format-specific-options[_ngcontent-%COMP%] {\n      margin-top: 16px;\n      padding-top: 16px;\n      border-top: 1px solid #e0e0e0;\n    }\n\n    .subsection-title[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #555;\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      color: #d32f2f;\n      font-size: 13px;\n      margin-top: 15px;\n      padding: 10px 12px;\n      background: #ffebee;\n      border-left: 3px solid #d32f2f;\n      border-radius: 4px;\n    }\n\n    .loading-indicator[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      margin-top: 15px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 4px;\n      color: #666;\n    }\n\n    kendo-dialog-actions[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: flex-end;\n      gap: 10px;\n      padding: 15px 20px;\n      border-top: 1px solid #e0e0e0;\n    }\n\n    kendo-dialog-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 6px;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExportModalComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-export-modal', template: `
+    <kendo-dialog
+      *ngIf="isVisible"
+      [title]="exportTitle"
+      [width]="600"
+      [height]="600"
+      (close)="onCancel()">
+
+      <div class="export-modal-content">
+        <section class="format-section">
+          <h3 class="section-title">
+            <i class="fa-solid fa-file-export"></i>
+            Export Format
+          </h3>
+          <p class="section-description">
+            Choose a format to export this conversation:
+          </p>
+
+          <div class="format-options">
+            @for (format of formats; track format.value) {
+              <div
+                class="format-option"
+                [class.selected]="selectedFormat === format.value"
+                (click)="selectFormat(format.value)">
+                <i [class]="format.icon"></i>
+                <div class="format-details">
+                  <div class="format-name">{{ format.name }}</div>
+                  <div class="format-description">{{ format.description }}</div>
+                </div>
+                @if (selectedFormat === format.value) {
+                  <i class="fa-solid fa-check-circle check-icon"></i>
+                }
+              </div>
+            }
+          </div>
+        </section>
+
+        <section class="options-section">
+          <h3 class="section-title">
+            <i class="fa-solid fa-sliders"></i>
+            Export Options
+          </h3>
+
+          <div class="option-checkboxes">
+            <label class="checkbox-label">
+              <input
+                type="checkbox"
+                [(ngModel)]="exportOptions.includeMessages"
+                [disabled]="isExporting">
+              <span>Include messages</span>
+              <small>Export all conversation messages</small>
+            </label>
+
+            <label class="checkbox-label">
+              <input
+                type="checkbox"
+                [(ngModel)]="exportOptions.includeMetadata"
+                [disabled]="isExporting">
+              <span>Include metadata</span>
+              <small>Add creation date, IDs, and other metadata</small>
+            </label>
+          </div>
+
+          @if (selectedFormat === 'json') {
+            <div class="format-specific-options">
+              <h4 class="subsection-title">JSON Options</h4>
+              <label class="checkbox-label">
+                <input
+                  type="checkbox"
+                  [(ngModel)]="exportOptions.prettyPrint"
+                  [disabled]="isExporting">
+                <span>Pretty print</span>
+                <small>Format JSON with indentation</small>
+              </label>
+            </div>
+          }
+
+          @if (selectedFormat === 'html') {
+            <div class="format-specific-options">
+              <h4 class="subsection-title">HTML Options</h4>
+              <label class="checkbox-label">
+                <input
+                  type="checkbox"
+                  [(ngModel)]="exportOptions.includeCSS"
+                  [disabled]="isExporting">
+                <span>Include CSS styling</span>
+                <small>Embed styles for better presentation</small>
+              </label>
+            </div>
+          }
+        </section>
+
+        @if (errorMessage) {
+          <div class="error-message">
+            <i class="fa-solid fa-exclamation-triangle"></i>
+            {{ errorMessage }}
+          </div>
+        }
+
+        @if (isExporting) {
+          <div class="loading-indicator">
+            <kendo-loader type="infinite-spinner" size="medium"></kendo-loader>
+            <span>Exporting conversation...</span>
+          </div>
+        }
+      </div>
+
+      <kendo-dialog-actions>
+        <button kendoButton [disabled]="isExporting" (click)="onCancel()">
+          <i class="fa-solid fa-times"></i>
+          Cancel
+        </button>
+        <button kendoButton [primary]="true" [disabled]="!canExport" (click)="onExport()">
+          <i class="fa-solid fa-download"></i>
+          Export
+        </button>
+      </kendo-dialog-actions>
+    </kendo-dialog>
+  `, styles: ["\n    .export-modal-content {\n      padding: 20px;\n      max-height: calc(600px - 120px);\n      overflow-y: auto;\n    }\n\n    section {\n      margin-bottom: 24px;\n    }\n\n    .section-title {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 0 0 8px 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .section-title i {\n      color: #007bff;\n    }\n\n    .section-description {\n      margin: 0 0 16px 0;\n      color: #666;\n      font-size: 14px;\n    }\n\n    .format-options {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    .format-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      border: 2px solid #e0e0e0;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .format-option:hover {\n      border-color: #007bff;\n      background: #f8f9fa;\n    }\n\n    .format-option.selected {\n      border-color: #007bff;\n      background: #e3f2fd;\n    }\n\n    .format-option > i.fa-solid,\n    .format-option > i.fas {\n      font-size: 24px;\n      color: #666;\n      width: 32px;\n      text-align: center;\n    }\n\n    .format-option.selected > i.fa-solid,\n    .format-option.selected > i.fas {\n      color: #007bff;\n    }\n\n    .format-details {\n      flex: 1;\n    }\n\n    .format-name {\n      font-weight: 500;\n      font-size: 14px;\n      margin-bottom: 2px;\n    }\n\n    .format-description {\n      font-size: 12px;\n      color: #666;\n    }\n\n    .check-icon {\n      font-size: 20px;\n      color: #28a745;\n    }\n\n    .option-checkboxes {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .checkbox-label {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      cursor: pointer;\n      padding: 8px;\n      border-radius: 4px;\n      transition: background 0.2s;\n    }\n\n    .checkbox-label:hover {\n      background: #f8f9fa;\n    }\n\n    .checkbox-label input[type=\"checkbox\"] {\n      margin-right: 8px;\n      cursor: pointer;\n    }\n\n    .checkbox-label > span {\n      display: inline-flex;\n      align-items: center;\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .checkbox-label input[type=\"checkbox\"]:disabled {\n      cursor: not-allowed;\n    }\n\n    .checkbox-label small {\n      margin-left: 28px;\n      font-size: 12px;\n      color: #666;\n    }\n\n    .format-specific-options {\n      margin-top: 16px;\n      padding-top: 16px;\n      border-top: 1px solid #e0e0e0;\n    }\n\n    .subsection-title {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #555;\n    }\n\n    .error-message {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      color: #d32f2f;\n      font-size: 13px;\n      margin-top: 15px;\n      padding: 10px 12px;\n      background: #ffebee;\n      border-left: 3px solid #d32f2f;\n      border-radius: 4px;\n    }\n\n    .loading-indicator {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      margin-top: 15px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 4px;\n      color: #666;\n    }\n\n    kendo-dialog-actions {\n      display: flex;\n      justify-content: flex-end;\n      gap: 10px;\n      padding: 15px 20px;\n      border-top: 1px solid #e0e0e0;\n    }\n\n    kendo-dialog-actions button i {\n      margin-right: 6px;\n    }\n  "] }]
+    }], () => [{ type: i1.ExportService }, { type: i2.DialogService }, { type: i3.ToastService }], { isVisible: [{
+            type: Input
+        }], conversation: [{
+            type: Input
+        }], currentUser: [{
+            type: Input
+        }], cancelled: [{
+            type: Output
+        }], exported: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExportModalComponent, { className: "ExportModalComponent", filePath: "src/lib/components/export/export-modal.component.ts", lineNumber: 312 }); })();
+//# sourceMappingURL=export-modal.component.js.map

package/dist/lib/components/export/export-modal.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"export-modal.component.js","sourceRoot":"","sources":["../../../../src/lib/components/export/export-modal.component.ts"],"names":[],"mappings":"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"}

package/dist/lib/components/library/library-full-view.component.d.ts

@@ -0,0 +1,36 @@
+import { OnInit } from '@angular/core';
+import { UserInfo } from '@memberjunction/core';
+import { CollectionEntity } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+/**
+ * Full-panel Collections view component
+ * Replaces the main content area when Collections tab is selected
+ */
+export declare class LibraryFullViewComponent implements OnInit {
+    environmentId: string;
+    currentUser: UserInfo;
+    collections: CollectionEntity[];
+    filteredCollections: CollectionEntity[];
+    searchQuery: string;
+    isLoading: boolean;
+    breadcrumbs: Array<{
+        id: string;
+        name: string;
+    }>;
+    currentCollectionId: string | null;
+    constructor();
+    ngOnInit(): void;
+    loadCollections(): Promise<void>;
+    onSearchChange(query: string): void;
+    private applySearch;
+    openCollection(collection: CollectionEntity): void;
+    navigateTo(crumb: {
+        id: string;
+        name: string;
+    }): void;
+    navigateToRoot(): void;
+    refresh(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibraryFullViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibraryFullViewComponent, "mj-library-full-view", never, { "environmentId": { "alias": "environmentId"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; }, {}, never, never, false, never>;
+}
+//# sourceMappingURL=library-full-view.component.d.ts.map

package/dist/lib/components/library/library-full-view.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"library-full-view.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/library/library-full-view.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAW,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;AAEjE;;;GAGG;AACH,qBA0Qa,wBAAyB,YAAW,MAAM;IAC5C,aAAa,EAAG,MAAM,CAAC;IACvB,WAAW,EAAG,QAAQ,CAAC;IAEzB,WAAW,EAAE,gBAAgB,EAAE,CAAM;IACrC,mBAAmB,EAAE,gBAAgB,EAAE,CAAM;IAC7C,WAAW,EAAE,MAAM,CAAM;IACzB,SAAS,EAAE,OAAO,CAAS;IAC3B,WAAW,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAM;IACtD,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAQ;;IAIjD,QAAQ;IAIF,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IA6BtC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAInC,OAAO,CAAC,WAAW;IAYnB,cAAc,CAAC,UAAU,EAAE,gBAAgB,GAAG,IAAI;IAOlD,UAAU,CAAC,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAUrD,cAAc,IAAI,IAAI;IAOtB,OAAO,IAAI,IAAI;yCAtFJ,wBAAwB;2CAAxB,wBAAwB;CAyFpC"}