@memberjunction/ng-dashboards 2.54.0 → 2.55.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/AI/ai-dashboard.component.d.ts.map +1 -1
- package/dist/AI/ai-dashboard.component.js +47 -47
- package/dist/AI/ai-dashboard.component.js.map +1 -1
- package/dist/AI/components/agents/agent-configuration.component.d.ts +8 -3
- package/dist/AI/components/agents/agent-configuration.component.d.ts.map +1 -1
- package/dist/AI/components/agents/agent-configuration.component.js +99 -67
- package/dist/AI/components/agents/agent-configuration.component.js.map +1 -1
- package/dist/AI/components/prompts/prompt-management-v2.component.d.ts +3 -0
- package/dist/AI/components/prompts/prompt-management-v2.component.d.ts.map +1 -1
- package/dist/AI/components/prompts/prompt-management-v2.component.js +148 -104
- package/dist/AI/components/prompts/prompt-management-v2.component.js.map +1 -1
- package/dist/Actions/actions-management-dashboard.component.d.ts +1 -0
- package/dist/Actions/actions-management-dashboard.component.d.ts.map +1 -1
- package/dist/Actions/actions-management-dashboard.component.js +31 -16
- package/dist/Actions/actions-management-dashboard.component.js.map +1 -1
- package/dist/Actions/components/actions-overview.component.d.ts +3 -1
- package/dist/Actions/components/actions-overview.component.d.ts.map +1 -1
- package/dist/Actions/components/actions-overview.component.js +97 -77
- package/dist/Actions/components/actions-overview.component.js.map +1 -1
- package/dist/module.d.ts +10 -6
- package/dist/module.d.ts.map +1 -1
- package/dist/module.js +22 -3
- package/dist/module.js.map +1 -1
- package/package.json +12 -7
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { Component, Output, EventEmitter, Input } from '@angular/core';
|
|
2
|
-
import { RunView
|
|
2
|
+
import { RunView } from '@memberjunction/core';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
-
import * as i1 from "@
|
|
5
|
-
import * as i2 from "
|
|
4
|
+
import * as i1 from "@memberjunction/ng-core-entity-forms";
|
|
5
|
+
import * as i2 from "@progress/kendo-angular-layout";
|
|
6
|
+
import * as i3 from "@progress/kendo-angular-dialog";
|
|
7
|
+
import * as i4 from "@memberjunction/ng-ai-test-harness";
|
|
8
|
+
import * as i5 from "./agent-filter-panel.component";
|
|
6
9
|
const _forTrack0 = ($index, $item) => $item.ID;
|
|
7
10
|
function AgentConfigurationComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
8
11
|
i0.ɵɵtext(0, " Hide Filters ");
|
|
@@ -11,16 +14,16 @@ function AgentConfigurationComponent_Conditional_9_Template(rf, ctx) { if (rf &
|
|
|
11
14
|
i0.ɵɵtext(0, " Show Filters ");
|
|
12
15
|
} }
|
|
13
16
|
function AgentConfigurationComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
|
|
14
|
-
i0.ɵɵelementStart(0, "div", 22)(1, "div",
|
|
15
|
-
i0.ɵɵelement(3, "div",
|
|
17
|
+
i0.ɵɵelementStart(0, "div", 22)(1, "div", 24)(2, "div", 25);
|
|
18
|
+
i0.ɵɵelement(3, "div", 26)(4, "div", 26)(5, "div", 26);
|
|
16
19
|
i0.ɵɵelementEnd();
|
|
17
|
-
i0.ɵɵelementStart(6, "div",
|
|
20
|
+
i0.ɵɵelementStart(6, "div", 27);
|
|
18
21
|
i0.ɵɵtext(7, "Loading agents...");
|
|
19
22
|
i0.ɵɵelementEnd()()();
|
|
20
23
|
} }
|
|
21
24
|
function AgentConfigurationComponent_Conditional_28_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
22
25
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
23
|
-
i0.ɵɵelementStart(0, "div",
|
|
26
|
+
i0.ɵɵelementStart(0, "div", 28);
|
|
24
27
|
i0.ɵɵelement(1, "i", 4);
|
|
25
28
|
i0.ɵɵelementStart(2, "h3");
|
|
26
29
|
i0.ɵɵtext(3, "No agents found");
|
|
@@ -28,15 +31,15 @@ function AgentConfigurationComponent_Conditional_28_Conditional_0_Template(rf, c
|
|
|
28
31
|
i0.ɵɵelementStart(4, "p");
|
|
29
32
|
i0.ɵɵtext(5, "No agents match your current filters. Try adjusting your search criteria or create a new agent.");
|
|
30
33
|
i0.ɵɵelementEnd();
|
|
31
|
-
i0.ɵɵelementStart(6, "button",
|
|
34
|
+
i0.ɵɵelementStart(6, "button", 29);
|
|
32
35
|
i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createNewAgent()); });
|
|
33
36
|
i0.ɵɵelement(7, "i", 15);
|
|
34
37
|
i0.ɵɵtext(8, " Create New Agent ");
|
|
35
38
|
i0.ɵɵelementEnd()();
|
|
36
39
|
} }
|
|
37
40
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
|
|
38
|
-
i0.ɵɵelementStart(0, "span",
|
|
39
|
-
i0.ɵɵelement(1, "i",
|
|
41
|
+
i0.ɵɵelementStart(0, "span", 40);
|
|
42
|
+
i0.ɵɵelement(1, "i", 52);
|
|
40
43
|
i0.ɵɵtext(2);
|
|
41
44
|
i0.ɵɵelementEnd();
|
|
42
45
|
} if (rf & 2) {
|
|
@@ -46,13 +49,13 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
|
|
|
46
49
|
i0.ɵɵtextInterpolate1(" ", agent_r4.Status, " ");
|
|
47
50
|
} }
|
|
48
51
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
|
|
49
|
-
i0.ɵɵelementStart(0, "span",
|
|
50
|
-
i0.ɵɵelement(1, "i",
|
|
52
|
+
i0.ɵɵelementStart(0, "span", 40);
|
|
53
|
+
i0.ɵɵelement(1, "i", 53);
|
|
51
54
|
i0.ɵɵtext(2, " Exposed ");
|
|
52
55
|
i0.ɵɵelementEnd();
|
|
53
56
|
} }
|
|
54
57
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
|
|
55
|
-
i0.ɵɵelementStart(0, "p",
|
|
58
|
+
i0.ɵɵelementStart(0, "p", 45);
|
|
56
59
|
i0.ɵɵtext(1);
|
|
57
60
|
i0.ɵɵelementEnd();
|
|
58
61
|
} if (rf & 2) {
|
|
@@ -61,15 +64,15 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
|
|
|
61
64
|
i0.ɵɵtextInterpolate(agent_r4.Description);
|
|
62
65
|
} }
|
|
63
66
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
|
|
64
|
-
i0.ɵɵelementStart(0, "p",
|
|
67
|
+
i0.ɵɵelementStart(0, "p", 46);
|
|
65
68
|
i0.ɵɵtext(1, "No description provided");
|
|
66
69
|
i0.ɵɵelementEnd();
|
|
67
70
|
} }
|
|
68
71
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
69
|
-
i0.ɵɵelementStart(0, "div",
|
|
72
|
+
i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
|
|
70
73
|
i0.ɵɵtext(2, "Parent");
|
|
71
74
|
i0.ɵɵelementEnd();
|
|
72
|
-
i0.ɵɵelementStart(3, "span",
|
|
75
|
+
i0.ɵɵelementStart(3, "span", 57);
|
|
73
76
|
i0.ɵɵtext(4);
|
|
74
77
|
i0.ɵɵelementEnd()();
|
|
75
78
|
} if (rf & 2) {
|
|
@@ -78,20 +81,20 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
|
|
|
78
81
|
i0.ɵɵtextInterpolate(agent_r4.Parent);
|
|
79
82
|
} }
|
|
80
83
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
81
|
-
i0.ɵɵelement(0, "i",
|
|
84
|
+
i0.ɵɵelement(0, "i", 58);
|
|
82
85
|
i0.ɵɵtext(1, " Enabled ");
|
|
83
86
|
} }
|
|
84
87
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
85
|
-
i0.ɵɵelement(0, "i",
|
|
88
|
+
i0.ɵɵelement(0, "i", 59);
|
|
86
89
|
i0.ɵɵtext(1, " Disabled ");
|
|
87
90
|
} }
|
|
88
91
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
|
|
89
|
-
i0.ɵɵelementStart(0, "div",
|
|
90
|
-
i0.ɵɵtemplate(2, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template, 5, 1, "div",
|
|
91
|
-
i0.ɵɵelementStart(3, "div",
|
|
92
|
+
i0.ɵɵelementStart(0, "div", 47)(1, "div", 54);
|
|
93
|
+
i0.ɵɵtemplate(2, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_2_Template, 5, 1, "div", 55);
|
|
94
|
+
i0.ɵɵelementStart(3, "div", 55)(4, "span", 56);
|
|
92
95
|
i0.ɵɵtext(5, "Context Compression");
|
|
93
96
|
i0.ɵɵelementEnd();
|
|
94
|
-
i0.ɵɵelementStart(6, "span",
|
|
97
|
+
i0.ɵɵelementStart(6, "span", 57);
|
|
95
98
|
i0.ɵɵtemplate(7, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_7_Template, 2, 0)(8, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Conditional_8_Template, 2, 0);
|
|
96
99
|
i0.ɵɵelementEnd()()()();
|
|
97
100
|
} if (rf & 2) {
|
|
@@ -103,39 +106,39 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
|
|
|
103
106
|
} }
|
|
104
107
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
|
|
105
108
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
106
|
-
i0.ɵɵelementStart(0, "button",
|
|
109
|
+
i0.ɵɵelementStart(0, "button", 60);
|
|
107
110
|
i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const agent_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.runAgent(agent_r4)); });
|
|
108
|
-
i0.ɵɵelement(1, "i",
|
|
111
|
+
i0.ɵɵelement(1, "i", 61);
|
|
109
112
|
i0.ɵɵtext(2, " Run ");
|
|
110
113
|
i0.ɵɵelementEnd();
|
|
111
114
|
} }
|
|
112
115
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
113
116
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
114
|
-
i0.ɵɵelementStart(0, "div",
|
|
117
|
+
i0.ɵɵelementStart(0, "div", 33)(1, "div", 34);
|
|
115
118
|
i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_div_click_1_listener() { const agent_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleAgentExpansion(agent_r4.ID)); });
|
|
116
|
-
i0.ɵɵelementStart(2, "div",
|
|
119
|
+
i0.ɵɵelementStart(2, "div", 35)(3, "div", 36);
|
|
117
120
|
i0.ɵɵelement(4, "i");
|
|
118
121
|
i0.ɵɵelementEnd();
|
|
119
|
-
i0.ɵɵelementStart(5, "div",
|
|
122
|
+
i0.ɵɵelementStart(5, "div", 37)(6, "h4", 38);
|
|
120
123
|
i0.ɵɵtext(7);
|
|
121
124
|
i0.ɵɵelementEnd();
|
|
122
|
-
i0.ɵɵelementStart(8, "div",
|
|
123
|
-
i0.ɵɵelement(10, "i",
|
|
125
|
+
i0.ɵɵelementStart(8, "div", 39)(9, "span", 40);
|
|
126
|
+
i0.ɵɵelement(10, "i", 41);
|
|
124
127
|
i0.ɵɵtext(11);
|
|
125
128
|
i0.ɵɵelementEnd();
|
|
126
|
-
i0.ɵɵtemplate(12, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_12_Template, 3, 3, "span",
|
|
129
|
+
i0.ɵɵtemplate(12, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_12_Template, 3, 3, "span", 42)(13, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_13_Template, 3, 0, "span", 40);
|
|
127
130
|
i0.ɵɵelementEnd()()();
|
|
128
|
-
i0.ɵɵelement(14, "i",
|
|
131
|
+
i0.ɵɵelement(14, "i", 43);
|
|
129
132
|
i0.ɵɵelementEnd();
|
|
130
|
-
i0.ɵɵelementStart(15, "div",
|
|
131
|
-
i0.ɵɵtemplate(16, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 1, "p",
|
|
133
|
+
i0.ɵɵelementStart(15, "div", 44);
|
|
134
|
+
i0.ɵɵtemplate(16, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_16_Template, 2, 1, "p", 45)(17, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_17_Template, 2, 0, "p", 46)(18, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_18_Template, 9, 2, "div", 47);
|
|
132
135
|
i0.ɵɵelementEnd();
|
|
133
|
-
i0.ɵɵelementStart(19, "div",
|
|
136
|
+
i0.ɵɵelementStart(19, "div", 48)(20, "button", 49);
|
|
134
137
|
i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template_button_click_20_listener() { const agent_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentRecord(agent_r4.ID)); });
|
|
135
|
-
i0.ɵɵelement(21, "i",
|
|
138
|
+
i0.ɵɵelement(21, "i", 50);
|
|
136
139
|
i0.ɵɵtext(22, " Open ");
|
|
137
140
|
i0.ɵɵelementEnd();
|
|
138
|
-
i0.ɵɵtemplate(23, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_23_Template, 3, 0, "button",
|
|
141
|
+
i0.ɵɵtemplate(23, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Conditional_23_Template, 3, 0, "button", 51);
|
|
139
142
|
i0.ɵɵelementEnd()();
|
|
140
143
|
} if (rf & 2) {
|
|
141
144
|
const agent_r4 = ctx.$implicit;
|
|
@@ -163,8 +166,8 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
|
|
|
163
166
|
i0.ɵɵconditional(agent_r4.Status === "Active" ? 23 : -1);
|
|
164
167
|
} }
|
|
165
168
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
166
|
-
i0.ɵɵelementStart(0, "div",
|
|
167
|
-
i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template, 24, 15, "div",
|
|
169
|
+
i0.ɵɵelementStart(0, "div", 30);
|
|
170
|
+
i0.ɵɵrepeaterCreate(1, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_For_2_Template, 24, 15, "div", 32, _forTrack0);
|
|
168
171
|
i0.ɵɵelementEnd();
|
|
169
172
|
} if (rf & 2) {
|
|
170
173
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
@@ -172,7 +175,7 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_
|
|
|
172
175
|
i0.ɵɵrepeater(ctx_r1.filteredAgents);
|
|
173
176
|
} }
|
|
174
177
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
175
|
-
i0.ɵɵelementStart(0, "div",
|
|
178
|
+
i0.ɵɵelementStart(0, "div", 65);
|
|
176
179
|
i0.ɵɵtext(1);
|
|
177
180
|
i0.ɵɵelementEnd();
|
|
178
181
|
} if (rf & 2) {
|
|
@@ -182,33 +185,33 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_
|
|
|
182
185
|
} }
|
|
183
186
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_20_Template(rf, ctx) { if (rf & 1) {
|
|
184
187
|
const _r8 = i0.ɵɵgetCurrentView();
|
|
185
|
-
i0.ɵɵelementStart(0, "button",
|
|
188
|
+
i0.ɵɵelementStart(0, "button", 71);
|
|
186
189
|
i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const agent_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.runAgent(agent_r7)); });
|
|
187
|
-
i0.ɵɵelement(1, "i",
|
|
190
|
+
i0.ɵɵelement(1, "i", 61);
|
|
188
191
|
i0.ɵɵelementEnd();
|
|
189
192
|
} }
|
|
190
193
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Template(rf, ctx) { if (rf & 1) {
|
|
191
194
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
192
|
-
i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div",
|
|
195
|
+
i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 63)(3, "div", 64);
|
|
193
196
|
i0.ɵɵelement(4, "i");
|
|
194
197
|
i0.ɵɵelementEnd();
|
|
195
|
-
i0.ɵɵelementStart(5, "div")(6, "div",
|
|
198
|
+
i0.ɵɵelementStart(5, "div")(6, "div", 38);
|
|
196
199
|
i0.ɵɵtext(7);
|
|
197
200
|
i0.ɵɵelementEnd();
|
|
198
|
-
i0.ɵɵtemplate(8, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_8_Template, 2, 1, "div",
|
|
201
|
+
i0.ɵɵtemplate(8, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_8_Template, 2, 1, "div", 65);
|
|
199
202
|
i0.ɵɵelementEnd()()();
|
|
200
|
-
i0.ɵɵelementStart(9, "td")(10, "span",
|
|
203
|
+
i0.ɵɵelementStart(9, "td")(10, "span", 66);
|
|
201
204
|
i0.ɵɵtext(11);
|
|
202
205
|
i0.ɵɵelementEnd()();
|
|
203
|
-
i0.ɵɵelementStart(12, "td")(13, "span",
|
|
206
|
+
i0.ɵɵelementStart(12, "td")(13, "span", 67);
|
|
204
207
|
i0.ɵɵelement(14, "i");
|
|
205
208
|
i0.ɵɵtext(15);
|
|
206
209
|
i0.ɵɵelementEnd()();
|
|
207
|
-
i0.ɵɵelementStart(16, "td")(17, "div",
|
|
210
|
+
i0.ɵɵelementStart(16, "td")(17, "div", 68)(18, "button", 69);
|
|
208
211
|
i0.ɵɵlistener("click", function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Template_button_click_18_listener() { const agent_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openAgentRecord(agent_r7.ID)); });
|
|
209
|
-
i0.ɵɵelement(19, "i",
|
|
212
|
+
i0.ɵɵelement(19, "i", 50);
|
|
210
213
|
i0.ɵɵelementEnd();
|
|
211
|
-
i0.ɵɵtemplate(20, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_20_Template, 2, 0, "button",
|
|
214
|
+
i0.ɵɵtemplate(20, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_For_14_Conditional_20_Template, 2, 0, "button", 70);
|
|
212
215
|
i0.ɵɵelementEnd()()();
|
|
213
216
|
} if (rf & 2) {
|
|
214
217
|
const agent_r7 = ctx.$implicit;
|
|
@@ -233,7 +236,7 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_
|
|
|
233
236
|
i0.ɵɵconditional(agent_r7.Status === "Active" ? 20 : -1);
|
|
234
237
|
} }
|
|
235
238
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
236
|
-
i0.ɵɵelementStart(0, "div",
|
|
239
|
+
i0.ɵɵelementStart(0, "div", 31)(1, "table", 62)(2, "thead")(3, "tr")(4, "th");
|
|
237
240
|
i0.ɵɵtext(5, "Name");
|
|
238
241
|
i0.ɵɵelementEnd();
|
|
239
242
|
i0.ɵɵelementStart(6, "th");
|
|
@@ -254,7 +257,7 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_
|
|
|
254
257
|
i0.ɵɵrepeater(ctx_r1.filteredAgents);
|
|
255
258
|
} }
|
|
256
259
|
function AgentConfigurationComponent_Conditional_28_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
257
|
-
i0.ɵɵtemplate(0, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_Template, 3, 0, "div",
|
|
260
|
+
i0.ɵɵtemplate(0, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_0_Template, 3, 0, "div", 30)(1, AgentConfigurationComponent_Conditional_28_Conditional_1_Conditional_1_Template, 15, 0, "div", 31);
|
|
258
261
|
} if (rf & 2) {
|
|
259
262
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
260
263
|
i0.ɵɵconditional(ctx_r1.viewMode === "grid" ? 0 : -1);
|
|
@@ -262,12 +265,28 @@ function AgentConfigurationComponent_Conditional_28_Conditional_1_Template(rf, c
|
|
|
262
265
|
i0.ɵɵconditional(ctx_r1.viewMode === "list" ? 1 : -1);
|
|
263
266
|
} }
|
|
264
267
|
function AgentConfigurationComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
|
|
265
|
-
i0.ɵɵtemplate(0, AgentConfigurationComponent_Conditional_28_Conditional_0_Template, 9, 0, "div",
|
|
268
|
+
i0.ɵɵtemplate(0, AgentConfigurationComponent_Conditional_28_Conditional_0_Template, 9, 0, "div", 28)(1, AgentConfigurationComponent_Conditional_28_Conditional_1_Template, 2, 2);
|
|
266
269
|
} if (rf & 2) {
|
|
267
270
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
268
271
|
i0.ɵɵconditional(ctx_r1.filteredAgents.length === 0 ? 0 : 1);
|
|
269
272
|
} }
|
|
273
|
+
function AgentConfigurationComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
|
|
274
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
275
|
+
i0.ɵɵelementStart(0, "kendo-window", 72);
|
|
276
|
+
i0.ɵɵlistener("close", function AgentConfigurationComponent_Conditional_29_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeTestHarness()); });
|
|
277
|
+
i0.ɵɵelementStart(1, "mj-ai-test-harness", 73);
|
|
278
|
+
i0.ɵɵlistener("visibilityChange", function AgentConfigurationComponent_Conditional_29_Template_mj_ai_test_harness_visibilityChange_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeTestHarness()); });
|
|
279
|
+
i0.ɵɵelementEnd()();
|
|
280
|
+
} if (rf & 2) {
|
|
281
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
282
|
+
i0.ɵɵpropertyInterpolate1("title", "Run AI Agent - ", ctx_r1.selectedAgentForTest.Name || "Untitled", "");
|
|
283
|
+
i0.ɵɵproperty("width", 1200)("height", 800)("minWidth", 800)("minHeight", 600)("draggable", true)("resizable", true)("state", "default");
|
|
284
|
+
i0.ɵɵadvance();
|
|
285
|
+
i0.ɵɵproperty("aiAgent", ctx_r1.selectedAgentForTest)("isVisible", true);
|
|
286
|
+
} }
|
|
270
287
|
export class AgentConfigurationComponent {
|
|
288
|
+
newAgentDialogService;
|
|
289
|
+
viewContainerRef;
|
|
271
290
|
initialState = null;
|
|
272
291
|
openEntityRecord = new EventEmitter();
|
|
273
292
|
stateChange = new EventEmitter();
|
|
@@ -285,7 +304,11 @@ export class AgentConfigurationComponent {
|
|
|
285
304
|
executionMode: 'all',
|
|
286
305
|
exposeAsAction: 'all'
|
|
287
306
|
};
|
|
288
|
-
|
|
307
|
+
selectedAgentForTest = null;
|
|
308
|
+
constructor(newAgentDialogService, viewContainerRef) {
|
|
309
|
+
this.newAgentDialogService = newAgentDialogService;
|
|
310
|
+
this.viewContainerRef = viewContainerRef;
|
|
311
|
+
}
|
|
289
312
|
ngOnInit() {
|
|
290
313
|
if (this.initialState) {
|
|
291
314
|
this.applyInitialState(this.initialState);
|
|
@@ -317,9 +340,10 @@ export class AgentConfigurationComponent {
|
|
|
317
340
|
EntityName: 'AI Agents',
|
|
318
341
|
ExtraFilter: '',
|
|
319
342
|
OrderBy: 'Name',
|
|
320
|
-
MaxRows: 1000
|
|
343
|
+
MaxRows: 1000,
|
|
344
|
+
ResultType: 'entity_object'
|
|
321
345
|
});
|
|
322
|
-
this.agents = result.Results;
|
|
346
|
+
this.agents = result.Results || [];
|
|
323
347
|
this.filteredAgents = [...this.agents];
|
|
324
348
|
}
|
|
325
349
|
catch (error) {
|
|
@@ -417,13 +441,18 @@ export class AgentConfigurationComponent {
|
|
|
417
441
|
this.openEntityRecord.emit({ entityName: 'AI Agents', recordId: agentId });
|
|
418
442
|
}
|
|
419
443
|
createNewAgent() {
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
444
|
+
this.newAgentDialogService.openForNewAgent(this.viewContainerRef).subscribe(result => {
|
|
445
|
+
if (result.action === 'created' && result.agent) {
|
|
446
|
+
// Reload the agents list to show the new agent
|
|
447
|
+
this.loadAgents();
|
|
448
|
+
}
|
|
449
|
+
});
|
|
450
|
+
}
|
|
451
|
+
runAgent(agent) {
|
|
452
|
+
this.selectedAgentForTest = agent;
|
|
423
453
|
}
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
this.openEntityRecord.emit({ entityName: 'AI Agents', recordId: agent.ID });
|
|
454
|
+
closeTestHarness() {
|
|
455
|
+
this.selectedAgentForTest = null;
|
|
427
456
|
}
|
|
428
457
|
getAgentIconColor(agent) {
|
|
429
458
|
// Generate a consistent color based on agent properties
|
|
@@ -448,8 +477,8 @@ export class AgentConfigurationComponent {
|
|
|
448
477
|
default: return 'fa-solid fa-robot';
|
|
449
478
|
}
|
|
450
479
|
}
|
|
451
|
-
static ɵfac = function AgentConfigurationComponent_Factory(t) { return new (t || AgentConfigurationComponent)(); };
|
|
452
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], inputs: { initialState: "initialState" }, outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls:
|
|
480
|
+
static ɵfac = function AgentConfigurationComponent_Factory(t) { return new (t || AgentConfigurationComponent)(i0.ɵɵdirectiveInject(i1.NewAgentDialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
|
|
481
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], inputs: { initialState: "initialState" }, outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls: 30, vars: 19, consts: [[1, "agent-configuration-container"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-robot"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "item-count"], [1, "header-controls"], [1, "view-toggle"], ["type", "button", "title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Create New Agent", 1, "control-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "main-content"], ["orientation", "horizontal", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "agents", "filteredAgents", "filters"], [3, "resizable", "scrollable"], [1, "agents-content"], [1, "loading-container"], [3, "width", "height", "minWidth", "minHeight", "draggable", "resizable", "state", "title"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "empty-state"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "agents-grid"], [1, "agents-list"], [1, "agent-card", 3, "expanded"], [1, "agent-card"], [1, "card-header", 3, "click"], [1, "agent-info"], [1, "agent-icon"], [1, "agent-details"], [1, "agent-name"], [1, "agent-meta"], [1, "meta-item"], [1, "fa-solid", "fa-microchip"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "agent-description"], [1, "agent-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "Open Agent", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "fa-solid", "fa-bolt"], [1, "agent-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-check", 2, "color", "#28a745"], [1, "fa-solid", "fa-times", 2, "color", "#dc3545"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "agents-table"], [1, "agent-name-cell"], [1, "agent-icon-small"], [1, "agent-description-small"], [1, "status-badge"], [1, "execution-mode"], [1, "table-actions"], ["type", "button", "title", "Open Agent", 1, "action-btn-small", 3, "click"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary", 3, "click"], [3, "close", "width", "height", "minWidth", "minHeight", "draggable", "resizable", "state", "title"], [3, "visibilityChange", "aiAgent", "isVisible"]], template: function AgentConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
|
|
453
482
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2", 3);
|
|
454
483
|
i0.ɵɵelement(4, "i", 4);
|
|
455
484
|
i0.ɵɵtext(5, " Agent Configuration ");
|
|
@@ -483,6 +512,7 @@ export class AgentConfigurationComponent {
|
|
|
483
512
|
i0.ɵɵelementStart(25, "kendo-splitter-pane", 20)(26, "div", 21);
|
|
484
513
|
i0.ɵɵtemplate(27, AgentConfigurationComponent_Conditional_27_Template, 8, 0, "div", 22)(28, AgentConfigurationComponent_Conditional_28_Template, 2, 1);
|
|
485
514
|
i0.ɵɵelementEnd()()()()();
|
|
515
|
+
i0.ɵɵtemplate(29, AgentConfigurationComponent_Conditional_29_Template, 2, 11, "kendo-window", 23);
|
|
486
516
|
} if (rf & 2) {
|
|
487
517
|
i0.ɵɵadvance(8);
|
|
488
518
|
i0.ɵɵconditional(ctx.filterPanelVisible ? 8 : 9);
|
|
@@ -502,17 +532,19 @@ export class AgentConfigurationComponent {
|
|
|
502
532
|
i0.ɵɵconditional(ctx.isLoading ? 27 : -1);
|
|
503
533
|
i0.ɵɵadvance();
|
|
504
534
|
i0.ɵɵconditional(!ctx.isLoading ? 28 : -1);
|
|
505
|
-
} }, dependencies: [i1.SplitterComponent, i1.SplitterPaneComponent, i2.AgentFilterPanelComponent], styles: ["\n\n.agent-configuration-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: #f5f7fa;\n}\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n background: white;\n padding: 16px 24px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #17a2b8;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n background: #f8f9fa;\n border: 1px solid #dee2e6;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 14px;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n background: #e9ecef;\n border-color: #ced4da;\n}\n\n.item-count[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n}\n\n.header-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: #f8f9fa;\n border-radius: 6px;\n padding: 2px;\n border: 1px solid #dee2e6;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n background: transparent;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n color: #6c757d;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 16px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n color: #495057;\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n background: white;\n color: #17a2b8;\n box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #dee2e6;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n}\n\n.agents-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 24px;\n background: #f5f7fa;\n}\n\n\n\n.agents-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n gap: 20px;\n}\n\n.agent-card[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.agent-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n transform: translateY(-2px);\n}\n\n.agent-card.expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 20px rgba(0,0,0,0.12);\n}\n\n.card-header[_ngcontent-%COMP%] {\n padding: 20px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n cursor: pointer;\n user-select: none;\n border-bottom: 1px solid #f0f4f8;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n flex: 1;\n}\n\n.agent-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.agent-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 20px;\n}\n\n.agent-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin-bottom: 6px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n color: #28a745;\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%] {\n color: #ffc107;\n}\n\n.meta-item.status-disabled[_ngcontent-%COMP%] {\n color: #6c757d;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #6c757d;\n transition: transform 0.3s ease;\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n}\n\n.card-body[_ngcontent-%COMP%] {\n padding: 0 20px 20px 20px;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n margin: 16px 0 0 0;\n font-size: 14px;\n line-height: 1.6;\n color: #6c757d;\n}\n\n.agent-description.text-muted[_ngcontent-%COMP%] {\n font-style: italic;\n color: #adb5bd;\n}\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #f0f4f8;\n animation: _ngcontent-%COMP%_slideDown 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.agent-stats[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 16px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #495057;\n font-weight: 500;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: #f8f9fa;\n border-top: 1px solid #e0e6ed;\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #dee2e6;\n padding: 6px 16px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n\n\n.agents-list[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n overflow: hidden;\n}\n\n.agents-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.agents-table[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] {\n background: #f8f9fa;\n border-bottom: 2px solid #e0e6ed;\n}\n\n.agents-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n padding: 12px 16px;\n text-align: left;\n font-size: 13px;\n font-weight: 600;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.agents-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] {\n border-bottom: 1px solid #f0f4f8;\n}\n\n.agents-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n}\n\n.agents-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 16px;\n font-size: 14px;\n color: #495057;\n}\n\n.agent-name-cell[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.agent-icon-small[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.agent-icon-small[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 16px;\n}\n\n.agent-description-small[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n margin-top: 2px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 4px 12px;\n border-radius: 16px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.status-unknown[_ngcontent-%COMP%] {\n background: #f8f9fa;\n color: #6c757d;\n}\n\n.execution-mode[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #dee2e6;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 80px 20px;\n color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 64px;\n color: #dee2e6;\n margin-bottom: 24px;\n display: block;\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n color: #495057;\n font-weight: 600;\n margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 24px;\n}\n\n.empty-state-btn[_ngcontent-%COMP%] {\n background: #17a2b8;\n color: white;\n border: none;\n padding: 10px 24px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.empty-state-btn[_ngcontent-%COMP%]:hover {\n background: #1485a3;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 400px;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n display: inline-block;\n margin-bottom: 16px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n display: inline-block;\n width: 40px;\n height: 40px;\n margin: 3px;\n border-radius: 50%;\n border: 3px solid #17a2b8;\n border-color: #17a2b8 transparent #17a2b8 transparent;\n animation: _ngcontent-%COMP%_spinner-ring 1.2s linear infinite;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n animation-delay: -0.45s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n animation-delay: -0.3s;\n}\n\n@keyframes _ngcontent-%COMP%_spinner-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n}\n\n\n\n@media (max-width: 768px) {\n .dashboard-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n align-items: stretch;\n }\n \n .header-info[_ngcontent-%COMP%] {\n justify-content: space-between;\n }\n \n .header-controls[_ngcontent-%COMP%] {\n justify-content: space-between;\n }\n \n .agents-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n \n .agent-stats[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}"] });
|
|
535
|
+
i0.ɵɵadvance();
|
|
536
|
+
i0.ɵɵconditional(ctx.selectedAgentForTest ? 29 : -1);
|
|
537
|
+
} }, dependencies: [i2.SplitterComponent, i2.SplitterPaneComponent, i3.WindowComponent, i4.AITestHarnessComponent, i5.AgentFilterPanelComponent], styles: ["\n\n.agent-configuration-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: #f5f7fa;\n}\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n background: white;\n padding: 16px 24px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #17a2b8;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n background: #f8f9fa;\n border: 1px solid #dee2e6;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 14px;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n background: #e9ecef;\n border-color: #ced4da;\n}\n\n.item-count[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n}\n\n.header-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: #f8f9fa;\n border-radius: 6px;\n padding: 2px;\n border: 1px solid #dee2e6;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n background: transparent;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n color: #6c757d;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 16px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n color: #495057;\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n background: white;\n color: #17a2b8;\n box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #dee2e6;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n}\n\n.agents-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 24px;\n background: #f5f7fa;\n}\n\n\n\n.agents-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n gap: 20px;\n}\n\n.agent-card[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.agent-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n transform: translateY(-2px);\n}\n\n.agent-card.expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 20px rgba(0,0,0,0.12);\n}\n\n.card-header[_ngcontent-%COMP%] {\n padding: 20px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n cursor: pointer;\n user-select: none;\n border-bottom: 1px solid #f0f4f8;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n flex: 1;\n}\n\n.agent-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.agent-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 20px;\n}\n\n.agent-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin-bottom: 6px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n color: #28a745;\n}\n\n.meta-item.status-pending[_ngcontent-%COMP%] {\n color: #ffc107;\n}\n\n.meta-item.status-disabled[_ngcontent-%COMP%] {\n color: #6c757d;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #6c757d;\n transition: transform 0.3s ease;\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n}\n\n.card-body[_ngcontent-%COMP%] {\n padding: 0 20px 20px 20px;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n margin: 16px 0 0 0;\n font-size: 14px;\n line-height: 1.6;\n color: #6c757d;\n}\n\n.agent-description.text-muted[_ngcontent-%COMP%] {\n font-style: italic;\n color: #adb5bd;\n}\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #f0f4f8;\n animation: _ngcontent-%COMP%_slideDown 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.agent-stats[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 16px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #495057;\n font-weight: 500;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: #f8f9fa;\n border-top: 1px solid #e0e6ed;\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #dee2e6;\n padding: 6px 16px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n\n\n.agents-list[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n overflow: hidden;\n}\n\n.agents-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.agents-table[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] {\n background: #f8f9fa;\n border-bottom: 2px solid #e0e6ed;\n}\n\n.agents-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n padding: 12px 16px;\n text-align: left;\n font-size: 13px;\n font-weight: 600;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.agents-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] {\n border-bottom: 1px solid #f0f4f8;\n}\n\n.agents-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n}\n\n.agents-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 16px;\n font-size: 14px;\n color: #495057;\n}\n\n.agent-name-cell[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.agent-icon-small[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.agent-icon-small[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 16px;\n}\n\n.agent-description-small[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n margin-top: 2px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 4px 12px;\n border-radius: 16px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.status-unknown[_ngcontent-%COMP%] {\n background: #f8f9fa;\n color: #6c757d;\n}\n\n.execution-mode[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #dee2e6;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 80px 20px;\n color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 64px;\n color: #dee2e6;\n margin-bottom: 24px;\n display: block;\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n color: #495057;\n font-weight: 600;\n margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 24px;\n}\n\n.empty-state-btn[_ngcontent-%COMP%] {\n background: #17a2b8;\n color: white;\n border: none;\n padding: 10px 24px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.empty-state-btn[_ngcontent-%COMP%]:hover {\n background: #1485a3;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 400px;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n display: inline-block;\n margin-bottom: 16px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n display: inline-block;\n width: 40px;\n height: 40px;\n margin: 3px;\n border-radius: 50%;\n border: 3px solid #17a2b8;\n border-color: #17a2b8 transparent #17a2b8 transparent;\n animation: _ngcontent-%COMP%_spinner-ring 1.2s linear infinite;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n animation-delay: -0.45s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n animation-delay: -0.3s;\n}\n\n@keyframes _ngcontent-%COMP%_spinner-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n}\n\n\n\n@media (max-width: 768px) {\n .dashboard-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n align-items: stretch;\n }\n \n .header-info[_ngcontent-%COMP%] {\n justify-content: space-between;\n }\n \n .header-controls[_ngcontent-%COMP%] {\n justify-content: space-between;\n }\n \n .agents-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n \n .agent-stats[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}"] });
|
|
506
538
|
}
|
|
507
539
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentConfigurationComponent, [{
|
|
508
540
|
type: Component,
|
|
509
|
-
args: [{ selector: 'app-agent-configuration', template: "<div class=\"agent-configuration-container\">\n <!-- Header -->\n <div class=\"dashboard-header\">\n <div class=\"header-info\">\n <h2 class=\"dashboard-title\">\n <i class=\"fa-solid fa-robot\"></i>\n Agent Configuration\n </h2>\n <button \n type=\"button\" \n class=\"filter-toggle-btn\"\n (click)=\"toggleFilterPanel()\"\n title=\"Toggle Filters\">\n <i class=\"fa-solid fa-filter\"></i>\n @if (filterPanelVisible) {\n Hide Filters\n } @else {\n Show Filters\n }\n </button>\n <span class=\"item-count\">{{ filteredAgents.length }} agents</span>\n </div>\n \n <div class=\"header-controls\">\n <div class=\"view-toggle\">\n <button \n type=\"button\" \n class=\"view-btn\"\n [class.active]=\"viewMode === 'grid'\"\n (click)=\"setViewMode('grid')\"\n title=\"Grid View\">\n <i class=\"fa-solid fa-grip\"></i>\n </button>\n <button \n type=\"button\" \n class=\"view-btn\"\n [class.active]=\"viewMode === 'list'\"\n (click)=\"setViewMode('list')\"\n title=\"List View\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n \n <button \n type=\"button\" \n class=\"control-btn primary\"\n (click)=\"createNewAgent()\"\n title=\"Create New Agent\">\n <i class=\"fa-solid fa-plus\"></i>\n New Agent\n </button>\n </div>\n </div>\n\n <!-- Main Content with Splitter -->\n <div class=\"main-content\" >\n <kendo-splitter \n class=\"main-splitter\"\n orientation=\"horizontal\"\n (layoutChange)=\"onMainSplitterChange($event)\"\n >\n \n <!-- Filter Panel (Left) -->\n <kendo-splitter-pane \n [size]=\"filterPanelVisible ? '320px' : '0px'\"\n [collapsible]=\"false\"\n [resizable]=\"filterPanelVisible\"\n [scrollable]=\"false\"\n [hidden]=\"!filterPanelVisible\">\n <mj-agent-filter-panel\n [agents]=\"agents\"\n [filteredAgents]=\"filteredAgents\"\n [filters]=\"currentFilters\"\n (filtersChange)=\"onFiltersChange($event)\"\n (filterChange)=\"onFilterChange()\"\n (resetFilters)=\"onResetFilters()\"\n (closePanel)=\"toggleFilterPanel()\">\n </mj-agent-filter-panel>\n </kendo-splitter-pane>\n \n <!-- Agents List Panel -->\n <kendo-splitter-pane \n [resizable]=\"true\"\n [scrollable]=\"false\">\n <div class=\"agents-content\">\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <div class=\"loading-content\">\n <div class=\"loading-spinner\">\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n </div>\n <div class=\"loading-text\">Loading agents...</div>\n </div>\n </div>\n }\n\n <!-- Agents Display -->\n @if (!isLoading) {\n @if (filteredAgents.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-robot\"></i>\n <h3>No agents found</h3>\n <p>No agents match your current filters. Try adjusting your search criteria or create a new agent.</p>\n <button \n type=\"button\" \n class=\"empty-state-btn\"\n (click)=\"createNewAgent()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create New Agent\n </button>\n </div>\n } @else {\n <!-- Grid View -->\n @if (viewMode === 'grid') {\n <div class=\"agents-grid\">\n @for (agent of filteredAgents; track agent.ID) {\n <div class=\"agent-card\" [class.expanded]=\"expandedAgentId === agent.ID\">\n <!-- Card Header -->\n <div class=\"card-header\" (click)=\"toggleAgentExpansion(agent.ID)\">\n <div class=\"agent-info\">\n <div class=\"agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n </div>\n <div class=\"agent-details\">\n <h4 class=\"agent-name\">{{ agent.Name }}</h4>\n <div class=\"agent-meta\">\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-microchip\"></i>\n {{ agent.ExecutionMode }}\n </span>\n @if (agent.Status) {\n <span class=\"meta-item\" [class]=\"'status-' + agent.Status.toLowerCase()\">\n <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n {{ agent.Status }}\n </span>\n }\n @if (agent.ExposeAsAction) {\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-bolt\"></i>\n Exposed\n </span>\n }\n </div>\n </div>\n </div>\n \n <i class=\"fa-solid fa-chevron-down expand-icon\" \n [class.rotated]=\"expandedAgentId === agent.ID\"></i>\n </div>\n\n <!-- Card Body -->\n <div class=\"card-body\">\n @if (agent.Description) {\n <p class=\"agent-description\">{{ agent.Description }}</p>\n } @else {\n <p class=\"agent-description text-muted\">No description provided</p>\n }\n \n <!-- Expandable Content -->\n @if (expandedAgentId === agent.ID) {\n <div class=\"expanded-content\">\n <div class=\"agent-stats\">\n @if (agent.Parent) {\n <div class=\"stat-item\">\n <span class=\"stat-label\">Parent</span>\n <span class=\"stat-value\">{{ agent.Parent }}</span>\n </div>\n }\n <div class=\"stat-item\">\n <span class=\"stat-label\">Context Compression</span>\n <span class=\"stat-value\">\n @if (agent.EnableContextCompression) {\n <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Enabled\n } @else {\n <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> Disabled\n }\n </span>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Card Actions -->\n <div class=\"card-actions\">\n <button \n type=\"button\" \n class=\"action-btn\"\n (click)=\"openAgentRecord(agent.ID)\"\n title=\"Open Agent\">\n <i class=\"fa-solid fa-external-link-alt\"></i>\n Open\n </button>\n \n @if (agent.Status === 'Active') {\n <button \n type=\"button\" \n class=\"action-btn action-btn-primary\"\n (click)=\"runAgent(agent)\"\n title=\"Run Agent\">\n <i class=\"fa-solid fa-play\"></i>\n Run\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n \n <!-- List View -->\n @if (viewMode === 'list') {\n <div class=\"agents-list\">\n <table class=\"agents-table\">\n <thead>\n <tr>\n <th>Name</th>\n <th>Status</th>\n <th>Execution Mode</th>\n <th>Actions</th>\n </tr>\n </thead>\n <tbody>\n @for (agent of filteredAgents; track agent.ID) {\n <tr>\n <td>\n <div class=\"agent-name-cell\">\n <div class=\"agent-icon-small\" [style.background-color]=\"getAgentIconColor(agent)\">\n <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n </div>\n <div>\n <div class=\"agent-name\">{{ agent.Name }}</div>\n @if (agent.Description) {\n <div class=\"agent-description-small\">{{ agent.Description }}</div>\n }\n </div>\n </div>\n </td>\n <td>\n <span class=\"status-badge\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n {{ agent.Status || 'Unknown' }}\n </span>\n </td>\n <td>\n <span class=\"execution-mode\">\n <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n {{ agent.ExecutionMode }}\n </span>\n </td>\n <td>\n <div class=\"table-actions\">\n <button \n type=\"button\" \n class=\"action-btn-small\"\n (click)=\"openAgentRecord(agent.ID)\"\n title=\"Open Agent\">\n <i class=\"fa-solid fa-external-link-alt\"></i>\n </button>\n @if (agent.Status === 'Active') {\n <button \n type=\"button\" \n class=\"action-btn-small primary\"\n (click)=\"runAgent(agent)\"\n title=\"Run Agent\">\n <i class=\"fa-solid fa-play\"></i>\n </button>\n }\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n }\n }\n </div>\n </kendo-splitter-pane>\n </kendo-splitter>\n </div>\n</div>", styles: ["/* Agent Configuration Component - Modern Design */\n.agent-configuration-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: #f5f7fa;\n}\n\n/* Dashboard Header */\n.dashboard-header {\n background: white;\n padding: 16px 24px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-info {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.dashboard-title {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.dashboard-title i {\n color: #17a2b8;\n}\n\n.filter-toggle-btn {\n background: #f8f9fa;\n border: 1px solid #dee2e6;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 14px;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.filter-toggle-btn:hover {\n background: #e9ecef;\n border-color: #ced4da;\n}\n\n.item-count {\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n}\n\n.header-controls {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n/* View Toggle */\n.view-toggle {\n display: flex;\n background: #f8f9fa;\n border-radius: 6px;\n padding: 2px;\n border: 1px solid #dee2e6;\n}\n\n.view-btn {\n background: transparent;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n color: #6c757d;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 16px;\n}\n\n.view-btn:hover {\n color: #495057;\n}\n\n.view-btn.active {\n background: white;\n color: #17a2b8;\n box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n}\n\n.control-btn {\n background: white;\n border: 1px solid #dee2e6;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.control-btn:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.control-btn.primary {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.control-btn.primary:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n/* Main Content */\n.main-content {\n flex: 1;\n overflow: hidden;\n}\n\n.agents-content {\n height: 100%;\n overflow-y: auto;\n padding: 24px;\n background: #f5f7fa;\n}\n\n/* Grid View */\n.agents-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n gap: 20px;\n}\n\n.agent-card {\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.agent-card:hover {\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n transform: translateY(-2px);\n}\n\n.agent-card.expanded {\n box-shadow: 0 4px 20px rgba(0,0,0,0.12);\n}\n\n.card-header {\n padding: 20px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n cursor: pointer;\n user-select: none;\n border-bottom: 1px solid #f0f4f8;\n}\n\n.agent-info {\n display: flex;\n gap: 16px;\n flex: 1;\n}\n\n.agent-icon {\n width: 48px;\n height: 48px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.agent-icon i {\n color: white;\n font-size: 20px;\n}\n\n.agent-details {\n flex: 1;\n min-width: 0;\n}\n\n.agent-name {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin-bottom: 6px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.agent-meta {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n font-size: 13px;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.meta-item i {\n font-size: 12px;\n}\n\n.meta-item.status-active {\n color: #28a745;\n}\n\n.meta-item.status-pending {\n color: #ffc107;\n}\n\n.meta-item.status-disabled {\n color: #6c757d;\n}\n\n.expand-icon {\n font-size: 14px;\n color: #6c757d;\n transition: transform 0.3s ease;\n}\n\n.expand-icon.rotated {\n transform: rotate(180deg);\n}\n\n.card-body {\n padding: 0 20px 20px 20px;\n}\n\n.agent-description {\n margin: 16px 0 0 0;\n font-size: 14px;\n line-height: 1.6;\n color: #6c757d;\n}\n\n.agent-description.text-muted {\n font-style: italic;\n color: #adb5bd;\n}\n\n/* Expanded Content */\n.expanded-content {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #f0f4f8;\n animation: slideDown 0.3s ease;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.agent-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 16px;\n}\n\n.stat-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat-label {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat-value {\n font-size: 14px;\n color: #495057;\n font-weight: 500;\n}\n\n/* Card Actions */\n.card-actions {\n padding: 16px 20px;\n background: #f8f9fa;\n border-top: 1px solid #e0e6ed;\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.action-btn {\n background: white;\n border: 1px solid #dee2e6;\n padding: 6px 16px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.action-btn-primary {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.action-btn-primary:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n/* List View */\n.agents-list {\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n overflow: hidden;\n}\n\n.agents-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.agents-table thead {\n background: #f8f9fa;\n border-bottom: 2px solid #e0e6ed;\n}\n\n.agents-table th {\n padding: 12px 16px;\n text-align: left;\n font-size: 13px;\n font-weight: 600;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.agents-table tbody tr {\n border-bottom: 1px solid #f0f4f8;\n}\n\n.agents-table tbody tr:hover {\n background: #f8f9fa;\n}\n\n.agents-table td {\n padding: 16px;\n font-size: 14px;\n color: #495057;\n}\n\n.agent-name-cell {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.agent-icon-small {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.agent-icon-small i {\n color: white;\n font-size: 16px;\n}\n\n.agent-description-small {\n font-size: 13px;\n color: #6c757d;\n margin-top: 2px;\n}\n\n.status-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 12px;\n border-radius: 16px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge.status-pending {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge.status-disabled {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.status-unknown {\n background: #f8f9fa;\n color: #6c757d;\n}\n\n.execution-mode {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.table-actions {\n display: flex;\n gap: 8px;\n}\n\n.action-btn-small {\n background: white;\n border: 1px solid #dee2e6;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.action-btn-small.primary {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.action-btn-small.primary:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n/* Empty State */\n.empty-state {\n text-align: center;\n padding: 80px 20px;\n color: #6c757d;\n}\n\n.empty-state i {\n font-size: 64px;\n color: #dee2e6;\n margin-bottom: 24px;\n display: block;\n}\n\n.empty-state h3 {\n color: #495057;\n font-weight: 600;\n margin-bottom: 12px;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 24px;\n}\n\n.empty-state-btn {\n background: #17a2b8;\n color: white;\n border: none;\n padding: 10px 24px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.empty-state-btn:hover {\n background: #1485a3;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);\n}\n\n/* Loading State */\n.loading-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 400px;\n}\n\n.loading-content {\n text-align: center;\n}\n\n.loading-spinner {\n display: inline-block;\n margin-bottom: 16px;\n}\n\n.spinner-ring {\n display: inline-block;\n width: 40px;\n height: 40px;\n margin: 3px;\n border-radius: 50%;\n border: 3px solid #17a2b8;\n border-color: #17a2b8 transparent #17a2b8 transparent;\n animation: spinner-ring 1.2s linear infinite;\n}\n\n.spinner-ring:nth-child(2) {\n animation-delay: -0.45s;\n}\n\n.spinner-ring:nth-child(3) {\n animation-delay: -0.3s;\n}\n\n@keyframes spinner-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loading-text {\n color: #6c757d;\n font-size: 14px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .dashboard-header {\n flex-direction: column;\n gap: 16px;\n align-items: stretch;\n }\n \n .header-info {\n justify-content: space-between;\n }\n \n .header-controls {\n justify-content: space-between;\n }\n \n .agents-grid {\n grid-template-columns: 1fr;\n }\n \n .agent-stats {\n grid-template-columns: 1fr;\n }\n}"] }]
|
|
510
|
-
}], () => [], { initialState: [{
|
|
541
|
+
args: [{ selector: 'app-agent-configuration', template: "<div class=\"agent-configuration-container\">\n <!-- Header -->\n <div class=\"dashboard-header\">\n <div class=\"header-info\">\n <h2 class=\"dashboard-title\">\n <i class=\"fa-solid fa-robot\"></i>\n Agent Configuration\n </h2>\n <button \n type=\"button\" \n class=\"filter-toggle-btn\"\n (click)=\"toggleFilterPanel()\"\n title=\"Toggle Filters\">\n <i class=\"fa-solid fa-filter\"></i>\n @if (filterPanelVisible) {\n Hide Filters\n } @else {\n Show Filters\n }\n </button>\n <span class=\"item-count\">{{ filteredAgents.length }} agents</span>\n </div>\n \n <div class=\"header-controls\">\n <div class=\"view-toggle\">\n <button \n type=\"button\" \n class=\"view-btn\"\n [class.active]=\"viewMode === 'grid'\"\n (click)=\"setViewMode('grid')\"\n title=\"Grid View\">\n <i class=\"fa-solid fa-grip\"></i>\n </button>\n <button \n type=\"button\" \n class=\"view-btn\"\n [class.active]=\"viewMode === 'list'\"\n (click)=\"setViewMode('list')\"\n title=\"List View\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n \n <button \n type=\"button\" \n class=\"control-btn primary\"\n (click)=\"createNewAgent()\"\n title=\"Create New Agent\">\n <i class=\"fa-solid fa-plus\"></i>\n New Agent\n </button>\n </div>\n </div>\n\n <!-- Main Content with Splitter -->\n <div class=\"main-content\" >\n <kendo-splitter \n class=\"main-splitter\"\n orientation=\"horizontal\"\n (layoutChange)=\"onMainSplitterChange($event)\"\n >\n \n <!-- Filter Panel (Left) -->\n <kendo-splitter-pane \n [size]=\"filterPanelVisible ? '320px' : '0px'\"\n [collapsible]=\"false\"\n [resizable]=\"filterPanelVisible\"\n [scrollable]=\"false\"\n [hidden]=\"!filterPanelVisible\">\n <mj-agent-filter-panel\n [agents]=\"agents\"\n [filteredAgents]=\"filteredAgents\"\n [filters]=\"currentFilters\"\n (filtersChange)=\"onFiltersChange($event)\"\n (filterChange)=\"onFilterChange()\"\n (resetFilters)=\"onResetFilters()\"\n (closePanel)=\"toggleFilterPanel()\">\n </mj-agent-filter-panel>\n </kendo-splitter-pane>\n \n <!-- Agents List Panel -->\n <kendo-splitter-pane \n [resizable]=\"true\"\n [scrollable]=\"false\">\n <div class=\"agents-content\">\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <div class=\"loading-content\">\n <div class=\"loading-spinner\">\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n </div>\n <div class=\"loading-text\">Loading agents...</div>\n </div>\n </div>\n }\n\n <!-- Agents Display -->\n @if (!isLoading) {\n @if (filteredAgents.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-robot\"></i>\n <h3>No agents found</h3>\n <p>No agents match your current filters. Try adjusting your search criteria or create a new agent.</p>\n <button \n type=\"button\" \n class=\"empty-state-btn\"\n (click)=\"createNewAgent()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create New Agent\n </button>\n </div>\n } @else {\n <!-- Grid View -->\n @if (viewMode === 'grid') {\n <div class=\"agents-grid\">\n @for (agent of filteredAgents; track agent.ID) {\n <div class=\"agent-card\" [class.expanded]=\"expandedAgentId === agent.ID\">\n <!-- Card Header -->\n <div class=\"card-header\" (click)=\"toggleAgentExpansion(agent.ID)\">\n <div class=\"agent-info\">\n <div class=\"agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n </div>\n <div class=\"agent-details\">\n <h4 class=\"agent-name\">{{ agent.Name }}</h4>\n <div class=\"agent-meta\">\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-microchip\"></i>\n {{ agent.ExecutionMode }}\n </span>\n @if (agent.Status) {\n <span class=\"meta-item\" [class]=\"'status-' + agent.Status.toLowerCase()\">\n <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n {{ agent.Status }}\n </span>\n }\n @if (agent.ExposeAsAction) {\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-bolt\"></i>\n Exposed\n </span>\n }\n </div>\n </div>\n </div>\n \n <i class=\"fa-solid fa-chevron-down expand-icon\" \n [class.rotated]=\"expandedAgentId === agent.ID\"></i>\n </div>\n\n <!-- Card Body -->\n <div class=\"card-body\">\n @if (agent.Description) {\n <p class=\"agent-description\">{{ agent.Description }}</p>\n } @else {\n <p class=\"agent-description text-muted\">No description provided</p>\n }\n \n <!-- Expandable Content -->\n @if (expandedAgentId === agent.ID) {\n <div class=\"expanded-content\">\n <div class=\"agent-stats\">\n @if (agent.Parent) {\n <div class=\"stat-item\">\n <span class=\"stat-label\">Parent</span>\n <span class=\"stat-value\">{{ agent.Parent }}</span>\n </div>\n }\n <div class=\"stat-item\">\n <span class=\"stat-label\">Context Compression</span>\n <span class=\"stat-value\">\n @if (agent.EnableContextCompression) {\n <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Enabled\n } @else {\n <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> Disabled\n }\n </span>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Card Actions -->\n <div class=\"card-actions\">\n <button \n type=\"button\" \n class=\"action-btn\"\n (click)=\"openAgentRecord(agent.ID)\"\n title=\"Open Agent\">\n <i class=\"fa-solid fa-external-link-alt\"></i>\n Open\n </button>\n \n @if (agent.Status === 'Active') {\n <button \n type=\"button\" \n class=\"action-btn action-btn-primary\"\n (click)=\"runAgent(agent)\"\n title=\"Run Agent\">\n <i class=\"fa-solid fa-play\"></i>\n Run\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n \n <!-- List View -->\n @if (viewMode === 'list') {\n <div class=\"agents-list\">\n <table class=\"agents-table\">\n <thead>\n <tr>\n <th>Name</th>\n <th>Status</th>\n <th>Execution Mode</th>\n <th>Actions</th>\n </tr>\n </thead>\n <tbody>\n @for (agent of filteredAgents; track agent.ID) {\n <tr>\n <td>\n <div class=\"agent-name-cell\">\n <div class=\"agent-icon-small\" [style.background-color]=\"getAgentIconColor(agent)\">\n <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n </div>\n <div>\n <div class=\"agent-name\">{{ agent.Name }}</div>\n @if (agent.Description) {\n <div class=\"agent-description-small\">{{ agent.Description }}</div>\n }\n </div>\n </div>\n </td>\n <td>\n <span class=\"status-badge\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n {{ agent.Status || 'Unknown' }}\n </span>\n </td>\n <td>\n <span class=\"execution-mode\">\n <i [class]=\"getExecutionModeIcon(agent.ExecutionMode)\"></i>\n {{ agent.ExecutionMode }}\n </span>\n </td>\n <td>\n <div class=\"table-actions\">\n <button \n type=\"button\" \n class=\"action-btn-small\"\n (click)=\"openAgentRecord(agent.ID)\"\n title=\"Open Agent\">\n <i class=\"fa-solid fa-external-link-alt\"></i>\n </button>\n @if (agent.Status === 'Active') {\n <button \n type=\"button\" \n class=\"action-btn-small primary\"\n (click)=\"runAgent(agent)\"\n title=\"Run Agent\">\n <i class=\"fa-solid fa-play\"></i>\n </button>\n }\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n }\n }\n </div>\n </kendo-splitter-pane>\n </kendo-splitter>\n </div>\n</div>\n\n<!-- AI Agent Test Harness -->\n@if (selectedAgentForTest) {\n <kendo-window \n [width]=\"1200\" \n [height]=\"800\" \n [minWidth]=\"800\"\n [minHeight]=\"600\"\n [draggable]=\"true\"\n [resizable]=\"true\"\n [state]=\"'default'\"\n (close)=\"closeTestHarness()\"\n title=\"Run AI Agent - {{ selectedAgentForTest.Name || 'Untitled' }}\">\n <mj-ai-test-harness\n [aiAgent]=\"selectedAgentForTest\"\n [isVisible]=\"true\"\n (visibilityChange)=\"closeTestHarness()\">\n </mj-ai-test-harness>\n </kendo-window>\n}", styles: ["/* Agent Configuration Component - Modern Design */\n.agent-configuration-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: #f5f7fa;\n}\n\n/* Dashboard Header */\n.dashboard-header {\n background: white;\n padding: 16px 24px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-info {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.dashboard-title {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.dashboard-title i {\n color: #17a2b8;\n}\n\n.filter-toggle-btn {\n background: #f8f9fa;\n border: 1px solid #dee2e6;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 14px;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.filter-toggle-btn:hover {\n background: #e9ecef;\n border-color: #ced4da;\n}\n\n.item-count {\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n}\n\n.header-controls {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n/* View Toggle */\n.view-toggle {\n display: flex;\n background: #f8f9fa;\n border-radius: 6px;\n padding: 2px;\n border: 1px solid #dee2e6;\n}\n\n.view-btn {\n background: transparent;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n color: #6c757d;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 16px;\n}\n\n.view-btn:hover {\n color: #495057;\n}\n\n.view-btn.active {\n background: white;\n color: #17a2b8;\n box-shadow: 0 1px 2px rgba(0,0,0,0.08);\n}\n\n.control-btn {\n background: white;\n border: 1px solid #dee2e6;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.control-btn:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.control-btn.primary {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.control-btn.primary:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n/* Main Content */\n.main-content {\n flex: 1;\n overflow: hidden;\n}\n\n.agents-content {\n height: 100%;\n overflow-y: auto;\n padding: 24px;\n background: #f5f7fa;\n}\n\n/* Grid View */\n.agents-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n gap: 20px;\n}\n\n.agent-card {\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.agent-card:hover {\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n transform: translateY(-2px);\n}\n\n.agent-card.expanded {\n box-shadow: 0 4px 20px rgba(0,0,0,0.12);\n}\n\n.card-header {\n padding: 20px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n cursor: pointer;\n user-select: none;\n border-bottom: 1px solid #f0f4f8;\n}\n\n.agent-info {\n display: flex;\n gap: 16px;\n flex: 1;\n}\n\n.agent-icon {\n width: 48px;\n height: 48px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.agent-icon i {\n color: white;\n font-size: 20px;\n}\n\n.agent-details {\n flex: 1;\n min-width: 0;\n}\n\n.agent-name {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin-bottom: 6px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.agent-meta {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n font-size: 13px;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.meta-item i {\n font-size: 12px;\n}\n\n.meta-item.status-active {\n color: #28a745;\n}\n\n.meta-item.status-pending {\n color: #ffc107;\n}\n\n.meta-item.status-disabled {\n color: #6c757d;\n}\n\n.expand-icon {\n font-size: 14px;\n color: #6c757d;\n transition: transform 0.3s ease;\n}\n\n.expand-icon.rotated {\n transform: rotate(180deg);\n}\n\n.card-body {\n padding: 0 20px 20px 20px;\n}\n\n.agent-description {\n margin: 16px 0 0 0;\n font-size: 14px;\n line-height: 1.6;\n color: #6c757d;\n}\n\n.agent-description.text-muted {\n font-style: italic;\n color: #adb5bd;\n}\n\n/* Expanded Content */\n.expanded-content {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #f0f4f8;\n animation: slideDown 0.3s ease;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.agent-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 16px;\n}\n\n.stat-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat-label {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat-value {\n font-size: 14px;\n color: #495057;\n font-weight: 500;\n}\n\n/* Card Actions */\n.card-actions {\n padding: 16px 20px;\n background: #f8f9fa;\n border-top: 1px solid #e0e6ed;\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.action-btn {\n background: white;\n border: 1px solid #dee2e6;\n padding: 6px 16px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.action-btn-primary {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.action-btn-primary:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n/* List View */\n.agents-list {\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n overflow: hidden;\n}\n\n.agents-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.agents-table thead {\n background: #f8f9fa;\n border-bottom: 2px solid #e0e6ed;\n}\n\n.agents-table th {\n padding: 12px 16px;\n text-align: left;\n font-size: 13px;\n font-weight: 600;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.agents-table tbody tr {\n border-bottom: 1px solid #f0f4f8;\n}\n\n.agents-table tbody tr:hover {\n background: #f8f9fa;\n}\n\n.agents-table td {\n padding: 16px;\n font-size: 14px;\n color: #495057;\n}\n\n.agent-name-cell {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.agent-icon-small {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.agent-icon-small i {\n color: white;\n font-size: 16px;\n}\n\n.agent-description-small {\n font-size: 13px;\n color: #6c757d;\n margin-top: 2px;\n}\n\n.status-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 12px;\n border-radius: 16px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge.status-pending {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge.status-disabled {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.status-unknown {\n background: #f8f9fa;\n color: #6c757d;\n}\n\n.execution-mode {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.table-actions {\n display: flex;\n gap: 8px;\n}\n\n.action-btn-small {\n background: white;\n border: 1px solid #dee2e6;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n}\n\n.action-btn-small.primary {\n background: #17a2b8;\n border-color: #17a2b8;\n color: white;\n}\n\n.action-btn-small.primary:hover {\n background: #1485a3;\n border-color: #1485a3;\n}\n\n/* Empty State */\n.empty-state {\n text-align: center;\n padding: 80px 20px;\n color: #6c757d;\n}\n\n.empty-state i {\n font-size: 64px;\n color: #dee2e6;\n margin-bottom: 24px;\n display: block;\n}\n\n.empty-state h3 {\n color: #495057;\n font-weight: 600;\n margin-bottom: 12px;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 24px;\n}\n\n.empty-state-btn {\n background: #17a2b8;\n color: white;\n border: none;\n padding: 10px 24px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.empty-state-btn:hover {\n background: #1485a3;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);\n}\n\n/* Loading State */\n.loading-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 400px;\n}\n\n.loading-content {\n text-align: center;\n}\n\n.loading-spinner {\n display: inline-block;\n margin-bottom: 16px;\n}\n\n.spinner-ring {\n display: inline-block;\n width: 40px;\n height: 40px;\n margin: 3px;\n border-radius: 50%;\n border: 3px solid #17a2b8;\n border-color: #17a2b8 transparent #17a2b8 transparent;\n animation: spinner-ring 1.2s linear infinite;\n}\n\n.spinner-ring:nth-child(2) {\n animation-delay: -0.45s;\n}\n\n.spinner-ring:nth-child(3) {\n animation-delay: -0.3s;\n}\n\n@keyframes spinner-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.loading-text {\n color: #6c757d;\n font-size: 14px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .dashboard-header {\n flex-direction: column;\n gap: 16px;\n align-items: stretch;\n }\n \n .header-info {\n justify-content: space-between;\n }\n \n .header-controls {\n justify-content: space-between;\n }\n \n .agents-grid {\n grid-template-columns: 1fr;\n }\n \n .agent-stats {\n grid-template-columns: 1fr;\n }\n}"] }]
|
|
542
|
+
}], () => [{ type: i1.NewAgentDialogService }, { type: i0.ViewContainerRef }], { initialState: [{
|
|
511
543
|
type: Input
|
|
512
544
|
}], openEntityRecord: [{
|
|
513
545
|
type: Output
|
|
514
546
|
}], stateChange: [{
|
|
515
547
|
type: Output
|
|
516
548
|
}] }); })();
|
|
517
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/AI/components/agents/agent-configuration.component.ts", lineNumber:
|
|
549
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/AI/components/agents/agent-configuration.component.ts", lineNumber: 20 }); })();
|
|
518
550
|
//# sourceMappingURL=agent-configuration.component.js.map
|