@memberjunction/ng-core-entity-forms 5.16.0 → 5.18.0

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

@@ -13,6 +13,9 @@ export declare class ChatMessageViewerComponent implements OnInit, OnChanges {
     showSystem: boolean;
     showUser: boolean;
     showAssistant: boolean;
+    FullScreenContent: string | null;
+    FullScreenLanguage: string;
+    FullScreenTitle: string;
     private contentPartStates;
     ngOnInit(): void;
     ngOnChanges(): void;
@@ -65,6 +68,18 @@ export declare class ChatMessageViewerComponent implements OnInit, OnChanges {
      * Toggle the expanded state of a content part
      */
     toggleContentPart(partId: string): void;
+    /**
+     * Open the full-screen overlay with the given content
+     */
+    openFullScreen(content: string, language: string, title: string): void;
+    /**
+     * Close the full-screen overlay
+     */
+    closeFullScreen(): void;
+    /**
+     * Copy text to clipboard
+     */
+    copyToClipboard(text: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatMessageViewerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChatMessageViewerComponent, "mj-chat-message-viewer", never, { "messages": { "alias": "messages"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"chat-message-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/AIPromptRuns/chat-message-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,WAAW,EAAmB,kBAAkB,EAA2B,MAAM,oBAAoB,CAAC;;AAE/G,UAAU,cAAc;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;CAC1B;AAED,qBAMa,0BAA2B,YAAW,MAAM,EAAE,SAAS;IACvD,QAAQ,EAAE,WAAW,EAAE,CAAM;IAE/B,eAAe,EAAE,cAAc,EAAE,CAAM;IACvC,UAAU,UAAQ;IAClB,QAAQ,UAAQ;IAChB,aAAa,UAAQ;IAG5B,OAAO,CAAC,iBAAiB,CAA8B;IAEvD,QAAQ;IAIR,WAAW;IAIX,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAajB,cAAc;IAMd,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAajC,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAalC,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAIlC,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM;IAgBrD,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM;IAiBvD,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAezC,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO;IAIrD,cAAc,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM;IAuCnD,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE;IAsCpG,kBAAkB,CAAC,OAAO,EAAE,kBAAkB;IASrD;;;OAGG;IACI,eAAe,CAAC,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAC,CAAC;IAmD/J;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAgB5B;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACI,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO;IAgB7D;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;OAEG;IACI,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;yCAlVrC,0BAA0B;2CAA1B,0BAA0B;CAsVtC"}
+{"version":3,"file":"chat-message-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/AIPromptRuns/chat-message-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,WAAW,EAAmB,kBAAkB,EAA2B,MAAM,oBAAoB,CAAC;;AAE/G,UAAU,cAAc;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;CAC1B;AAED,qBAMa,0BAA2B,YAAW,MAAM,EAAE,SAAS;IACvD,QAAQ,EAAE,WAAW,EAAE,CAAM;IAE/B,eAAe,EAAE,cAAc,EAAE,CAAM;IACvC,UAAU,UAAQ;IAClB,QAAQ,UAAQ;IAChB,aAAa,UAAQ;IAGrB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,kBAAkB,SAAc;IAChC,eAAe,SAAM;IAG5B,OAAO,CAAC,iBAAiB,CAA8B;IAEvD,QAAQ;IAIR,WAAW;IAIX,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAajB,cAAc;IAMd,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAajC,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAalC,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAIlC,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM;IAgBrD,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM;IAiBvD,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAezC,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO;IAIrD,cAAc,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM;IAuCnD,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE;IAsCpG,kBAAkB,CAAC,OAAO,EAAE,kBAAkB;IASrD;;;OAGG;IACI,eAAe,CAAC,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAC,CAAC;IAmD/J;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAgB5B;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACI,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO;IAgB7D;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;OAEG;IACI,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAK9C;;OAEG;IACI,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAM7E;;OAEG;IACI,eAAe,IAAI,IAAI;IAI9B;;OAEG;IACI,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;yCA/WjC,0BAA0B;2CAA1B,0BAA0B;CAsXtC"}

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

@@ -6,14 +6,14 @@ 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", 10);
+    i0.ɵɵelement(1, "i", 11);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No messages to display");
     i0.ɵɵelementEnd()();
 } }
-function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵelement(1, "mj-code-editor", 26);
+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.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = i0.ɵɵnextContext(3).$implicit;
@@ -21,41 +21,45 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Condition
     i0.ɵɵadvance();
     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_20_Conditional_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "mj-code-editor", 34);
+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.ɵɵelementEnd();
 } if (rf & 2) {
     const part_r6 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
     i0.ɵɵproperty("value", part_r6.value)("readonly", true)("language", part_r6.language);
 } }
-function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_20_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+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", 28)(1, "div", 29);
-    i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_20_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", 30);
-    i0.ɵɵelement(3, "i", 31);
+    i0.ɵɵelementStart(0, "div", 31)(1, "div", 32);
+    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.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 32);
-    i0.ɵɵelement(6, "i");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_20_Conditional_2_For_2_Conditional_7_Template, 2, 3, "div", 33);
+    i0.ɵɵelementStart(5, "div", 35)(6, "button", 36);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 37);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
     const part_r6 = ctx.$implicit;
     i0.ɵɵclassProp("collapsed", !part_r6.expanded);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", part_r6.key, " ");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(5);
     i0.ɵɵclassMap(part_r6.expanded ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(part_r6.expanded ? 7 : -1);
+    i0.ɵɵconditional(part_r6.expanded ? 10 : -1);
 } }
-function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵrepeaterCreate(1, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_20_Conditional_2_For_2_Template, 8, 6, "div", 27, _forTrack0);
+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.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r6 = i0.ɵɵnextContext(3);
@@ -65,9 +69,9 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Condition
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.getContentParts(item_r4.message.content, ɵ$index_43_r2));
 } }
