@memberjunction/ng-core-entity-forms 5.17.0 → 5.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.d.ts +5 -0
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.d.ts.map +1 -1
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +754 -622
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
- package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.d.ts +15 -0
- package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.d.ts.map +1 -1
- package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.js +110 -42
- package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.js.map +1 -1
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.d.ts +29 -1
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.d.ts.map +1 -1
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js +400 -44
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJUser/mjuser.form.component.js +9 -9
- package/dist/lib/generated/Entities/MJUser/mjuser.form.component.js.map +1 -1
- package/package.json +31 -31
|
@@ -13,6 +13,9 @@ export declare class ChatMessageViewerComponent implements OnInit, OnChanges {
|
|
|
13
13
|
showSystem: boolean;
|
|
14
14
|
showUser: boolean;
|
|
15
15
|
showAssistant: boolean;
|
|
16
|
+
FullScreenContent: string | null;
|
|
17
|
+
FullScreenLanguage: string;
|
|
18
|
+
FullScreenTitle: string;
|
|
16
19
|
private contentPartStates;
|
|
17
20
|
ngOnInit(): void;
|
|
18
21
|
ngOnChanges(): void;
|
|
@@ -65,6 +68,18 @@ export declare class ChatMessageViewerComponent implements OnInit, OnChanges {
|
|
|
65
68
|
* Toggle the expanded state of a content part
|
|
66
69
|
*/
|
|
67
70
|
toggleContentPart(partId: string): void;
|
|
71
|
+
/**
|
|
72
|
+
* Open the full-screen overlay with the given content
|
|
73
|
+
*/
|
|
74
|
+
openFullScreen(content: string, language: string, title: string): void;
|
|
75
|
+
/**
|
|
76
|
+
* Close the full-screen overlay
|
|
77
|
+
*/
|
|
78
|
+
closeFullScreen(): void;
|
|
79
|
+
/**
|
|
80
|
+
* Copy text to clipboard
|
|
81
|
+
*/
|
|
82
|
+
copyToClipboard(text: string): void;
|
|
68
83
|
static ɵfac: i0.ɵɵFactoryDeclaration<ChatMessageViewerComponent, never>;
|
|
69
84
|
static ɵcmp: i0.ɵɵComponentDeclaration<ChatMessageViewerComponent, "mj-chat-message-viewer", never, { "messages": { "alias": "messages"; "required": false; }; }, {}, never, never, false, never>;
|
|
70
85
|
}
|
|
@@ -1 +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;
|
|
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;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"}
|
|
@@ -6,14 +6,14 @@ import * as i3 from "@memberjunction/ng-code-editor";
|
|
|
6
6
|
const _forTrack0 = ($index, $item) => $item.id;
|
|
7
7
|
function ChatMessageViewerComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
|
|
8
8
|
i0.ɵɵelementStart(0, "div", 9);
|
|
9
|
-
i0.ɵɵelement(1, "i",
|
|
9
|
+
i0.ɵɵelement(1, "i", 11);
|
|
10
10
|
i0.ɵɵelementStart(2, "p");
|
|
11
11
|
i0.ɵɵtext(3, "No messages to display");
|
|
12
12
|
i0.ɵɵelementEnd()();
|
|
13
13
|
} }
|
|
14
|
-
function
|
|
15
|
-
i0.ɵɵelementStart(0, "div",
|
|
16
|
-
i0.ɵɵelement(1, "mj-code-editor",
|
|
14
|
+
function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
15
|
+
i0.ɵɵelementStart(0, "div", 27);
|
|
16
|
+
i0.ɵɵelement(1, "mj-code-editor", 29);
|
|
17
17
|
i0.ɵɵelementEnd();
|
|
18
18
|
} if (rf & 2) {
|
|
19
19
|
const item_r4 = i0.ɵɵnextContext(3).$implicit;
|
|
@@ -21,41 +21,45 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Condition
|
|
|
21
21
|
i0.ɵɵadvance();
|
|
22
22
|
i0.ɵɵproperty("value", ctx_r2.getContentString(item_r4.message.content))("readonly", true)("language", ctx_r2.getContentLanguage(item_r4.message.content));
|
|
23
23
|
} }
|
|
24
|
-
function
|
|
25
|
-
i0.ɵɵelementStart(0, "div",
|
|
26
|
-
i0.ɵɵelement(1, "mj-code-editor",
|
|
24
|
+
function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
25
|
+
i0.ɵɵelementStart(0, "div", 38);
|
|
26
|
+
i0.ɵɵelement(1, "mj-code-editor", 39);
|
|
27
27
|
i0.ɵɵelementEnd();
|
|
28
28
|
} if (rf & 2) {
|
|
29
29
|
const part_r6 = i0.ɵɵnextContext().$implicit;
|
|
30
30
|
i0.ɵɵadvance();
|
|
31
31
|
i0.ɵɵproperty("value", part_r6.value)("readonly", true)("language", part_r6.language);
|
|
32
32
|
} }
|
|
33
|
-
function
|
|
33
|
+
function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
34
34
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
35
|
-
i0.ɵɵelementStart(0, "div",
|
|
36
|
-
i0.ɵɵlistener("click", function
|
|
37
|
-
i0.ɵɵelementStart(2, "div",
|
|
38
|
-
i0.ɵɵelement(3, "i",
|
|
35
|
+
i0.ɵɵelementStart(0, "div", 31)(1, "div", 32);
|
|
36
|
+
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)); });
|
|
37
|
+
i0.ɵɵelementStart(2, "div", 33);
|
|
38
|
+
i0.ɵɵelement(3, "i", 34);
|
|
39
39
|
i0.ɵɵtext(4);
|
|
40
40
|
i0.ɵɵelementEnd();
|
|
41
|
-
i0.ɵɵelementStart(5, "button",
|
|
42
|
-
i0.ɵɵ
|
|
43
|
-
i0.ɵɵ
|
|
44
|
-
i0.ɵɵ
|
|
41
|
+
i0.ɵɵelementStart(5, "div", 35)(6, "button", 36);
|
|
42
|
+
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()); });
|
|
43
|
+
i0.ɵɵelement(7, "i", 24);
|
|
44
|
+
i0.ɵɵelementEnd();
|
|
45
|
+
i0.ɵɵelementStart(8, "button", 37);
|
|
46
|
+
i0.ɵɵelement(9, "i");
|
|
47
|
+
i0.ɵɵelementEnd()()();
|
|
48
|
+
i0.ɵɵconditionalCreate(10, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Conditional_10_Template, 2, 3, "div", 38);
|
|
45
49
|
i0.ɵɵelementEnd();
|
|
46
50
|
} if (rf & 2) {
|
|
47
51
|
const part_r6 = ctx.$implicit;
|
|
48
52
|
i0.ɵɵclassProp("collapsed", !part_r6.expanded);
|
|
49
53
|
i0.ɵɵadvance(4);
|
|
50
54
|
i0.ɵɵtextInterpolate1(" ", part_r6.key, " ");
|
|
51
|
-
i0.ɵɵadvance(
|
|
55
|
+
i0.ɵɵadvance(5);
|
|
52
56
|
i0.ɵɵclassMap(part_r6.expanded ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
|
|
53
57
|
i0.ɵɵadvance();
|
|
54
|
-
i0.ɵɵconditional(part_r6.expanded ?
|
|
58
|
+
i0.ɵɵconditional(part_r6.expanded ? 10 : -1);
|
|
55
59
|
} }
|
|
56
|
-
function
|
|
57
|
-
i0.ɵɵelementStart(0, "div",
|
|
58
|
-
i0.ɵɵrepeaterCreate(1,
|
|
60
|
+
function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
61
|
+
i0.ɵɵelementStart(0, "div", 28);
|
|
62
|
+
i0.ɵɵrepeaterCreate(1, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Conditional_2_For_2_Template, 11, 6, "div", 30, _forTrack0);
|
|
59
63
|
i0.ɵɵelementEnd();
|
|
60
64
|
} if (rf & 2) {
|
|
61
65
|
const ctx_r6 = i0.ɵɵnextContext(3);
|
|
@@ -65,9 +69,9 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Condition
|
|
|
65
69
|
i0.ɵɵadvance();
|
|
66
70
|
i0.ɵɵrepeater(ctx_r2.getContentParts(item_r4.message.content, ɵ$index_43_r2));
|
|
67
71
|
} }
|
|
68
|
-
function
|
|
69
|
-
i0.ɵɵelementStart(0, "div",
|
|
70
|
-
i0.ɵɵconditionalCreate(1,
|
|
72
|
+
function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
|
|
73
|
+
i0.ɵɵelementStart(0, "div", 26);
|
|
74
|
+
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);
|
|
71
75
|
i0.ɵɵelementEnd();
|
|
72
76
|
} if (rf & 2) {
|
|
73
77
|
const item_r4 = i0.ɵɵnextContext(2).$implicit;
|
|
@@ -77,32 +81,36 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Condition
|
|
|
77
81
|
} }
|
|
78
82
|
function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
79
83
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
80
|
-
i0.ɵɵelementStart(0, "div",
|
|
84
|
+
i0.ɵɵelementStart(0, "div", 12)(1, "div", 13);
|
|
81
85
|
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)); });
|
|
82
|
-
i0.ɵɵelementStart(2, "div",
|
|
86
|
+
i0.ɵɵelementStart(2, "div", 14)(3, "span", 15);
|
|
83
87
|
i0.ɵɵtext(4);
|
|
84
88
|
i0.ɵɵelementEnd();
|
|
85
89
|
i0.ɵɵelement(5, "i");
|
|
86
|
-
i0.ɵɵelementStart(6, "span",
|
|
90
|
+
i0.ɵɵelementStart(6, "span", 16);
|
|
87
91
|
i0.ɵɵtext(7);
|
|
88
92
|
i0.ɵɵelementEnd();
|
|
89
|
-
i0.ɵɵelementStart(8, "span",
|
|
93
|
+
i0.ɵɵelementStart(8, "span", 17)(9, "span", 18);
|
|
90
94
|
i0.ɵɵtext(10);
|
|
91
95
|
i0.ɵɵelementEnd();
|
|
92
|
-
i0.ɵɵelementStart(11, "span",
|
|
96
|
+
i0.ɵɵelementStart(11, "span", 19);
|
|
93
97
|
i0.ɵɵtext(12, "\u2022");
|
|
94
98
|
i0.ɵɵelementEnd();
|
|
95
|
-
i0.ɵɵelementStart(13, "span",
|
|
99
|
+
i0.ɵɵelementStart(13, "span", 18);
|
|
96
100
|
i0.ɵɵtext(14);
|
|
97
101
|
i0.ɵɵelementEnd()()();
|
|
98
|
-
i0.ɵɵelementStart(15, "div",
|
|
102
|
+
i0.ɵɵelementStart(15, "div", 20)(16, "button", 21);
|
|
99
103
|
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()); });
|
|
100
|
-
i0.ɵɵelement(17, "i",
|
|
104
|
+
i0.ɵɵelement(17, "i", 22);
|
|
105
|
+
i0.ɵɵelementEnd();
|
|
106
|
+
i0.ɵɵelementStart(18, "button", 23);
|
|
107
|
+
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()); });
|
|
108
|
+
i0.ɵɵelement(19, "i", 24);
|
|
101
109
|
i0.ɵɵelementEnd();
|
|
102
|
-
i0.ɵɵelementStart(
|
|
103
|
-
i0.ɵɵelement(
|
|
110
|
+
i0.ɵɵelementStart(20, "button", 25);
|
|
111
|
+
i0.ɵɵelement(21, "i");
|
|
104
112
|
i0.ɵɵelementEnd()()();
|
|
105
|
-
i0.ɵɵconditionalCreate(
|
|
113
|
+
i0.ɵɵconditionalCreate(22, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Conditional_22_Template, 3, 1, "div", 26);
|
|
106
114
|
i0.ɵɵelementEnd();
|
|
107
115
|
} if (rf & 2) {
|
|
108
116
|
const item_r4 = i0.ɵɵnextContext().$implicit;
|
|
@@ -119,13 +127,13 @@ function ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template(
|
|
|
119
127
|
i0.ɵɵtextInterpolate1("", ctx_r2.getContentStats(item_r4.message.content).chars.toLocaleString(), " chars");
|
|
120
128
|
i0.ɵɵadvance(4);
|
|
121
129
|
i0.ɵɵtextInterpolate1("~", ctx_r2.getContentStats(item_r4.message.content).approxTokens.toLocaleString(), " tokens");
|
|
122
|
-
i0.ɵɵadvance(
|
|
130
|
+
i0.ɵɵadvance(7);
|
|
123
131
|
i0.ɵɵclassMap(item_r4.expanded ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
|
|
124
132
|
i0.ɵɵadvance();
|
|
125
|
-
i0.ɵɵconditional(item_r4.expanded ?
|
|
133
|
+
i0.ɵɵconditional(item_r4.expanded ? 22 : -1);
|
|
126
134
|
} }
|
|
127
135
|
function ChatMessageViewerComponent_Conditional_19_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
128
|
-
i0.ɵɵconditionalCreate(0, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template,
|
|
136
|
+
i0.ɵɵconditionalCreate(0, ChatMessageViewerComponent_Conditional_19_For_1_Conditional_0_Template, 23, 12, "div", 12);
|
|
129
137
|
} if (rf & 2) {
|
|
130
138
|
const item_r4 = ctx.$implicit;
|
|
131
139
|
i0.ɵɵconditional(item_r4.visible ? 0 : -1);
|
|
@@ -136,6 +144,34 @@ function ChatMessageViewerComponent_Conditional_19_Template(rf, ctx) { if (rf &
|
|
|
136
144
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
137
145
|
i0.ɵɵrepeater(ctx_r2.displayMessages);
|
|
138
146
|
} }
|
|
147
|
+
function ChatMessageViewerComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
|
|
148
|
+
const _r8 = i0.ɵɵgetCurrentView();
|
|
149
|
+
i0.ɵɵelementStart(0, "div", 40);
|
|
150
|
+
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()); });
|
|
151
|
+
i0.ɵɵelementStart(1, "div", 41);
|
|
152
|
+
i0.ɵɵlistener("click", function ChatMessageViewerComponent_Conditional_20_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
153
|
+
i0.ɵɵelementStart(2, "div", 42)(3, "span", 43);
|
|
154
|
+
i0.ɵɵelement(4, "i", 24);
|
|
155
|
+
i0.ɵɵtext(5);
|
|
156
|
+
i0.ɵɵelementEnd();
|
|
157
|
+
i0.ɵɵelementStart(6, "div", 44)(7, "button", 45);
|
|
158
|
+
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)); });
|
|
159
|
+
i0.ɵɵelement(8, "i", 22);
|
|
160
|
+
i0.ɵɵelementEnd();
|
|
161
|
+
i0.ɵɵelementStart(9, "button", 46);
|
|
162
|
+
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()); });
|
|
163
|
+
i0.ɵɵelement(10, "i", 47);
|
|
164
|
+
i0.ɵɵelementEnd()()();
|
|
165
|
+
i0.ɵɵelementStart(11, "div", 48);
|
|
166
|
+
i0.ɵɵelement(12, "mj-code-editor", 49);
|
|
167
|
+
i0.ɵɵelementEnd()()();
|
|
168
|
+
} if (rf & 2) {
|
|
169
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
170
|
+
i0.ɵɵadvance(5);
|
|
171
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r2.FullScreenTitle, " ");
|
|
172
|
+
i0.ɵɵadvance(7);
|
|
173
|
+
i0.ɵɵproperty("value", ctx_r2.FullScreenContent)("readonly", true)("language", ctx_r2.FullScreenLanguage);
|
|
174
|
+
} }
|
|
139
175
|
export class ChatMessageViewerComponent {
|
|
140
176
|
constructor() {
|
|
141
177
|
this.messages = [];
|
|
@@ -143,6 +179,10 @@ export class ChatMessageViewerComponent {
|
|
|
143
179
|
this.showSystem = true;
|
|
144
180
|
this.showUser = true;
|
|
145
181
|
this.showAssistant = true;
|
|
182
|
+
// Full-screen overlay state
|
|
183
|
+
this.FullScreenContent = null;
|
|
184
|
+
this.FullScreenLanguage = 'markdown';
|
|
185
|
+
this.FullScreenTitle = '';
|
|
146
186
|
// Track expanded state for content parts
|
|
147
187
|
this.contentPartStates = new Map();
|
|
148
188
|
}
|
|
@@ -470,8 +510,32 @@ export class ChatMessageViewerComponent {
|
|
|
470
510
|
const currentState = this.contentPartStates.get(partId) || false;
|
|
471
511
|
this.contentPartStates.set(partId, !currentState);
|
|
472
512
|
}
|
|
513
|
+
/**
|
|
514
|
+
* Open the full-screen overlay with the given content
|
|
515
|
+
*/
|
|
516
|
+
openFullScreen(content, language, title) {
|
|
517
|
+
this.FullScreenContent = content;
|
|
518
|
+
this.FullScreenLanguage = language;
|
|
519
|
+
this.FullScreenTitle = title;
|
|
520
|
+
}
|
|
521
|
+
/**
|
|
522
|
+
* Close the full-screen overlay
|
|
523
|
+
*/
|
|
524
|
+
closeFullScreen() {
|
|
525
|
+
this.FullScreenContent = null;
|
|
526
|
+
}
|
|
527
|
+
/**
|
|
528
|
+
* Copy text to clipboard
|
|
529
|
+
*/
|
|
530
|
+
copyToClipboard(text) {
|
|
531
|
+
navigator.clipboard.writeText(text).then(() => {
|
|
532
|
+
console.log('Content copied to clipboard');
|
|
533
|
+
}).catch(err => {
|
|
534
|
+
console.error('Failed to copy:', err);
|
|
535
|
+
});
|
|
536
|
+
}
|
|
473
537
|
static { this.ɵfac = function ChatMessageViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ChatMessageViewerComponent)(); }; }
|
|
474
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ChatMessageViewerComponent, selectors: [["mj-chat-message-viewer"]], inputs: { messages: "messages" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls:
|
|
538
|
+
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) {
|
|
475
539
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "label", 2)(3, "input", 3);
|
|
476
540
|
i0.ɵɵtwoWayListener("ngModelChange", function ChatMessageViewerComponent_Template_input_ngModelChange_3_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.showSystem, $event) || (ctx.showSystem = $event); return $event; });
|
|
477
541
|
i0.ɵɵlistener("ngModelChange", function ChatMessageViewerComponent_Template_input_ngModelChange_3_listener() { return ctx.onFilterChange(); });
|
|
@@ -498,7 +562,9 @@ export class ChatMessageViewerComponent {
|
|
|
498
562
|
i0.ɵɵelementEnd()()();
|
|
499
563
|
i0.ɵɵelementStart(17, "div", 8);
|
|
500
564
|
i0.ɵɵconditionalCreate(18, ChatMessageViewerComponent_Conditional_18_Template, 4, 0, "div", 9)(19, ChatMessageViewerComponent_Conditional_19_Template, 2, 0);
|
|
501
|
-
i0.ɵɵelementEnd()
|
|
565
|
+
i0.ɵɵelementEnd();
|
|
566
|
+
i0.ɵɵconditionalCreate(20, ChatMessageViewerComponent_Conditional_20_Template, 13, 4, "div", 10);
|
|
567
|
+
i0.ɵɵelementEnd();
|
|
502
568
|
} if (rf & 2) {
|
|
503
569
|
i0.ɵɵadvance(3);
|
|
504
570
|
i0.ɵɵtwoWayProperty("ngModel", ctx.showSystem);
|
|
@@ -514,11 +580,13 @@ export class ChatMessageViewerComponent {
|
|
|
514
580
|
i0.ɵɵstyleProp("color", ctx.getRoleColor("assistant"));
|
|
515
581
|
i0.ɵɵadvance(3);
|
|
516
582
|
i0.ɵɵconditional(ctx.displayMessages.length === 0 ? 18 : 19);
|
|
517
|
-
|
|
583
|
+
i0.ɵɵadvance(2);
|
|
584
|
+
i0.ɵɵconditional(ctx.FullScreenContent ? 20 : -1);
|
|
585
|
+
} }, 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}"] }); }
|
|
518
586
|
}
|
|
519
587
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChatMessageViewerComponent, [{
|
|
520
588
|
type: Component,
|
|
521
|
-
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}"] }]
|
|
589
|
+
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}"] }]
|
|
522
590
|
}], null, { messages: [{
|
|
523
591
|
type: Input
|
|
524
592
|
}] }); })();
|