@memberjunction/ng-core-entity-forms 5.11.0 → 5.13.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/AIAgents/FlowAgentType/flow-agent-form-section.component.js +2 -2
- package/dist/lib/custom/AIAgents/add-action-dialog.component.js +2 -2
- package/dist/lib/custom/AIAgents/agent-prompt-advanced-settings-dialog.component.js +2 -2
- package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts +8 -0
- package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts.map +1 -1
- package/dist/lib/custom/AIAgents/ai-agent-form.component.js +199 -139
- package/dist/lib/custom/AIAgents/ai-agent-form.component.js.map +1 -1
- package/dist/lib/custom/AIAgents/create-prompt-dialog.component.js +2 -2
- package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.js +2 -2
- package/dist/lib/custom/AIAgents/new-agent-dialog.component.js +2 -2
- package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js +6 -6
- package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js.map +1 -1
- package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.js +2 -2
- package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js +6 -6
- package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js.map +1 -1
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +3 -3
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
- package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.js +2 -2
- package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js +4 -4
- package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js.map +1 -1
- package/dist/lib/custom/AIPrompts/template-selector-dialog.component.js +2 -2
- package/dist/lib/custom/Actions/action-execution-log-form.component.js +5 -5
- package/dist/lib/custom/Actions/action-execution-log-form.component.js.map +1 -1
- package/dist/lib/custom/Actions/action-form.component.js +22 -22
- package/dist/lib/custom/Actions/action-form.component.js.map +1 -1
- package/dist/lib/custom/Entities/entity-form.component.d.ts +11 -0
- package/dist/lib/custom/Entities/entity-form.component.d.ts.map +1 -1
- package/dist/lib/custom/Entities/entity-form.component.js +244 -217
- package/dist/lib/custom/Entities/entity-form.component.js.map +1 -1
- package/dist/lib/custom/EntityActions/entityaction.form.component.js +3 -3
- package/dist/lib/custom/EntityActions/entityaction.form.component.js.map +1 -1
- package/dist/lib/custom/Lists/list-form.component.js +8 -8
- package/dist/lib/custom/Lists/list-form.component.js.map +1 -1
- package/dist/lib/custom/Queries/query-category-dialog.component.js +3 -3
- package/dist/lib/custom/Queries/query-category-dialog.component.js.map +1 -1
- package/dist/lib/custom/Queries/query-form.component.js +2 -2
- package/dist/lib/custom/Queries/query-run-dialog.component.js +3 -3
- package/dist/lib/custom/Queries/query-run-dialog.component.js.map +1 -1
- package/dist/lib/custom/Templates/template-param-dialog.component.js +107 -111
- package/dist/lib/custom/Templates/template-param-dialog.component.js.map +1 -1
- package/dist/lib/custom/Templates/template-params-grid.component.js +2 -2
- package/dist/lib/custom/Templates/templates-form.component.js +40 -43
- package/dist/lib/custom/Templates/templates-form.component.js.map +1 -1
- package/dist/lib/custom/Tests/entity-link-pill.component.js +2 -2
- package/dist/lib/custom/Tests/entity-link-pill.component.js.map +1 -1
- package/dist/lib/custom/Tests/test-form.component.js +2 -2
- package/dist/lib/custom/Tests/test-rubric-form.component.js +2 -2
- package/dist/lib/custom/Tests/test-rubric-form.component.js.map +1 -1
- package/dist/lib/custom/Tests/test-run-feedback-form.component.js +2 -2
- package/dist/lib/custom/Tests/test-run-feedback-form.component.js.map +1 -1
- package/dist/lib/custom/Tests/test-run-form.component.js +2 -2
- package/dist/lib/custom/Tests/test-suite-form.component.js +2 -2
- package/dist/lib/custom/Tests/test-suite-run-form.component.js +2 -2
- package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js +2 -2
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js +2 -2
- package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.js +2 -2
- package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js +2 -2
- package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts +1 -0
- package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts.map +1 -1
- package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js +28 -18
- package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js.map +1 -1
- package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js +2 -2
- package/dist/lib/custom/custom-forms.module.d.ts +2 -1
- package/dist/lib/custom/custom-forms.module.d.ts.map +1 -1
- package/dist/lib/custom/custom-forms.module.js +7 -3
- package/dist/lib/custom/custom-forms.module.js.map +1 -1
- package/dist/lib/custom/shared/entity-selector-dialog.component.js +2 -2
- package/dist/lib/custom/shared/entity-selector-dialog.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIAgent/mjaiagent.form.component.js +155 -153
- package/dist/lib/generated/Entities/MJAIAgent/mjaiagent.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.d.ts +10 -0
- package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.d.ts.map +1 -0
- package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.js +105 -0
- package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.js.map +1 -0
- package/dist/lib/generated/Entities/MJAIAgentRequest/mjaiagentrequest.form.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/MJAIAgentRequest/mjaiagentrequest.form.component.js +31 -7
- package/dist/lib/generated/Entities/MJAIAgentRequest/mjaiagentrequest.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.d.ts +10 -0
- package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.d.ts.map +1 -0
- package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.js +89 -0
- package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.js.map +1 -0
- package/dist/lib/generated/Entities/MJAIAgentRun/mjaiagentrun.form.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/MJAIAgentRun/mjaiagentrun.form.component.js +50 -14
- package/dist/lib/generated/Entities/MJAIAgentRun/mjaiagentrun.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIAgentRunStep/mjaiagentrunstep.form.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/MJAIAgentRunStep/mjaiagentrunstep.form.component.js +22 -4
- package/dist/lib/generated/Entities/MJAIAgentRunStep/mjaiagentrunstep.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIAgentType/mjaiagenttype.form.component.js +13 -11
- package/dist/lib/generated/Entities/MJAIAgentType/mjaiagenttype.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAction/mjaction.form.component.js +83 -81
- package/dist/lib/generated/Entities/MJAction/mjaction.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJIntegration/mjintegration.form.component.js +35 -33
- package/dist/lib/generated/Entities/MJIntegration/mjintegration.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJIntegrationObject/mjintegrationobject.form.component.js +25 -19
- package/dist/lib/generated/Entities/MJIntegrationObject/mjintegrationobject.form.component.js.map +1 -1
- package/dist/lib/generated/generated-forms.module.d.ts +289 -287
- package/dist/lib/generated/generated-forms.module.d.ts.map +1 -1
- package/dist/lib/generated/generated-forms.module.js +102 -96
- package/dist/lib/generated/generated-forms.module.js.map +1 -1
- package/dist/lib/shared/components/template-editor.component.js +85 -89
- package/dist/lib/shared/components/template-editor.component.js.map +1 -1
- package/package.json +31 -31
|
@@ -451,11 +451,11 @@ export class CreatePromptDialogComponent {
|
|
|
451
451
|
i0.ɵɵproperty("disabled", !ctx.promptForm.valid || (i0.ɵɵpipeBind1(15, 9, ctx.isSaving$) || false));
|
|
452
452
|
i0.ɵɵadvance(2);
|
|
453
453
|
i0.ɵɵconditional(i0.ɵɵpipeBind1(17, 11, ctx.isSaving$) ? 16 : 18);
|
|
454
|
-
} }, dependencies: [i3.ɵNgNoValidate, i3.DefaultValueAccessor, i3.RadioControlValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, i4.TextBoxComponent, i4.TextAreaComponent, i5.DropDownListComponent, i6.ButtonComponent, i7.TemplateEditorComponent, i8.AsyncPipe], styles: ["\n\n.create-prompt-dialog[_ngcontent-%COMP%] {\n padding: 0;\n min-height: 400px;\n display: flex;\n flex-direction: column;\n}\n\n\n\n[_nghost-%COMP%] .k-dialog, \n[_nghost-%COMP%] .k-window {\n z-index: 10000 !important;\n}\n\n[_nghost-%COMP%] .k-overlay {\n z-index: 9999 !important;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n color: var(--
|
|
454
|
+
} }, dependencies: [i3.ɵNgNoValidate, i3.DefaultValueAccessor, i3.RadioControlValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, i4.TextBoxComponent, i4.TextAreaComponent, i5.DropDownListComponent, i6.ButtonComponent, i7.TemplateEditorComponent, i8.AsyncPipe], styles: ["\n\n.create-prompt-dialog[_ngcontent-%COMP%] {\n padding: 0;\n min-height: 400px;\n display: flex;\n flex-direction: column;\n}\n\n\n\n[_nghost-%COMP%] .k-dialog, \n[_nghost-%COMP%] .k-window {\n z-index: 10000 !important;\n}\n\n[_nghost-%COMP%] .k-overlay {\n z-index: 9999 !important;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n color: var(--mj-brand-primary);\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n max-height: 70vh;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n padding: 16px;\n background: var(--mj-bg-surface-card);\n}\n\n.section-title[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.form-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 16px;\n}\n\n.form-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-field.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n\n\n.field-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.field-label.required[_ngcontent-%COMP%]::after {\n content: '*';\n color: var(--mj-status-error);\n margin-left: 2px;\n}\n\n.field-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n\n\n.full-width[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n\n\n.field-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: var(--mj-status-error);\n margin-top: 4px;\n}\n\n.field-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n\n\n.template-mode-section[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.template-mode-options[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-top: 8px;\n flex-wrap: wrap;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-input[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n font-size: 13px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: background-color 0.2s ease;\n}\n\n.radio-label[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.radio-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n\n\n.template-editor-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding: 16px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n}\n\n.template-info[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.template-name[_ngcontent-%COMP%] {\n margin: 0 0 4px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.template-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.template-editor-container[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n overflow: hidden;\n min-height: 200px;\n}\n\n\n\n.existing-template-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding: 16px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n}\n\n.existing-template-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.template-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n\n.template-type-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n}\n\n.template-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n gap: 16px;\n}\n\n.footer-left[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.form-hint[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n@media (max-width: 768px) {\n .form-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .template-mode-options[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 8px;\n }\n\n .dialog-footer[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n }\n\n .footer-right[_ngcontent-%COMP%] {\n justify-content: stretch;\n }\n\n .footer-right[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n }\n}\n\n\n\n[_nghost-%COMP%] .template-editor-container mj-template-editor {\n --template-editor-min-height: 200px;\n}\n\n[_nghost-%COMP%] .template-editor-container .template-editor-help {\n display: none; \n\n}"] }); }
|
|
455
455
|
}
|
|
456
456
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CreatePromptDialogComponent, [{
|
|
457
457
|
type: Component,
|
|
458
|
-
args: [{ standalone: false, selector: 'mj-create-prompt-dialog', template: "<!-- Create Prompt Dialog -->\n<div class=\"create-prompt-dialog\">\n \n <!-- Loading State -->\n @if (isLoading$ | async) {\n <div class=\"loading-state\">\n <div class=\"loading-spinner\">\n <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n </div>\n <p>Loading prompt creation form...</p>\n </div>\n } @else {\n \n <!-- Form Content -->\n <form [formGroup]=\"promptForm\" class=\"dialog-content\">\n \n <!-- Basic Prompt Information -->\n <div class=\"form-section\">\n <h4 class=\"section-title\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Basic Information\n </h4>\n \n <div class=\"form-grid\">\n \n <!-- Name Field -->\n <div class=\"form-field\">\n <label for=\"promptName\" class=\"field-label required\">\n <i class=\"fa-solid fa-tag\"></i>\n Name\n </label>\n <kendo-textbox \n id=\"promptName\"\n formControlName=\"name\"\n placeholder=\"Enter prompt name...\"\n class=\"full-width\">\n </kendo-textbox>\n @if (promptForm.get('name')?.invalid && promptForm.get('name')?.touched) {\n <div class=\"field-error\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n Name is required\n </div>\n }\n </div>\n\n <!-- Type Field -->\n <div class=\"form-field\">\n <label for=\"promptType\" class=\"field-label required\">\n <i class=\"fa-solid fa-category\"></i>\n Type\n </label>\n <kendo-dropdownlist \n id=\"promptType\"\n formControlName=\"typeID\"\n [data]=\"availablePromptTypes$ | async\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n placeholder=\"Select prompt type...\"\n class=\"full-width\">\n </kendo-dropdownlist>\n @if (promptForm.get('typeID')?.invalid && promptForm.get('typeID')?.touched) {\n <div class=\"field-error\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n Type is required\n </div>\n }\n </div>\n\n <!-- Status Field -->\n <div class=\"form-field\">\n <label for=\"promptStatus\" class=\"field-label\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n Status\n </label>\n <kendo-dropdownlist \n id=\"promptStatus\"\n formControlName=\"status\"\n [data]=\"['Pending', 'Active', 'Disabled']\"\n [valuePrimitive]=\"true\"\n class=\"full-width\">\n </kendo-dropdownlist>\n </div>\n\n <!-- Output Type Field -->\n <div class=\"form-field\">\n <label for=\"outputType\" class=\"field-label\">\n <i class=\"fa-solid fa-file-code\"></i>\n Output Type\n </label>\n <kendo-dropdownlist \n id=\"outputType\"\n formControlName=\"outputType\"\n [data]=\"['string', 'object']\"\n [valuePrimitive]=\"true\"\n class=\"full-width\">\n </kendo-dropdownlist>\n </div>\n\n </div>\n\n <!-- Description Field -->\n <div class=\"form-field full-width\">\n <label for=\"promptDescription\" class=\"field-label\">\n <i class=\"fa-solid fa-align-left\"></i>\n Description\n </label>\n <kendo-textarea \n id=\"promptDescription\"\n formControlName=\"description\"\n placeholder=\"Enter prompt description (optional)...\"\n [rows]=\"3\"\n class=\"full-width\">\n </kendo-textarea>\n </div>\n\n </div>\n\n <!-- Template Configuration -->\n <div class=\"form-section\">\n <h4 class=\"section-title\">\n <i class=\"fa-solid fa-file-alt\"></i>\n Template Configuration\n </h4>\n \n <div class=\"template-mode-section\">\n <label class=\"field-label\">\n <i class=\"fa-solid fa-cog\"></i>\n Template Mode\n </label>\n \n <div class=\"template-mode-options\">\n <div class=\"radio-option\">\n <input type=\"radio\" \n id=\"templateNew\" \n value=\"new\" \n formControlName=\"templateMode\"\n class=\"radio-input\">\n <label for=\"templateNew\" class=\"radio-label\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n Create New Template\n </label>\n </div>\n \n <div class=\"radio-option\">\n <input type=\"radio\" \n id=\"templateExisting\" \n value=\"existing\" \n formControlName=\"templateMode\"\n class=\"radio-input\">\n <label for=\"templateExisting\" class=\"radio-label\">\n <i class=\"fa-solid fa-link\"></i>\n Link Existing Template\n </label>\n </div>\n </div>\n </div>\n\n <!-- Template Editor Section (New Template) -->\n @if (showTemplateEditor && templateEntity && templateMode === 'new') {\n <div class=\"template-editor-section\">\n <div class=\"template-info\">\n <h5 class=\"template-name\">\n <i class=\"fa-solid fa-file-code\"></i>\n {{ templateEntity.Name }}\n </h5>\n @if (templateEntity.Description) {\n <p class=\"template-description\">{{ templateEntity.Description }}</p>\n }\n </div>\n \n <div class=\"template-editor-container\">\n <mj-template-editor \n #templateEditor\n [template]=\"templateEntity\"\n [config]=\"templateEditorConfig\"\n (contentChange)=\"onTemplateContentChange($event)\">\n </mj-template-editor>\n </div>\n </div>\n }\n \n <!-- Existing Template Display -->\n @if (templateEntity && templateMode === 'existing') {\n <div class=\"existing-template-section\">\n <div class=\"existing-template-info\">\n <div class=\"template-header\">\n <h5 class=\"template-name\">\n <i class=\"fa-solid fa-link\"></i>\n {{ templateEntity.Name }}\n </h5>\n <span class=\"template-type-badge\">\n <i class=\"fa-solid fa-tag\"></i>\n Existing Template\n </span>\n </div>\n \n @if (templateEntity.Description) {\n <p class=\"template-description\">{{ templateEntity.Description }}</p>\n }\n \n <div class=\"template-actions\">\n <button kendoButton \n look=\"outline\" \n size=\"small\"\n (click)=\"handleTemplateModeChange('existing')\">\n <i class=\"fa-solid fa-sync\"></i>\n Change Template\n </button>\n </div>\n </div>\n </div>\n }\n\n </div>\n\n </form>\n\n }\n\n</div>\n\n<!-- Dialog Footer -->\n<div class=\"dialog-footer\">\n <div class=\"footer-left\">\n <span class=\"form-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n @if (templateMode === 'new') {\n Created prompts and templates will be saved when you save the AI Agent\n } @else {\n Created prompt will be linked to existing template when you save the AI Agent\n }\n </span>\n </div>\n \n <div class=\"footer-right\">\n <button kendoButton \n look=\"outline\"\n (click)=\"cancel()\"\n [disabled]=\"(isSaving$ | async) || false\">\n Cancel\n </button>\n \n <button kendoButton \n themeColor=\"primary\"\n (click)=\"save()\"\n [disabled]=\"!promptForm.valid || ((isSaving$ | async) || false)\">\n @if (isSaving$ | async) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Creating...\n } @else {\n <i class=\"fa-solid fa-plus\"></i>\n Create Prompt\n }\n </button>\n </div>\n</div>", styles: ["/* Create Prompt Dialog Styles */\n.create-prompt-dialog {\n padding: 0;\n min-height: 400px;\n display: flex;\n flex-direction: column;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n z-index: 9999 !important;\n}\n\n/* Loading State */\n.loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n\n.loading-spinner {\n margin-bottom: 16px;\n color: var(--kendo-color-primary, #0078d4);\n}\n\n/* Dialog Content */\n.dialog-content {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n max-height: 70vh;\n}\n\n/* Form Sections */\n.form-section {\n margin-bottom: 24px;\n border: 1px solid var(--kendo-color-border, #e0e0e0);\n border-radius: 6px;\n padding: 16px;\n background: var(--kendo-color-surface-alt, #fafafa);\n}\n\n.section-title {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--kendo-color-on-app-surface, #323130);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title i {\n color: var(--kendo-color-primary, #0078d4);\n}\n\n/* Form Grid Layout */\n.form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 16px;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-field.full-width {\n grid-column: 1 / -1;\n}\n\n/* Field Labels */\n.field-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--kendo-color-on-app-surface, #323130);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.field-label.required::after {\n content: '*';\n color: var(--kendo-color-error, #d13438);\n margin-left: 2px;\n}\n\n.field-label i {\n font-size: 11px;\n color: var(--kendo-color-subtle, #605e5c);\n}\n\n/* Form Controls */\n.full-width {\n width: 100%;\n}\n\n/* Field Errors */\n.field-error {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: var(--kendo-color-error, #d13438);\n margin-top: 4px;\n}\n\n.field-error i {\n font-size: 11px;\n}\n\n/* Template Mode Section */\n.template-mode-section {\n margin-bottom: 16px;\n}\n\n.template-mode-options {\n display: flex;\n gap: 16px;\n margin-top: 8px;\n flex-wrap: wrap;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-input {\n margin: 0;\n}\n\n.radio-label {\n font-size: 13px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: background-color 0.2s ease;\n}\n\n.radio-label:hover {\n background-color: var(--kendo-color-base-hover, #f3f2f1);\n}\n\n.radio-label i {\n font-size: 12px;\n color: var(--kendo-color-subtle, #605e5c);\n}\n\n/* Template Editor Section */\n.template-editor-section {\n margin-top: 16px;\n padding: 16px;\n border: 1px solid var(--kendo-color-border, #e0e0e0);\n border-radius: 4px;\n background: var(--kendo-color-app-surface, #ffffff);\n}\n\n.template-info {\n margin-bottom: 12px;\n}\n\n.template-name {\n margin: 0 0 4px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--kendo-color-on-app-surface, #323130);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.template-description {\n margin: 0;\n font-size: 12px;\n color: var(--kendo-color-subtle, #605e5c);\n}\n\n.template-editor-container {\n border: 1px solid var(--kendo-color-border, #e0e0e0);\n border-radius: 4px;\n overflow: hidden;\n min-height: 200px;\n}\n\n/* Existing Template Section */\n.existing-template-section {\n margin-top: 16px;\n padding: 16px;\n border: 1px solid var(--kendo-color-border, #e0e0e0);\n border-radius: 4px;\n background: var(--kendo-color-app-surface, #ffffff);\n}\n\n.existing-template-info {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.template-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n\n.template-type-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n background-color: var(--kendo-color-primary, #0078d4);\n color: white;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n}\n\n.template-actions {\n display: flex;\n gap: 8px;\n}\n\n/* Dialog Footer */\n.dialog-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n border-top: 1px solid var(--kendo-color-border, #e0e0e0);\n background: var(--kendo-color-surface-alt, #fafafa);\n gap: 16px;\n}\n\n.footer-left {\n flex: 1;\n}\n\n.footer-right {\n display: flex;\n gap: 8px;\n}\n\n.form-hint {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--kendo-color-subtle, #605e5c);\n}\n\n.form-hint i {\n color: var(--kendo-color-primary, #0078d4);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .form-grid {\n grid-template-columns: 1fr;\n }\n \n .template-mode-options {\n flex-direction: column;\n gap: 8px;\n }\n \n .dialog-footer {\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n }\n \n .footer-right {\n justify-content: stretch;\n }\n \n .footer-right button {\n flex: 1;\n }\n}\n\n/* Compact Template Editor Styles */\n:host ::ng-deep .template-editor-container mj-template-editor {\n --template-editor-min-height: 200px;\n}\n\n:host ::ng-deep .template-editor-container .template-editor-help {\n display: none; /* Hide help section in compact mode */\n}"] }]
|
|
458
|
+
args: [{ standalone: false, selector: 'mj-create-prompt-dialog', template: "<!-- Create Prompt Dialog -->\n<div class=\"create-prompt-dialog\">\n \n <!-- Loading State -->\n @if (isLoading$ | async) {\n <div class=\"loading-state\">\n <div class=\"loading-spinner\">\n <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n </div>\n <p>Loading prompt creation form...</p>\n </div>\n } @else {\n \n <!-- Form Content -->\n <form [formGroup]=\"promptForm\" class=\"dialog-content\">\n \n <!-- Basic Prompt Information -->\n <div class=\"form-section\">\n <h4 class=\"section-title\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Basic Information\n </h4>\n \n <div class=\"form-grid\">\n \n <!-- Name Field -->\n <div class=\"form-field\">\n <label for=\"promptName\" class=\"field-label required\">\n <i class=\"fa-solid fa-tag\"></i>\n Name\n </label>\n <kendo-textbox \n id=\"promptName\"\n formControlName=\"name\"\n placeholder=\"Enter prompt name...\"\n class=\"full-width\">\n </kendo-textbox>\n @if (promptForm.get('name')?.invalid && promptForm.get('name')?.touched) {\n <div class=\"field-error\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n Name is required\n </div>\n }\n </div>\n\n <!-- Type Field -->\n <div class=\"form-field\">\n <label for=\"promptType\" class=\"field-label required\">\n <i class=\"fa-solid fa-category\"></i>\n Type\n </label>\n <kendo-dropdownlist \n id=\"promptType\"\n formControlName=\"typeID\"\n [data]=\"availablePromptTypes$ | async\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n placeholder=\"Select prompt type...\"\n class=\"full-width\">\n </kendo-dropdownlist>\n @if (promptForm.get('typeID')?.invalid && promptForm.get('typeID')?.touched) {\n <div class=\"field-error\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n Type is required\n </div>\n }\n </div>\n\n <!-- Status Field -->\n <div class=\"form-field\">\n <label for=\"promptStatus\" class=\"field-label\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n Status\n </label>\n <kendo-dropdownlist \n id=\"promptStatus\"\n formControlName=\"status\"\n [data]=\"['Pending', 'Active', 'Disabled']\"\n [valuePrimitive]=\"true\"\n class=\"full-width\">\n </kendo-dropdownlist>\n </div>\n\n <!-- Output Type Field -->\n <div class=\"form-field\">\n <label for=\"outputType\" class=\"field-label\">\n <i class=\"fa-solid fa-file-code\"></i>\n Output Type\n </label>\n <kendo-dropdownlist \n id=\"outputType\"\n formControlName=\"outputType\"\n [data]=\"['string', 'object']\"\n [valuePrimitive]=\"true\"\n class=\"full-width\">\n </kendo-dropdownlist>\n </div>\n\n </div>\n\n <!-- Description Field -->\n <div class=\"form-field full-width\">\n <label for=\"promptDescription\" class=\"field-label\">\n <i class=\"fa-solid fa-align-left\"></i>\n Description\n </label>\n <kendo-textarea \n id=\"promptDescription\"\n formControlName=\"description\"\n placeholder=\"Enter prompt description (optional)...\"\n [rows]=\"3\"\n class=\"full-width\">\n </kendo-textarea>\n </div>\n\n </div>\n\n <!-- Template Configuration -->\n <div class=\"form-section\">\n <h4 class=\"section-title\">\n <i class=\"fa-solid fa-file-alt\"></i>\n Template Configuration\n </h4>\n \n <div class=\"template-mode-section\">\n <label class=\"field-label\">\n <i class=\"fa-solid fa-cog\"></i>\n Template Mode\n </label>\n \n <div class=\"template-mode-options\">\n <div class=\"radio-option\">\n <input type=\"radio\" \n id=\"templateNew\" \n value=\"new\" \n formControlName=\"templateMode\"\n class=\"radio-input\">\n <label for=\"templateNew\" class=\"radio-label\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n Create New Template\n </label>\n </div>\n \n <div class=\"radio-option\">\n <input type=\"radio\" \n id=\"templateExisting\" \n value=\"existing\" \n formControlName=\"templateMode\"\n class=\"radio-input\">\n <label for=\"templateExisting\" class=\"radio-label\">\n <i class=\"fa-solid fa-link\"></i>\n Link Existing Template\n </label>\n </div>\n </div>\n </div>\n\n <!-- Template Editor Section (New Template) -->\n @if (showTemplateEditor && templateEntity && templateMode === 'new') {\n <div class=\"template-editor-section\">\n <div class=\"template-info\">\n <h5 class=\"template-name\">\n <i class=\"fa-solid fa-file-code\"></i>\n {{ templateEntity.Name }}\n </h5>\n @if (templateEntity.Description) {\n <p class=\"template-description\">{{ templateEntity.Description }}</p>\n }\n </div>\n \n <div class=\"template-editor-container\">\n <mj-template-editor \n #templateEditor\n [template]=\"templateEntity\"\n [config]=\"templateEditorConfig\"\n (contentChange)=\"onTemplateContentChange($event)\">\n </mj-template-editor>\n </div>\n </div>\n }\n \n <!-- Existing Template Display -->\n @if (templateEntity && templateMode === 'existing') {\n <div class=\"existing-template-section\">\n <div class=\"existing-template-info\">\n <div class=\"template-header\">\n <h5 class=\"template-name\">\n <i class=\"fa-solid fa-link\"></i>\n {{ templateEntity.Name }}\n </h5>\n <span class=\"template-type-badge\">\n <i class=\"fa-solid fa-tag\"></i>\n Existing Template\n </span>\n </div>\n \n @if (templateEntity.Description) {\n <p class=\"template-description\">{{ templateEntity.Description }}</p>\n }\n \n <div class=\"template-actions\">\n <button kendoButton \n look=\"outline\" \n size=\"small\"\n (click)=\"handleTemplateModeChange('existing')\">\n <i class=\"fa-solid fa-sync\"></i>\n Change Template\n </button>\n </div>\n </div>\n </div>\n }\n\n </div>\n\n </form>\n\n }\n\n</div>\n\n<!-- Dialog Footer -->\n<div class=\"dialog-footer\">\n <div class=\"footer-left\">\n <span class=\"form-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n @if (templateMode === 'new') {\n Created prompts and templates will be saved when you save the AI Agent\n } @else {\n Created prompt will be linked to existing template when you save the AI Agent\n }\n </span>\n </div>\n \n <div class=\"footer-right\">\n <button kendoButton \n look=\"outline\"\n (click)=\"cancel()\"\n [disabled]=\"(isSaving$ | async) || false\">\n Cancel\n </button>\n \n <button kendoButton \n themeColor=\"primary\"\n (click)=\"save()\"\n [disabled]=\"!promptForm.valid || ((isSaving$ | async) || false)\">\n @if (isSaving$ | async) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Creating...\n } @else {\n <i class=\"fa-solid fa-plus\"></i>\n Create Prompt\n }\n </button>\n </div>\n</div>", styles: ["/* Create Prompt Dialog Styles */\n.create-prompt-dialog {\n padding: 0;\n min-height: 400px;\n display: flex;\n flex-direction: column;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n z-index: 9999 !important;\n}\n\n/* Loading State */\n.loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n\n.loading-spinner {\n margin-bottom: 16px;\n color: var(--mj-brand-primary);\n}\n\n/* Dialog Content */\n.dialog-content {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n max-height: 70vh;\n}\n\n/* Form Sections */\n.form-section {\n margin-bottom: 24px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n padding: 16px;\n background: var(--mj-bg-surface-card);\n}\n\n.section-title {\n margin: 0 0 16px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title i {\n color: var(--mj-brand-primary);\n}\n\n/* Form Grid Layout */\n.form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 16px;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-field.full-width {\n grid-column: 1 / -1;\n}\n\n/* Field Labels */\n.field-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.field-label.required::after {\n content: '*';\n color: var(--mj-status-error);\n margin-left: 2px;\n}\n\n.field-label i {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n/* Form Controls */\n.full-width {\n width: 100%;\n}\n\n/* Field Errors */\n.field-error {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: var(--mj-status-error);\n margin-top: 4px;\n}\n\n.field-error i {\n font-size: 11px;\n}\n\n/* Template Mode Section */\n.template-mode-section {\n margin-bottom: 16px;\n}\n\n.template-mode-options {\n display: flex;\n gap: 16px;\n margin-top: 8px;\n flex-wrap: wrap;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-input {\n margin: 0;\n}\n\n.radio-label {\n font-size: 13px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: background-color 0.2s ease;\n}\n\n.radio-label:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.radio-label i {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n/* Template Editor Section */\n.template-editor-section {\n margin-top: 16px;\n padding: 16px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n}\n\n.template-info {\n margin-bottom: 12px;\n}\n\n.template-name {\n margin: 0 0 4px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.template-description {\n margin: 0;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.template-editor-container {\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n overflow: hidden;\n min-height: 200px;\n}\n\n/* Existing Template Section */\n.existing-template-section {\n margin-top: 16px;\n padding: 16px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n}\n\n.existing-template-info {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.template-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n\n.template-type-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n}\n\n.template-actions {\n display: flex;\n gap: 8px;\n}\n\n/* Dialog Footer */\n.dialog-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n gap: 16px;\n}\n\n.footer-left {\n flex: 1;\n}\n\n.footer-right {\n display: flex;\n gap: 8px;\n}\n\n.form-hint {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.form-hint i {\n color: var(--mj-brand-primary);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .form-grid {\n grid-template-columns: 1fr;\n }\n\n .template-mode-options {\n flex-direction: column;\n gap: 8px;\n }\n\n .dialog-footer {\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n }\n\n .footer-right {\n justify-content: stretch;\n }\n\n .footer-right button {\n flex: 1;\n }\n}\n\n/* Compact Template Editor Styles */\n:host ::ng-deep .template-editor-container mj-template-editor {\n --template-editor-min-height: 200px;\n}\n\n:host ::ng-deep .template-editor-container .template-editor-help {\n display: none; /* Hide help section in compact mode */\n}\n"] }]
|
|
459
459
|
}], () => [{ type: i1.WindowRef }, { type: i0.ChangeDetectorRef }, { type: i2.AIPromptManagementService }], { templateEditor: [{
|
|
460
460
|
type: ViewChild,
|
|
461
461
|
args: ['templateEditor']
|
|
@@ -707,11 +707,11 @@ export class CreateSubAgentDialogComponent {
|
|
|
707
707
|
i0.ɵɵproperty("disabled", i0.ɵɵpipeBind1(15, 10, ctx.isSaving$) || !ctx.subAgentForm.valid);
|
|
708
708
|
i0.ɵɵadvance(2);
|
|
709
709
|
i0.ɵɵconditional(i0.ɵɵpipeBind1(17, 12, ctx.isSaving$) ? 16 : 18);
|
|
710
|
-
} }, dependencies: [i3.ɵNgNoValidate, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.NumberValueAccessor, i3.CheckboxControlValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.MinValidator, i3.MaxValidator, i3.FormGroupDirective, i3.FormControlName, i4.AsyncPipe], styles: [".sub-agent-dialog[_ngcontent-%COMP%] {\n padding: 16px;\n max-width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n}\n\n.sub-agent-header[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n border-bottom: 1px solid
|
|
710
|
+
} }, dependencies: [i3.ɵNgNoValidate, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.NumberValueAccessor, i3.CheckboxControlValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.MinValidator, i3.MaxValidator, i3.FormGroupDirective, i3.FormControlName, i4.AsyncPipe], styles: [".sub-agent-dialog[_ngcontent-%COMP%] {\n padding: 16px;\n max-width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n}\n\n.sub-agent-header[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n padding-bottom: 15px;\n}\n\n.dialog-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.4em;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.dialog-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.parent-info[_ngcontent-%COMP%] {\n margin: 8px 0 0 0;\n color: var(--mj-text-secondary);\n font-size: 0.9em;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.parent-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 40px;\n color: var(--mj-text-secondary);\n}\n\n.loading-container[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.2em;\n color: var(--mj-brand-primary);\n}\n\n.sub-agent-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 25px;\n}\n\n.form-section[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-bg-surface-sunken);\n border-radius: 8px;\n padding: 20px;\n background-color: var(--mj-bg-surface-card);\n}\n\n.section-title[_ngcontent-%COMP%] {\n margin: 0 0 15px 0;\n font-size: 1.1em;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.form-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 15px;\n margin-bottom: 15px;\n}\n\n.form-row[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.form-group[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.form-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-secondary);\n margin-bottom: 5px;\n font-size: 0.9em;\n}\n\n.form-group[_ngcontent-%COMP%] label[for=\"enableCaching\"][_ngcontent-%COMP%] {\n flex-direction: row;\n align-items: center;\n gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%] label[for=\"enableCaching\"][_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin: 0;\n width: auto;\n}\n\n.form-control[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n font-size: 0.9em;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.form-control[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.form-control[readonly][_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface-sunken);\n opacity: 1;\n}\n\n.section-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n margin-bottom: 15px;\n}\n\n.linked-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.linked-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px;\n background-color: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n transition: box-shadow 0.15s ease-in-out;\n}\n\n.linked-item[_ngcontent-%COMP%]:hover {\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.item-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n}\n\n.item-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n width: 16px;\n text-align: center;\n}\n\n.item-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.item-description[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 0.85em;\n margin-left: 10px;\n}\n\n.prompt-item[_ngcontent-%COMP%] .item-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.action-item[_ngcontent-%COMP%] .item-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 30px;\n color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2em;\n color: var(--mj-border-default);\n margin-bottom: 10px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.9em;\n}\n\n.dialog-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n margin-top: 30px;\n padding-top: 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.btn[_ngcontent-%COMP%] {\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n font-size: 0.9em;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.15s ease-in-out;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n background-color: var(--mj-text-muted);\n color: var(--mj-text-inverse);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-text-secondary);\n}\n\n.btn-success[_ngcontent-%COMP%] {\n background-color: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.btn-success[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-status-success);\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n background-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: var(--mj-status-error);\n}\n\n.btn-sm[_ngcontent-%COMP%] {\n padding: 6px 12px;\n font-size: 0.8em;\n}\n\n.btn-xs[_ngcontent-%COMP%] {\n padding: 4px 8px;\n font-size: 0.75em;\n}\n\n\n\n@media (max-width: 768px) {\n .sub-agent-dialog[_ngcontent-%COMP%] {\n padding: 15px;\n max-width: 95vw;\n }\n\n .form-row[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 10px;\n }\n\n .section-actions[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .dialog-actions[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .linked-item[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n }\n}\n\n\n\n.form-control.ng-invalid.ng-touched[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n}\n\n.form-control.ng-valid.ng-touched[_ngcontent-%COMP%] {\n border-color: var(--mj-status-success);\n}\n\n\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 8px;\n}\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n}\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border-radius: 4px;\n}\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n\n\n[_nghost-%COMP%] .k-dialog, \n[_nghost-%COMP%] .k-window {\n z-index: 10000 !important;\n}\n\n[_nghost-%COMP%] .k-overlay {\n z-index: 9999 !important;\n}"] }); }
|
|
711
711
|
}
|
|
712
712
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CreateSubAgentDialogComponent, [{
|
|
713
713
|
type: Component,
|
|
714
|
-
args: [{ standalone: false, selector: 'mj-create-sub-agent-dialog', template: "<div class=\"sub-agent-dialog\">\n <div class=\"sub-agent-header\">\n <h2 class=\"dialog-title\">\n <i class=\"fa-solid fa-robot\"></i>\n {{ config.title || 'Create New Sub-Agent' }}\n </h2>\n @if (config.parentAgentName) {\n <p class=\"parent-info\">\n <i class=\"fa-solid fa-link\"></i>\n Sub-agent of: <strong>{{ config.parentAgentName }}</strong>\n </p>\n }\n </div>\n\n @if (isLoading$ | async) {\n <div class=\"loading-container\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading sub-agent creation form...</span>\n </div>\n } @else {\n <form [formGroup]=\"subAgentForm\" class=\"sub-agent-form\">\n <!-- Basic Information Section -->\n <div class=\"form-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Basic Information\n </h3>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"name\">Name *</label>\n <input type=\"text\" id=\"name\" formControlName=\"name\" class=\"form-control\" placeholder=\"Enter sub-agent name\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"typeID\">Type *</label>\n <select id=\"typeID\" formControlName=\"typeID\" class=\"form-control\">\n <option value=\"\">Select agent type...</option>\n @for (type of availableAgentTypes$ | async; track type.ID) {\n <option [value]=\"type.ID\">{{ type.Name }}</option>\n }\n </select>\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"description\">Description</label>\n <textarea id=\"description\" formControlName=\"description\" class=\"form-control\" rows=\"2\" placeholder=\"Enter description\"></textarea>\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"status\">Status</label>\n <select id=\"status\" formControlName=\"status\" class=\"form-control\">\n <option value=\"Pending\">Pending</option>\n <option value=\"Active\">Active</option>\n <option value=\"Disabled\">Disabled</option>\n </select>\n </div>\n \n <div class=\"form-group\">\n <label for=\"executionMode\">Execution Mode</label>\n <select id=\"executionMode\" formControlName=\"executionMode\" class=\"form-control\">\n <option value=\"Sequential\">Sequential</option>\n <option value=\"Parallel\">Parallel</option>\n </select>\n </div>\n </div>\n </div>\n\n <!-- Purpose & Messages Section -->\n <div class=\"form-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-bullseye\"></i>\n Purpose & Messages\n </h3>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"purpose\">Purpose</label>\n <input type=\"text\" id=\"purpose\" formControlName=\"purpose\" class=\"form-control\" placeholder=\"Enter the purpose of this sub-agent\">\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"userMessage\">User Message</label>\n <textarea id=\"userMessage\" formControlName=\"userMessage\" class=\"form-control\" rows=\"3\" placeholder=\"Enter user message\"></textarea>\n </div>\n </div>\n\n <!-- System Message field removed - property does not exist on MJAIAgentEntity -->\n </div>\n\n <!-- Model Configuration Section -->\n <div class=\"form-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-cogs\"></i>\n Model Configuration\n </h3>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"modelSelectionMode\">Model Selection Mode</label>\n <select id=\"modelSelectionMode\" formControlName=\"modelSelectionMode\" class=\"form-control\">\n <option value=\"Agent Type\">Agent Type</option>\n <option value=\"Agent\">Agent</option>\n </select>\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"temperature\">Temperature</label>\n <input type=\"number\" id=\"temperature\" formControlName=\"temperature\" class=\"form-control\" min=\"0\" max=\"2\" step=\"0.1\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"topP\">Top P</label>\n <input type=\"number\" id=\"topP\" formControlName=\"topP\" class=\"form-control\" min=\"0\" max=\"1\" step=\"0.1\">\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"topK\">Top K</label>\n <input type=\"number\" id=\"topK\" formControlName=\"topK\" class=\"form-control\" min=\"1\" max=\"100\" step=\"1\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"maxTokens\">Max Tokens</label>\n <input type=\"number\" id=\"maxTokens\" formControlName=\"maxTokens\" class=\"form-control\" min=\"1\" max=\"32000\" step=\"1\">\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"enableCaching\">\n <input type=\"checkbox\" id=\"enableCaching\" formControlName=\"enableCaching\">\n Enable Caching\n </label>\n </div>\n \n <div class=\"form-group\">\n <label for=\"cacheTTL\">Cache TTL (seconds)</label>\n <input type=\"number\" id=\"cacheTTL\" formControlName=\"cacheTTL\" class=\"form-control\" min=\"60\" max=\"86400\" step=\"60\">\n </div>\n </div>\n </div>\n\n <!-- Prompts Section -->\n <div class=\"form-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-comments\"></i>\n Prompts ({{ linkedPromptCount }})\n </h3>\n \n <div class=\"section-actions\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addPrompt()\">\n <i class=\"fa-solid fa-plus\"></i>\n Add Existing Prompt\n </button>\n <button type=\"button\" class=\"btn btn-success btn-sm\" (click)=\"createNewPrompt()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create New Prompt\n </button>\n </div>\n\n @if (linkedPrompts.length > 0) {\n <div class=\"linked-items\">\n @for (prompt of linkedPrompts; track prompt.ID) {\n <div class=\"linked-item prompt-item\">\n <div class=\"item-info\">\n <i class=\"fa-solid fa-comments\"></i>\n <span class=\"item-name\">{{ prompt.Name }}</span>\n @if (prompt.Description) {\n <span class=\"item-description\">{{ prompt.Description }}</span>\n }\n </div>\n <button type=\"button\" class=\"btn btn-danger btn-xs\" (click)=\"removePrompt(prompt)\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-comments\"></i>\n <p>No prompts added yet. Click the buttons above to add prompts.</p>\n </div>\n }\n </div>\n\n <!-- Actions Section -->\n <div class=\"form-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-bolt\"></i>\n Actions ({{ linkedActionCount }})\n </h3>\n \n <div class=\"section-actions\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addAction()\">\n <i class=\"fa-solid fa-plus\"></i>\n Add Action\n </button>\n </div>\n\n @if (linkedActions.length > 0) {\n <div class=\"linked-items\">\n @for (action of linkedActions; track action.ID) {\n <div class=\"linked-item action-item\">\n <div class=\"item-info\">\n <i class=\"fa-solid fa-bolt\"></i>\n <span class=\"item-name\">{{ action.Name }}</span>\n @if (action.Description) {\n <span class=\"item-description\">{{ action.Description }}</span>\n }\n </div>\n <button type=\"button\" class=\"btn btn-danger btn-xs\" (click)=\"removeAction(action)\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-bolt\"></i>\n <p>No actions added yet. Click the button above to add actions.</p>\n </div>\n }\n </div>\n </form>\n }\n\n <!-- Dialog Actions -->\n <div class=\"dialog-actions\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\" [disabled]=\"isSaving$ | async\">\n <i class=\"fa-solid fa-times\"></i>\n Cancel\n </button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"save()\" [disabled]=\"(isSaving$ | async) || !subAgentForm.valid\">\n @if (isSaving$ | async) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Creating...\n } @else {\n <i class=\"fa-solid fa-save\"></i>\n Create Sub-Agent\n }\n </button>\n </div>\n</div>", styles: [".sub-agent-dialog {\n padding: 16px;\n max-width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n}\n\n.sub-agent-header {\n margin-bottom: 20px;\n border-bottom: 1px solid #e0e0e0;\n padding-bottom: 15px;\n}\n\n.dialog-title {\n margin: 0;\n font-size: 1.4em;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.dialog-title i {\n color: #007bff;\n}\n\n.parent-info {\n margin: 8px 0 0 0;\n color: #666;\n font-size: 0.9em;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.parent-info i {\n color: #28a745;\n}\n\n.loading-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 40px;\n color: #666;\n}\n\n.loading-container i {\n font-size: 1.2em;\n color: #007bff;\n}\n\n.sub-agent-form {\n display: flex;\n flex-direction: column;\n gap: 25px;\n}\n\n.form-section {\n border: 1px solid #e9ecef;\n border-radius: 8px;\n padding: 20px;\n background-color: #f8f9fa;\n}\n\n.section-title {\n margin: 0 0 15px 0;\n font-size: 1.1em;\n font-weight: 600;\n color: #495057;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title i {\n color: #007bff;\n}\n\n.form-row {\n display: flex;\n gap: 15px;\n margin-bottom: 15px;\n}\n\n.form-row:last-child {\n margin-bottom: 0;\n}\n\n.form-group {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.form-group label {\n font-weight: 500;\n color: #495057;\n margin-bottom: 5px;\n font-size: 0.9em;\n}\n\n.form-group label[for=\"enableCaching\"] {\n flex-direction: row;\n align-items: center;\n gap: 8px;\n}\n\n.form-group label[for=\"enableCaching\"] input {\n margin: 0;\n width: auto;\n}\n\n.form-control {\n padding: 8px 12px;\n border: 1px solid #ced4da;\n border-radius: 4px;\n font-size: 0.9em;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.form-control:focus {\n outline: none;\n border-color: #007bff;\n box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n}\n\n.form-control[readonly] {\n background-color: #e9ecef;\n opacity: 1;\n}\n\n.section-actions {\n display: flex;\n gap: 10px;\n margin-bottom: 15px;\n}\n\n.linked-items {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.linked-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px;\n background-color: #ffffff;\n border: 1px solid #dee2e6;\n border-radius: 6px;\n transition: box-shadow 0.15s ease-in-out;\n}\n\n.linked-item:hover {\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.item-info {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n}\n\n.item-info i {\n color: #007bff;\n width: 16px;\n text-align: center;\n}\n\n.item-name {\n font-weight: 500;\n color: #333;\n}\n\n.item-description {\n color: #666;\n font-size: 0.85em;\n margin-left: 10px;\n}\n\n.prompt-item .item-info i {\n color: #28a745;\n}\n\n.action-item .item-info i {\n color: #ffc107;\n}\n\n.empty-state {\n text-align: center;\n padding: 30px;\n color: #6c757d;\n}\n\n.empty-state i {\n font-size: 2em;\n color: #dee2e6;\n margin-bottom: 10px;\n}\n\n.empty-state p {\n margin: 0;\n font-size: 0.9em;\n}\n\n.dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n margin-top: 30px;\n padding-top: 20px;\n border-top: 1px solid #e0e0e0;\n}\n\n.btn {\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n font-size: 0.9em;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.15s ease-in-out;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.btn-primary {\n background-color: #007bff;\n color: white;\n}\n\n.btn-primary:hover:not(:disabled) {\n background-color: #0056b3;\n}\n\n.btn-secondary {\n background-color: #6c757d;\n color: white;\n}\n\n.btn-secondary:hover:not(:disabled) {\n background-color: #545b62;\n}\n\n.btn-success {\n background-color: #28a745;\n color: white;\n}\n\n.btn-success:hover:not(:disabled) {\n background-color: #1e7e34;\n}\n\n.btn-danger {\n background-color: #dc3545;\n color: white;\n}\n\n.btn-danger:hover:not(:disabled) {\n background-color: #c82333;\n}\n\n.btn-sm {\n padding: 6px 12px;\n font-size: 0.8em;\n}\n\n.btn-xs {\n padding: 4px 8px;\n font-size: 0.75em;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n .sub-agent-dialog {\n padding: 15px;\n max-width: 95vw;\n }\n \n .form-row {\n flex-direction: column;\n gap: 10px;\n }\n \n .section-actions {\n flex-direction: column;\n }\n \n .dialog-actions {\n flex-direction: column;\n }\n \n .linked-item {\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n }\n}\n\n/* Validation styles */\n.form-control.ng-invalid.ng-touched {\n border-color: #dc3545;\n}\n\n.form-control.ng-valid.ng-touched {\n border-color: #28a745;\n}\n\n/* Custom scrollbar for dialog */\n.sub-agent-dialog::-webkit-scrollbar {\n width: 8px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb:hover {\n background: #a8a8a8;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n z-index: 9999 !important;\n}"] }]
|
|
714
|
+
args: [{ standalone: false, selector: 'mj-create-sub-agent-dialog', template: "<div class=\"sub-agent-dialog\">\n <div class=\"sub-agent-header\">\n <h2 class=\"dialog-title\">\n <i class=\"fa-solid fa-robot\"></i>\n {{ config.title || 'Create New Sub-Agent' }}\n </h2>\n @if (config.parentAgentName) {\n <p class=\"parent-info\">\n <i class=\"fa-solid fa-link\"></i>\n Sub-agent of: <strong>{{ config.parentAgentName }}</strong>\n </p>\n }\n </div>\n\n @if (isLoading$ | async) {\n <div class=\"loading-container\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading sub-agent creation form...</span>\n </div>\n } @else {\n <form [formGroup]=\"subAgentForm\" class=\"sub-agent-form\">\n <!-- Basic Information Section -->\n <div class=\"form-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Basic Information\n </h3>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"name\">Name *</label>\n <input type=\"text\" id=\"name\" formControlName=\"name\" class=\"form-control\" placeholder=\"Enter sub-agent name\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"typeID\">Type *</label>\n <select id=\"typeID\" formControlName=\"typeID\" class=\"form-control\">\n <option value=\"\">Select agent type...</option>\n @for (type of availableAgentTypes$ | async; track type.ID) {\n <option [value]=\"type.ID\">{{ type.Name }}</option>\n }\n </select>\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"description\">Description</label>\n <textarea id=\"description\" formControlName=\"description\" class=\"form-control\" rows=\"2\" placeholder=\"Enter description\"></textarea>\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"status\">Status</label>\n <select id=\"status\" formControlName=\"status\" class=\"form-control\">\n <option value=\"Pending\">Pending</option>\n <option value=\"Active\">Active</option>\n <option value=\"Disabled\">Disabled</option>\n </select>\n </div>\n \n <div class=\"form-group\">\n <label for=\"executionMode\">Execution Mode</label>\n <select id=\"executionMode\" formControlName=\"executionMode\" class=\"form-control\">\n <option value=\"Sequential\">Sequential</option>\n <option value=\"Parallel\">Parallel</option>\n </select>\n </div>\n </div>\n </div>\n\n <!-- Purpose & Messages Section -->\n <div class=\"form-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-bullseye\"></i>\n Purpose & Messages\n </h3>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"purpose\">Purpose</label>\n <input type=\"text\" id=\"purpose\" formControlName=\"purpose\" class=\"form-control\" placeholder=\"Enter the purpose of this sub-agent\">\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"userMessage\">User Message</label>\n <textarea id=\"userMessage\" formControlName=\"userMessage\" class=\"form-control\" rows=\"3\" placeholder=\"Enter user message\"></textarea>\n </div>\n </div>\n\n <!-- System Message field removed - property does not exist on MJAIAgentEntity -->\n </div>\n\n <!-- Model Configuration Section -->\n <div class=\"form-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-cogs\"></i>\n Model Configuration\n </h3>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"modelSelectionMode\">Model Selection Mode</label>\n <select id=\"modelSelectionMode\" formControlName=\"modelSelectionMode\" class=\"form-control\">\n <option value=\"Agent Type\">Agent Type</option>\n <option value=\"Agent\">Agent</option>\n </select>\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"temperature\">Temperature</label>\n <input type=\"number\" id=\"temperature\" formControlName=\"temperature\" class=\"form-control\" min=\"0\" max=\"2\" step=\"0.1\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"topP\">Top P</label>\n <input type=\"number\" id=\"topP\" formControlName=\"topP\" class=\"form-control\" min=\"0\" max=\"1\" step=\"0.1\">\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"topK\">Top K</label>\n <input type=\"number\" id=\"topK\" formControlName=\"topK\" class=\"form-control\" min=\"1\" max=\"100\" step=\"1\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"maxTokens\">Max Tokens</label>\n <input type=\"number\" id=\"maxTokens\" formControlName=\"maxTokens\" class=\"form-control\" min=\"1\" max=\"32000\" step=\"1\">\n </div>\n </div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"enableCaching\">\n <input type=\"checkbox\" id=\"enableCaching\" formControlName=\"enableCaching\">\n Enable Caching\n </label>\n </div>\n \n <div class=\"form-group\">\n <label for=\"cacheTTL\">Cache TTL (seconds)</label>\n <input type=\"number\" id=\"cacheTTL\" formControlName=\"cacheTTL\" class=\"form-control\" min=\"60\" max=\"86400\" step=\"60\">\n </div>\n </div>\n </div>\n\n <!-- Prompts Section -->\n <div class=\"form-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-comments\"></i>\n Prompts ({{ linkedPromptCount }})\n </h3>\n \n <div class=\"section-actions\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addPrompt()\">\n <i class=\"fa-solid fa-plus\"></i>\n Add Existing Prompt\n </button>\n <button type=\"button\" class=\"btn btn-success btn-sm\" (click)=\"createNewPrompt()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create New Prompt\n </button>\n </div>\n\n @if (linkedPrompts.length > 0) {\n <div class=\"linked-items\">\n @for (prompt of linkedPrompts; track prompt.ID) {\n <div class=\"linked-item prompt-item\">\n <div class=\"item-info\">\n <i class=\"fa-solid fa-comments\"></i>\n <span class=\"item-name\">{{ prompt.Name }}</span>\n @if (prompt.Description) {\n <span class=\"item-description\">{{ prompt.Description }}</span>\n }\n </div>\n <button type=\"button\" class=\"btn btn-danger btn-xs\" (click)=\"removePrompt(prompt)\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-comments\"></i>\n <p>No prompts added yet. Click the buttons above to add prompts.</p>\n </div>\n }\n </div>\n\n <!-- Actions Section -->\n <div class=\"form-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-bolt\"></i>\n Actions ({{ linkedActionCount }})\n </h3>\n \n <div class=\"section-actions\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addAction()\">\n <i class=\"fa-solid fa-plus\"></i>\n Add Action\n </button>\n </div>\n\n @if (linkedActions.length > 0) {\n <div class=\"linked-items\">\n @for (action of linkedActions; track action.ID) {\n <div class=\"linked-item action-item\">\n <div class=\"item-info\">\n <i class=\"fa-solid fa-bolt\"></i>\n <span class=\"item-name\">{{ action.Name }}</span>\n @if (action.Description) {\n <span class=\"item-description\">{{ action.Description }}</span>\n }\n </div>\n <button type=\"button\" class=\"btn btn-danger btn-xs\" (click)=\"removeAction(action)\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-bolt\"></i>\n <p>No actions added yet. Click the button above to add actions.</p>\n </div>\n }\n </div>\n </form>\n }\n\n <!-- Dialog Actions -->\n <div class=\"dialog-actions\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\" [disabled]=\"isSaving$ | async\">\n <i class=\"fa-solid fa-times\"></i>\n Cancel\n </button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"save()\" [disabled]=\"(isSaving$ | async) || !subAgentForm.valid\">\n @if (isSaving$ | async) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Creating...\n } @else {\n <i class=\"fa-solid fa-save\"></i>\n Create Sub-Agent\n }\n </button>\n </div>\n</div>", styles: [".sub-agent-dialog {\n padding: 16px;\n max-width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n}\n\n.sub-agent-header {\n margin-bottom: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n padding-bottom: 15px;\n}\n\n.dialog-title {\n margin: 0;\n font-size: 1.4em;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.dialog-title i {\n color: var(--mj-brand-primary);\n}\n\n.parent-info {\n margin: 8px 0 0 0;\n color: var(--mj-text-secondary);\n font-size: 0.9em;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.parent-info i {\n color: var(--mj-status-success);\n}\n\n.loading-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 40px;\n color: var(--mj-text-secondary);\n}\n\n.loading-container i {\n font-size: 1.2em;\n color: var(--mj-brand-primary);\n}\n\n.sub-agent-form {\n display: flex;\n flex-direction: column;\n gap: 25px;\n}\n\n.form-section {\n border: 1px solid var(--mj-bg-surface-sunken);\n border-radius: 8px;\n padding: 20px;\n background-color: var(--mj-bg-surface-card);\n}\n\n.section-title {\n margin: 0 0 15px 0;\n font-size: 1.1em;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title i {\n color: var(--mj-brand-primary);\n}\n\n.form-row {\n display: flex;\n gap: 15px;\n margin-bottom: 15px;\n}\n\n.form-row:last-child {\n margin-bottom: 0;\n}\n\n.form-group {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.form-group label {\n font-weight: 500;\n color: var(--mj-text-secondary);\n margin-bottom: 5px;\n font-size: 0.9em;\n}\n\n.form-group label[for=\"enableCaching\"] {\n flex-direction: row;\n align-items: center;\n gap: 8px;\n}\n\n.form-group label[for=\"enableCaching\"] input {\n margin: 0;\n width: auto;\n}\n\n.form-control {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n font-size: 0.9em;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.form-control:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.form-control[readonly] {\n background-color: var(--mj-bg-surface-sunken);\n opacity: 1;\n}\n\n.section-actions {\n display: flex;\n gap: 10px;\n margin-bottom: 15px;\n}\n\n.linked-items {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.linked-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px;\n background-color: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n transition: box-shadow 0.15s ease-in-out;\n}\n\n.linked-item:hover {\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.item-info {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n}\n\n.item-info i {\n color: var(--mj-brand-primary);\n width: 16px;\n text-align: center;\n}\n\n.item-name {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.item-description {\n color: var(--mj-text-secondary);\n font-size: 0.85em;\n margin-left: 10px;\n}\n\n.prompt-item .item-info i {\n color: var(--mj-status-success);\n}\n\n.action-item .item-info i {\n color: var(--mj-status-warning);\n}\n\n.empty-state {\n text-align: center;\n padding: 30px;\n color: var(--mj-text-muted);\n}\n\n.empty-state i {\n font-size: 2em;\n color: var(--mj-border-default);\n margin-bottom: 10px;\n}\n\n.empty-state p {\n margin: 0;\n font-size: 0.9em;\n}\n\n.dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n margin-top: 30px;\n padding-top: 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.btn {\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n font-size: 0.9em;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.15s ease-in-out;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.btn-primary {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.btn-primary:hover:not(:disabled) {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary {\n background-color: var(--mj-text-muted);\n color: var(--mj-text-inverse);\n}\n\n.btn-secondary:hover:not(:disabled) {\n background-color: var(--mj-text-secondary);\n}\n\n.btn-success {\n background-color: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.btn-success:hover:not(:disabled) {\n background-color: var(--mj-status-success);\n}\n\n.btn-danger {\n background-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n.btn-danger:hover:not(:disabled) {\n background-color: var(--mj-status-error);\n}\n\n.btn-sm {\n padding: 6px 12px;\n font-size: 0.8em;\n}\n\n.btn-xs {\n padding: 4px 8px;\n font-size: 0.75em;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n .sub-agent-dialog {\n padding: 15px;\n max-width: 95vw;\n }\n\n .form-row {\n flex-direction: column;\n gap: 10px;\n }\n\n .section-actions {\n flex-direction: column;\n }\n\n .dialog-actions {\n flex-direction: column;\n }\n\n .linked-item {\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n }\n}\n\n/* Validation styles */\n.form-control.ng-invalid.ng-touched {\n border-color: var(--mj-status-error);\n}\n\n.form-control.ng-valid.ng-touched {\n border-color: var(--mj-status-success);\n}\n\n/* Custom scrollbar for dialog */\n.sub-agent-dialog::-webkit-scrollbar {\n width: 8px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n z-index: 9999 !important;\n}\n"] }]
|
|
715
715
|
}], () => [{ type: i1.WindowRef }, { type: i0.ChangeDetectorRef }, { type: i2.AIAgentManagementService }, { type: i0.ViewContainerRef }], null); })();
|
|
716
716
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CreateSubAgentDialogComponent, { className: "CreateSubAgentDialogComponent", filePath: "src/lib/custom/AIAgents/create-sub-agent-dialog.component.ts", lineNumber: 50 }); })();
|
|
717
717
|
//# sourceMappingURL=create-sub-agent-dialog.component.js.map
|
|
@@ -301,11 +301,11 @@ export class NewAgentDialogComponent {
|
|
|
301
301
|
i0.ɵɵproperty("disabled", ctx.form.invalid || ctx.isSubmitting);
|
|
302
302
|
i0.ɵɵadvance();
|
|
303
303
|
i0.ɵɵconditional(ctx.isSubmitting ? 60 : 61);
|
|
304
|
-
} }, dependencies: [i1.ɵNgNoValidate, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i5.TextBoxComponent, i5.NumericTextBoxComponent, i5.TextAreaComponent, i5.CheckBoxDirective, i5.SliderComponent, i6.ItemTemplateDirective, i6.DropDownListComponent, i7.ButtonComponent, i8.AsyncPipe], styles: [".new-agent-dialog[_ngcontent-%COMP%] {\n padding: 1.5rem;\n min-width: 500px;\n position: relative;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .parent-info[_ngcontent-%COMP%] {\n background:
|
|
304
|
+
} }, dependencies: [i1.ɵNgNoValidate, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i5.TextBoxComponent, i5.NumericTextBoxComponent, i5.TextAreaComponent, i5.CheckBoxDirective, i5.SliderComponent, i6.ItemTemplateDirective, i6.DropDownListComponent, i7.ButtonComponent, i8.AsyncPipe], styles: [".new-agent-dialog[_ngcontent-%COMP%] {\n padding: 1.5rem;\n min-width: 500px;\n position: relative;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .parent-info[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n border-radius: 8px;\n padding: 0.75rem 1rem;\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .parent-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 1.1rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .parent-info[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n border-radius: 8px;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] {\n margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n font-weight: 500;\n margin-bottom: 0.5rem;\n color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] label.required[_ngcontent-%COMP%]::after {\n content: ' *';\n color: var(--mj-status-error);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] .full-width[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] .error-message[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-size: 0.875rem;\n margin-top: 0.25rem;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] .error-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] .field-hint[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n color: var(--mj-text-muted);\n margin-top: 0.25rem;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] .field-hint[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .model-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.5rem 0;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .model-item[_ngcontent-%COMP%] .model-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 6px;\n background: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .model-item[_ngcontent-%COMP%] .model-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .model-item[_ngcontent-%COMP%] .model-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .model-item[_ngcontent-%COMP%] .model-details[_ngcontent-%COMP%] .model-name[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .model-item[_ngcontent-%COMP%] .model-details[_ngcontent-%COMP%] .model-vendor[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .k-textbox[_ngcontent-%COMP%], \n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .k-textarea[_ngcontent-%COMP%], \n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .k-dropdown[_ngcontent-%COMP%], \n.new-agent-dialog[_ngcontent-%COMP%] .form-fields[_ngcontent-%COMP%] .k-numerictextbox[_ngcontent-%COMP%] {\n border-radius: 6px;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] {\n margin-top: 1.5rem;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] .k-expander-header[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n padding: 1rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] .k-expander-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 0.5rem;\n color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] .advanced-grid[_ngcontent-%COMP%] {\n padding: 1rem;\n display: grid;\n gap: 1.5rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] .advanced-grid[_ngcontent-%COMP%] .setting-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n font-weight: 500;\n margin-bottom: 0.5rem;\n color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] .advanced-grid[_ngcontent-%COMP%] .setting-group[_ngcontent-%COMP%] .slider-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] .advanced-grid[_ngcontent-%COMP%] .setting-group[_ngcontent-%COMP%] .slider-container[_ngcontent-%COMP%] .temperature-slider[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] .advanced-grid[_ngcontent-%COMP%] .setting-group[_ngcontent-%COMP%] .slider-container[_ngcontent-%COMP%] .slider-value[_ngcontent-%COMP%] {\n min-width: 3rem;\n text-align: right;\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] .advanced-grid[_ngcontent-%COMP%] .setting-group.checkbox-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n font-weight: normal;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .advanced-settings[_ngcontent-%COMP%] .advanced-grid[_ngcontent-%COMP%] .setting-group.checkbox-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .dialog-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: 2rem;\n padding-top: 1.5rem;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .dialog-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n min-width: 120px;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%] .dialog-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 0.5rem;\n}"] }); }
|
|
305
305
|
}
|
|
306
306
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NewAgentDialogComponent, [{
|
|
307
307
|
type: Component,
|
|
308
|
-
args: [{ standalone: false, selector: 'mj-new-agent-dialog', template: "<div class=\"new-agent-dialog\">\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n <!-- Parent Agent Info (if creating sub-agent) -->\n @if (config.parentAgentId) {\n <div class=\"parent-info\">\n <i class=\"fa-solid fa-robot\"></i>\n <span>Creating sub-agent for: <strong>{{ config.parentAgentName || 'Parent Agent' }}</strong></span>\n </div>\n }\n \n <!-- Loading State -->\n @if (isLoading$ | async) {\n <div class=\"loading-overlay\">\n <div class=\"spinner\">Loading...</div>\n </div>\n }\n \n <!-- Form Fields -->\n <div class=\"form-fields\">\n <!-- Agent Name -->\n <div class=\"form-group\">\n <label class=\"required\">Agent Name</label>\n <kendo-textbox \n formControlName=\"name\" \n placeholder=\"Enter a descriptive name for your agent\"\n [clearButton]=\"true\"\n class=\"full-width\">\n </kendo-textbox>\n @if (form.get('name')?.invalid && form.get('name')?.touched) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n Agent name is required\n </div>\n }\n </div>\n \n <!-- Description -->\n <div class=\"form-group\">\n <label>Description</label>\n <kendo-textarea \n formControlName=\"description\" \n placeholder=\"Describe what this agent does...\"\n [rows]=\"3\"\n class=\"full-width\">\n </kendo-textarea>\n </div>\n \n <!-- AI Model Selection -->\n <div class=\"form-group\">\n <label class=\"required\">AI Model</label>\n <kendo-dropdownlist \n formControlName=\"modelId\"\n [data]=\"models$ | async\"\n textField=\"Name\"\n valueField=\"ID\"\n placeholder=\"Select an AI model...\"\n class=\"full-width\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"model-item\">\n <div class=\"model-icon\">\n <i class=\"fa-solid fa-microchip\"></i>\n </div>\n <div class=\"model-details\">\n <span class=\"model-name\">{{ dataItem.Name }}</span>\n <span class=\"model-vendor\">{{ dataItem.Vendor }}</span>\n </div>\n </div>\n </ng-template>\n </kendo-dropdownlist>\n @if (form.get('modelId')?.invalid && form.get('modelId')?.touched) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n Please select an AI model\n </div>\n }\n </div>\n \n <!-- System Prompt -->\n <div class=\"form-group\">\n <label>System Prompt</label>\n <kendo-textarea \n formControlName=\"systemPrompt\" \n placeholder=\"Define the agent's behavior and personality...\"\n [rows]=\"4\"\n class=\"full-width\">\n </kendo-textarea>\n <div class=\"field-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n This sets the agent's context and behavior\n </div>\n </div>\n \n <!-- Advanced Settings -->\n <div class=\"advanced-settings\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-cog\"></i>\n Advanced Settings\n </div>\n \n <div class=\"advanced-grid\">\n <!-- Temperature -->\n <div class=\"setting-group\">\n <label>Temperature</label>\n <div class=\"slider-container\">\n <kendo-slider \n formControlName=\"temperature\"\n [min]=\"0\"\n [max]=\"2\"\n [smallStep]=\"0.1\"\n [showButtons]=\"true\"\n class=\"temperature-slider\">\n </kendo-slider>\n <span class=\"slider-value\">{{ form.get('temperature')?.value }}</span>\n </div>\n <div class=\"field-hint\">Higher values make output more creative</div>\n </div>\n \n <!-- Max Tokens -->\n <div class=\"setting-group\">\n <label>Max Tokens</label>\n <kendo-numerictextbox \n formControlName=\"maxTokens\"\n [min]=\"1\"\n [max]=\"8000\"\n [step]=\"100\"\n [format]=\"'n0'\"\n class=\"full-width\">\n </kendo-numerictextbox>\n <div class=\"field-hint\">Maximum response length</div>\n </div>\n \n <!-- Enable Streaming -->\n <div class=\"setting-group checkbox-group\">\n <label>\n <input type=\"checkbox\" formControlName=\"enableStreaming\" kendoCheckBox />\n <span>Enable Response Streaming</span>\n </label>\n <div class=\"field-hint\">Stream responses in real-time</div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Dialog Actions -->\n <div class=\"dialog-actions\">\n <button \n type=\"button\" \n kendoButton \n (click)=\"onCancel()\"\n [disabled]=\"isSubmitting\">\n Cancel\n </button>\n <button \n type=\"submit\" \n kendoButton \n themeColor=\"primary\"\n [disabled]=\"form.invalid || isSubmitting\">\n @if (isSubmitting) {\n <span class=\"spinner-small\"></span>\n <span>Creating...</span>\n } @else {\n <i class=\"fa-solid fa-plus-circle\"></i>\n <span>Create Agent</span>\n }\n </button>\n </div>\n </form>\n</div>", styles: [".new-agent-dialog {\n padding: 1.5rem;\n min-width: 500px;\n position: relative;\n}\n\n.new-agent-dialog .parent-info {\n background: linear-gradient(135deg, #f0f9ff, #e0f2fe);\n border: 1px solid #bae6fd;\n border-radius: 8px;\n padding: 0.75rem 1rem;\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.new-agent-dialog .parent-info i {\n color: #3b82f6;\n font-size: 1.1rem;\n}\n\n.new-agent-dialog .parent-info strong {\n color: #3b82f6;\n}\n\n.new-agent-dialog .loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.9);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n border-radius: 8px;\n}\n\n.new-agent-dialog .form-fields .form-group {\n margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog .form-fields .form-group label {\n display: block;\n font-weight: 500;\n margin-bottom: 0.5rem;\n color: #475569;\n}\n\n.new-agent-dialog .form-fields .form-group label.required::after {\n content: ' *';\n color: #ef4444;\n}\n\n.new-agent-dialog .form-fields .form-group .full-width {\n width: 100%;\n}\n\n.new-agent-dialog .form-fields .form-group .error-message {\n color: #ef4444;\n font-size: 0.875rem;\n margin-top: 0.25rem;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.new-agent-dialog .form-fields .form-group .error-message i {\n font-size: 0.75rem;\n}\n\n.new-agent-dialog .form-fields .form-group .field-hint {\n font-size: 0.875rem;\n color: #64748b;\n margin-top: 0.25rem;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.new-agent-dialog .form-fields .form-group .field-hint i {\n font-size: 0.75rem;\n}\n\n.new-agent-dialog .form-fields .model-item {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.5rem 0;\n}\n\n.new-agent-dialog .form-fields .model-item .model-icon {\n width: 36px;\n height: 36px;\n border-radius: 6px;\n background: linear-gradient(135deg, #3b82f6, #8b5cf6);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.new-agent-dialog .form-fields .model-item .model-icon i {\n font-size: 1rem;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details {\n display: flex;\n flex-direction: column;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details .model-name {\n font-weight: 500;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details .model-vendor {\n font-size: 0.75rem;\n color: #64748b;\n}\n\n.new-agent-dialog .form-fields .k-textbox,\n.new-agent-dialog .form-fields .k-textarea,\n.new-agent-dialog .form-fields .k-dropdown,\n.new-agent-dialog .form-fields .k-numerictextbox {\n border-radius: 6px;\n}\n\n.new-agent-dialog .advanced-settings {\n margin-top: 1.5rem;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.new-agent-dialog .advanced-settings .k-expander-header {\n background: #f8fafc;\n padding: 1rem;\n}\n\n.new-agent-dialog .advanced-settings .k-expander-header i {\n margin-right: 0.5rem;\n color: #3b82f6;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid {\n padding: 1rem;\n display: grid;\n gap: 1.5rem;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group label {\n display: block;\n font-weight: 500;\n margin-bottom: 0.5rem;\n color: #475569;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container .temperature-slider {\n flex: 1;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container .slider-value {\n min-width: 3rem;\n text-align: right;\n font-weight: 600;\n color: #3b82f6;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group.checkbox-group label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n font-weight: normal;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group.checkbox-group label input[type=\"checkbox\"] {\n cursor: pointer;\n}\n\n.new-agent-dialog .dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: 2rem;\n padding-top: 1.5rem;\n border-top: 1px solid #e5e7eb;\n}\n\n.new-agent-dialog .dialog-actions button {\n min-width: 120px;\n}\n\n.new-agent-dialog .dialog-actions button i {\n margin-right: 0.5rem;\n}"] }]
|
|
308
|
+
args: [{ standalone: false, selector: 'mj-new-agent-dialog', template: "<div class=\"new-agent-dialog\">\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n <!-- Parent Agent Info (if creating sub-agent) -->\n @if (config.parentAgentId) {\n <div class=\"parent-info\">\n <i class=\"fa-solid fa-robot\"></i>\n <span>Creating sub-agent for: <strong>{{ config.parentAgentName || 'Parent Agent' }}</strong></span>\n </div>\n }\n \n <!-- Loading State -->\n @if (isLoading$ | async) {\n <div class=\"loading-overlay\">\n <div class=\"spinner\">Loading...</div>\n </div>\n }\n \n <!-- Form Fields -->\n <div class=\"form-fields\">\n <!-- Agent Name -->\n <div class=\"form-group\">\n <label class=\"required\">Agent Name</label>\n <kendo-textbox \n formControlName=\"name\" \n placeholder=\"Enter a descriptive name for your agent\"\n [clearButton]=\"true\"\n class=\"full-width\">\n </kendo-textbox>\n @if (form.get('name')?.invalid && form.get('name')?.touched) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n Agent name is required\n </div>\n }\n </div>\n \n <!-- Description -->\n <div class=\"form-group\">\n <label>Description</label>\n <kendo-textarea \n formControlName=\"description\" \n placeholder=\"Describe what this agent does...\"\n [rows]=\"3\"\n class=\"full-width\">\n </kendo-textarea>\n </div>\n \n <!-- AI Model Selection -->\n <div class=\"form-group\">\n <label class=\"required\">AI Model</label>\n <kendo-dropdownlist \n formControlName=\"modelId\"\n [data]=\"models$ | async\"\n textField=\"Name\"\n valueField=\"ID\"\n placeholder=\"Select an AI model...\"\n class=\"full-width\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <div class=\"model-item\">\n <div class=\"model-icon\">\n <i class=\"fa-solid fa-microchip\"></i>\n </div>\n <div class=\"model-details\">\n <span class=\"model-name\">{{ dataItem.Name }}</span>\n <span class=\"model-vendor\">{{ dataItem.Vendor }}</span>\n </div>\n </div>\n </ng-template>\n </kendo-dropdownlist>\n @if (form.get('modelId')?.invalid && form.get('modelId')?.touched) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n Please select an AI model\n </div>\n }\n </div>\n \n <!-- System Prompt -->\n <div class=\"form-group\">\n <label>System Prompt</label>\n <kendo-textarea \n formControlName=\"systemPrompt\" \n placeholder=\"Define the agent's behavior and personality...\"\n [rows]=\"4\"\n class=\"full-width\">\n </kendo-textarea>\n <div class=\"field-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n This sets the agent's context and behavior\n </div>\n </div>\n \n <!-- Advanced Settings -->\n <div class=\"advanced-settings\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-cog\"></i>\n Advanced Settings\n </div>\n \n <div class=\"advanced-grid\">\n <!-- Temperature -->\n <div class=\"setting-group\">\n <label>Temperature</label>\n <div class=\"slider-container\">\n <kendo-slider \n formControlName=\"temperature\"\n [min]=\"0\"\n [max]=\"2\"\n [smallStep]=\"0.1\"\n [showButtons]=\"true\"\n class=\"temperature-slider\">\n </kendo-slider>\n <span class=\"slider-value\">{{ form.get('temperature')?.value }}</span>\n </div>\n <div class=\"field-hint\">Higher values make output more creative</div>\n </div>\n \n <!-- Max Tokens -->\n <div class=\"setting-group\">\n <label>Max Tokens</label>\n <kendo-numerictextbox \n formControlName=\"maxTokens\"\n [min]=\"1\"\n [max]=\"8000\"\n [step]=\"100\"\n [format]=\"'n0'\"\n class=\"full-width\">\n </kendo-numerictextbox>\n <div class=\"field-hint\">Maximum response length</div>\n </div>\n \n <!-- Enable Streaming -->\n <div class=\"setting-group checkbox-group\">\n <label>\n <input type=\"checkbox\" formControlName=\"enableStreaming\" kendoCheckBox />\n <span>Enable Response Streaming</span>\n </label>\n <div class=\"field-hint\">Stream responses in real-time</div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Dialog Actions -->\n <div class=\"dialog-actions\">\n <button \n type=\"button\" \n kendoButton \n (click)=\"onCancel()\"\n [disabled]=\"isSubmitting\">\n Cancel\n </button>\n <button \n type=\"submit\" \n kendoButton \n themeColor=\"primary\"\n [disabled]=\"form.invalid || isSubmitting\">\n @if (isSubmitting) {\n <span class=\"spinner-small\"></span>\n <span>Creating...</span>\n } @else {\n <i class=\"fa-solid fa-plus-circle\"></i>\n <span>Create Agent</span>\n }\n </button>\n </div>\n </form>\n</div>", styles: [".new-agent-dialog {\n padding: 1.5rem;\n min-width: 500px;\n position: relative;\n}\n\n.new-agent-dialog .parent-info {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n border-radius: 8px;\n padding: 0.75rem 1rem;\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.new-agent-dialog .parent-info i {\n color: var(--mj-brand-primary);\n font-size: 1.1rem;\n}\n\n.new-agent-dialog .parent-info strong {\n color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog .loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n border-radius: 8px;\n}\n\n.new-agent-dialog .form-fields .form-group {\n margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog .form-fields .form-group label {\n display: block;\n font-weight: 500;\n margin-bottom: 0.5rem;\n color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog .form-fields .form-group label.required::after {\n content: ' *';\n color: var(--mj-status-error);\n}\n\n.new-agent-dialog .form-fields .form-group .full-width {\n width: 100%;\n}\n\n.new-agent-dialog .form-fields .form-group .error-message {\n color: var(--mj-status-error);\n font-size: 0.875rem;\n margin-top: 0.25rem;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.new-agent-dialog .form-fields .form-group .error-message i {\n font-size: 0.75rem;\n}\n\n.new-agent-dialog .form-fields .form-group .field-hint {\n font-size: 0.875rem;\n color: var(--mj-text-muted);\n margin-top: 0.25rem;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.new-agent-dialog .form-fields .form-group .field-hint i {\n font-size: 0.75rem;\n}\n\n.new-agent-dialog .form-fields .model-item {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.5rem 0;\n}\n\n.new-agent-dialog .form-fields .model-item .model-icon {\n width: 36px;\n height: 36px;\n border-radius: 6px;\n background: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n}\n\n.new-agent-dialog .form-fields .model-item .model-icon i {\n font-size: 1rem;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details {\n display: flex;\n flex-direction: column;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details .model-name {\n font-weight: 500;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details .model-vendor {\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n}\n\n.new-agent-dialog .form-fields .k-textbox,\n.new-agent-dialog .form-fields .k-textarea,\n.new-agent-dialog .form-fields .k-dropdown,\n.new-agent-dialog .form-fields .k-numerictextbox {\n border-radius: 6px;\n}\n\n.new-agent-dialog .advanced-settings {\n margin-top: 1.5rem;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.new-agent-dialog .advanced-settings .k-expander-header {\n background: var(--mj-bg-surface-card);\n padding: 1rem;\n}\n\n.new-agent-dialog .advanced-settings .k-expander-header i {\n margin-right: 0.5rem;\n color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid {\n padding: 1rem;\n display: grid;\n gap: 1.5rem;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group label {\n display: block;\n font-weight: 500;\n margin-bottom: 0.5rem;\n color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container .temperature-slider {\n flex: 1;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container .slider-value {\n min-width: 3rem;\n text-align: right;\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group.checkbox-group label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n font-weight: normal;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group.checkbox-group label input[type=\"checkbox\"] {\n cursor: pointer;\n}\n\n.new-agent-dialog .dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n margin-top: 2rem;\n padding-top: 1.5rem;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.new-agent-dialog .dialog-actions button {\n min-width: 120px;\n}\n\n.new-agent-dialog .dialog-actions button i {\n margin-right: 0.5rem;\n}\n"] }]
|
|
309
309
|
}], () => [{ type: i1.FormBuilder }, { type: i2.DialogRef }, { type: i3.NavigationService }, { type: i4.NotificationService }], { config: [{
|
|
310
310
|
type: Input
|
|
311
311
|
}] }); })();
|
|
@@ -309,10 +309,10 @@ export class PromptSelectorDialogComponent {
|
|
|
309
309
|
}
|
|
310
310
|
getPromptStatusColor(prompt) {
|
|
311
311
|
switch (prompt.Status) {
|
|
312
|
-
case 'Active': return '
|
|
313
|
-
case 'Pending': return '
|
|
314
|
-
case 'Disabled': return '
|
|
315
|
-
default: return '
|
|
312
|
+
case 'Active': return 'var(--mj-status-success)';
|
|
313
|
+
case 'Pending': return 'var(--mj-status-warning)';
|
|
314
|
+
case 'Disabled': return 'var(--mj-text-muted)';
|
|
315
|
+
default: return 'var(--mj-text-muted)';
|
|
316
316
|
}
|
|
317
317
|
}
|
|
318
318
|
getPromptStatusText(prompt) {
|
|
@@ -369,11 +369,11 @@ export class PromptSelectorDialogComponent {
|
|
|
369
369
|
i0.ɵɵproperty("disabled", ctx.selectedPrompts.size === 0);
|
|
370
370
|
i0.ɵɵadvance();
|
|
371
371
|
i0.ɵɵconditional(ctx.config.multiSelect ? 11 : 12);
|
|
372
|
-
} }, dependencies: [i2.NgControlStatus, i2.FormControlDirective, i3.TextBoxComponent, i4.ButtonComponent, i5.AsyncPipe, i5.DatePipe], styles: [".prompt-selector-dialog[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-height: 70vh;\n}\n\n\n\n[_nghost-%COMP%] .k-dialog, \n[_nghost-%COMP%] .k-window {\n z-index: 10000 !important;\n}\n\n[_nghost-%COMP%] .k-overlay {\n z-index: 9999 !important;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 300px;\n color:
|
|
372
|
+
} }, dependencies: [i2.NgControlStatus, i2.FormControlDirective, i3.TextBoxComponent, i4.ButtonComponent, i5.AsyncPipe, i5.DatePipe], styles: [".prompt-selector-dialog[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-height: 70vh;\n}\n\n\n\n[_nghost-%COMP%] .k-dialog, \n[_nghost-%COMP%] .k-window {\n z-index: 10000 !important;\n}\n\n[_nghost-%COMP%] .k-overlay {\n z-index: 9999 !important;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 300px;\n color: var(--mj-text-secondary);\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n padding: 16px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.search-section[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.search-box[_ngcontent-%COMP%] {\n flex: 1;\n position: relative;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-secondary);\n z-index: 2;\n}\n\n.search-input[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.search-input[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n padding-left: 36px !important;\n}\n\n.view-controls[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n\n\n.results-summary[_ngcontent-%COMP%] {\n padding: 12px 16px;\n background: var(--mj-bg-surface-sunken);\n display: flex;\n align-items: center;\n gap: 16px;\n font-size: 14px;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.results-count[_ngcontent-%COMP%], .selected-count[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.selected-count[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 500;\n}\n\n\n\n.prompts-container[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n\n\n.prompts-container.list-view[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n\n\n.prompts-container.grid-view[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 16px;\n}\n\n\n\n.prompt-card[_ngcontent-%COMP%] {\n border: 2px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 16px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n display: flex;\n gap: 12px;\n position: relative;\n}\n\n.prompt-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.prompt-card.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.prompt-card.linked[_ngcontent-%COMP%] {\n border-color: var(--mj-text-muted);\n background: var(--mj-bg-surface-card);\n opacity: 0.7;\n cursor: not-allowed;\n}\n\n.prompt-card.linked[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-text-muted);\n box-shadow: none;\n}\n\n\n\n.selection-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n margin-top: 2px;\n}\n\n.selected-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 18px;\n}\n\n.unselected-icon[_ngcontent-%COMP%] {\n color: var(--mj-border-strong);\n font-size: 18px;\n}\n\n.linked-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 18px;\n}\n\n\n\n.prompt-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.prompt-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.prompt-name[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n line-height: 1.4;\n flex: 1;\n}\n\n.prompt-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n align-items: center;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-inverse);\n white-space: nowrap;\n}\n\n.linked-badge[_ngcontent-%COMP%] {\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n background: var(--mj-text-muted);\n color: var(--mj-text-inverse);\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.prompt-description[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n color: var(--mj-text-secondary);\n font-size: 14px;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n\n\n.prompt-metadata[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n flex-wrap: wrap;\n}\n\n.metadata-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.metadata-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 12px;\n font-size: 10px;\n}\n\n\n\n.no-results[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 200px;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.no-results[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n color: var(--mj-border-strong);\n}\n\n.no-results[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n color: var(--mj-text-primary);\n}\n\n.no-results[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n color: var(--mj-text-disabled);\n max-width: 300px;\n}\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.footer-left[_ngcontent-%COMP%] {\n display: flex;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n\n\n@media (max-width: 768px) {\n .prompts-container.grid-view[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .prompt-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .search-section[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 8px;\n }\n\n .view-controls[_ngcontent-%COMP%] {\n align-self: flex-end;\n }\n}"] }); }
|
|
373
373
|
}
|
|
374
374
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PromptSelectorDialogComponent, [{
|
|
375
375
|
type: Component,
|
|
376
|
-
args: [{ standalone: false, selector: 'mj-prompt-selector-dialog', template: "<!-- Prompt Selector Dialog -->\n<div class=\"prompt-selector-dialog\">\n \n <!-- Loading State -->\n @if (isLoading$ | async) {\n <div class=\"loading-state\">\n <div class=\"loading-spinner\">\n <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n </div>\n <p>Loading prompts...</p>\n </div>\n } @else {\n \n <!-- Search and Controls Header -->\n <div class=\"dialog-header\">\n <div class=\"search-section\">\n <div class=\"search-box\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <kendo-textbox \n [formControl]=\"searchControl\"\n placeholder=\"Search prompts by name or description...\"\n class=\"search-input\">\n </kendo-textbox>\n </div>\n \n <div class=\"view-controls\">\n <button kendoButton \n size=\"small\"\n fillMode=\"flat\"\n [class.active]=\"viewMode === 'list'\"\n (click)=\"toggleViewMode()\"\n title=\"Toggle between list and grid view\">\n <i class=\"fa-solid\" [class.fa-list]=\"viewMode === 'grid'\" [class.fa-th]=\"viewMode === 'list'\"></i>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Results Summary -->\n <div class=\"results-summary\">\n <span class=\"results-count\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n {{ (filteredPrompts$ | async)?.length || 0 }} prompt(s)\n </span>\n @if (config.multiSelect && selectedPrompts.size > 0) {\n <span class=\"selected-count\">\n <i class=\"fa-solid fa-check-circle\"></i>\n {{ selectedPrompts.size }} selected\n </span>\n }\n </div>\n\n <!-- Prompts List/Grid -->\n <div class=\"prompts-container\" [class.grid-view]=\"viewMode === 'grid'\" [class.list-view]=\"viewMode === 'list'\">\n @if ((filteredPrompts$ | async)?.length === 0) {\n <div class=\"no-results\">\n <i class=\"fa-solid fa-search fa-2x\"></i>\n <h4>No prompts found</h4>\n <p>Try adjusting your search criteria or check that prompts are properly configured.</p>\n </div>\n } @else {\n @for (prompt of filteredPrompts$ | async; track prompt.ID) {\n <div class=\"prompt-card\" \n [class.selected]=\"isPromptSelected(prompt)\"\n [class.linked]=\"isPromptLinked(prompt)\"\n (click)=\"togglePromptSelection(prompt)\">\n \n <!-- Selection indicator -->\n <div class=\"selection-indicator\">\n @if (isPromptLinked(prompt)) {\n <i class=\"fa-solid fa-link linked-icon\" title=\"Already linked to this agent\"></i>\n } @else if (isPromptSelected(prompt)) {\n <i class=\"fa-solid fa-check-circle selected-icon\"></i>\n } @else {\n <i class=\"fa-regular fa-circle unselected-icon\"></i>\n }\n </div>\n\n <!-- Prompt Content -->\n <div class=\"prompt-content\">\n <div class=\"prompt-header\">\n <h4 class=\"prompt-name\">{{ prompt.Name }}</h4>\n <div class=\"prompt-badges\">\n @if (isPromptLinked(prompt)) {\n <span class=\"linked-badge\">\n <i class=\"fa-solid fa-link\"></i>\n Linked\n </span>\n }\n <span class=\"status-badge\" \n [style.background-color]=\"getPromptStatusColor(prompt)\">\n {{ getPromptStatusText(prompt) }}\n </span>\n </div>\n </div>\n\n @if (prompt.Description) {\n <p class=\"prompt-description\">{{ prompt.Description }}</p>\n }\n\n <!-- Prompt Metadata -->\n <div class=\"prompt-metadata\">\n @if (prompt.__mj_CreatedAt) {\n <span class=\"metadata-item\">\n <i class=\"fa-solid fa-calendar\"></i>\n Created {{ prompt.__mj_CreatedAt | date:'short' }}\n </span>\n }\n </div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n <!-- Dialog Footer -->\n <div class=\"dialog-footer\">\n <div class=\"footer-left\">\n @if (config.showCreateNew) {\n <button kendoButton \n look=\"flat\"\n (click)=\"createNew()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create New Prompt\n </button>\n }\n </div>\n \n <div class=\"footer-right\">\n <button kendoButton \n look=\"flat\" \n (click)=\"cancel()\">\n Cancel\n </button>\n \n <button kendoButton \n themeColor=\"primary\" \n (click)=\"selectPrompts()\"\n [disabled]=\"selectedPrompts.size === 0\">\n @if (config.multiSelect) {\n <i class=\"fa-solid fa-check\"></i>\n Add {{ selectedPrompts.size }} Prompt{{ selectedPrompts.size === 1 ? '' : 's' }}\n } @else {\n <i class=\"fa-solid fa-check\"></i>\n Select Prompt\n }\n </button>\n </div>\n </div>\n</div>", styles: [".prompt-selector-dialog {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-height: 70vh;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n z-index: 9999 !important;\n}\n\n/* === Loading State === */\n.loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 300px;\n color: #666;\n}\n\n.loading-spinner {\n margin-bottom: 16px;\n}\n\n/* === Header Section === */\n.dialog-header {\n padding: 16px;\n border-bottom: 1px solid #e0e0e0;\n background: #f8f9fa;\n}\n\n.search-section {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.search-box {\n flex: 1;\n position: relative;\n}\n\n.search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: #666;\n z-index: 2;\n}\n\n.search-input {\n width: 100%;\n}\n\n.search-input input {\n padding-left: 36px !important;\n}\n\n.view-controls button.active {\n background-color: #007bff;\n color: white;\n}\n\n/* === Results Summary === */\n.results-summary {\n padding: 12px 16px;\n background: #f1f3f4;\n display: flex;\n align-items: center;\n gap: 16px;\n font-size: 14px;\n color: #666;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.results-count, .selected-count {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.selected-count {\n color: #007bff;\n font-weight: 500;\n}\n\n/* === Prompts Container === */\n.prompts-container {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n/* List View */\n.prompts-container.list-view {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n/* Grid View */\n.prompts-container.grid-view {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 16px;\n}\n\n/* === Prompt Cards === */\n.prompt-card {\n border: 2px solid #e0e0e0;\n border-radius: 8px;\n padding: 16px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: white;\n display: flex;\n gap: 12px;\n position: relative;\n}\n\n.prompt-card:hover {\n border-color: #007bff;\n box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);\n}\n\n.prompt-card.selected {\n border-color: #007bff;\n background: #f8f9ff;\n box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);\n}\n\n.prompt-card.linked {\n border-color: #6c757d;\n background: #f8f9fa;\n opacity: 0.7;\n cursor: not-allowed;\n}\n\n.prompt-card.linked:hover {\n border-color: #6c757d;\n box-shadow: none;\n}\n\n/* === Selection Indicator === */\n.selection-indicator {\n display: flex;\n align-items: flex-start;\n margin-top: 2px;\n}\n\n.selected-icon {\n color: #007bff;\n font-size: 18px;\n}\n\n.unselected-icon {\n color: #ccc;\n font-size: 18px;\n}\n\n.linked-icon {\n color: #6c757d;\n font-size: 18px;\n}\n\n/* === Prompt Content === */\n.prompt-content {\n flex: 1;\n min-width: 0;\n}\n\n.prompt-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.prompt-name {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #333;\n line-height: 1.4;\n flex: 1;\n}\n\n.prompt-badges {\n display: flex;\n gap: 6px;\n align-items: center;\n}\n\n.status-badge {\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n color: white;\n white-space: nowrap;\n}\n\n.linked-badge {\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n background: #6c757d;\n color: white;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.prompt-description {\n margin: 0 0 12px 0;\n color: #666;\n font-size: 14px;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* === Prompt Metadata === */\n.prompt-metadata {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #888;\n flex-wrap: wrap;\n}\n\n.metadata-item {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.metadata-item i {\n width: 12px;\n font-size: 10px;\n}\n\n/* === No Results === */\n.no-results {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 200px;\n color: #666;\n text-align: center;\n}\n\n.no-results i {\n margin-bottom: 16px;\n color: #ccc;\n}\n\n.no-results h4 {\n margin: 0 0 8px 0;\n color: #333;\n}\n\n.no-results p {\n margin: 0;\n color: #888;\n max-width: 300px;\n}\n\n/* === Dialog Footer === */\n.dialog-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n border-top: 1px solid #e0e0e0;\n background: #f8f9fa;\n}\n\n.footer-left {\n display: flex;\n}\n\n.footer-right {\n display: flex;\n gap: 8px;\n}\n\n/* === Responsive Design === */\n@media (max-width: 768px) {\n .prompts-container.grid-view {\n grid-template-columns: 1fr;\n }\n \n .prompt-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .search-section {\n flex-direction: column;\n gap: 8px;\n }\n \n .view-controls {\n align-self: flex-end;\n }\n}"] }]
|
|
376
|
+
args: [{ standalone: false, selector: 'mj-prompt-selector-dialog', template: "<!-- Prompt Selector Dialog -->\n<div class=\"prompt-selector-dialog\">\n \n <!-- Loading State -->\n @if (isLoading$ | async) {\n <div class=\"loading-state\">\n <div class=\"loading-spinner\">\n <i class=\"fa-solid fa-spinner fa-spin fa-2x\"></i>\n </div>\n <p>Loading prompts...</p>\n </div>\n } @else {\n \n <!-- Search and Controls Header -->\n <div class=\"dialog-header\">\n <div class=\"search-section\">\n <div class=\"search-box\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <kendo-textbox \n [formControl]=\"searchControl\"\n placeholder=\"Search prompts by name or description...\"\n class=\"search-input\">\n </kendo-textbox>\n </div>\n \n <div class=\"view-controls\">\n <button kendoButton \n size=\"small\"\n fillMode=\"flat\"\n [class.active]=\"viewMode === 'list'\"\n (click)=\"toggleViewMode()\"\n title=\"Toggle between list and grid view\">\n <i class=\"fa-solid\" [class.fa-list]=\"viewMode === 'grid'\" [class.fa-th]=\"viewMode === 'list'\"></i>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Results Summary -->\n <div class=\"results-summary\">\n <span class=\"results-count\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n {{ (filteredPrompts$ | async)?.length || 0 }} prompt(s)\n </span>\n @if (config.multiSelect && selectedPrompts.size > 0) {\n <span class=\"selected-count\">\n <i class=\"fa-solid fa-check-circle\"></i>\n {{ selectedPrompts.size }} selected\n </span>\n }\n </div>\n\n <!-- Prompts List/Grid -->\n <div class=\"prompts-container\" [class.grid-view]=\"viewMode === 'grid'\" [class.list-view]=\"viewMode === 'list'\">\n @if ((filteredPrompts$ | async)?.length === 0) {\n <div class=\"no-results\">\n <i class=\"fa-solid fa-search fa-2x\"></i>\n <h4>No prompts found</h4>\n <p>Try adjusting your search criteria or check that prompts are properly configured.</p>\n </div>\n } @else {\n @for (prompt of filteredPrompts$ | async; track prompt.ID) {\n <div class=\"prompt-card\" \n [class.selected]=\"isPromptSelected(prompt)\"\n [class.linked]=\"isPromptLinked(prompt)\"\n (click)=\"togglePromptSelection(prompt)\">\n \n <!-- Selection indicator -->\n <div class=\"selection-indicator\">\n @if (isPromptLinked(prompt)) {\n <i class=\"fa-solid fa-link linked-icon\" title=\"Already linked to this agent\"></i>\n } @else if (isPromptSelected(prompt)) {\n <i class=\"fa-solid fa-check-circle selected-icon\"></i>\n } @else {\n <i class=\"fa-regular fa-circle unselected-icon\"></i>\n }\n </div>\n\n <!-- Prompt Content -->\n <div class=\"prompt-content\">\n <div class=\"prompt-header\">\n <h4 class=\"prompt-name\">{{ prompt.Name }}</h4>\n <div class=\"prompt-badges\">\n @if (isPromptLinked(prompt)) {\n <span class=\"linked-badge\">\n <i class=\"fa-solid fa-link\"></i>\n Linked\n </span>\n }\n <span class=\"status-badge\" \n [style.background-color]=\"getPromptStatusColor(prompt)\">\n {{ getPromptStatusText(prompt) }}\n </span>\n </div>\n </div>\n\n @if (prompt.Description) {\n <p class=\"prompt-description\">{{ prompt.Description }}</p>\n }\n\n <!-- Prompt Metadata -->\n <div class=\"prompt-metadata\">\n @if (prompt.__mj_CreatedAt) {\n <span class=\"metadata-item\">\n <i class=\"fa-solid fa-calendar\"></i>\n Created {{ prompt.__mj_CreatedAt | date:'short' }}\n </span>\n }\n </div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n <!-- Dialog Footer -->\n <div class=\"dialog-footer\">\n <div class=\"footer-left\">\n @if (config.showCreateNew) {\n <button kendoButton \n look=\"flat\"\n (click)=\"createNew()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create New Prompt\n </button>\n }\n </div>\n \n <div class=\"footer-right\">\n <button kendoButton \n look=\"flat\" \n (click)=\"cancel()\">\n Cancel\n </button>\n \n <button kendoButton \n themeColor=\"primary\" \n (click)=\"selectPrompts()\"\n [disabled]=\"selectedPrompts.size === 0\">\n @if (config.multiSelect) {\n <i class=\"fa-solid fa-check\"></i>\n Add {{ selectedPrompts.size }} Prompt{{ selectedPrompts.size === 1 ? '' : 's' }}\n } @else {\n <i class=\"fa-solid fa-check\"></i>\n Select Prompt\n }\n </button>\n </div>\n </div>\n</div>", styles: [".prompt-selector-dialog {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-height: 70vh;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n z-index: 9999 !important;\n}\n\n/* === Loading State === */\n.loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 300px;\n color: var(--mj-text-secondary);\n}\n\n.loading-spinner {\n margin-bottom: 16px;\n}\n\n/* === Header Section === */\n.dialog-header {\n padding: 16px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.search-section {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.search-box {\n flex: 1;\n position: relative;\n}\n\n.search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-secondary);\n z-index: 2;\n}\n\n.search-input {\n width: 100%;\n}\n\n.search-input input {\n padding-left: 36px !important;\n}\n\n.view-controls button.active {\n background-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n/* === Results Summary === */\n.results-summary {\n padding: 12px 16px;\n background: var(--mj-bg-surface-sunken);\n display: flex;\n align-items: center;\n gap: 16px;\n font-size: 14px;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.results-count, .selected-count {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.selected-count {\n color: var(--mj-brand-primary);\n font-weight: 500;\n}\n\n/* === Prompts Container === */\n.prompts-container {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n/* List View */\n.prompts-container.list-view {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n/* Grid View */\n.prompts-container.grid-view {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 16px;\n}\n\n/* === Prompt Cards === */\n.prompt-card {\n border: 2px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 16px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n display: flex;\n gap: 12px;\n position: relative;\n}\n\n.prompt-card:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.prompt-card.selected {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.prompt-card.linked {\n border-color: var(--mj-text-muted);\n background: var(--mj-bg-surface-card);\n opacity: 0.7;\n cursor: not-allowed;\n}\n\n.prompt-card.linked:hover {\n border-color: var(--mj-text-muted);\n box-shadow: none;\n}\n\n/* === Selection Indicator === */\n.selection-indicator {\n display: flex;\n align-items: flex-start;\n margin-top: 2px;\n}\n\n.selected-icon {\n color: var(--mj-brand-primary);\n font-size: 18px;\n}\n\n.unselected-icon {\n color: var(--mj-border-strong);\n font-size: 18px;\n}\n\n.linked-icon {\n color: var(--mj-text-muted);\n font-size: 18px;\n}\n\n/* === Prompt Content === */\n.prompt-content {\n flex: 1;\n min-width: 0;\n}\n\n.prompt-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.prompt-name {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n line-height: 1.4;\n flex: 1;\n}\n\n.prompt-badges {\n display: flex;\n gap: 6px;\n align-items: center;\n}\n\n.status-badge {\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-inverse);\n white-space: nowrap;\n}\n\n.linked-badge {\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n background: var(--mj-text-muted);\n color: var(--mj-text-inverse);\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.prompt-description {\n margin: 0 0 12px 0;\n color: var(--mj-text-secondary);\n font-size: 14px;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* === Prompt Metadata === */\n.prompt-metadata {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n flex-wrap: wrap;\n}\n\n.metadata-item {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.metadata-item i {\n width: 12px;\n font-size: 10px;\n}\n\n/* === No Results === */\n.no-results {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 200px;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.no-results i {\n margin-bottom: 16px;\n color: var(--mj-border-strong);\n}\n\n.no-results h4 {\n margin: 0 0 8px 0;\n color: var(--mj-text-primary);\n}\n\n.no-results p {\n margin: 0;\n color: var(--mj-text-disabled);\n max-width: 300px;\n}\n\n/* === Dialog Footer === */\n.dialog-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.footer-left {\n display: flex;\n}\n\n.footer-right {\n display: flex;\n gap: 8px;\n}\n\n/* === Responsive Design === */\n@media (max-width: 768px) {\n .prompts-container.grid-view {\n grid-template-columns: 1fr;\n }\n\n .prompt-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .search-section {\n flex-direction: column;\n gap: 8px;\n }\n\n .view-controls {\n align-self: flex-end;\n }\n}\n"] }]
|
|
377
377
|
}], () => [{ type: i1.WindowRef }, { type: i0.ChangeDetectorRef }], null); })();
|
|
378
378
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PromptSelectorDialogComponent, { className: "PromptSelectorDialogComponent", filePath: "src/lib/custom/AIAgents/prompt-selector-dialog.component.ts", lineNumber: 43 }); })();
|
|
379
379
|
//# sourceMappingURL=prompt-selector-dialog.component.js.map
|