-function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23);
-    i0.ɵɵconditionalCreate(1, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_20_Conditional_1_Template, 2, 3, "div", 24)(2, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_20_Conditional_2_Template, 3, 0, "div", 25);
+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.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = i0.ɵɵnextContext(2).$implicit;
@@ -77,32 +81,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", 11)(1, "div", 12);
+    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", 13)(3, "span", 14);
+    i0.ɵɵelementStart(2, "div", 14)(3, "span", 15);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
     i0.ɵɵelement(5, "i");
-    i0.ɵɵelementStart(6, "span", 15);
+    i0.ɵɵelementStart(6, "span", 16);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 16)(9, "span", 17);
+    i0.ɵɵelementStart(8, "span", 17)(9, "span", 18);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 18);
+    i0.ɵɵelementStart(11, "span", 19);
     i0.ɵɵtext(12, "\u2022");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 17);
+    i0.ɵɵelementStart(13, "span", 18);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 19)(16, "button", 20);
+    i0.ɵɵelementStart(15, "div", 20)(16, "button", 21);
     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", 21);
+    i0.ɵɵelement(17, "i", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 23);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 22);
-    i0.ɵɵelement(19, "i");
+    i0.ɵɵelementStart(20, "button", 25);
+    i0.ɵɵelement(21, "i");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(20, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_20_Template, 3, 1, "div", 23);
+    i0.ɵɵconditionalCreate(22, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Template, 3, 1, "div", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = i0.ɵɵnextContext().$implicit;
@@ -119,13 +127,13 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template(
     i0.ɵɵtextInterpolate1("", ctx_r2.getContentStats(item_r4.message.content).chars.toLocaleString(), " chars");
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1("~", ctx_r2.getContentStats(item_r4.message.content).approxTokens.toLocaleString(), " tokens");
-    i0.ɵɵadvance(5);
+    i0.ɵɵadvance(7);
     i0.ɵɵclassMap(item_r4.expanded ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r4.expanded ? 20 : -1);
+    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, 21, 12, "div", 11);
+    i0.ɵɵconditionalCreate(0, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template, 23, 12, "div", 12);
 } if (rf & 2) {
     const item_r4 = ctx.$implicit;
     i0.ɵɵconditional(item_r4.visible ? 0 : -1);
@@ -136,6 +144,34 @@ function ChatMessageViewerComponent_Conditional_19_Template(rf, ctx) { if (rf &
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r2.displayMessages);
 } }
+function ChatMessageViewerComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40);
+    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.ɵɵ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.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 44)(7, "button", 45);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 46);
+    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.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "div", 48);
+    i0.ɵɵelement(12, "mj-code-editor", 49);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.FullScreenTitle, " ");
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("value", ctx_r2.FullScreenContent)("readonly", true)("language", ctx_r2.FullScreenLanguage);
+} }
 export class ChatMessageViewerComponent {
     constructor() {
         this.messages = [];
@@ -143,6 +179,10 @@ export class ChatMessageViewerComponent {
         this.showSystem = true;
         this.showUser = true;
         this.showAssistant = true;
+        // Full-screen overlay state
+        this.FullScreenContent = null;
+        this.FullScreenLanguage = 'markdown';
+        this.FullScreenTitle = '';
         // Track expanded state for content parts
         this.contentPartStates = new Map();
     }
@@ -470,8 +510,32 @@ export class ChatMessageViewerComponent {
         const currentState = this.contentPartStates.get(partId) || false;
         this.contentPartStates.set(partId, !currentState);
     }
+    /**
+     * Open the full-screen overlay with the given content
+     */
+    openFullScreen(content, language, title) {
+        this.FullScreenContent = content;
+        this.FullScreenLanguage = language;
+        this.FullScreenTitle = title;
+    }
+    /**
+     * Close the full-screen overlay
+     */
+    closeFullScreen() {
+        this.FullScreenContent = null;
+    }
+    /**
+     * Copy text to clipboard
+     */
+    copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(() => {
+            console.log('Content copied to clipboard');
+        }).catch(err => {
+            console.error('Failed to copy:', err);
+        });
+    }
     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: 20, vars: 10, consts: [[1, "chat-message-viewer"], [1, "filter-controls"], [1, "filter-checkbox"], ["type", "checkbox", "kendoCheckBox", "", 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, "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", 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"], ["type", "button", 1, "content-part-toggle"], [1, "content-part-editor"], [2, "max-height", "400px", "overflow-y", "auto", 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", "kendoCheckBox", "", 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) {
             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(); });
@@ -498,7 +562,9 @@ export class ChatMessageViewerComponent {
             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.ɵɵelementEnd()();
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(20, ChatMessageViewerComponent_Conditional_20_Template, 13, 4, "div", 10);
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵtwoWayProperty("ngModel", ctx.showSystem);
@@ -514,11 +580,13 @@ export class ChatMessageViewerComponent {
             i0.ɵɵstyleProp("color", ctx.getRoleColor("assistant"));
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.displayMessages.length === 0 ? 18 : 19);
-        } }, dependencies: [i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.CheckBoxDirective, 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.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@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}"] }); }
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.FullScreenContent ? 20 : -1);
+        } }, dependencies: [i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.CheckBoxDirective, 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.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}"] }); }
 }
 (() => { (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                   kendoCheckBox />\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                   kendoCheckBox />\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                   kendoCheckBox />\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=\"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                                                    <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                                                @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</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/* 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                   kendoCheckBox />\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                   kendoCheckBox />\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                   kendoCheckBox />\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}"] }]
     }], null, { messages: [{
             type: Input
         }] }); })();