@memberjunction/ng-core-entity-forms 5.42.0 → 5.44.0

package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.js

@@ -1,18 +1,15 @@
 import { Component, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@memberjunction/ng-code-editor";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-code-editor";
 const _forTrack0 = ($index, $item) => $item.id;
 function ChatMessageViewerComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵelement(1, "i", 11);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No messages to display");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 9);
 } }
 function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵelement(1, "mj-code-editor", 29);
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "mj-code-editor", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = i0.ɵɵnextContext(3).$implicit;
@@ -21,8 +18,8 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Condition
     i0.ɵɵproperty("value", ctx_r2.getContentString(item_r4.message.content))("readonly", true)("language", ctx_r2.getContentLanguage(item_r4.message.content));
 } }
 function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵelement(1, "mj-code-editor", 39);
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵelement(1, "mj-code-editor", 38);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const part_r6 = i0.ɵɵnextContext().$implicit;
@@ -31,20 +28,20 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Condition
 } }
 function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 31)(1, "div", 32);
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 31);
     i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Template_div_click_1_listener() { const part_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.toggleContentPart(part_r6.id)); });
-    i0.ɵɵelementStart(2, "div", 33);
-    i0.ɵɵelement(3, "i", 34);
+    i0.ɵɵelementStart(2, "div", 32);
+    i0.ɵɵelement(3, "i", 33);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 35)(6, "button", 36);
+    i0.ɵɵelementStart(5, "div", 34)(6, "button", 35);
     i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Template_button_click_6_listener($event) { const part_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); ctx_r2.openFullScreen(part_r6.value, part_r6.language, part_r6.key); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(7, "i", 24);
+    i0.ɵɵelement(7, "i", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 37);
+    i0.ɵɵelementStart(8, "button", 36);
     i0.ɵɵelement(9, "i");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(10, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Conditional_10_Template, 2, 3, "div", 38);
+    i0.ɵɵconditionalCreate(10, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Conditional_10_Template, 2, 3, "div", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const part_r6 = ctx.$implicit;
@@ -57,20 +54,20 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Condition
     i0.ɵɵconditional(part_r6.expanded ? 10 : -1);
 } }
 function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵrepeaterCreate(1, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Template, 11, 6, "div", 30, _forTrack0);
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵrepeaterCreate(1, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Template, 11, 6, "div", 29, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r6 = i0.ɵɵnextContext(3);
     const item_r4 = ctx_r6.$implicit;
-    const ɵ$index_43_r2 = ctx_r6.$index;
+    const ɵ$index_38_r2 = ctx_r6.$index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.getContentParts(item_r4.message.content, ɵ$index_43_r2));
+    i0.ɵɵrepeater(ctx_r2.getContentParts(item_r4.message.content, ɵ$index_38_r2));
 } }
 function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵconditionalCreate(1, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_1_Template, 2, 3, "div", 27)(2, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_Template, 3, 0, "div", 28);
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵconditionalCreate(1, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_1_Template, 2, 3, "div", 26)(2, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_Template, 3, 0, "div", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = i0.ɵɵnextContext(2).$implicit;
@@ -80,36 +77,36 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Condition
 } }
 function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12)(1, "div", 13);
-    i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); const ɵ$index_43_r2 = i0.ɵɵnextContext().$index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleMessage(ɵ$index_43_r2)); });
-    i0.ɵɵelementStart(2, "div", 14)(3, "span", 15);
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 12);
+    i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); const ɵ$index_38_r2 = i0.ɵɵnextContext().$index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleMessage(ɵ$index_38_r2)); });
+    i0.ɵɵelementStart(2, "div", 13)(3, "span", 14);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
     i0.ɵɵelement(5, "i");
-    i0.ɵɵelementStart(6, "span", 16);
+    i0.ɵɵelementStart(6, "span", 15);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 17)(9, "span", 18);
+    i0.ɵɵelementStart(8, "span", 16)(9, "span", 17);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 19);
+    i0.ɵɵelementStart(11, "span", 18);
     i0.ɵɵtext(12, "\u2022");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 18);
+    i0.ɵɵelementStart(13, "span", 17);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 20)(16, "button", 21);
+    i0.ɵɵelementStart(15, "div", 19)(16, "button", 20);
     i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template_button_click_16_listener($event) { i0.ɵɵrestoreView(_r1); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.copyMessageContent(item_r4.message.content); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(17, "i", 22);
+    i0.ɵɵelement(17, "i", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 23);
+    i0.ɵɵelementStart(18, "button", 22);
     i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template_button_click_18_listener($event) { i0.ɵɵrestoreView(_r1); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.openFullScreen(ctx_r2.getContentString(item_r4.message.content), ctx_r2.getContentLanguage(item_r4.message.content), ctx_r2.getRoleLabel(item_r4.message.role) + " #" + item_r4.sequenceNumber); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(19, "i", 24);
+    i0.ɵɵelement(19, "i", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "button", 25);
+    i0.ɵɵelementStart(20, "button", 24);
     i0.ɵɵelement(21, "i");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(22, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Template, 3, 1, "div", 26);
+    i0.ɵɵconditionalCreate(22, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Template, 3, 1, "div", 25);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = i0.ɵɵnextContext().$implicit;
@@ -132,7 +129,7 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template(
     i0.ɵɵconditional(item_r4.expanded ? 22 : -1);
 } }
 function ChatMessageViewerComponent_Conditional_19_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template, 23, 12, "div", 12);
+    i0.ɵɵconditionalCreate(0, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template, 23, 12, "div", 11);
 } if (rf & 2) {
     const item_r4 = ctx.$implicit;
     i0.ɵɵconditional(item_r4.visible ? 0 : -1);
@@ -145,24 +142,24 @@ function ChatMessageViewerComponent_Conditional_19_Template(rf, ctx) { if (rf &
 } }
 function ChatMessageViewerComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelementStart(0, "div", 39);
     i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_20_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeFullScreen()); });
-    i0.ɵɵelementStart(1, "div", 41);
+    i0.ɵɵelementStart(1, "div", 40);
     i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_20_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 42)(3, "span", 43);
-    i0.ɵɵelement(4, "i", 24);
+    i0.ɵɵelementStart(2, "div", 41)(3, "span", 42);
+    i0.ɵɵelement(4, "i", 23);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 44)(7, "button", 45);
+    i0.ɵɵelementStart(6, "div", 43)(7, "button", 44);
     i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_20_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.copyToClipboard(ctx_r2.FullScreenContent)); });
-    i0.ɵɵelement(8, "i", 22);
+    i0.ɵɵelement(8, "i", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 46);
+    i0.ɵɵelementStart(9, "button", 45);
     i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_20_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeFullScreen()); });
-    i0.ɵɵelement(10, "i", 47);
+    i0.ɵɵelement(10, "i", 46);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 48);
-    i0.ɵɵelement(12, "mj-code-editor", 49);
+    i0.ɵɵelementStart(11, "div", 47);
+    i0.ɵɵelement(12, "mj-code-editor", 48);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -534,7 +531,7 @@ export class ChatMessageViewerComponent {
         });
     }
     static { this.ɵfac = function ChatMessageViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ChatMessageViewerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ChatMessageViewerComponent, selectors: [["mj-chat-message-viewer"]], inputs: { messages: "messages" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 21, vars: 11, consts: [[1, "chat-message-viewer"], [1, "filter-controls"], [1, "filter-checkbox"], ["type", "checkbox", 1, "mj-checkbox", 3, "ngModelChange", "ngModel"], [1, "filter-label"], [1, "fa-solid", "fa-cog"], [1, "fa-solid", "fa-user"], [1, "fa-solid", "fa-robot"], [1, "messages-container"], [1, "empty-state"], [1, "fullscreen-overlay"], [1, "fa-solid", "fa-comments"], [1, "message-card"], [1, "message-header", 3, "click"], [1, "message-role"], [1, "sequence-number"], [1, "role-label"], [1, "content-stats"], [1, "stat-item"], [1, "stat-divider"], [1, "message-actions"], ["type", "button", "title", "Copy message content", 1, "action-button", 3, "click"], [1, "fa-solid", "fa-copy"], ["type", "button", "title", "View full screen", 1, "action-button", 3, "click"], [1, "fa-solid", "fa-expand"], ["type", "button", 1, "toggle-button"], [1, "message-content"], [1, "text-content"], [1, "multi-part-content"], [2, "max-height", "600px", "overflow-y", "auto", 3, "value", "readonly", "language"], [1, "content-part", 3, "collapsed"], [1, "content-part"], [1, "content-part-label", 3, "click"], [1, "content-part-label-content"], [1, "fa-solid", "fa-tag"], [1, "content-part-actions"], ["type", "button", "title", "View full screen", 1, "content-part-toggle", 3, "click"], ["type", "button", 1, "content-part-toggle"], [1, "content-part-editor"], [2, "max-height", "400px", "overflow-y", "auto", 3, "value", "readonly", "language"], [1, "fullscreen-overlay", 3, "click"], [1, "fullscreen-container", 3, "click"], [1, "fullscreen-header"], [1, "fullscreen-title"], [1, "fullscreen-actions"], ["type", "button", "title", "Copy content", 1, "action-button", 3, "click"], ["type", "button", "title", "Close", 1, "action-button", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fullscreen-body"], [2, "height", "100%", "width", "100%", 3, "value", "readonly", "language"]], template: function ChatMessageViewerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ChatMessageViewerComponent, selectors: [["mj-chat-message-viewer"]], inputs: { messages: "messages" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 21, vars: 11, consts: [[1, "chat-message-viewer"], [1, "filter-controls"], [1, "filter-checkbox"], ["type", "checkbox", 1, "mj-checkbox", 3, "ngModelChange", "ngModel"], [1, "filter-label"], [1, "fa-solid", "fa-cog"], [1, "fa-solid", "fa-user"], [1, "fa-solid", "fa-robot"], [1, "messages-container"], ["Icon", "fa-solid fa-comments", "Title", "No messages to display"], [1, "fullscreen-overlay"], [1, "message-card"], [1, "message-header", 3, "click"], [1, "message-role"], [1, "sequence-number"], [1, "role-label"], [1, "content-stats"], [1, "stat-item"], [1, "stat-divider"], [1, "message-actions"], ["type", "button", "title", "Copy message content", 1, "action-button", 3, "click"], [1, "fa-solid", "fa-copy"], ["type", "button", "title", "View full screen", 1, "action-button", 3, "click"], [1, "fa-solid", "fa-expand"], ["type", "button", 1, "toggle-button"], [1, "message-content"], [1, "text-content"], [1, "multi-part-content"], [2, "max-height", "600px", "overflow-y", "auto", 3, "value", "readonly", "language"], [1, "content-part", 3, "collapsed"], [1, "content-part"], [1, "content-part-label", 3, "click"], [1, "content-part-label-content"], [1, "fa-solid", "fa-tag"], [1, "content-part-actions"], ["type", "button", "title", "View full screen", 1, "content-part-toggle", 3, "click"], ["type", "button", 1, "content-part-toggle"], [1, "content-part-editor"], [2, "max-height", "400px", "overflow-y", "auto", 3, "value", "readonly", "language"], [1, "fullscreen-overlay", 3, "click"], [1, "fullscreen-container", 3, "click"], [1, "fullscreen-header"], [1, "fullscreen-title"], [1, "fullscreen-actions"], ["type", "button", "title", "Copy content", 1, "action-button", 3, "click"], ["type", "button", "title", "Close", 1, "action-button", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fullscreen-body"], [2, "height", "100%", "width", "100%", 3, "value", "readonly", "language"]], template: function ChatMessageViewerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "label", 2)(3, "input", 3);
             i0.ɵɵtwoWayListener("ngModelChange", function ChatMessageViewerComponent_Template_input_ngModelChange_3_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.showSystem, $event) || (ctx.showSystem = $event); return $event; });
             i0.ɵɵlistener("ngModelChange", function ChatMessageViewerComponent_Template_input_ngModelChange_3_listener() { return ctx.onFilterChange(); });
