@sftech/ng-orchestrator 1.0.0 → 1.0.1
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/README.md +89 -3
- package/fesm2022/sftech-ng-orchestrator-agent-rag-upload.component-COPkzHNN.mjs +188 -0
- package/fesm2022/sftech-ng-orchestrator-agent-rag-upload.component-COPkzHNN.mjs.map +1 -0
- package/fesm2022/sftech-ng-orchestrator-agents.routes-DH_0cd5T.mjs +284 -0
- package/fesm2022/sftech-ng-orchestrator-agents.routes-DH_0cd5T.mjs.map +1 -0
- package/fesm2022/sftech-ng-orchestrator-chats.routes-CqFuG3l5.mjs +743 -0
- package/fesm2022/sftech-ng-orchestrator-chats.routes-CqFuG3l5.mjs.map +1 -0
- package/fesm2022/{sftech-ng-orchestrator-prompt-display.component--3QaYOkH.mjs → sftech-ng-orchestrator-prompt-display.component-CXGtE_Ui.mjs} +4 -4
- package/fesm2022/{sftech-ng-orchestrator-prompt-display.component--3QaYOkH.mjs.map → sftech-ng-orchestrator-prompt-display.component-CXGtE_Ui.mjs.map} +1 -1
- package/fesm2022/sftech-ng-orchestrator-prompts.routes-CvMtYkTK.mjs +51 -0
- package/fesm2022/sftech-ng-orchestrator-prompts.routes-CvMtYkTK.mjs.map +1 -0
- package/fesm2022/{sftech-ng-orchestrator-sftech-ng-orchestrator-BdFSlSN_.mjs → sftech-ng-orchestrator-sftech-ng-orchestrator-C51KniGY.mjs} +7 -7
- package/fesm2022/sftech-ng-orchestrator-sftech-ng-orchestrator-C51KniGY.mjs.map +1 -0
- package/fesm2022/sftech-ng-orchestrator.mjs +1 -1
- package/package.json +7 -4
- package/fesm2022/sftech-ng-orchestrator-agent-rag-upload.component-DGMkaMBy.mjs +0 -188
- package/fesm2022/sftech-ng-orchestrator-agent-rag-upload.component-DGMkaMBy.mjs.map +0 -1
- package/fesm2022/sftech-ng-orchestrator-agents.routes-DWOr4y4m.mjs +0 -284
- package/fesm2022/sftech-ng-orchestrator-agents.routes-DWOr4y4m.mjs.map +0 -1
- package/fesm2022/sftech-ng-orchestrator-chats.routes-BRjYTnIk.mjs +0 -743
- package/fesm2022/sftech-ng-orchestrator-chats.routes-BRjYTnIk.mjs.map +0 -1
- package/fesm2022/sftech-ng-orchestrator-prompts.routes-kVoXLKCC.mjs +0 -51
- package/fesm2022/sftech-ng-orchestrator-prompts.routes-kVoXLKCC.mjs.map +0 -1
- package/fesm2022/sftech-ng-orchestrator-sftech-ng-orchestrator-BdFSlSN_.mjs.map +0 -1
|
@@ -1,284 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, inject, signal } from '@angular/core';
|
|
3
|
-
import { RouterOutlet } from '@angular/router';
|
|
4
|
-
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
|
5
|
-
import { BaseDialogComponent, BaseDisplayComponent, MappedApiError, BaseListComponent, IconProvider, PaginatorComponent } from '@sftech/ng-shared';
|
|
6
|
-
import { Button } from 'primeng/button';
|
|
7
|
-
import { DialogService } from 'primeng/dynamicdialog';
|
|
8
|
-
import { Panel } from 'primeng/panel';
|
|
9
|
-
import * as i1$1 from 'primeng/table';
|
|
10
|
-
import { TableModule } from 'primeng/table';
|
|
11
|
-
import { Tooltip } from 'primeng/tooltip';
|
|
12
|
-
import { A as AgentService, b as Agent, a as AgentRagUploadComponent } from './sftech-ng-orchestrator-agent-rag-upload.component-DGMkaMBy.mjs';
|
|
13
|
-
import * as i1 from '@angular/forms';
|
|
14
|
-
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
15
|
-
import { AutoFocus } from 'primeng/autofocus';
|
|
16
|
-
import { Checkbox } from 'primeng/checkbox';
|
|
17
|
-
import { DatePicker } from 'primeng/datepicker';
|
|
18
|
-
import { Fieldset } from 'primeng/fieldset';
|
|
19
|
-
import { FloatLabel } from 'primeng/floatlabel';
|
|
20
|
-
import { InputText } from 'primeng/inputtext';
|
|
21
|
-
import { MultiSelect } from 'primeng/multiselect';
|
|
22
|
-
import { Textarea } from 'primeng/textarea';
|
|
23
|
-
import { ToggleButtonModule } from 'primeng/togglebutton';
|
|
24
|
-
import { a as OrchestratorService, O as ORCHESTRATOR_CONFIGURATION } from './sftech-ng-orchestrator-sftech-ng-orchestrator-BdFSlSN_.mjs';
|
|
25
|
-
import { a as PromptDisplayComponent } from './sftech-ng-orchestrator-prompt-display.component--3QaYOkH.mjs';
|
|
26
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
27
|
-
import { Popover } from 'primeng/popover';
|
|
28
|
-
import { map } from 'rxjs';
|
|
29
|
-
|
|
30
|
-
class AgentsComponent {
|
|
31
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AgentsComponent, isStandalone: true, selector: "sftech-agents", ngImport: i0, template: "<router-outlet></router-outlet>\r\n", styles: [""], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
|
|
33
|
-
}
|
|
34
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentsComponent, decorators: [{
|
|
35
|
-
type: Component,
|
|
36
|
-
args: [{ selector: 'sftech-agents', imports: [RouterOutlet], template: "<router-outlet></router-outlet>\r\n" }]
|
|
37
|
-
}] });
|
|
38
|
-
|
|
39
|
-
const ragPairValidator = () => {
|
|
40
|
-
return (control) => {
|
|
41
|
-
const group = control;
|
|
42
|
-
const ragProvider = group.get('ragProvider')?.value;
|
|
43
|
-
const ragModel = group.get('ragModel')?.value;
|
|
44
|
-
// beide leer → ok
|
|
45
|
-
if (!ragProvider && !ragModel) {
|
|
46
|
-
return null;
|
|
47
|
-
}
|
|
48
|
-
// beide gesetzt → ok
|
|
49
|
-
if (ragProvider && ragModel) {
|
|
50
|
-
return null;
|
|
51
|
-
}
|
|
52
|
-
// nur eins gesetzt → Fehler auf dem FormGroup
|
|
53
|
-
return { ragPairInvalid: true };
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
class PromptHelperModalComponent extends BaseDialogComponent {
|
|
58
|
-
_subscriptions = [];
|
|
59
|
-
systemPromptForm = new FormGroup({
|
|
60
|
-
systemPromptText: new FormControl({ value: '', disabled: true }),
|
|
61
|
-
roleSpecification: new FormControl(''),
|
|
62
|
-
targetGroupSpecification: new FormControl(''),
|
|
63
|
-
inputSpecification: new FormControl(''),
|
|
64
|
-
exampleSpecification: new FormControl(''),
|
|
65
|
-
additionalRulesSpecification: new FormControl(''),
|
|
66
|
-
});
|
|
67
|
-
ngOnInit() {
|
|
68
|
-
this._subscriptions.push(this.systemPromptForm.valueChanges
|
|
69
|
-
.pipe(map((value) => {
|
|
70
|
-
let systemPromptText = '';
|
|
71
|
-
if (value.roleSpecification) {
|
|
72
|
-
systemPromptText += `Role:\n${value.roleSpecification}\n\n`;
|
|
73
|
-
}
|
|
74
|
-
if (value.targetGroupSpecification) {
|
|
75
|
-
systemPromptText += `Target Group:\n${value.targetGroupSpecification}\n\n`;
|
|
76
|
-
}
|
|
77
|
-
if (value.inputSpecification) {
|
|
78
|
-
systemPromptText += `Input:\n${value.inputSpecification}\n\n`;
|
|
79
|
-
}
|
|
80
|
-
if (value.exampleSpecification) {
|
|
81
|
-
systemPromptText += `Example:\n${value.exampleSpecification}\n\n`;
|
|
82
|
-
}
|
|
83
|
-
if (value.additionalRulesSpecification) {
|
|
84
|
-
systemPromptText += `Additional Rules:\n${value.additionalRulesSpecification}\n\n`;
|
|
85
|
-
}
|
|
86
|
-
this.systemPromptForm.get('systemPromptText')?.setValue(systemPromptText);
|
|
87
|
-
}))
|
|
88
|
-
.subscribe());
|
|
89
|
-
}
|
|
90
|
-
ngOnDestroy() {
|
|
91
|
-
this._subscriptions.forEach((subscription) => subscription.unsubscribe());
|
|
92
|
-
}
|
|
93
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PromptHelperModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
94
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: PromptHelperModalComponent, isStandalone: true, selector: "sftech-prompt-helper-modal", usesInheritance: true, ngImport: i0, template: "<sftech-base-dialog [hasHeader]=\"true\" (closed)=\"close()\">\r\n <ng-template #header>\r\n <div class=\"flex justify-between\">\r\n <h2 class=\"text-xl font-semibold\">\r\n Hilfe zur Prompt-Erstellung\r\n </h2>\r\n </div>\r\n </ng-template>\r\n <ng-template #body>\r\n <form [formGroup]=\"systemPromptForm\" [pAutoFocus]=\"true\">\r\n <p-fieldset legend=\"Prompt-Elemente\">\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full mt-2\">\r\n <textarea id=\"systemPromptText\" formControlName=\"systemPromptText\" pTextarea\r\n class=\"w-full h-full\"\r\n [class.ng-invalid]=\"systemPromptForm.get('systemPromptText')?.dirty && systemPromptForm.get('systemPromptText')?.invalid\"></textarea>\r\n <label for=\"systemPromptText\">Mein Prompt</label>\r\n </p-floatlabel>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"textField\"\r\n [ngTemplateOutletContext]=\"{ controlName: 'roleSpecification', popover: roleSpecificationPO, label: 'KI-Rolle' }\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"textField\"\r\n [ngTemplateOutletContext]=\"{ controlName: 'targetGroupSpecification', popover: targetGroupSpecificationPO, label: 'Zielgruppe' }\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"textField\"\r\n [ngTemplateOutletContext]=\"{ controlName: 'inputSpecification', popover: inputSpecificationPO, label: 'Eingabe' }\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"textField\"\r\n [ngTemplateOutletContext]=\"{ controlName: 'exampleSpecification', popover: exampleSpecificationPO, label: 'Eingabe-Beispiel' }\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"textField\"\r\n [ngTemplateOutletContext]=\"{ controlName: 'additionalRulesSpecification', popover: additionalRulesSpecificationPO, label: 'Zus\u00E4tzliche Informationen' }\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </p-fieldset>\r\n <div class=\"flex justify-end mt-2 w-full\">\r\n <p-button label=\"\u00FCbernehmen\" type=\"submit\" [disabled]=\"!systemPromptForm.valid\"\r\n (click)=\"ref.close(systemPromptForm.get('systemPromptText')?.value ?? '')\"></p-button>\r\n </div>\r\n\r\n\r\n <ng-template #textField let-controlName=\"controlName\" let-popover=\"popover\" let-label=\"label\">\r\n <label [for]=\"controlName\" class=\"font-bold me-2\">{{ label }}</label>\r\n <fa-icon [icon]=\"iconProvider.help\" class=\"rounded-[50%] bg-primary text-white\" [fixedWidth]=\"true\"\r\n (click)=\"popover.toggle($event)\"></fa-icon>\r\n <textarea rows=\"4\" [id]=\"controlName\" [formControlName]=\"controlName\"\r\n pTextarea class=\"w-full mt-1\"\r\n [class.ng-invalid]=\"systemPromptForm.get(controlName)?.dirty && systemPromptForm.get(controlName)?.invalid\"></textarea>\r\n </ng-template>\r\n\r\n <p-popover #roleSpecificationPO styleClass=\"bg-gray-500\">\r\n <ng-container\r\n *ngTemplateOutlet=\"popoverStyle; context: { po: roleSpecificationPO, controlName: 'roleSpecification', description: 'Die Rolle der KI beschreibt, wie sie sich verhalten soll. Die Rolle hilft der KI, den Kontext zu verstehen und angemessen zu antworten.', example: 'Du bist ein kompetenter, hilfreicher Assistent mit Fachwissen in Technik, Text, Organisation und Probleml\u00F6sung. Du analysierst pr\u00E4zise, erkl\u00E4rst klar und gibst fundierte, praktische Antworten.' }\"></ng-container>\r\n </p-popover>\r\n\r\n <p-popover #targetGroupSpecificationPO styleClass=\"bg-gray-500\">\r\n <ng-container\r\n *ngTemplateOutlet=\"popoverStyle; context: { po: targetGroupSpecificationPO, controlName: 'targetGroupSpecification', description: 'Die Zielgruppe beschreibt, f\u00FCr wen die KI antworten soll. Sie hilft der KI, den Ton und die Komplexit\u00E4t der Antworten anzupassen.', example: 'Sprich mit einer Person, die in ihrem Fachgebiet erfahren oder zumindest mit den Grundbegriffen vertraut ist. Du darfst Fachsprache verwenden, aber kein unn\u00F6tiges Theoriewissen voraussetzen.' }\"></ng-container>\r\n </p-popover>\r\n <p-popover #inputSpecificationPO styleClass=\"bg-gray-500\">\r\n <ng-container\r\n *ngTemplateOutlet=\"popoverStyle; context: { po: inputSpecificationPO, controlName: 'inputSpecification', description: 'Die Eingabe beschreibt, wie das vom Anwender eingegebene aussieht. Sie hilft der KI, das vom Anwender \u00FCbergebene zu verstehen.', example: 'z.B. Du erh\u00E4ltst eine Frage oder ein Problem, das du l\u00F6sen sollst. Analysiere es gr\u00FCndlich und gib eine klare, pr\u00E4zise Antwort. Mein Input ist ein JSON: {"frage": "Fragen, die du beantworten sollst"}' }\"></ng-container>\r\n </p-popover>\r\n\r\n <p-popover #exampleSpecificationPO styleClass=\"bg-gray-500\">\r\n <ng-container\r\n *ngTemplateOutlet=\"popoverStyle; context: { po: exampleSpecificationPO, controlName: 'exampleSpecification', description: 'Das Eingabe-Beispiel zeigt der KI ein konkretes Beispiel, wie die Anfragen aussehen k\u00F6nnen. Dies hilft der KI, das erwartete Format besser zu verstehen.', example: 'Beispiel {"frage": "Wie kann ich meine Produktivit\u00E4t steigern?"}' }\"></ng-container>\r\n </p-popover>\r\n\r\n <p-popover #additionalRulesSpecificationPO styleClass=\"bg-gray-500\">\r\n <ng-container\r\n *ngTemplateOutlet=\"popoverStyle; context: { po: additionalRulesSpecificationPO, controlName: 'additionalRulesSpecification', description: 'Zus\u00E4tzliche Informationen oder Regeln, die die KI bei der Beantwortung beachten soll. Diese k\u00F6nnen Einschr\u00E4nkungen, spezielle Anforderungen oder wichtige Hinweise enthalten.', example: 'Du darfst keine pers\u00F6nlichen Daten sammeln oder speichern. Deine Antworten m\u00FCssen respektvoll und professionell sein. Vermeide es, pers\u00F6nliche Meinungen zu \u00E4u\u00DFern.' }\"></ng-container>\r\n </p-popover>\r\n\r\n <ng-template #popoverStyle let-po='po' let-formControlName='controlName' let-description=\"description\"\r\n let-example=\"example\">\r\n <div class=\"p-3 w-200\">\r\n <p><span class=\"font-bold\">Beschreibung:</span></p>\r\n <p>{{ description }}</p>\r\n <p class=\"mt-4\"><span class=\"font-bold\">Beispiel:</span></p>\r\n <p>{{ example }}</p>\r\n <p class=\"mt-2\">\r\n <p-button (onClick)=\"systemPromptForm.get(formControlName)?.setValue(example); po.toggle($event)\">\r\n \u00FCbernehmen\r\n </p-button>\r\n </p>\r\n </div>\r\n </ng-template>\r\n\r\n </form>\r\n </ng-template>\r\n <ng-template #footer>\r\n\r\n </ng-template>\r\n</sftech-base-dialog>\r\n", styles: [""], dependencies: [{ kind: "component", type: BaseDialogComponent, selector: "sftech-base-dialog", inputs: ["hasHeader", "hasFooter", "showButtons", "headerText"], outputs: ["closed"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
95
|
-
}
|
|
96
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PromptHelperModalComponent, decorators: [{
|
|
97
|
-
type: Component,
|
|
98
|
-
args: [{ selector: 'sftech-prompt-helper-modal', imports: [BaseDialogComponent, ReactiveFormsModule, Fieldset, FloatLabel, Textarea, AutoFocus, Button, FaIconComponent, Popover, NgTemplateOutlet], template: "<sftech-base-dialog [hasHeader]=\"true\" (closed)=\"close()\">\r\n <ng-template #header>\r\n <div class=\"flex justify-between\">\r\n <h2 class=\"text-xl font-semibold\">\r\n Hilfe zur Prompt-Erstellung\r\n </h2>\r\n </div>\r\n </ng-template>\r\n <ng-template #body>\r\n <form [formGroup]=\"systemPromptForm\" [pAutoFocus]=\"true\">\r\n <p-fieldset legend=\"Prompt-Elemente\">\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full mt-2\">\r\n <textarea id=\"systemPromptText\" formControlName=\"systemPromptText\" pTextarea\r\n class=\"w-full h-full\"\r\n [class.ng-invalid]=\"systemPromptForm.get('systemPromptText')?.dirty && systemPromptForm.get('systemPromptText')?.invalid\"></textarea>\r\n <label for=\"systemPromptText\">Mein Prompt</label>\r\n </p-floatlabel>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"textField\"\r\n [ngTemplateOutletContext]=\"{ controlName: 'roleSpecification', popover: roleSpecificationPO, label: 'KI-Rolle' }\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"textField\"\r\n [ngTemplateOutletContext]=\"{ controlName: 'targetGroupSpecification', popover: targetGroupSpecificationPO, label: 'Zielgruppe' }\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"textField\"\r\n [ngTemplateOutletContext]=\"{ controlName: 'inputSpecification', popover: inputSpecificationPO, label: 'Eingabe' }\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"textField\"\r\n [ngTemplateOutletContext]=\"{ controlName: 'exampleSpecification', popover: exampleSpecificationPO, label: 'Eingabe-Beispiel' }\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"textField\"\r\n [ngTemplateOutletContext]=\"{ controlName: 'additionalRulesSpecification', popover: additionalRulesSpecificationPO, label: 'Zus\u00E4tzliche Informationen' }\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n </p-fieldset>\r\n <div class=\"flex justify-end mt-2 w-full\">\r\n <p-button label=\"\u00FCbernehmen\" type=\"submit\" [disabled]=\"!systemPromptForm.valid\"\r\n (click)=\"ref.close(systemPromptForm.get('systemPromptText')?.value ?? '')\"></p-button>\r\n </div>\r\n\r\n\r\n <ng-template #textField let-controlName=\"controlName\" let-popover=\"popover\" let-label=\"label\">\r\n <label [for]=\"controlName\" class=\"font-bold me-2\">{{ label }}</label>\r\n <fa-icon [icon]=\"iconProvider.help\" class=\"rounded-[50%] bg-primary text-white\" [fixedWidth]=\"true\"\r\n (click)=\"popover.toggle($event)\"></fa-icon>\r\n <textarea rows=\"4\" [id]=\"controlName\" [formControlName]=\"controlName\"\r\n pTextarea class=\"w-full mt-1\"\r\n [class.ng-invalid]=\"systemPromptForm.get(controlName)?.dirty && systemPromptForm.get(controlName)?.invalid\"></textarea>\r\n </ng-template>\r\n\r\n <p-popover #roleSpecificationPO styleClass=\"bg-gray-500\">\r\n <ng-container\r\n *ngTemplateOutlet=\"popoverStyle; context: { po: roleSpecificationPO, controlName: 'roleSpecification', description: 'Die Rolle der KI beschreibt, wie sie sich verhalten soll. Die Rolle hilft der KI, den Kontext zu verstehen und angemessen zu antworten.', example: 'Du bist ein kompetenter, hilfreicher Assistent mit Fachwissen in Technik, Text, Organisation und Probleml\u00F6sung. Du analysierst pr\u00E4zise, erkl\u00E4rst klar und gibst fundierte, praktische Antworten.' }\"></ng-container>\r\n </p-popover>\r\n\r\n <p-popover #targetGroupSpecificationPO styleClass=\"bg-gray-500\">\r\n <ng-container\r\n *ngTemplateOutlet=\"popoverStyle; context: { po: targetGroupSpecificationPO, controlName: 'targetGroupSpecification', description: 'Die Zielgruppe beschreibt, f\u00FCr wen die KI antworten soll. Sie hilft der KI, den Ton und die Komplexit\u00E4t der Antworten anzupassen.', example: 'Sprich mit einer Person, die in ihrem Fachgebiet erfahren oder zumindest mit den Grundbegriffen vertraut ist. Du darfst Fachsprache verwenden, aber kein unn\u00F6tiges Theoriewissen voraussetzen.' }\"></ng-container>\r\n </p-popover>\r\n <p-popover #inputSpecificationPO styleClass=\"bg-gray-500\">\r\n <ng-container\r\n *ngTemplateOutlet=\"popoverStyle; context: { po: inputSpecificationPO, controlName: 'inputSpecification', description: 'Die Eingabe beschreibt, wie das vom Anwender eingegebene aussieht. Sie hilft der KI, das vom Anwender \u00FCbergebene zu verstehen.', example: 'z.B. Du erh\u00E4ltst eine Frage oder ein Problem, das du l\u00F6sen sollst. Analysiere es gr\u00FCndlich und gib eine klare, pr\u00E4zise Antwort. Mein Input ist ein JSON: {"frage": "Fragen, die du beantworten sollst"}' }\"></ng-container>\r\n </p-popover>\r\n\r\n <p-popover #exampleSpecificationPO styleClass=\"bg-gray-500\">\r\n <ng-container\r\n *ngTemplateOutlet=\"popoverStyle; context: { po: exampleSpecificationPO, controlName: 'exampleSpecification', description: 'Das Eingabe-Beispiel zeigt der KI ein konkretes Beispiel, wie die Anfragen aussehen k\u00F6nnen. Dies hilft der KI, das erwartete Format besser zu verstehen.', example: 'Beispiel {"frage": "Wie kann ich meine Produktivit\u00E4t steigern?"}' }\"></ng-container>\r\n </p-popover>\r\n\r\n <p-popover #additionalRulesSpecificationPO styleClass=\"bg-gray-500\">\r\n <ng-container\r\n *ngTemplateOutlet=\"popoverStyle; context: { po: additionalRulesSpecificationPO, controlName: 'additionalRulesSpecification', description: 'Zus\u00E4tzliche Informationen oder Regeln, die die KI bei der Beantwortung beachten soll. Diese k\u00F6nnen Einschr\u00E4nkungen, spezielle Anforderungen oder wichtige Hinweise enthalten.', example: 'Du darfst keine pers\u00F6nlichen Daten sammeln oder speichern. Deine Antworten m\u00FCssen respektvoll und professionell sein. Vermeide es, pers\u00F6nliche Meinungen zu \u00E4u\u00DFern.' }\"></ng-container>\r\n </p-popover>\r\n\r\n <ng-template #popoverStyle let-po='po' let-formControlName='controlName' let-description=\"description\"\r\n let-example=\"example\">\r\n <div class=\"p-3 w-200\">\r\n <p><span class=\"font-bold\">Beschreibung:</span></p>\r\n <p>{{ description }}</p>\r\n <p class=\"mt-4\"><span class=\"font-bold\">Beispiel:</span></p>\r\n <p>{{ example }}</p>\r\n <p class=\"mt-2\">\r\n <p-button (onClick)=\"systemPromptForm.get(formControlName)?.setValue(example); po.toggle($event)\">\r\n \u00FCbernehmen\r\n </p-button>\r\n </p>\r\n </div>\r\n </ng-template>\r\n\r\n </form>\r\n </ng-template>\r\n <ng-template #footer>\r\n\r\n </ng-template>\r\n</sftech-base-dialog>\r\n" }]
|
|
99
|
-
}] });
|
|
100
|
-
|
|
101
|
-
class AgentDisplayComponent extends BaseDisplayComponent {
|
|
102
|
-
_repo = inject(AgentService);
|
|
103
|
-
_route = 'agents';
|
|
104
|
-
_orchestratorService = inject(OrchestratorService);
|
|
105
|
-
tools = signal(undefined, ...(ngDevMode ? [{ debugName: "tools" }] : []));
|
|
106
|
-
dialog = inject(DialogService);
|
|
107
|
-
_options = inject(ORCHESTRATOR_CONFIGURATION);
|
|
108
|
-
ngOnInit() {
|
|
109
|
-
super.ngOnInit();
|
|
110
|
-
this._orchestratorService.getTools().subscribe((res) => {
|
|
111
|
-
if (res instanceof MappedApiError) {
|
|
112
|
-
this.tools.set([]);
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
this.tools.set(res.data);
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
initializeForm() {
|
|
119
|
-
const form = new FormGroup({
|
|
120
|
-
id: new FormControl({ value: this.model().id, disabled: true }),
|
|
121
|
-
createdAt: new FormControl({ value: this.model().createdAt, disabled: true }),
|
|
122
|
-
identifier: new FormControl({ value: this.model().identifier, disabled: true }),
|
|
123
|
-
llmUserPrompt: new FormControl({ value: this.model().llmUserPrompt, disabled: true }),
|
|
124
|
-
llmSystemPrompt: new FormControl({ value: this.model().llmSystemPrompt, disabled: true }),
|
|
125
|
-
description: new FormControl({ value: this.model().description, disabled: !this.canEdit }),
|
|
126
|
-
connectorUrl: new FormControl({ value: this.model().connectorUrl, disabled: !this.canEdit }),
|
|
127
|
-
systemPromptText: new FormControl(''),
|
|
128
|
-
answerSpecification: new FormControl({
|
|
129
|
-
value: this.model().answerSpecification,
|
|
130
|
-
disabled: !this.canEdit || !this.model().isGeneric,
|
|
131
|
-
}),
|
|
132
|
-
tools: new FormControl({ value: this.model().tools, disabled: !this.canEdit }),
|
|
133
|
-
llmProvider: new FormControl({ value: this.model().llmProvider, disabled: !this.canEdit }),
|
|
134
|
-
llmModel: new FormControl({ value: this.model().llmModel, disabled: !this.canEdit }),
|
|
135
|
-
llmTemperature: new FormControl({ value: this.model().llmTemperature, disabled: !this.canEdit }),
|
|
136
|
-
llmTimeout: new FormControl({ value: this.model().llmTimeout, disabled: !this.canEdit }),
|
|
137
|
-
llmRetries: new FormControl({ value: this.model().llmRetries, disabled: !this.canEdit }),
|
|
138
|
-
useRag: new FormControl({ value: this.model().ragProvider !== null && this.model().ragModel !== null, disabled: !this.canEdit }),
|
|
139
|
-
ragProvider: new FormControl({ value: this.model().ragProvider, disabled: !this.canEdit }),
|
|
140
|
-
ragModel: new FormControl({ value: this.model().ragModel, disabled: !this.canEdit }),
|
|
141
|
-
name: new FormControl(this.model()?.name),
|
|
142
|
-
}, {
|
|
143
|
-
validators: [ragPairValidator()],
|
|
144
|
-
});
|
|
145
|
-
form.get('useRag')?.valueChanges.subscribe((useRag) => {
|
|
146
|
-
if (useRag) {
|
|
147
|
-
const ragProviderControl = this.form.get('ragProvider');
|
|
148
|
-
const ragModelControl = this.form.get('ragModel');
|
|
149
|
-
// Only set default values if fields are currently empty
|
|
150
|
-
if (!ragProviderControl?.value) {
|
|
151
|
-
ragProviderControl?.setValue(this._options.defaultRagProvider);
|
|
152
|
-
}
|
|
153
|
-
if (!ragModelControl?.value) {
|
|
154
|
-
ragModelControl?.setValue(this._options.defaultRagModel);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
return form;
|
|
159
|
-
}
|
|
160
|
-
getNewModel() {
|
|
161
|
-
const agent = new Agent();
|
|
162
|
-
agent.connectorUrl = this._options.defaultConnectorUrl;
|
|
163
|
-
agent.isGeneric = true;
|
|
164
|
-
agent.answerSpecification = this._options.defaultAnswerSpecification;
|
|
165
|
-
agent.llmProvider = this._options.defaultLlmProvider;
|
|
166
|
-
agent.llmModel = this._options.defaultLlmModel;
|
|
167
|
-
agent.llmTemperature = this._options.defaultLlmTemperature;
|
|
168
|
-
agent.llmTimeout = this._options.defaultLlmTimeout;
|
|
169
|
-
agent.llmRetries = this._options.defaultLlmRetries;
|
|
170
|
-
return agent;
|
|
171
|
-
}
|
|
172
|
-
mapFormToUpdateDto() {
|
|
173
|
-
return {
|
|
174
|
-
description: this.form.get('description')?.value,
|
|
175
|
-
connectorUrl: this.form.get('connectorUrl')?.value,
|
|
176
|
-
tools: this.form.get('tools')?.value,
|
|
177
|
-
answerSpecification: this.form.get('answerSpecification')?.value,
|
|
178
|
-
llmProvider: this.form.get('llmProvider')?.value,
|
|
179
|
-
llmModel: this.form.get('llmModel')?.value,
|
|
180
|
-
llmTemperature: +this.form.get('llmTemperature')?.value,
|
|
181
|
-
llmTimeout: this.form.get('llmTimeout')?.value,
|
|
182
|
-
llmRetries: this.form.get('llmRetries')?.value,
|
|
183
|
-
ragModel: this.form.get('ragModel')?.value,
|
|
184
|
-
ragProvider: this.form.get('ragProvider')?.value,
|
|
185
|
-
name: this.form.get('name')?.value,
|
|
186
|
-
};
|
|
187
|
-
}
|
|
188
|
-
mapFormToCreateDto() {
|
|
189
|
-
return {
|
|
190
|
-
description: this.form.get('description')?.value,
|
|
191
|
-
connectorUrl: this.form.get('connectorUrl')?.value,
|
|
192
|
-
systemPromptText: this.form.get('systemPromptText')?.value,
|
|
193
|
-
answerSpecification: this.form.get('answerSpecification')?.value,
|
|
194
|
-
tools: this.form.get('tools')?.value,
|
|
195
|
-
llmProvider: this.form.get('llmProvider')?.value,
|
|
196
|
-
llmModel: this.form.get('llmModel')?.value,
|
|
197
|
-
llmTemperature: +this.form.get('llmTemperature')?.value,
|
|
198
|
-
llmTimeout: this.form.get('llmTimeout')?.value,
|
|
199
|
-
llmRetries: this.form.get('llmRetries')?.value,
|
|
200
|
-
ragModel: this.form.get('ragModel')?.value,
|
|
201
|
-
ragProvider: this.form.get('ragProvider')?.value,
|
|
202
|
-
name: this.form.get('name')?.value,
|
|
203
|
-
};
|
|
204
|
-
}
|
|
205
|
-
openPromptModal(promptId) {
|
|
206
|
-
if (!promptId) {
|
|
207
|
-
return;
|
|
208
|
-
}
|
|
209
|
-
this.dialog.open(PromptDisplayComponent, {
|
|
210
|
-
inputValues: { id: promptId, canEdit: true, openedAsModal: true },
|
|
211
|
-
focusOnShow: false,
|
|
212
|
-
modal: true,
|
|
213
|
-
dismissableMask: true,
|
|
214
|
-
width: '40%',
|
|
215
|
-
contentStyle: { overflow: 'auto' },
|
|
216
|
-
});
|
|
217
|
-
}
|
|
218
|
-
openPromptHelper() {
|
|
219
|
-
const modalRef = this.dialog.open(PromptHelperModalComponent, {
|
|
220
|
-
modal: true,
|
|
221
|
-
dismissableMask: true,
|
|
222
|
-
width: '60%',
|
|
223
|
-
contentStyle: { overflow: 'auto' },
|
|
224
|
-
});
|
|
225
|
-
modalRef?.onClose.subscribe((result) => {
|
|
226
|
-
if (!result) {
|
|
227
|
-
return;
|
|
228
|
-
}
|
|
229
|
-
this.form.get('systemPromptText')?.setValue(result);
|
|
230
|
-
});
|
|
231
|
-
}
|
|
232
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AgentDisplayComponent, isStandalone: true, selector: "sftech-prompt-display", providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<sftech-base-dialog (closed)=\"close()\">\r\n <ng-template #body>\r\n <div class=\"h-full overflow-auto\">\r\n @if (model()) {\r\n <form [formGroup]=\"form\" [pAutoFocus]=\"true\">\r\n <p-fieldset legend=\"Stammdaten\" class=\"bg-primary-50!\">\r\n @if (!isNew()) {\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"id\" formControlName=\"id\" pInputText class=\"w-full\"/>\r\n <label for=\"id\">{{ this.model()!.getUiNameForProperty('id') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"identifier\" formControlName=\"identifier\" pInputText\r\n class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('identifier')?.dirty && form.get('identifier')?.invalid\"/>\r\n <label for=\"identifier\">{{ this.model()!.getUiNameForProperty('identifier') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <p-datePicker id=\"createdAt\" formControlName=\"createdAt\" dateFormat=\"dd.mm.yy\"\r\n [showTime]=\"true\"\r\n [hourFormat]=\"'24'\" [style]=\"{'width': '100%'}\"\r\n [class.ng-invalid]=\"form.get('createdAt')?.dirty && form.get('createdAt')?.invalid\"></p-datePicker>\r\n <label for=\"createdAt\">{{ this.model()!.getUiNameForProperty('createdAt') }}</label>\r\n </p-floatlabel>\r\n </div>\r\n }\r\n\r\n <p-floatlabel variant=\"in\" class=\"w-full mt-2\">\r\n <input type=\"text\" id=\"name\" formControlName=\"name\" pTextarea class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('name')?.dirty && form.get('name')?.invalid\"/>\r\n <label for=\"name\">{{ this.model()!.getUiNameForProperty('name') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full mt-2\">\r\n <textarea rows=\"2\" id=\"description\" formControlName=\"description\" pTextarea class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('description')?.dirty && form.get('description')?.invalid\"></textarea>\r\n <label for=\"description\">{{ this.model()!.getUiNameForProperty('description') }}</label>\r\n </p-floatlabel>\r\n </p-fieldset>\r\n <hr class=\"my-10 text-primary-50\"/>\r\n <p-fieldset legend=\"Prompts\">\r\n @if (!isNew()) {\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 mb-2 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"llmUserPrompt\"\r\n (click)=\"openPromptModal(model()!.llmUserPromptId)\"\r\n [value]=\"model()!.llmUserPrompt?.identifier\" pInputText\r\n class=\"w-full cursor-pointer\"/>\r\n <label for=\"llmUserPrompt\">{{ this.model()!.getUiNameForProperty('llmUserPrompt') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"llmSystemPrompt\"\r\n (click)=\"openPromptModal(model()!.llmSystemPromptId)\"\r\n [value]=\"model()!.llmSystemPrompt?.identifier\" pInputText\r\n class=\"w-full cursor-pointer\"/>\r\n <label for=\"llmSystemPrompt\">{{ this.model()!.getUiNameForProperty('llmSystemPrompt') }}</label>\r\n </p-floatlabel>\r\n </div>\r\n } @else {\r\n <span class=\"me-2\">Ich m\u00F6chte Unterst\u00FCtzung bei der Prompt-Erstellung</span>\r\n <p-button [rounded]=\"true\" (onClick)=\"openPromptHelper()\">\r\n <fa-icon [icon]=\"iconProvider.help\" [fixedWidth]=\"true\"></fa-icon>\r\n </p-button>\r\n <p-floatlabel variant=\"in\" class=\"w-full mb-2\">\r\n <textarea rows=\"10\" id=\"systemPromptText\" formControlName=\"systemPromptText\" pTextarea\r\n class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('systemPromptText')?.dirty && form.get('systemPromptText')?.invalid\"></textarea>\r\n <label for=\"systemPromptText\">{{ this.model()!.getUiNameForProperty('systemPromptText') }}</label>\r\n </p-floatlabel>\r\n }\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <textarea rows=\"5\" id=\"answerSpecification\" formControlName=\"answerSpecification\" pTextarea\r\n class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('answerSpecification')?.dirty && form.get('answerSpecification')?.invalid\"></textarea>\r\n <label for=\"answerSpecification\">{{ this.model()!.getUiNameForProperty('answerSpecification') }}</label>\r\n </p-floatlabel>\r\n </p-fieldset>\r\n <hr class=\"my-10 text-primary-50\"/>\r\n <p-fieldset legend=\"LLM-Tools\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mb-2 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <p-multiselect id=\"tools\" [options]=\"tools()\" [loading]=\"!tools()\"\r\n appendTo=\"body\"\r\n formControlName=\"tools\"\r\n optionLabel=\"name\"\r\n optionValue=\"identifier\" styleClass=\"w-full md:w-80\" display=\"chip\">\r\n <ng-template let-tool #item>\r\n <div class=\"flex items-center gap-2\">\r\n <div>{{ tool.name }}</div>\r\n </div>\r\n </ng-template>\r\n <ng-template #dropdownicon>\r\n <i class=\"pi pi-map\"></i>\r\n </ng-template>\r\n <ng-template #header>\r\n <div class=\"font-medium px-3 py-2\">Verf\u00FCgbare Tools</div>\r\n </ng-template>\r\n </p-multiselect>\r\n <label for=\"tools\">Tools</label>\r\n </p-floatlabel>\r\n </div>\r\n </p-fieldset>\r\n <hr class=\"my-10 text-primary-50\"/>\r\n\r\n <p-fieldset legend=\"LLM-RAG\" [toggleable]=\"true\">\r\n <div class=\"mb-4\">\r\n <p-checkbox id=\"useRag\" formControlName=\"useRag\" [binary]=\"true\" class=\"me-2\" />\r\n <label for=\"useRag\">Soll das LLM mit eigenen Dokumenten angereichert werden (RAG)?</label>\r\n </div>\r\n @if (this.form.get('useRag')!.value) {\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 mb-2 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"ragProvider\"\r\n formControlName=\"ragProvider\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('ragProvider')?.dirty && form.get('ragProvider')?.invalid\"/>\r\n <label for=\"ragProvider\">{{ this.model()!.getUiNameForProperty('ragProvider') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"ragModel\"\r\n formControlName=\"ragModel\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('ragModel')?.dirty && form.get('ragModel')?.invalid\"/>\r\n <label for=\"ragModel\">{{ this.model()!.getUiNameForProperty('ragModel') }}</label>\r\n </p-floatlabel>\r\n </div>\r\n }\r\n </p-fieldset>\r\n <hr class=\"my-10 text-primary-50\"/>\r\n\r\n <p-fieldset legend=\"LLM-Konfiguration\" [toggleable]=\"true\" [collapsed]=\"true\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mb-2 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"connectorUrl\"\r\n formControlName=\"connectorUrl\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('connectorUrl')?.dirty && form.get('connectorUrl')?.invalid\"/>\r\n <label for=\"connectorUrl\">{{ this.model()!.getUiNameForProperty('connectorUrl') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"llmProvider\"\r\n formControlName=\"llmProvider\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('llmProvider')?.dirty && form.get('llmProvider')?.invalid\"/>\r\n <label for=\"llmProvider\">{{ this.model()!.getUiNameForProperty('llmProvider') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"llmModel\"\r\n formControlName=\"llmModel\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('llmModel')?.dirty && form.get('llmModel')?.invalid\"/>\r\n <label for=\"llmModel\">{{ this.model()!.getUiNameForProperty('llmModel') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"number\" id=\"llmTemperature\"\r\n formControlName=\"llmTemperature\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('llmTemperature')?.dirty && form.get('llmTemperature')?.invalid\"/>\r\n <label for=\"llmTemperature\">{{ this.model()!.getUiNameForProperty('llmTemperature') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"number\" id=\"llmTimeout\"\r\n formControlName=\"llmTimeout\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('llmTimeout')?.dirty && form.get('llmTimeout')?.invalid\"/>\r\n <label for=\"llmTimeout\">{{ this.model()!.getUiNameForProperty('llmTimeout') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"number\" id=\"llmRetries\"\r\n formControlName=\"llmRetries\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('llmRetries')?.dirty && form.get('llmRetries')?.invalid\"/>\r\n <label for=\"llmRetries\">{{ this.model()!.getUiNameForProperty('llmRetries') }}</label>\r\n </p-floatlabel>\r\n </div>\r\n </p-fieldset>\r\n\r\n\r\n </form>\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-template #footer>\r\n <div class=\"flex justify-end mt-2\">\r\n <p-button label=\"Speichern\" (onClick)=\"submitForm()\" (keyup.enter)=\"submitForm()\"\r\n [disabled]=\"!form || !form.dirty\"></p-button>\r\n </div>\r\n </ng-template>\r\n\r\n\r\n</sftech-base-dialog>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: BaseDialogComponent, selector: "sftech-base-dialog", inputs: ["hasHeader", "hasFooter", "showButtons", "headerText"], outputs: ["closed"] }, { kind: "component", type: Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
234
|
-
}
|
|
235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentDisplayComponent, decorators: [{
|
|
236
|
-
type: Component,
|
|
237
|
-
args: [{ selector: 'sftech-prompt-display', imports: [ReactiveFormsModule, InputText, AutoFocus, FloatLabel, DatePicker, Textarea, Button, BaseDialogComponent, Fieldset, MultiSelect, ToggleButtonModule, FaIconComponent, Checkbox], providers: [DialogService], template: "<sftech-base-dialog (closed)=\"close()\">\r\n <ng-template #body>\r\n <div class=\"h-full overflow-auto\">\r\n @if (model()) {\r\n <form [formGroup]=\"form\" [pAutoFocus]=\"true\">\r\n <p-fieldset legend=\"Stammdaten\" class=\"bg-primary-50!\">\r\n @if (!isNew()) {\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"id\" formControlName=\"id\" pInputText class=\"w-full\"/>\r\n <label for=\"id\">{{ this.model()!.getUiNameForProperty('id') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"identifier\" formControlName=\"identifier\" pInputText\r\n class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('identifier')?.dirty && form.get('identifier')?.invalid\"/>\r\n <label for=\"identifier\">{{ this.model()!.getUiNameForProperty('identifier') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <p-datePicker id=\"createdAt\" formControlName=\"createdAt\" dateFormat=\"dd.mm.yy\"\r\n [showTime]=\"true\"\r\n [hourFormat]=\"'24'\" [style]=\"{'width': '100%'}\"\r\n [class.ng-invalid]=\"form.get('createdAt')?.dirty && form.get('createdAt')?.invalid\"></p-datePicker>\r\n <label for=\"createdAt\">{{ this.model()!.getUiNameForProperty('createdAt') }}</label>\r\n </p-floatlabel>\r\n </div>\r\n }\r\n\r\n <p-floatlabel variant=\"in\" class=\"w-full mt-2\">\r\n <input type=\"text\" id=\"name\" formControlName=\"name\" pTextarea class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('name')?.dirty && form.get('name')?.invalid\"/>\r\n <label for=\"name\">{{ this.model()!.getUiNameForProperty('name') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full mt-2\">\r\n <textarea rows=\"2\" id=\"description\" formControlName=\"description\" pTextarea class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('description')?.dirty && form.get('description')?.invalid\"></textarea>\r\n <label for=\"description\">{{ this.model()!.getUiNameForProperty('description') }}</label>\r\n </p-floatlabel>\r\n </p-fieldset>\r\n <hr class=\"my-10 text-primary-50\"/>\r\n <p-fieldset legend=\"Prompts\">\r\n @if (!isNew()) {\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 mb-2 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"llmUserPrompt\"\r\n (click)=\"openPromptModal(model()!.llmUserPromptId)\"\r\n [value]=\"model()!.llmUserPrompt?.identifier\" pInputText\r\n class=\"w-full cursor-pointer\"/>\r\n <label for=\"llmUserPrompt\">{{ this.model()!.getUiNameForProperty('llmUserPrompt') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"llmSystemPrompt\"\r\n (click)=\"openPromptModal(model()!.llmSystemPromptId)\"\r\n [value]=\"model()!.llmSystemPrompt?.identifier\" pInputText\r\n class=\"w-full cursor-pointer\"/>\r\n <label for=\"llmSystemPrompt\">{{ this.model()!.getUiNameForProperty('llmSystemPrompt') }}</label>\r\n </p-floatlabel>\r\n </div>\r\n } @else {\r\n <span class=\"me-2\">Ich m\u00F6chte Unterst\u00FCtzung bei der Prompt-Erstellung</span>\r\n <p-button [rounded]=\"true\" (onClick)=\"openPromptHelper()\">\r\n <fa-icon [icon]=\"iconProvider.help\" [fixedWidth]=\"true\"></fa-icon>\r\n </p-button>\r\n <p-floatlabel variant=\"in\" class=\"w-full mb-2\">\r\n <textarea rows=\"10\" id=\"systemPromptText\" formControlName=\"systemPromptText\" pTextarea\r\n class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('systemPromptText')?.dirty && form.get('systemPromptText')?.invalid\"></textarea>\r\n <label for=\"systemPromptText\">{{ this.model()!.getUiNameForProperty('systemPromptText') }}</label>\r\n </p-floatlabel>\r\n }\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <textarea rows=\"5\" id=\"answerSpecification\" formControlName=\"answerSpecification\" pTextarea\r\n class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('answerSpecification')?.dirty && form.get('answerSpecification')?.invalid\"></textarea>\r\n <label for=\"answerSpecification\">{{ this.model()!.getUiNameForProperty('answerSpecification') }}</label>\r\n </p-floatlabel>\r\n </p-fieldset>\r\n <hr class=\"my-10 text-primary-50\"/>\r\n <p-fieldset legend=\"LLM-Tools\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mb-2 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <p-multiselect id=\"tools\" [options]=\"tools()\" [loading]=\"!tools()\"\r\n appendTo=\"body\"\r\n formControlName=\"tools\"\r\n optionLabel=\"name\"\r\n optionValue=\"identifier\" styleClass=\"w-full md:w-80\" display=\"chip\">\r\n <ng-template let-tool #item>\r\n <div class=\"flex items-center gap-2\">\r\n <div>{{ tool.name }}</div>\r\n </div>\r\n </ng-template>\r\n <ng-template #dropdownicon>\r\n <i class=\"pi pi-map\"></i>\r\n </ng-template>\r\n <ng-template #header>\r\n <div class=\"font-medium px-3 py-2\">Verf\u00FCgbare Tools</div>\r\n </ng-template>\r\n </p-multiselect>\r\n <label for=\"tools\">Tools</label>\r\n </p-floatlabel>\r\n </div>\r\n </p-fieldset>\r\n <hr class=\"my-10 text-primary-50\"/>\r\n\r\n <p-fieldset legend=\"LLM-RAG\" [toggleable]=\"true\">\r\n <div class=\"mb-4\">\r\n <p-checkbox id=\"useRag\" formControlName=\"useRag\" [binary]=\"true\" class=\"me-2\" />\r\n <label for=\"useRag\">Soll das LLM mit eigenen Dokumenten angereichert werden (RAG)?</label>\r\n </div>\r\n @if (this.form.get('useRag')!.value) {\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 mb-2 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"ragProvider\"\r\n formControlName=\"ragProvider\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('ragProvider')?.dirty && form.get('ragProvider')?.invalid\"/>\r\n <label for=\"ragProvider\">{{ this.model()!.getUiNameForProperty('ragProvider') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"ragModel\"\r\n formControlName=\"ragModel\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('ragModel')?.dirty && form.get('ragModel')?.invalid\"/>\r\n <label for=\"ragModel\">{{ this.model()!.getUiNameForProperty('ragModel') }}</label>\r\n </p-floatlabel>\r\n </div>\r\n }\r\n </p-fieldset>\r\n <hr class=\"my-10 text-primary-50\"/>\r\n\r\n <p-fieldset legend=\"LLM-Konfiguration\" [toggleable]=\"true\" [collapsed]=\"true\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mb-2 gap-2\">\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"connectorUrl\"\r\n formControlName=\"connectorUrl\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('connectorUrl')?.dirty && form.get('connectorUrl')?.invalid\"/>\r\n <label for=\"connectorUrl\">{{ this.model()!.getUiNameForProperty('connectorUrl') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"llmProvider\"\r\n formControlName=\"llmProvider\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('llmProvider')?.dirty && form.get('llmProvider')?.invalid\"/>\r\n <label for=\"llmProvider\">{{ this.model()!.getUiNameForProperty('llmProvider') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"text\" id=\"llmModel\"\r\n formControlName=\"llmModel\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('llmModel')?.dirty && form.get('llmModel')?.invalid\"/>\r\n <label for=\"llmModel\">{{ this.model()!.getUiNameForProperty('llmModel') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"number\" id=\"llmTemperature\"\r\n formControlName=\"llmTemperature\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('llmTemperature')?.dirty && form.get('llmTemperature')?.invalid\"/>\r\n <label for=\"llmTemperature\">{{ this.model()!.getUiNameForProperty('llmTemperature') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"number\" id=\"llmTimeout\"\r\n formControlName=\"llmTimeout\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('llmTimeout')?.dirty && form.get('llmTimeout')?.invalid\"/>\r\n <label for=\"llmTimeout\">{{ this.model()!.getUiNameForProperty('llmTimeout') }}</label>\r\n </p-floatlabel>\r\n <p-floatlabel variant=\"in\" class=\"w-full\">\r\n <input type=\"number\" id=\"llmRetries\"\r\n formControlName=\"llmRetries\" pInputText class=\"w-full\"\r\n [class.ng-invalid]=\"form.get('llmRetries')?.dirty && form.get('llmRetries')?.invalid\"/>\r\n <label for=\"llmRetries\">{{ this.model()!.getUiNameForProperty('llmRetries') }}</label>\r\n </p-floatlabel>\r\n </div>\r\n </p-fieldset>\r\n\r\n\r\n </form>\r\n }\r\n </div>\r\n </ng-template>\r\n <ng-template #footer>\r\n <div class=\"flex justify-end mt-2\">\r\n <p-button label=\"Speichern\" (onClick)=\"submitForm()\" (keyup.enter)=\"submitForm()\"\r\n [disabled]=\"!form || !form.dirty\"></p-button>\r\n </div>\r\n </ng-template>\r\n\r\n\r\n</sftech-base-dialog>\r\n" }]
|
|
238
|
-
}] });
|
|
239
|
-
|
|
240
|
-
class AgentsListComponent extends BaseListComponent {
|
|
241
|
-
_repo = inject(AgentService);
|
|
242
|
-
_route = 'agents';
|
|
243
|
-
_modalComponent = AgentDisplayComponent;
|
|
244
|
-
detailModalHeaderText = 'Agent-Details';
|
|
245
|
-
dialogService = inject(DialogService);
|
|
246
|
-
iconProvider = IconProvider;
|
|
247
|
-
constructor() {
|
|
248
|
-
super();
|
|
249
|
-
}
|
|
250
|
-
openRagUploadModal(agentId, event) {
|
|
251
|
-
event.stopPropagation();
|
|
252
|
-
this.dialogService.open(AgentRagUploadComponent, {
|
|
253
|
-
inputValues: { agentId },
|
|
254
|
-
focusOnShow: false,
|
|
255
|
-
modal: true,
|
|
256
|
-
dismissableMask: true,
|
|
257
|
-
header: 'RAG-Dokumente hochladen',
|
|
258
|
-
width: '50%',
|
|
259
|
-
contentStyle: { overflow: 'auto' },
|
|
260
|
-
});
|
|
261
|
-
}
|
|
262
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
263
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AgentsListComponent, isStandalone: true, selector: "sftech-prompts-list", providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<div class=\"h-full overflow-y-auto px-2 sm:px-4\">\r\n <h1 class=\"text-primary-900 font-bold text-lg sm:text-xl p-2 my-4\">Agent-\u00DCbersicht</h1>\r\n\r\n @if (!data()) {\r\n <p-panel [toggleable]=\"false\">\r\n <p class=\"m-0\">\r\n Daten werden geladen...\r\n </p>\r\n </p-panel>\r\n } @else if (data()!.length === 0) {\r\n <p-panel [toggleable]=\"false\">\r\n <p class=\"m-0\">\r\n Es sind keine Agenten vorhanden.\r\n </p>\r\n </p-panel>\r\n } @else if (data()!.length > 0) {\r\n <div class=\"overflow-x-auto -mx-2 sm:mx-0\">\r\n <p-table [value]=\"data()!\"\r\n stripedRows\r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n selectionMode=\"single\"\r\n [resizableColumns]=\"true\"\r\n dataKey=\"id\"\r\n >\r\n <ng-template #header>\r\n <tr>\r\n @for(column of data()![0].propertiesToShow; track column) {\r\n <th>{{ data()![0].getUiNameForProperty(column) }}</th>\r\n }\r\n <th style=\"width: 80px\">Aktionen</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-agent>\r\n <tr (click)=\"openDisplay(agent.id)\" [pSelectableRow]=\"agent\" class=\"cursor-pointer\">\r\n @for(column of data()![0].propertiesToShow; track column) {\r\n <td style=\"white-space: pre-wrap\">\r\n {{ agent.getPropertyValue(column) }}\r\n </td>\r\n }\r\n <td>\r\n @if (agent.ragProvider && agent.ragModel) {\r\n <p-button\r\n (onClick)=\"openRagUploadModal(agent.id, $event)\"\r\n [pTooltip]=\"'RAG-Dokumente hochladen'\"\r\n tooltipPosition=\"left\">\r\n <fa-icon [icon]=\"iconProvider.documentAdd\"></fa-icon>\r\n </p-button>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n <sftech-paginator [pagination]=\"odata().pagination\" (odataChanged)=\"updatePagination($event)\"></sftech-paginator>\r\n <div class=\"flex justify-end p-2\">\r\n <p-button (onClick)=\"openDisplay(undefined)\">\r\n <fa-icon [icon]=\"iconProvider.add\" class=\"sm:mr-2\"></fa-icon>\r\n <span class=\"hidden sm:inline\">Neuer Agent</span>\r\n </p-button>\r\n </div>\r\n }\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: PaginatorComponent, selector: "sftech-paginator", inputs: ["pagination"], outputs: ["odataChanged"] }, { kind: "component", type: Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }] });
|
|
264
|
-
}
|
|
265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentsListComponent, decorators: [{
|
|
266
|
-
type: Component,
|
|
267
|
-
args: [{ selector: 'sftech-prompts-list', imports: [PaginatorComponent, Panel, TableModule, Button, FaIconComponent, Tooltip], providers: [DialogService], template: "<div class=\"h-full overflow-y-auto px-2 sm:px-4\">\r\n <h1 class=\"text-primary-900 font-bold text-lg sm:text-xl p-2 my-4\">Agent-\u00DCbersicht</h1>\r\n\r\n @if (!data()) {\r\n <p-panel [toggleable]=\"false\">\r\n <p class=\"m-0\">\r\n Daten werden geladen...\r\n </p>\r\n </p-panel>\r\n } @else if (data()!.length === 0) {\r\n <p-panel [toggleable]=\"false\">\r\n <p class=\"m-0\">\r\n Es sind keine Agenten vorhanden.\r\n </p>\r\n </p-panel>\r\n } @else if (data()!.length > 0) {\r\n <div class=\"overflow-x-auto -mx-2 sm:mx-0\">\r\n <p-table [value]=\"data()!\"\r\n stripedRows\r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n selectionMode=\"single\"\r\n [resizableColumns]=\"true\"\r\n dataKey=\"id\"\r\n >\r\n <ng-template #header>\r\n <tr>\r\n @for(column of data()![0].propertiesToShow; track column) {\r\n <th>{{ data()![0].getUiNameForProperty(column) }}</th>\r\n }\r\n <th style=\"width: 80px\">Aktionen</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-agent>\r\n <tr (click)=\"openDisplay(agent.id)\" [pSelectableRow]=\"agent\" class=\"cursor-pointer\">\r\n @for(column of data()![0].propertiesToShow; track column) {\r\n <td style=\"white-space: pre-wrap\">\r\n {{ agent.getPropertyValue(column) }}\r\n </td>\r\n }\r\n <td>\r\n @if (agent.ragProvider && agent.ragModel) {\r\n <p-button\r\n (onClick)=\"openRagUploadModal(agent.id, $event)\"\r\n [pTooltip]=\"'RAG-Dokumente hochladen'\"\r\n tooltipPosition=\"left\">\r\n <fa-icon [icon]=\"iconProvider.documentAdd\"></fa-icon>\r\n </p-button>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n </div>\r\n <sftech-paginator [pagination]=\"odata().pagination\" (odataChanged)=\"updatePagination($event)\"></sftech-paginator>\r\n <div class=\"flex justify-end p-2\">\r\n <p-button (onClick)=\"openDisplay(undefined)\">\r\n <fa-icon [icon]=\"iconProvider.add\" class=\"sm:mr-2\"></fa-icon>\r\n <span class=\"hidden sm:inline\">Neuer Agent</span>\r\n </p-button>\r\n </div>\r\n }\r\n</div>\r\n\r\n" }]
|
|
268
|
-
}], ctorParameters: () => [] });
|
|
269
|
-
|
|
270
|
-
const agentsRoutes = [
|
|
271
|
-
{
|
|
272
|
-
path: '',
|
|
273
|
-
component: AgentsComponent,
|
|
274
|
-
children: [
|
|
275
|
-
{
|
|
276
|
-
path: '',
|
|
277
|
-
component: AgentsListComponent,
|
|
278
|
-
},
|
|
279
|
-
],
|
|
280
|
-
},
|
|
281
|
-
];
|
|
282
|
-
|
|
283
|
-
export { agentsRoutes };
|
|
284
|
-
//# sourceMappingURL=sftech-ng-orchestrator-agents.routes-DWOr4y4m.mjs.map
|