@@ -560,7 +557,7 @@ export class ChatMessageViewerComponent {
             i0.ɵɵtext(16, " Assistant ");
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(17, "div", 8);
-            i0.ɵɵconditionalCreate(18, ChatMessageViewerComponent_Conditional_18_Template, 4, 0, "div", 9)(19, ChatMessageViewerComponent_Conditional_19_Template, 2, 0);
+            i0.ɵɵconditionalCreate(18, ChatMessageViewerComponent_Conditional_18_Template, 1, 0, "mj-empty-state", 9)(19, ChatMessageViewerComponent_Conditional_19_Template, 2, 0);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(20, ChatMessageViewerComponent_Conditional_20_Template, 13, 4, "div", 10);
             i0.ɵɵelementEnd();
@@ -581,11 +578,11 @@ export class ChatMessageViewerComponent {
             i0.ɵɵconditional(ctx.displayMessages.length === 0 ? 18 : 19);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.FullScreenContent ? 20 : -1);
-        } }, dependencies: [i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.CodeEditorComponent], styles: [".chat-message-viewer[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden; \n\n}\n\n\n\n\n.filter-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 1.5rem;\n    align-items: center;\n    padding: 0.75rem;\n    background-color: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    margin-bottom: 1rem;\n    flex-shrink: 0; \n\n}\n\n.filter-checkbox[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    user-select: none;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n    margin-right: 0.5rem;\n}\n\n.filter-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n    font-weight: 500;\n}\n\n.filter-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1rem;\n}\n\n\n\n.messages-container[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0.5rem;\n    padding-bottom: 1rem; \n\n    max-height: 800px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 3rem;\n    color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 3rem;\n    margin-bottom: 1rem;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 1rem;\n    margin: 0;\n}\n\n\n\n.message-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    margin-bottom: 0.75rem;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.message-card[_ngcontent-%COMP%]:hover {\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.message-card[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 2rem; \n\n}\n\n.message-card[data-role=\"system\"][_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.message-card[data-role=\"user\"][_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-status-success);\n}\n\n.message-card[data-role=\"assistant\"][_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n\n\n.message-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background-color: var(--mj-bg-surface-sunken);\n    cursor: pointer;\n    user-select: none;\n}\n\n.message-header[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.message-role[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.sequence-number[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 0.85rem;\n    margin-right: 4px;\n}\n\n.message-role[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.125rem;\n}\n\n.content-stats[_ngcontent-%COMP%] {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-text-secondary);\n    font-size: 0.8rem;\n    font-weight: 400;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.stat-divider[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.role-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 0.875rem;\n    text-transform: uppercase;\n    letter-spacing: 0.025em;\n}\n\n.message-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.action-button[_ngcontent-%COMP%], \n.toggle-button[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 0.25rem;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    transition: color 0.2s ease;\n}\n\n.action-button[_ngcontent-%COMP%]:hover, \n.toggle-button[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.action-button[_ngcontent-%COMP%] {\n    padding: 0.25rem 0.5rem;\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n}\n\n\n\n.message-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n}\n\n.content-blocks[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n}\n\n.content-block-indicator[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.25rem 0.75rem;\n    background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    color: var(--mj-brand-primary-hover);\n}\n\n.content-block-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n}\n\n\n\n.text-content[_ngcontent-%COMP%], \n.json-content[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.json-content[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.text-content[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%], \n.json-content[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    min-height: 100px;\n}\n\n\n\n.multi-part-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n\n.content-part[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.content-part-label[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface-sunken);\n    padding: 0.5rem 1rem;\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    user-select: none;\n    transition: background-color 0.2s;\n}\n\n.content-part-label[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-border-default);\n}\n\n.content-part-label-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.content-part-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.content-part-toggle[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 0.25rem;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    transition: color 0.2s;\n}\n\n.content-part-toggle[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.content-part.collapsed[_ngcontent-%COMP%]   .content-part-label[_ngcontent-%COMP%] {\n    border-bottom: none;\n}\n\n.content-part-editor[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.content-part-editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    min-height: 80px;\n}\n\n\n\n.chat-message-viewer[_ngcontent-%COMP%]   .cm-editor[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n}\n\n.chat-message-viewer[_ngcontent-%COMP%]   .cm-editor.cm-focused[_ngcontent-%COMP%] {\n    outline: none;\n}\n\n\n\n.content-part-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n.fullscreen-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    z-index: 10000;\n    background: var(--mj-bg-overlay, rgba(0, 0, 0, 0.6));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1.5rem;\n}\n\n.fullscreen-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    max-width: 95vw;\n    max-height: 95vh;\n    background: var(--mj-bg-surface);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    overflow: hidden;\n}\n\n.fullscreen-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.fullscreen-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.fullscreen-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n}\n\n.fullscreen-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.fullscreen-actions[_ngcontent-%COMP%]   .action-button[_ngcontent-%COMP%] {\n    font-size: 1rem;\n    padding: 0.375rem 0.5rem;\n}\n\n.fullscreen-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.fullscreen-body[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n\n\n@media (max-width: 640px) {\n    .filter-controls[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        gap: 0.75rem;\n    }\n\n    .filter-checkbox[_ngcontent-%COMP%] {\n        min-width: calc(50% - 0.375rem);\n    }\n}"] }); }
+        } }, dependencies: [i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJEmptyStateComponent, i3.CodeEditorComponent], styles: [".chat-message-viewer[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden; \n\n}\n\n\n\n\n.filter-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 1.5rem;\n    align-items: center;\n    padding: 0.75rem;\n    background-color: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    margin-bottom: 1rem;\n    flex-shrink: 0; \n\n}\n\n.filter-checkbox[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    user-select: none;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n    margin-right: 0.5rem;\n}\n\n.filter-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n    font-weight: 500;\n}\n\n.filter-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1rem;\n}\n\n\n\n.messages-container[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0.5rem;\n    padding-bottom: 1rem; \n\n    max-height: 800px;\n}\n\n\n\n.message-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    margin-bottom: 0.75rem;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.message-card[_ngcontent-%COMP%]:hover {\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.message-card[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 2rem; \n\n}\n\n.message-card[data-role=\"system\"][_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.message-card[data-role=\"user\"][_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-status-success);\n}\n\n.message-card[data-role=\"assistant\"][_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n\n\n.message-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background-color: var(--mj-bg-surface-sunken);\n    cursor: pointer;\n    user-select: none;\n}\n\n.message-header[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.message-role[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.sequence-number[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 0.85rem;\n    margin-right: 4px;\n}\n\n.message-role[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.125rem;\n}\n\n.content-stats[_ngcontent-%COMP%] {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-text-secondary);\n    font-size: 0.8rem;\n    font-weight: 400;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.stat-divider[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.role-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 0.875rem;\n    text-transform: uppercase;\n    letter-spacing: 0.025em;\n}\n\n.message-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.action-button[_ngcontent-%COMP%], \n.toggle-button[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 0.25rem;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    transition: color 0.2s ease;\n}\n\n.action-button[_ngcontent-%COMP%]:hover, \n.toggle-button[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.action-button[_ngcontent-%COMP%] {\n    padding: 0.25rem 0.5rem;\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n}\n\n\n\n.message-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n}\n\n.content-blocks[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n}\n\n.content-block-indicator[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.25rem 0.75rem;\n    background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    color: var(--mj-brand-primary-hover);\n}\n\n.content-block-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n}\n\n\n\n.text-content[_ngcontent-%COMP%], \n.json-content[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.json-content[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.text-content[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%], \n.json-content[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    min-height: 100px;\n}\n\n\n\n.multi-part-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n\n.content-part[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.content-part-label[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface-sunken);\n    padding: 0.5rem 1rem;\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    user-select: none;\n    transition: background-color 0.2s;\n}\n\n.content-part-label[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-border-default);\n}\n\n.content-part-label-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.content-part-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.content-part-toggle[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 0.25rem;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    transition: color 0.2s;\n}\n\n.content-part-toggle[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.content-part.collapsed[_ngcontent-%COMP%]   .content-part-label[_ngcontent-%COMP%] {\n    border-bottom: none;\n}\n\n.content-part-editor[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.content-part-editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    min-height: 80px;\n}\n\n\n\n.chat-message-viewer[_ngcontent-%COMP%]   .cm-editor[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n}\n\n.chat-message-viewer[_ngcontent-%COMP%]   .cm-editor.cm-focused[_ngcontent-%COMP%] {\n    outline: none;\n}\n\n\n\n.content-part-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n.fullscreen-overlay[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    z-index: 10000;\n    background: var(--mj-bg-overlay, rgba(0, 0, 0, 0.6));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1.5rem;\n}\n\n.fullscreen-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    max-width: 95vw;\n    max-height: 95vh;\n    background: var(--mj-bg-surface);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    overflow: hidden;\n}\n\n.fullscreen-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.fullscreen-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.fullscreen-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n}\n\n.fullscreen-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.fullscreen-actions[_ngcontent-%COMP%]   .action-button[_ngcontent-%COMP%] {\n    font-size: 1rem;\n    padding: 0.375rem 0.5rem;\n}\n\n.fullscreen-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.fullscreen-body[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n\n\n@media (max-width: 640px) {\n    .filter-controls[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        gap: 0.75rem;\n    }\n\n    .filter-checkbox[_ngcontent-%COMP%] {\n        min-width: calc(50% - 0.375rem);\n    }\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChatMessageViewerComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-chat-message-viewer', template: "<div class=\"chat-message-viewer\">\n    <!-- Filter Controls -->\n    <div class=\"filter-controls\">\n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showSystem\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-cog\" [style.color]=\"getRoleColor('system')\"></i>\n                System\n            </span>\n        </label>\n        \n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showUser\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-user\" [style.color]=\"getRoleColor('user')\"></i>\n                User\n            </span>\n        </label>\n        \n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showAssistant\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-robot\" [style.color]=\"getRoleColor('assistant')\"></i>\n                Assistant\n            </span>\n        </label>\n    </div>\n    \n    <!-- Messages List -->\n    <div class=\"messages-container\">\n        @if (displayMessages.length === 0) {\n            <div class=\"empty-state\">\n                <i class=\"fa-solid fa-comments\"></i>\n                <p>No messages to display</p>\n            </div>\n        } @else {\n            @for (item of displayMessages; track $index; let i = $index) {\n                @if (item.visible) {\n                    <div class=\"message-card\" [attr.data-role]=\"item.message.role\">\n                        <!-- Message Header -->\n                        <div class=\"message-header\" (click)=\"toggleMessage(i)\">\n                            <div class=\"message-role\">\n                                <span class=\"sequence-number\">#{{ item.sequenceNumber }}</span>\n                                <i [class]=\"'fa-solid ' + getRoleIcon(item.message.role)\" \n                                   [style.color]=\"getRoleColor(item.message.role)\"></i>\n                                <span class=\"role-label\">{{ getRoleLabel(item.message.role) }}</span>\n                                <span class=\"content-stats\">\n                                    <span class=\"stat-item\">{{ getContentStats(item.message.content).chars.toLocaleString() }} chars</span>\n                                    <span class=\"stat-divider\">\u2022</span>\n                                    <span class=\"stat-item\">~{{ getContentStats(item.message.content).approxTokens.toLocaleString() }} tokens</span>\n                                </span>\n                            </div>\n                            <div class=\"message-actions\">\n                                <button class=\"action-button\" type=\"button\"\n                                        (click)=\"copyMessageContent(item.message.content); $event.stopPropagation()\"\n                                        title=\"Copy message content\">\n                                    <i class=\"fa-solid fa-copy\"></i>\n                                </button>\n                                <button class=\"action-button\" type=\"button\"\n                                        (click)=\"openFullScreen(getContentString(item.message.content), getContentLanguage(item.message.content), getRoleLabel(item.message.role) + ' #' + item.sequenceNumber); $event.stopPropagation()\"\n                                        title=\"View full screen\">\n                                    <i class=\"fa-solid fa-expand\"></i>\n                                </button>\n                                <button class=\"toggle-button\" type=\"button\">\n                                    <i [class]=\"item.expanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                                </button>\n                            </div>\n                        </div>\n                        \n                        <!-- Message Content -->\n                        @if (item.expanded) {\n                            <div class=\"message-content\">\n                                <!-- Main content -->\n                                @if (isStringContent(item.message.content)) {\n                                    <div class=\"text-content\">\n                                        <mj-code-editor \n                                            [value]=\"getContentString(item.message.content)\"\n                                            [readonly]=\"true\"\n                                            [language]=\"getContentLanguage(item.message.content)\"\n                                            style=\"max-height: 600px; overflow-y: auto;\">\n                                        </mj-code-editor>\n                                    </div>\n                                } @else {\n                                    <!-- Non-string content with multiple parts -->\n                                    <div class=\"multi-part-content\">\n                                        @for (part of getContentParts(item.message.content, i); track part.id) {\n                                            <div class=\"content-part\" [class.collapsed]=\"!part.expanded\">\n                                                <div class=\"content-part-label\" (click)=\"toggleContentPart(part.id)\">\n                                                    <div class=\"content-part-label-content\">\n                                                        <i class=\"fa-solid fa-tag\"></i>\n                                                        {{ part.key }}\n                                                    </div>\n                                                    <div class=\"content-part-actions\">\n                                                        <button class=\"content-part-toggle\" type=\"button\"\n                                                                (click)=\"openFullScreen(part.value, part.language, part.key); $event.stopPropagation()\"\n                                                                title=\"View full screen\">\n                                                            <i class=\"fa-solid fa-expand\"></i>\n                                                        </button>\n                                                        <button class=\"content-part-toggle\" type=\"button\">\n                                                            <i [class]=\"part.expanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                                                        </button>\n                                                    </div>\n                                                </div>\n                                                @if (part.expanded) {\n                                                    <div class=\"content-part-editor\">\n                                                        <mj-code-editor \n                                                            [value]=\"part.value\"\n                                                            [readonly]=\"true\"\n                                                            [language]=\"part.language\"\n                                                            style=\"max-height: 400px; overflow-y: auto;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            }\n        }\n    </div>\n\n    <!-- Full-screen overlay -->\n    @if (FullScreenContent) {\n        <div class=\"fullscreen-overlay\" (click)=\"closeFullScreen()\">\n            <div class=\"fullscreen-container\" (click)=\"$event.stopPropagation()\">\n                <div class=\"fullscreen-header\">\n                    <span class=\"fullscreen-title\">\n                        <i class=\"fa-solid fa-expand\"></i>\n                        {{ FullScreenTitle }}\n                    </span>\n                    <div class=\"fullscreen-actions\">\n                        <button class=\"action-button\" type=\"button\"\n                                (click)=\"copyToClipboard(FullScreenContent)\"\n                                title=\"Copy content\">\n                            <i class=\"fa-solid fa-copy\"></i>\n                        </button>\n                        <button class=\"action-button\" type=\"button\"\n                                (click)=\"closeFullScreen()\"\n                                title=\"Close\">\n                            <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"fullscreen-body\">\n                    <mj-code-editor\n                        [value]=\"FullScreenContent\"\n                        [readonly]=\"true\"\n                        [language]=\"FullScreenLanguage\"\n                        style=\"height: 100%; width: 100%;\">\n                    </mj-code-editor>\n                </div>\n            </div>\n        </div>\n    }\n</div>", styles: [".chat-message-viewer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden; /* Prevent overflow from the parent */\n}\n\n\n/* Filter Controls */\n.filter-controls {\n    display: flex;\n    gap: 1.5rem;\n    align-items: center;\n    padding: 0.75rem;\n    background-color: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    margin-bottom: 1rem;\n    flex-shrink: 0; /* Prevent filter from shrinking */\n}\n\n.filter-checkbox {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    user-select: none;\n}\n\n.filter-checkbox input[type=\"checkbox\"] {\n    margin-right: 0.5rem;\n}\n\n.filter-label {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n    font-weight: 500;\n}\n\n.filter-label i {\n    font-size: 1rem;\n}\n\n/* Messages Container */\n.messages-container {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0.5rem;\n    padding-bottom: 1rem; /* Small padding at bottom */\n    max-height: 800px;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 3rem;\n    color: var(--mj-text-muted);\n}\n\n.empty-state i {\n    font-size: 3rem;\n    margin-bottom: 1rem;\n}\n\n.empty-state p {\n    font-size: 1rem;\n    margin: 0;\n}\n\n/* Message Card */\n.message-card {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    margin-bottom: 0.75rem;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.message-card:hover {\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.message-card:last-child {\n    margin-bottom: 2rem; /* Extra margin on last card to ensure it's fully visible */\n}\n\n.message-card[data-role=\"system\"] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.message-card[data-role=\"user\"] {\n    border-left: 3px solid var(--mj-status-success);\n}\n\n.message-card[data-role=\"assistant\"] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n/* Message Header */\n.message-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background-color: var(--mj-bg-surface-sunken);\n    cursor: pointer;\n    user-select: none;\n}\n\n.message-header:hover {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.message-role {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.sequence-number {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 0.85rem;\n    margin-right: 4px;\n}\n\n.message-role i {\n    font-size: 1.125rem;\n}\n\n.content-stats {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-text-secondary);\n    font-size: 0.8rem;\n    font-weight: 400;\n}\n\n.stat-item {\n    white-space: nowrap;\n}\n\n.stat-divider {\n    color: var(--mj-text-muted);\n}\n\n.role-label {\n    font-weight: 600;\n    font-size: 0.875rem;\n    text-transform: uppercase;\n    letter-spacing: 0.025em;\n}\n\n.message-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.action-button,\n.toggle-button {\n    background: none;\n    border: none;\n    padding: 0.25rem;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    transition: color 0.2s ease;\n}\n\n.action-button:hover,\n.toggle-button:hover {\n    color: var(--mj-text-primary);\n}\n\n.action-button {\n    padding: 0.25rem 0.5rem;\n}\n\n.action-button:hover {\n    color: var(--mj-brand-primary);\n}\n\n/* Message Content */\n.message-content {\n    padding: 1rem;\n}\n\n.content-blocks {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n}\n\n.content-block-indicator {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.25rem 0.75rem;\n    background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    color: var(--mj-brand-primary-hover);\n}\n\n.content-block-indicator i {\n    font-size: 0.875rem;\n}\n\n/* Text Content */\n.text-content,\n.json-content {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.json-content {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.text-content mj-code-editor,\n.json-content mj-code-editor {\n    display: block;\n    min-height: 100px;\n}\n\n/* Multi-part Content */\n.multi-part-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n\n.content-part {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.content-part-label {\n    background-color: var(--mj-bg-surface-sunken);\n    padding: 0.5rem 1rem;\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    user-select: none;\n    transition: background-color 0.2s;\n}\n\n.content-part-label:hover {\n    background-color: var(--mj-border-default);\n}\n\n.content-part-label-content {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.content-part-label i {\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.content-part-toggle {\n    background: none;\n    border: none;\n    padding: 0.25rem;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    transition: color 0.2s;\n}\n\n.content-part-toggle:hover {\n    color: var(--mj-text-primary);\n}\n\n.content-part.collapsed .content-part-label {\n    border-bottom: none;\n}\n\n.content-part-editor {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.content-part-editor mj-code-editor {\n    display: block;\n    min-height: 80px;\n}\n\n/* CodeMirror Overrides for this component */\n.chat-message-viewer .cm-editor {\n    font-size: 0.875rem;\n}\n\n.chat-message-viewer .cm-editor.cm-focused {\n    outline: none;\n}\n\n/* Content part actions (expand + chevron side by side) */\n.content-part-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Full-screen overlay */\n.fullscreen-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 10000;\n    background: var(--mj-bg-overlay, rgba(0, 0, 0, 0.6));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1.5rem;\n}\n\n.fullscreen-container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    max-width: 95vw;\n    max-height: 95vh;\n    background: var(--mj-bg-surface);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    overflow: hidden;\n}\n\n.fullscreen-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.fullscreen-title {\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.fullscreen-title i {\n    color: var(--mj-text-secondary);\n}\n\n.fullscreen-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.fullscreen-actions .action-button {\n    font-size: 1rem;\n    padding: 0.375rem 0.5rem;\n}\n\n.fullscreen-body {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.fullscreen-body mj-code-editor {\n    display: block;\n    height: 100%;\n}\n\n/* Responsive adjustments */\n@media (max-width: 640px) {\n    .filter-controls {\n        flex-wrap: wrap;\n        gap: 0.75rem;\n    }\n\n    .filter-checkbox {\n        min-width: calc(50% - 0.375rem);\n    }\n}"] }]
+        args: [{ standalone: false, selector: 'mj-chat-message-viewer', template: "<div class=\"chat-message-viewer\">\n    <!-- Filter Controls -->\n    <div class=\"filter-controls\">\n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showSystem\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-cog\" [style.color]=\"getRoleColor('system')\"></i>\n                System\n            </span>\n        </label>\n        \n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showUser\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-user\" [style.color]=\"getRoleColor('user')\"></i>\n                User\n            </span>\n        </label>\n        \n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showAssistant\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-robot\" [style.color]=\"getRoleColor('assistant')\"></i>\n                Assistant\n            </span>\n        </label>\n    </div>\n    \n    <!-- Messages List -->\n    <div class=\"messages-container\">\n        @if (displayMessages.length === 0) {\n            <mj-empty-state\n                Icon=\"fa-solid fa-comments\"\n                Title=\"No messages to display\" />\n        } @else {\n            @for (item of displayMessages; track $index; let i = $index) {\n                @if (item.visible) {\n                    <div class=\"message-card\" [attr.data-role]=\"item.message.role\">\n                        <!-- Message Header -->\n                        <div class=\"message-header\" (click)=\"toggleMessage(i)\">\n                            <div class=\"message-role\">\n                                <span class=\"sequence-number\">#{{ item.sequenceNumber }}</span>\n                                <i [class]=\"'fa-solid ' + getRoleIcon(item.message.role)\" \n                                   [style.color]=\"getRoleColor(item.message.role)\"></i>\n                                <span class=\"role-label\">{{ getRoleLabel(item.message.role) }}</span>\n                                <span class=\"content-stats\">\n                                    <span class=\"stat-item\">{{ getContentStats(item.message.content).chars.toLocaleString() }} chars</span>\n                                    <span class=\"stat-divider\">\u2022</span>\n                                    <span class=\"stat-item\">~{{ getContentStats(item.message.content).approxTokens.toLocaleString() }} tokens</span>\n                                </span>\n                            </div>\n                            <div class=\"message-actions\">\n                                <button class=\"action-button\" type=\"button\"\n                                        (click)=\"copyMessageContent(item.message.content); $event.stopPropagation()\"\n                                        title=\"Copy message content\">\n                                    <i class=\"fa-solid fa-copy\"></i>\n                                </button>\n                                <button class=\"action-button\" type=\"button\"\n                                        (click)=\"openFullScreen(getContentString(item.message.content), getContentLanguage(item.message.content), getRoleLabel(item.message.role) + ' #' + item.sequenceNumber); $event.stopPropagation()\"\n                                        title=\"View full screen\">\n                                    <i class=\"fa-solid fa-expand\"></i>\n                                </button>\n                                <button class=\"toggle-button\" type=\"button\">\n                                    <i [class]=\"item.expanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                                </button>\n                            </div>\n                        </div>\n                        \n                        <!-- Message Content -->\n                        @if (item.expanded) {\n                            <div class=\"message-content\">\n                                <!-- Main content -->\n                                @if (isStringContent(item.message.content)) {\n                                    <div class=\"text-content\">\n                                        <mj-code-editor \n                                            [value]=\"getContentString(item.message.content)\"\n                                            [readonly]=\"true\"\n                                            [language]=\"getContentLanguage(item.message.content)\"\n                                            style=\"max-height: 600px; overflow-y: auto;\">\n                                        </mj-code-editor>\n                                    </div>\n                                } @else {\n                                    <!-- Non-string content with multiple parts -->\n                                    <div class=\"multi-part-content\">\n                                        @for (part of getContentParts(item.message.content, i); track part.id) {\n                                            <div class=\"content-part\" [class.collapsed]=\"!part.expanded\">\n                                                <div class=\"content-part-label\" (click)=\"toggleContentPart(part.id)\">\n                                                    <div class=\"content-part-label-content\">\n                                                        <i class=\"fa-solid fa-tag\"></i>\n                                                        {{ part.key }}\n                                                    </div>\n                                                    <div class=\"content-part-actions\">\n                                                        <button class=\"content-part-toggle\" type=\"button\"\n                                                                (click)=\"openFullScreen(part.value, part.language, part.key); $event.stopPropagation()\"\n                                                                title=\"View full screen\">\n                                                            <i class=\"fa-solid fa-expand\"></i>\n                                                        </button>\n                                                        <button class=\"content-part-toggle\" type=\"button\">\n                                                            <i [class]=\"part.expanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                                                        </button>\n                                                    </div>\n                                                </div>\n                                                @if (part.expanded) {\n                                                    <div class=\"content-part-editor\">\n                                                        <mj-code-editor \n                                                            [value]=\"part.value\"\n                                                            [readonly]=\"true\"\n                                                            [language]=\"part.language\"\n                                                            style=\"max-height: 400px; overflow-y: auto;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            }\n        }\n    </div>\n\n    <!-- Full-screen overlay -->\n    @if (FullScreenContent) {\n        <div class=\"fullscreen-overlay\" (click)=\"closeFullScreen()\">\n            <div class=\"fullscreen-container\" (click)=\"$event.stopPropagation()\">\n                <div class=\"fullscreen-header\">\n                    <span class=\"fullscreen-title\">\n                        <i class=\"fa-solid fa-expand\"></i>\n                        {{ FullScreenTitle }}\n                    </span>\n                    <div class=\"fullscreen-actions\">\n                        <button class=\"action-button\" type=\"button\"\n                                (click)=\"copyToClipboard(FullScreenContent)\"\n                                title=\"Copy content\">\n                            <i class=\"fa-solid fa-copy\"></i>\n                        </button>\n                        <button class=\"action-button\" type=\"button\"\n                                (click)=\"closeFullScreen()\"\n                                title=\"Close\">\n                            <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"fullscreen-body\">\n                    <mj-code-editor\n                        [value]=\"FullScreenContent\"\n                        [readonly]=\"true\"\n                        [language]=\"FullScreenLanguage\"\n                        style=\"height: 100%; width: 100%;\">\n                    </mj-code-editor>\n                </div>\n            </div>\n        </div>\n    }\n</div>", styles: [".chat-message-viewer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden; /* Prevent overflow from the parent */\n}\n\n\n/* Filter Controls */\n.filter-controls {\n    display: flex;\n    gap: 1.5rem;\n    align-items: center;\n    padding: 0.75rem;\n    background-color: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    margin-bottom: 1rem;\n    flex-shrink: 0; /* Prevent filter from shrinking */\n}\n\n.filter-checkbox {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    user-select: none;\n}\n\n.filter-checkbox input[type=\"checkbox\"] {\n    margin-right: 0.5rem;\n}\n\n.filter-label {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n    font-weight: 500;\n}\n\n.filter-label i {\n    font-size: 1rem;\n}\n\n/* Messages Container */\n.messages-container {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0.5rem;\n    padding-bottom: 1rem; /* Small padding at bottom */\n    max-height: 800px;\n}\n\n/* Message Card */\n.message-card {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    margin-bottom: 0.75rem;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.message-card:hover {\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.message-card:last-child {\n    margin-bottom: 2rem; /* Extra margin on last card to ensure it's fully visible */\n}\n\n.message-card[data-role=\"system\"] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.message-card[data-role=\"user\"] {\n    border-left: 3px solid var(--mj-status-success);\n}\n\n.message-card[data-role=\"assistant\"] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n/* Message Header */\n.message-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background-color: var(--mj-bg-surface-sunken);\n    cursor: pointer;\n    user-select: none;\n}\n\n.message-header:hover {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.message-role {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.sequence-number {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 0.85rem;\n    margin-right: 4px;\n}\n\n.message-role i {\n    font-size: 1.125rem;\n}\n\n.content-stats {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-text-secondary);\n    font-size: 0.8rem;\n    font-weight: 400;\n}\n\n.stat-item {\n    white-space: nowrap;\n}\n\n.stat-divider {\n    color: var(--mj-text-muted);\n}\n\n.role-label {\n    font-weight: 600;\n    font-size: 0.875rem;\n    text-transform: uppercase;\n    letter-spacing: 0.025em;\n}\n\n.message-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.action-button,\n.toggle-button {\n    background: none;\n    border: none;\n    padding: 0.25rem;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    transition: color 0.2s ease;\n}\n\n.action-button:hover,\n.toggle-button:hover {\n    color: var(--mj-text-primary);\n}\n\n.action-button {\n    padding: 0.25rem 0.5rem;\n}\n\n.action-button:hover {\n    color: var(--mj-brand-primary);\n}\n\n/* Message Content */\n.message-content {\n    padding: 1rem;\n}\n\n.content-blocks {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n}\n\n.content-block-indicator {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.25rem 0.75rem;\n    background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    color: var(--mj-brand-primary-hover);\n}\n\n.content-block-indicator i {\n    font-size: 0.875rem;\n}\n\n/* Text Content */\n.text-content,\n.json-content {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.json-content {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.text-content mj-code-editor,\n.json-content mj-code-editor {\n    display: block;\n    min-height: 100px;\n}\n\n/* Multi-part Content */\n.multi-part-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n\n.content-part {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.content-part-label {\n    background-color: var(--mj-bg-surface-sunken);\n    padding: 0.5rem 1rem;\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    user-select: none;\n    transition: background-color 0.2s;\n}\n\n.content-part-label:hover {\n    background-color: var(--mj-border-default);\n}\n\n.content-part-label-content {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.content-part-label i {\n    font-size: 0.75rem;\n    color: var(--mj-text-secondary);\n}\n\n.content-part-toggle {\n    background: none;\n    border: none;\n    padding: 0.25rem;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    transition: color 0.2s;\n}\n\n.content-part-toggle:hover {\n    color: var(--mj-text-primary);\n}\n\n.content-part.collapsed .content-part-label {\n    border-bottom: none;\n}\n\n.content-part-editor {\n    background-color: var(--mj-bg-surface-sunken);\n}\n\n.content-part-editor mj-code-editor {\n    display: block;\n    min-height: 80px;\n}\n\n/* CodeMirror Overrides for this component */\n.chat-message-viewer .cm-editor {\n    font-size: 0.875rem;\n}\n\n.chat-message-viewer .cm-editor.cm-focused {\n    outline: none;\n}\n\n/* Content part actions (expand + chevron side by side) */\n.content-part-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Full-screen overlay */\n.fullscreen-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 10000;\n    background: var(--mj-bg-overlay, rgba(0, 0, 0, 0.6));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1.5rem;\n}\n\n.fullscreen-container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    max-width: 95vw;\n    max-height: 95vh;\n    background: var(--mj-bg-surface);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    overflow: hidden;\n}\n\n.fullscreen-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background: var(--mj-bg-surface-sunken);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.fullscreen-title {\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.fullscreen-title i {\n    color: var(--mj-text-secondary);\n}\n\n.fullscreen-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.fullscreen-actions .action-button {\n    font-size: 1rem;\n    padding: 0.375rem 0.5rem;\n}\n\n.fullscreen-body {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n.fullscreen-body mj-code-editor {\n    display: block;\n    height: 100%;\n}\n\n/* Responsive adjustments */\n@media (max-width: 640px) {\n    .filter-controls {\n        flex-wrap: wrap;\n        gap: 0.75rem;\n    }\n\n    .filter-checkbox {\n        min-width: calc(50% - 0.375rem);\n    }\n}"] }]
     }], null, { messages: [{
             type: Input
         }] }); })();

package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message-viewer.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/AIPromptRuns/chat-message-viewer.component.ts","../../../../src/lib/custom/AIPromptRuns/chat-message-viewer.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit, OnChanges } from '@angular/core';\nimport { ChatMessage, ChatMessageRole, ChatMessageContent, ChatMessageContentBlock } from '@memberjunction/ai';\n\ninterface MessageDisplay {\n    message: ChatMessage;\n    visible: boolean;\n    expanded: boolean;\n    sequenceNumber: number;\n}\n\n@Component({\n  standalone: false,\n    selector: 'mj-chat-message-viewer',\n    templateUrl: './chat-message-viewer.component.html',\n    styleUrls: ['./chat-message-viewer.component.css']\n})\nexport class ChatMessageViewerComponent implements OnInit, OnChanges {\n    @Input() messages: ChatMessage[] = [];\n    \n    public displayMessages: MessageDisplay[] = [];\n    public showSystem = true;\n    public showUser = true;\n    public showAssistant = true;\n    \n    // Full-screen overlay state\n    public FullScreenContent: string | null = null;\n    public FullScreenLanguage = 'markdown';\n    public FullScreenTitle = '';\n\n    // Track expanded state for content parts\n    private contentPartStates = new Map<string, boolean>();\n    \n    ngOnInit() {\n        this.processMessages();\n    }\n    \n    ngOnChanges() {\n        this.processMessages();\n    }\n    \n    private processMessages() {\n        this.displayMessages = this.messages.map((msg, index) => ({\n            message: msg,\n            visible: this.isMessageVisible(msg),\n            expanded: true,\n            sequenceNumber: index + 1\n        }));\n    }\n    \n    private isMessageVisible(message: ChatMessage): boolean {\n        switch (message.role) {\n            case 'system':\n                return this.showSystem;\n            case 'user':\n                return this.showUser;\n            case 'assistant':\n                return this.showAssistant;\n            default:\n                return true;\n        }\n    }\n    \n    public onFilterChange() {\n        this.displayMessages.forEach(dm => {\n            dm.visible = this.isMessageVisible(dm.message);\n        });\n    }\n    \n    public getRoleIcon(role: string): string {\n        switch (role) {\n            case 'system':\n                return 'fa-cog';\n            case 'user':\n                return 'fa-user';\n            case 'assistant':\n                return 'fa-robot';\n            default:\n                return 'fa-comment';\n        }\n    }\n    \n    public getRoleColor(role: string): string {\n        switch (role) {\n            case 'system':\n                return '#2563eb'; // blue\n            case 'user':\n                return '#059669'; // green\n            case 'assistant':\n                return '#7c3aed'; // purple\n            default:\n                return '#6b7280'; // gray\n        }\n    }\n    \n    public getRoleLabel(role: string): string {\n        return role.charAt(0).toUpperCase() + role.slice(1);\n    }\n    \n    public toggleMessage(index: number) {\n        this.displayMessages[index].expanded = !this.displayMessages[index].expanded;\n    }\n    \n    public getContentString(content: ChatMessageContent): string {\n        if (typeof content === 'string') {\n            return content;\n        } else {\n            const contentAny = content as any;\n            // check to see if we have a text sub-property and if so\n            if (contentAny.text?.trim().length > 0) {\n                // we should return this \n                return contentAny.text;\n            }\n            else {\n                return JSON.stringify(content, null, 2);\n            }\n        }\n    }\n    \n    public getContentLanguage(content: ChatMessageContent): string {\n        const text = this.getContentString(content);\n        \n        // Try to detect language based on content\n        if (text.trim().startsWith('{') || text.trim().startsWith('[')) {\n            return 'json';\n        } else if (text.includes('```') || text.includes('# ') || text.includes('**')) {\n            return 'markdown';\n        } else if (text.includes('function') || text.includes('const') || text.includes('let')) {\n            return 'javascript';\n        } else if (text.includes('SELECT') || text.includes('FROM') || text.includes('WHERE')) {\n            return 'sql';\n        }\n        \n        return 'markdown'; // default to markdown for formatting\n    }\n    \n    public getContentBlockIcon(type: string): string {\n        switch (type) {\n            case 'image_url':\n                return 'fa-image';\n            case 'video_url':\n                return 'fa-video';\n            case 'audio_url':\n                return 'fa-music';\n            case 'file_url':\n                return 'fa-file';\n            default:\n                return 'fa-paperclip';\n        }\n    }\n    \n    public isStringContent(content: ChatMessageContent): boolean {\n        return typeof content === 'string';\n    }\n    \n    public getContentJSON(content: ChatMessageContent): string {\n        if (typeof content === 'string') {\n            return content; // Shouldn't happen but just in case\n        }\n        // check to see if we have a text sub-property and if so\n        // check to see if there are any other sub-properties that have non-empty values or non-empty-arrays/non-empty-object values\n        const contentAny = content as any;\n        if (contentAny.text?.trim().length > 0) {\n            // check to see if there is just one more property called json, if that is the case, append that with a ```json block to the text\n            // and return that\n            if (contentAny.json) {\n                return contentAny.text + '\\n\\n```json\\n' + JSON.stringify(contentAny.json, null, 2) + '\\n```';\n            }\n            else {\n                // now check to see if there are any other sub-properties that have non-empty values or non-empty-arrays/non-empty-object values\n                const hasNonEmptySubProps = Object.keys(contentAny).some(key => {\n                    if (key === 'text') return false; // skip text property\n                    const value = contentAny[key];\n                    if (typeof value === 'string' && value.trim().length > 0) return true;\n                    if (Array.isArray(value) && value.length > 0) return true;\n                    if (typeof value === 'object' && value !== null && Object.keys(value).length > 0) return true;\n                    return false;\n                });\n                if (hasNonEmptySubProps) {\n                    // return the full JSON with text included\n                    return JSON.stringify(contentAny, null, 2);\n                }\n                else {\n                    // if there are no other non-empty sub-properties, just return the text\n                    return contentAny.text;\n                }\n            }\n        }\n        else {\n            // if there is no text property, just return the full JSON\n            return JSON.stringify(content, null, 2);\n        }\n    }\n    \n    public getContentStats(content: ChatMessageContent): { chars: number; words: number; approxTokens: number } {\n        let totalChars = 0;\n        let totalWords = 0;\n        \n        if (typeof content === 'string') {\n            // For string content, use the content directly\n            totalChars = content.length;\n            totalWords = content.trim() ? content.trim().split(/\\s+/).filter(word => word.length > 0).length : 0;\n        } else {\n            // For non-string content, calculate stats from all non-empty parts\n            const contentAny = content as any;\n            Object.keys(contentAny).forEach(key => {\n                const value = contentAny[key];\n                \n                // Skip empty values\n                if (value === null || value === undefined) return;\n                \n                let partText: string;\n                if (typeof value === 'string') {\n                    partText = value;\n                } else if (Array.isArray(value) && value.length > 0) {\n                    partText = JSON.stringify(value, null, 2);\n                } else if (typeof value === 'object' && Object.keys(value).length > 0) {\n                    partText = JSON.stringify(value, null, 2);\n                } else {\n                    return; // Skip empty arrays/objects\n                }\n                \n                totalChars += partText.length;\n                const partWords = partText.trim().split(/\\s+/).filter(word => word.length > 0).length;\n                totalWords += partWords;\n            });\n        }\n        \n        const approxTokens = Math.round(totalWords * 1.25); // Average 1.25 tokens per word\n        return { chars: totalChars, words: totalWords, approxTokens };\n    }\n    \n    public copyMessageContent(content: ChatMessageContent) {\n        const text = this.getContentString(content);\n        navigator.clipboard.writeText(text).then(() => {\n            console.log('Message content copied to clipboard');\n        }).catch(err => {\n            console.error('Failed to copy message:', err);\n        });\n    }\n    \n    /**\n     * Get content parts for multi-part content display\n     * Returns an array of {id, key, value, language, expanded} objects for each content part\n     */\n    public getContentParts(content: ChatMessageContent, messageIndex: number): Array<{id: string, key: string, value: string, language: string, expanded: boolean}> {\n        if (typeof content === 'string') {\n            const id = `msg-${messageIndex}-part-content`;\n            return [{\n                id: id,\n                key: 'content', \n                value: content, \n                language: 'markdown',\n                expanded: this.isPartExpanded(id)\n            }];\n        }\n        \n        const contentAny = content as any;\n        const parts: Array<{id: string, key: string, value: string, language: string, expanded: boolean}> = [];\n        \n        // Process each key in the content object\n        Object.keys(contentAny).forEach((key, index) => {\n            const value = contentAny[key];\n            \n            // Skip empty values\n            if (value === null || value === undefined) return;\n            if (typeof value === 'string' && value.trim().length === 0) return;\n            if (Array.isArray(value) && value.length === 0) return;\n            if (typeof value === 'object' && Object.keys(value).length === 0) return;\n            \n            // Determine the display value and language\n            let displayValue: string;\n            let language: string;\n            \n            if (typeof value === 'string') {\n                displayValue = value;\n                language = this.detectLanguageForKey(key, value);\n            } else {\n                // For objects/arrays, stringify them\n                displayValue = JSON.stringify(value, null, 2);\n                language = 'json';\n            }\n            \n            const id = `msg-${messageIndex}-part-${key}`;\n            parts.push({\n                id: id,\n                key: this.formatKeyLabel(key),\n                value: displayValue,\n                language: language,\n                expanded: this.isPartExpanded(id)\n            });\n        });\n        \n        return parts;\n    }\n    \n    /**\n     * Detect language based on key name and content\n     */\n    private detectLanguageForKey(key: string, value: string): string {\n        // Check key-based hints first\n        const keyLower = key.toLowerCase();\n        if (keyLower.includes('json') || keyLower.includes('data')) return 'json';\n        if (keyLower.includes('sql') || keyLower.includes('query')) return 'sql';\n        if (keyLower.includes('code') || keyLower.includes('script')) return 'javascript';\n        if (keyLower.includes('markdown') || keyLower.includes('md')) return 'markdown';\n        if (keyLower.includes('html')) return 'html';\n        if (keyLower.includes('css')) return 'css';\n        if (keyLower.includes('xml')) return 'xml';\n        if (keyLower.includes('yaml') || keyLower.includes('yml')) return 'yaml';\n        \n        // Fall back to content detection\n        return this.getContentLanguage({text: value} as any);\n    }\n    \n    /**\n     * Format key name for display label\n     */\n    private formatKeyLabel(key: string): string {\n        // Convert camelCase or snake_case to Title Case\n        return key\n            .replace(/([A-Z])/g, ' $1') // Add space before capitals\n            .replace(/_/g, ' ') // Replace underscores with spaces\n            .replace(/\\b\\w/g, l => l.toUpperCase()) // Capitalize first letter of each word\n            .trim();\n    }\n    \n    /**\n     * Check if content has multiple parts (for non-string content)\n     */\n    public hasMultipleParts(content: ChatMessageContent): boolean {\n        if (typeof content === 'string') return false;\n        \n        const contentAny = content as any;\n        const nonEmptyKeys = Object.keys(contentAny).filter(key => {\n            const value = contentAny[key];\n            if (value === null || value === undefined) return false;\n            if (typeof value === 'string' && value.trim().length === 0) return false;\n            if (Array.isArray(value) && value.length === 0) return false;\n            if (typeof value === 'object' && Object.keys(value).length === 0) return false;\n            return true;\n        });\n        \n        return nonEmptyKeys.length > 1;\n    }\n    \n    /**\n     * Check if a content part is expanded\n     */\n    private isPartExpanded(partId: string): boolean {\n        // Default to expanded for all parts initially\n        if (!this.contentPartStates.has(partId)) {\n            this.contentPartStates.set(partId, true);\n        }\n        return this.contentPartStates.get(partId) || false;\n    }\n    \n    /**\n     * Toggle the expanded state of a content part\n     */\n    public toggleContentPart(partId: string): void {\n        const currentState = this.contentPartStates.get(partId) || false;\n        this.contentPartStates.set(partId, !currentState);\n    }\n\n    /**\n     * Open the full-screen overlay with the given content\n     */\n    public openFullScreen(content: string, language: string, title: string): void {\n        this.FullScreenContent = content;\n        this.FullScreenLanguage = language;\n        this.FullScreenTitle = title;\n    }\n\n    /**\n     * Close the full-screen overlay\n     */\n    public closeFullScreen(): void {\n        this.FullScreenContent = null;\n    }\n\n    /**\n     * Copy text to clipboard\n     */\n    public copyToClipboard(text: string): void {\n        navigator.clipboard.writeText(text).then(() => {\n            console.log('Content copied to clipboard');\n        }).catch(err => {\n            console.error('Failed to copy:', err);\n        });\n    }\n}","<div class=\"chat-message-viewer\">\n    <!-- Filter Controls -->\n    <div class=\"filter-controls\">\n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showSystem\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-cog\" [style.color]=\"getRoleColor('system')\"></i>\n                System\n            </span>\n        </label>\n        \n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showUser\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-user\" [style.color]=\"getRoleColor('user')\"></i>\n                User\n            </span>\n        </label>\n        \n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showAssistant\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-robot\" [style.color]=\"getRoleColor('assistant')\"></i>\n                Assistant\n            </span>\n        </label>\n    </div>\n    \n    <!-- Messages List -->\n    <div class=\"messages-container\">\n        @if (displayMessages.length === 0) {\n            <div class=\"empty-state\">\n                <i class=\"fa-solid fa-comments\"></i>\n                <p>No messages to display</p>\n            </div>\n        } @else {\n            @for (item of displayMessages; track $index; let i = $index) {\n                @if (item.visible) {\n                    <div class=\"message-card\" [attr.data-role]=\"item.message.role\">\n                        <!-- Message Header -->\n                        <div class=\"message-header\" (click)=\"toggleMessage(i)\">\n                            <div class=\"message-role\">\n                                <span class=\"sequence-number\">#{{ item.sequenceNumber }}</span>\n                                <i [class]=\"'fa-solid ' + getRoleIcon(item.message.role)\" \n                                   [style.color]=\"getRoleColor(item.message.role)\"></i>\n                                <span class=\"role-label\">{{ getRoleLabel(item.message.role) }}</span>\n                                <span class=\"content-stats\">\n                                    <span class=\"stat-item\">{{ getContentStats(item.message.content).chars.toLocaleString() }} chars</span>\n                                    <span class=\"stat-divider\">•</span>\n                                    <span class=\"stat-item\">~{{ getContentStats(item.message.content).approxTokens.toLocaleString() }} tokens</span>\n                                </span>\n                            </div>\n                            <div class=\"message-actions\">\n                                <button class=\"action-button\" type=\"button\"\n                                        (click)=\"copyMessageContent(item.message.content); $event.stopPropagation()\"\n                                        title=\"Copy message content\">\n                                    <i class=\"fa-solid fa-copy\"></i>\n                                </button>\n                                <button class=\"action-button\" type=\"button\"\n                                        (click)=\"openFullScreen(getContentString(item.message.content), getContentLanguage(item.message.content), getRoleLabel(item.message.role) + ' #' + item.sequenceNumber); $event.stopPropagation()\"\n                                        title=\"View full screen\">\n                                    <i class=\"fa-solid fa-expand\"></i>\n                                </button>\n                                <button class=\"toggle-button\" type=\"button\">\n                                    <i [class]=\"item.expanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                                </button>\n                            </div>\n                        </div>\n                        \n                        <!-- Message Content -->\n                        @if (item.expanded) {\n                            <div class=\"message-content\">\n                                <!-- Main content -->\n                                @if (isStringContent(item.message.content)) {\n                                    <div class=\"text-content\">\n                                        <mj-code-editor \n                                            [value]=\"getContentString(item.message.content)\"\n                                            [readonly]=\"true\"\n                                            [language]=\"getContentLanguage(item.message.content)\"\n                                            style=\"max-height: 600px; overflow-y: auto;\">\n                                        </mj-code-editor>\n                                    </div>\n                                } @else {\n                                    <!-- Non-string content with multiple parts -->\n                                    <div class=\"multi-part-content\">\n                                        @for (part of getContentParts(item.message.content, i); track part.id) {\n                                            <div class=\"content-part\" [class.collapsed]=\"!part.expanded\">\n                                                <div class=\"content-part-label\" (click)=\"toggleContentPart(part.id)\">\n                                                    <div class=\"content-part-label-content\">\n                                                        <i class=\"fa-solid fa-tag\"></i>\n                                                        {{ part.key }}\n                                                    </div>\n                                                    <div class=\"content-part-actions\">\n                                                        <button class=\"content-part-toggle\" type=\"button\"\n                                                                (click)=\"openFullScreen(part.value, part.language, part.key); $event.stopPropagation()\"\n                                                                title=\"View full screen\">\n                                                            <i class=\"fa-solid fa-expand\"></i>\n                                                        </button>\n                                                        <button class=\"content-part-toggle\" type=\"button\">\n                                                            <i [class]=\"part.expanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                                                        </button>\n                                                    </div>\n                                                </div>\n                                                @if (part.expanded) {\n                                                    <div class=\"content-part-editor\">\n                                                        <mj-code-editor \n                                                            [value]=\"part.value\"\n                                                            [readonly]=\"true\"\n                                                            [language]=\"part.language\"\n                                                            style=\"max-height: 400px; overflow-y: auto;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            }\n        }\n    </div>\n\n    <!-- Full-screen overlay -->\n    @if (FullScreenContent) {\n        <div class=\"fullscreen-overlay\" (click)=\"closeFullScreen()\">\n            <div class=\"fullscreen-container\" (click)=\"$event.stopPropagation()\">\n                <div class=\"fullscreen-header\">\n                    <span class=\"fullscreen-title\">\n                        <i class=\"fa-solid fa-expand\"></i>\n                        {{ FullScreenTitle }}\n                    </span>\n                    <div class=\"fullscreen-actions\">\n                        <button class=\"action-button\" type=\"button\"\n                                (click)=\"copyToClipboard(FullScreenContent)\"\n                                title=\"Copy content\">\n                            <i class=\"fa-solid fa-copy\"></i>\n                        </button>\n                        <button class=\"action-button\" type=\"button\"\n                                (click)=\"closeFullScreen()\"\n                                title=\"Close\">\n                            <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"fullscreen-body\">\n                    <mj-code-editor\n                        [value]=\"FullScreenContent\"\n                        [readonly]=\"true\"\n                        [language]=\"FullScreenLanguage\"\n                        style=\"height: 100%; width: 100%;\">\n                    </mj-code-editor>\n                </div>\n            </div>\n        </div>\n    }\n</div>"]}
+{"version":3,"file":"chat-message-viewer.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/AIPromptRuns/chat-message-viewer.component.ts","../../../../src/lib/custom/AIPromptRuns/chat-message-viewer.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit, OnChanges } from '@angular/core';\nimport { ChatMessage, ChatMessageRole, ChatMessageContent, ChatMessageContentBlock } from '@memberjunction/ai';\n\ninterface MessageDisplay {\n    message: ChatMessage;\n    visible: boolean;\n    expanded: boolean;\n    sequenceNumber: number;\n}\n\n@Component({\n  standalone: false,\n    selector: 'mj-chat-message-viewer',\n    templateUrl: './chat-message-viewer.component.html',\n    styleUrls: ['./chat-message-viewer.component.css']\n})\nexport class ChatMessageViewerComponent implements OnInit, OnChanges {\n    @Input() messages: ChatMessage[] = [];\n    \n    public displayMessages: MessageDisplay[] = [];\n    public showSystem = true;\n    public showUser = true;\n    public showAssistant = true;\n    \n    // Full-screen overlay state\n    public FullScreenContent: string | null = null;\n    public FullScreenLanguage = 'markdown';\n    public FullScreenTitle = '';\n\n    // Track expanded state for content parts\n    private contentPartStates = new Map<string, boolean>();\n    \n    ngOnInit() {\n        this.processMessages();\n    }\n    \n    ngOnChanges() {\n        this.processMessages();\n    }\n    \n    private processMessages() {\n        this.displayMessages = this.messages.map((msg, index) => ({\n            message: msg,\n            visible: this.isMessageVisible(msg),\n            expanded: true,\n            sequenceNumber: index + 1\n        }));\n    }\n    \n    private isMessageVisible(message: ChatMessage): boolean {\n        switch (message.role) {\n            case 'system':\n                return this.showSystem;\n            case 'user':\n                return this.showUser;\n            case 'assistant':\n                return this.showAssistant;\n            default:\n                return true;\n        }\n    }\n    \n    public onFilterChange() {\n        this.displayMessages.forEach(dm => {\n            dm.visible = this.isMessageVisible(dm.message);\n        });\n    }\n    \n    public getRoleIcon(role: string): string {\n        switch (role) {\n            case 'system':\n                return 'fa-cog';\n            case 'user':\n                return 'fa-user';\n            case 'assistant':\n                return 'fa-robot';\n            default:\n                return 'fa-comment';\n        }\n    }\n    \n    public getRoleColor(role: string): string {\n        switch (role) {\n            case 'system':\n                return '#2563eb'; // blue\n            case 'user':\n                return '#059669'; // green\n            case 'assistant':\n                return '#7c3aed'; // purple\n            default:\n                return '#6b7280'; // gray\n        }\n    }\n    \n    public getRoleLabel(role: string): string {\n        return role.charAt(0).toUpperCase() + role.slice(1);\n    }\n    \n    public toggleMessage(index: number) {\n        this.displayMessages[index].expanded = !this.displayMessages[index].expanded;\n    }\n    \n    public getContentString(content: ChatMessageContent): string {\n        if (typeof content === 'string') {\n            return content;\n        } else {\n            const contentAny = content as any;\n            // check to see if we have a text sub-property and if so\n            if (contentAny.text?.trim().length > 0) {\n                // we should return this \n                return contentAny.text;\n            }\n            else {\n                return JSON.stringify(content, null, 2);\n            }\n        }\n    }\n    \n    public getContentLanguage(content: ChatMessageContent): string {\n        const text = this.getContentString(content);\n        \n        // Try to detect language based on content\n        if (text.trim().startsWith('{') || text.trim().startsWith('[')) {\n            return 'json';\n        } else if (text.includes('```') || text.includes('# ') || text.includes('**')) {\n            return 'markdown';\n        } else if (text.includes('function') || text.includes('const') || text.includes('let')) {\n            return 'javascript';\n        } else if (text.includes('SELECT') || text.includes('FROM') || text.includes('WHERE')) {\n            return 'sql';\n        }\n        \n        return 'markdown'; // default to markdown for formatting\n    }\n    \n    public getContentBlockIcon(type: string): string {\n        switch (type) {\n            case 'image_url':\n                return 'fa-image';\n            case 'video_url':\n                return 'fa-video';\n            case 'audio_url':\n                return 'fa-music';\n            case 'file_url':\n                return 'fa-file';\n            default:\n                return 'fa-paperclip';\n        }\n    }\n    \n    public isStringContent(content: ChatMessageContent): boolean {\n        return typeof content === 'string';\n    }\n    \n    public getContentJSON(content: ChatMessageContent): string {\n        if (typeof content === 'string') {\n            return content; // Shouldn't happen but just in case\n        }\n        // check to see if we have a text sub-property and if so\n        // check to see if there are any other sub-properties that have non-empty values or non-empty-arrays/non-empty-object values\n        const contentAny = content as any;\n        if (contentAny.text?.trim().length > 0) {\n            // check to see if there is just one more property called json, if that is the case, append that with a ```json block to the text\n            // and return that\n            if (contentAny.json) {\n                return contentAny.text + '\\n\\n```json\\n' + JSON.stringify(contentAny.json, null, 2) + '\\n```';\n            }\n            else {\n                // now check to see if there are any other sub-properties that have non-empty values or non-empty-arrays/non-empty-object values\n                const hasNonEmptySubProps = Object.keys(contentAny).some(key => {\n                    if (key === 'text') return false; // skip text property\n                    const value = contentAny[key];\n                    if (typeof value === 'string' && value.trim().length > 0) return true;\n                    if (Array.isArray(value) && value.length > 0) return true;\n                    if (typeof value === 'object' && value !== null && Object.keys(value).length > 0) return true;\n                    return false;\n                });\n                if (hasNonEmptySubProps) {\n                    // return the full JSON with text included\n                    return JSON.stringify(contentAny, null, 2);\n                }\n                else {\n                    // if there are no other non-empty sub-properties, just return the text\n                    return contentAny.text;\n                }\n            }\n        }\n        else {\n            // if there is no text property, just return the full JSON\n            return JSON.stringify(content, null, 2);\n        }\n    }\n    \n    public getContentStats(content: ChatMessageContent): { chars: number; words: number; approxTokens: number } {\n        let totalChars = 0;\n        let totalWords = 0;\n        \n        if (typeof content === 'string') {\n            // For string content, use the content directly\n            totalChars = content.length;\n            totalWords = content.trim() ? content.trim().split(/\\s+/).filter(word => word.length > 0).length : 0;\n        } else {\n            // For non-string content, calculate stats from all non-empty parts\n            const contentAny = content as any;\n            Object.keys(contentAny).forEach(key => {\n                const value = contentAny[key];\n                \n                // Skip empty values\n                if (value === null || value === undefined) return;\n                \n                let partText: string;\n                if (typeof value === 'string') {\n                    partText = value;\n                } else if (Array.isArray(value) && value.length > 0) {\n                    partText = JSON.stringify(value, null, 2);\n                } else if (typeof value === 'object' && Object.keys(value).length > 0) {\n                    partText = JSON.stringify(value, null, 2);\n                } else {\n                    return; // Skip empty arrays/objects\n                }\n                \n                totalChars += partText.length;\n                const partWords = partText.trim().split(/\\s+/).filter(word => word.length > 0).length;\n                totalWords += partWords;\n            });\n        }\n        \n        const approxTokens = Math.round(totalWords * 1.25); // Average 1.25 tokens per word\n        return { chars: totalChars, words: totalWords, approxTokens };\n    }\n    \n    public copyMessageContent(content: ChatMessageContent) {\n        const text = this.getContentString(content);\n        navigator.clipboard.writeText(text).then(() => {\n            console.log('Message content copied to clipboard');\n        }).catch(err => {\n            console.error('Failed to copy message:', err);\n        });\n    }\n    \n    /**\n     * Get content parts for multi-part content display\n     * Returns an array of {id, key, value, language, expanded} objects for each content part\n     */\n    public getContentParts(content: ChatMessageContent, messageIndex: number): Array<{id: string, key: string, value: string, language: string, expanded: boolean}> {\n        if (typeof content === 'string') {\n            const id = `msg-${messageIndex}-part-content`;\n            return [{\n                id: id,\n                key: 'content', \n                value: content, \n                language: 'markdown',\n                expanded: this.isPartExpanded(id)\n            }];\n        }\n        \n        const contentAny = content as any;\n        const parts: Array<{id: string, key: string, value: string, language: string, expanded: boolean}> = [];\n        \n        // Process each key in the content object\n        Object.keys(contentAny).forEach((key, index) => {\n            const value = contentAny[key];\n            \n            // Skip empty values\n            if (value === null || value === undefined) return;\n            if (typeof value === 'string' && value.trim().length === 0) return;\n            if (Array.isArray(value) && value.length === 0) return;\n            if (typeof value === 'object' && Object.keys(value).length === 0) return;\n            \n            // Determine the display value and language\n            let displayValue: string;\n            let language: string;\n            \n            if (typeof value === 'string') {\n                displayValue = value;\n                language = this.detectLanguageForKey(key, value);\n            } else {\n                // For objects/arrays, stringify them\n                displayValue = JSON.stringify(value, null, 2);\n                language = 'json';\n            }\n            \n            const id = `msg-${messageIndex}-part-${key}`;\n            parts.push({\n                id: id,\n                key: this.formatKeyLabel(key),\n                value: displayValue,\n                language: language,\n                expanded: this.isPartExpanded(id)\n            });\n        });\n        \n        return parts;\n    }\n    \n    /**\n     * Detect language based on key name and content\n     */\n    private detectLanguageForKey(key: string, value: string): string {\n        // Check key-based hints first\n        const keyLower = key.toLowerCase();\n        if (keyLower.includes('json') || keyLower.includes('data')) return 'json';\n        if (keyLower.includes('sql') || keyLower.includes('query')) return 'sql';\n        if (keyLower.includes('code') || keyLower.includes('script')) return 'javascript';\n        if (keyLower.includes('markdown') || keyLower.includes('md')) return 'markdown';\n        if (keyLower.includes('html')) return 'html';\n        if (keyLower.includes('css')) return 'css';\n        if (keyLower.includes('xml')) return 'xml';\n        if (keyLower.includes('yaml') || keyLower.includes('yml')) return 'yaml';\n        \n        // Fall back to content detection\n        return this.getContentLanguage({text: value} as any);\n    }\n    \n    /**\n     * Format key name for display label\n     */\n    private formatKeyLabel(key: string): string {\n        // Convert camelCase or snake_case to Title Case\n        return key\n            .replace(/([A-Z])/g, ' $1') // Add space before capitals\n            .replace(/_/g, ' ') // Replace underscores with spaces\n            .replace(/\\b\\w/g, l => l.toUpperCase()) // Capitalize first letter of each word\n            .trim();\n    }\n    \n    /**\n     * Check if content has multiple parts (for non-string content)\n     */\n    public hasMultipleParts(content: ChatMessageContent): boolean {\n        if (typeof content === 'string') return false;\n        \n        const contentAny = content as any;\n        const nonEmptyKeys = Object.keys(contentAny).filter(key => {\n            const value = contentAny[key];\n            if (value === null || value === undefined) return false;\n            if (typeof value === 'string' && value.trim().length === 0) return false;\n            if (Array.isArray(value) && value.length === 0) return false;\n            if (typeof value === 'object' && Object.keys(value).length === 0) return false;\n            return true;\n        });\n        \n        return nonEmptyKeys.length > 1;\n    }\n    \n    /**\n     * Check if a content part is expanded\n     */\n    private isPartExpanded(partId: string): boolean {\n        // Default to expanded for all parts initially\n        if (!this.contentPartStates.has(partId)) {\n            this.contentPartStates.set(partId, true);\n        }\n        return this.contentPartStates.get(partId) || false;\n    }\n    \n    /**\n     * Toggle the expanded state of a content part\n     */\n    public toggleContentPart(partId: string): void {\n        const currentState = this.contentPartStates.get(partId) || false;\n        this.contentPartStates.set(partId, !currentState);\n    }\n\n    /**\n     * Open the full-screen overlay with the given content\n     */\n    public openFullScreen(content: string, language: string, title: string): void {\n        this.FullScreenContent = content;\n        this.FullScreenLanguage = language;\n        this.FullScreenTitle = title;\n    }\n\n    /**\n     * Close the full-screen overlay\n     */\n    public closeFullScreen(): void {\n        this.FullScreenContent = null;\n    }\n\n    /**\n     * Copy text to clipboard\n     */\n    public copyToClipboard(text: string): void {\n        navigator.clipboard.writeText(text).then(() => {\n            console.log('Content copied to clipboard');\n        }).catch(err => {\n            console.error('Failed to copy:', err);\n        });\n    }\n}","<div class=\"chat-message-viewer\">\n    <!-- Filter Controls -->\n    <div class=\"filter-controls\">\n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showSystem\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-cog\" [style.color]=\"getRoleColor('system')\"></i>\n                System\n            </span>\n        </label>\n        \n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showUser\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-user\" [style.color]=\"getRoleColor('user')\"></i>\n                User\n            </span>\n        </label>\n        \n        <label class=\"filter-checkbox\">\n            <input type=\"checkbox\" \n                   [(ngModel)]=\"showAssistant\" \n                   (ngModelChange)=\"onFilterChange()\"\n                   class=\"mj-checkbox\" />\n            <span class=\"filter-label\">\n                <i class=\"fa-solid fa-robot\" [style.color]=\"getRoleColor('assistant')\"></i>\n                Assistant\n            </span>\n        </label>\n    </div>\n    \n    <!-- Messages List -->\n    <div class=\"messages-container\">\n        @if (displayMessages.length === 0) {\n            <mj-empty-state\n                Icon=\"fa-solid fa-comments\"\n                Title=\"No messages to display\" />\n        } @else {\n            @for (item of displayMessages; track $index; let i = $index) {\n                @if (item.visible) {\n                    <div class=\"message-card\" [attr.data-role]=\"item.message.role\">\n                        <!-- Message Header -->\n                        <div class=\"message-header\" (click)=\"toggleMessage(i)\">\n                            <div class=\"message-role\">\n                                <span class=\"sequence-number\">#{{ item.sequenceNumber }}</span>\n                                <i [class]=\"'fa-solid ' + getRoleIcon(item.message.role)\" \n                                   [style.color]=\"getRoleColor(item.message.role)\"></i>\n                                <span class=\"role-label\">{{ getRoleLabel(item.message.role) }}</span>\n                                <span class=\"content-stats\">\n                                    <span class=\"stat-item\">{{ getContentStats(item.message.content).chars.toLocaleString() }} chars</span>\n                                    <span class=\"stat-divider\">•</span>\n                                    <span class=\"stat-item\">~{{ getContentStats(item.message.content).approxTokens.toLocaleString() }} tokens</span>\n                                </span>\n                            </div>\n                            <div class=\"message-actions\">\n                                <button class=\"action-button\" type=\"button\"\n                                        (click)=\"copyMessageContent(item.message.content); $event.stopPropagation()\"\n                                        title=\"Copy message content\">\n                                    <i class=\"fa-solid fa-copy\"></i>\n                                </button>\n                                <button class=\"action-button\" type=\"button\"\n                                        (click)=\"openFullScreen(getContentString(item.message.content), getContentLanguage(item.message.content), getRoleLabel(item.message.role) + ' #' + item.sequenceNumber); $event.stopPropagation()\"\n                                        title=\"View full screen\">\n                                    <i class=\"fa-solid fa-expand\"></i>\n                                </button>\n                                <button class=\"toggle-button\" type=\"button\">\n                                    <i [class]=\"item.expanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                                </button>\n                            </div>\n                        </div>\n                        \n                        <!-- Message Content -->\n                        @if (item.expanded) {\n                            <div class=\"message-content\">\n                                <!-- Main content -->\n                                @if (isStringContent(item.message.content)) {\n                                    <div class=\"text-content\">\n                                        <mj-code-editor \n                                            [value]=\"getContentString(item.message.content)\"\n                                            [readonly]=\"true\"\n                                            [language]=\"getContentLanguage(item.message.content)\"\n                                            style=\"max-height: 600px; overflow-y: auto;\">\n                                        </mj-code-editor>\n                                    </div>\n                                } @else {\n                                    <!-- Non-string content with multiple parts -->\n                                    <div class=\"multi-part-content\">\n                                        @for (part of getContentParts(item.message.content, i); track part.id) {\n                                            <div class=\"content-part\" [class.collapsed]=\"!part.expanded\">\n                                                <div class=\"content-part-label\" (click)=\"toggleContentPart(part.id)\">\n                                                    <div class=\"content-part-label-content\">\n                                                        <i class=\"fa-solid fa-tag\"></i>\n                                                        {{ part.key }}\n                                                    </div>\n                                                    <div class=\"content-part-actions\">\n                                                        <button class=\"content-part-toggle\" type=\"button\"\n                                                                (click)=\"openFullScreen(part.value, part.language, part.key); $event.stopPropagation()\"\n                                                                title=\"View full screen\">\n                                                            <i class=\"fa-solid fa-expand\"></i>\n                                                        </button>\n                                                        <button class=\"content-part-toggle\" type=\"button\">\n                                                            <i [class]=\"part.expanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                                                        </button>\n                                                    </div>\n                                                </div>\n                                                @if (part.expanded) {\n                                                    <div class=\"content-part-editor\">\n                                                        <mj-code-editor \n                                                            [value]=\"part.value\"\n                                                            [readonly]=\"true\"\n                                                            [language]=\"part.language\"\n                                                            style=\"max-height: 400px; overflow-y: auto;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            }\n        }\n    </div>\n\n    <!-- Full-screen overlay -->\n    @if (FullScreenContent) {\n        <div class=\"fullscreen-overlay\" (click)=\"closeFullScreen()\">\n            <div class=\"fullscreen-container\" (click)=\"$event.stopPropagation()\">\n                <div class=\"fullscreen-header\">\n                    <span class=\"fullscreen-title\">\n                        <i class=\"fa-solid fa-expand\"></i>\n                        {{ FullScreenTitle }}\n                    </span>\n                    <div class=\"fullscreen-actions\">\n                        <button class=\"action-button\" type=\"button\"\n                                (click)=\"copyToClipboard(FullScreenContent)\"\n                                title=\"Copy content\">\n                            <i class=\"fa-solid fa-copy\"></i>\n                        </button>\n                        <button class=\"action-button\" type=\"button\"\n                                (click)=\"closeFullScreen()\"\n                                title=\"Close\">\n                            <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"fullscreen-body\">\n                    <mj-code-editor\n                        [value]=\"FullScreenContent\"\n                        [readonly]=\"true\"\n                        [language]=\"FullScreenLanguage\"\n                        style=\"height: 100%; width: 100%;\">\n                    </mj-code-editor>\n                </div>\n            </div>\n        </div>\n    }\n</div>"]}