@sftech/ng-orchestrator 1.0.0 → 1.0.1

package/fesm2022/sftech-ng-orchestrator-chats.routes-CqFuG3l5.mjs

@@ -0,0 +1,743 @@
+import { authenticationGuard } from '@sftech/ng-auth';
+import { NgClass, DatePipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Inject, Injectable, input, EventEmitter, inject, effect, SecurityContext, Output, Component, signal, computed, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { BaseDbApiService, IconProvider, MappedApiError, FormErrorDisplayComponent, OData, OdataFilter, EFilterOperator, EFilterTypes, ESortDirection, BaseListComponent } from '@sftech/ng-shared';
+import { MessageService } from 'primeng/api';
+import { ButtonDirective } from 'primeng/button';
+import { DialogService } from 'primeng/dynamicdialog';
+import { Tooltip } from 'primeng/tooltip';
+import { map, catchError } from 'rxjs';
+import { A as AgentService, a as AgentRagUploadComponent } from './sftech-ng-orchestrator-agent-rag-upload.component-COPkzHNN.mjs';
+import { A as AgentRun, O as ORCHESTRATOR_CONFIGURATION, C as Chat, E as EAgentRunStatus, a as OrchestratorService, b as ChatMessage } from './sftech-ng-orchestrator-sftech-ng-orchestrator-C51KniGY.mjs';
+import * as i1 from '@angular/common/http';
+import { faNoteSticky, faCog, faCheck, faXmark, faSpinner, faClipboardCheck, faCircleQuestion, faBrain, faUser, faNetworkWired } from '@fortawesome/free-solid-svg-icons';
+import * as i1$1 from '@angular/forms';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
+import { AgentRunIconTextDataprovider as AgentRunIconTextDataprovider$1 } from 'libs/ng-orchestrator/src/lib/ng-orchestrator/chats/core/dataprovider/agent-run-icon-text.dataprovider';
+import { FloatLabel } from 'primeng/floatlabel';
+import { InputText } from 'primeng/inputtext';
+import { MarkdownComponent } from 'ngx-markdown';
+
+class AgentRunService extends BaseDbApiService {
+    http;
+    config;
+    constructor(http, config) {
+        super(http, config);
+        this.http = http;
+        this.config = config;
+        this.url = `${this.config.orchestratorDbUrl}/agent-runs`;
+    }
+    // biome-ignore lint/correctness/noUnusedVariables: <explanation>
+    insert(dto) {
+        throw new Error('Method not implemented');
+    }
+    // biome-ignore lint/correctness/noUnusedVariables: <explanation>
+    update(id, dto) {
+        throw new Error('Method not implemented');
+    }
+    // biome-ignore lint/correctness/noUnusedVariables: <explanation>
+    delete(id) {
+        throw new Error('Method not implemented');
+    }
+    getNewModel() {
+        return new AgentRun();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentRunService, deps: [{ token: i1.HttpClient }, { token: ORCHESTRATOR_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentRunService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentRunService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ORCHESTRATOR_CONFIGURATION]
+                }] }] });
+
+class ChatService extends BaseDbApiService {
+    http;
+    config;
+    constructor(http, config) {
+        super(http, config);
+        this.http = http;
+        this.config = config;
+        this.url = `${this.config.orchestratorDbUrl}/chats`;
+    }
+    odata(odataQuery) {
+        return this.http.get(`${this.url}/${odataQuery.toGetParameter()}`).pipe(map((response) => this.responseOdataMapping(response)), catchError((error) => {
+            return this.httpErrorToApiResponse(error);
+        }));
+    }
+    insert(dto) {
+        return this.http.post(this.url, dto).pipe(map((response) => this.responseMapping(response)), catchError((error) => {
+            return this.httpErrorToApiResponse(error);
+        }));
+    }
+    // biome-ignore lint/correctness/noUnusedVariables: <explanation>
+    update(id, dto) {
+        throw new Error('update of a chat is not allowed');
+    }
+    getNewModel() {
+        return new Chat();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatService, deps: [{ token: i1.HttpClient }, { token: ORCHESTRATOR_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ORCHESTRATOR_CONFIGURATION]
+                }] }] });
+
+class OrchestratorIconProvider extends IconProvider {
+    static agentRunStatusInit = faNoteSticky;
+    static agentRunStatusRunning = faCog;
+    static agentRunStatusCompleted = faCheck;
+    static agentRunStatusFailed = faXmark;
+    static agentRunStatusPrerun = faSpinner;
+    static agentRunStatusPostrun = faClipboardCheck;
+    static agentRunStatusClarify = faCircleQuestion;
+    static messageTypeAI = faBrain;
+    static messageTypeHuman = faUser;
+    static messageTypeSystem = faNetworkWired;
+}
+
+// biome-ignore lint/complexity/noStaticOnlyClass: <explanation>
+class AgentRunIconTextDataprovider {
+    static UNKNOWN_TEXT = 'Unbekannt';
+    static getTextForStatus(status) {
+        if (!status) {
+            return AgentRunIconTextDataprovider.UNKNOWN_TEXT;
+        }
+        switch (status) {
+            case EAgentRunStatus.INIT:
+                return 'Anlage';
+            case EAgentRunStatus.RUNNING:
+                return 'In Bearbeitung';
+            case EAgentRunStatus.COMPLETED:
+                return 'Abgeschlossen';
+            case EAgentRunStatus.FAILED:
+                return 'Fehlgeschlagen';
+            case EAgentRunStatus.CLARIFICATION_NEEDED:
+                return 'Rückfrage';
+            case EAgentRunStatus.PRERUNNING:
+                return 'Vorbereitung';
+            case EAgentRunStatus.POSTRUNNING:
+                return 'Nachbereitung';
+            default:
+                return AgentRunIconTextDataprovider.UNKNOWN_TEXT;
+        }
+    }
+    static getIconForStatus(status) {
+        if (!status) {
+            return IconProvider.unknown;
+        }
+        switch (status) {
+            case EAgentRunStatus.INIT:
+                return OrchestratorIconProvider.agentRunStatusInit;
+            case EAgentRunStatus.RUNNING:
+                return OrchestratorIconProvider.agentRunStatusRunning;
+            case EAgentRunStatus.COMPLETED:
+                return OrchestratorIconProvider.agentRunStatusCompleted;
+            case EAgentRunStatus.FAILED:
+                return OrchestratorIconProvider.agentRunStatusFailed;
+            case EAgentRunStatus.CLARIFICATION_NEEDED:
+                return OrchestratorIconProvider.agentRunStatusClarify;
+            case EAgentRunStatus.PRERUNNING:
+                return OrchestratorIconProvider.agentRunStatusPrerun;
+            case EAgentRunStatus.POSTRUNNING:
+                return OrchestratorIconProvider.agentRunStatusPostrun;
+            default:
+                return IconProvider.unknown;
+        }
+    }
+    static getIconClassesForStatus(status) {
+        if (!status) {
+            return AgentRunIconTextDataprovider.UNKNOWN_TEXT;
+        }
+        switch (status) {
+            case EAgentRunStatus.INIT:
+                return '';
+            case EAgentRunStatus.RUNNING:
+                return 'text-primary-600';
+            case EAgentRunStatus.COMPLETED:
+                return 'text-green-600';
+            case EAgentRunStatus.FAILED:
+                return 'text-red-600';
+            case EAgentRunStatus.CLARIFICATION_NEEDED:
+                return '';
+            case EAgentRunStatus.PRERUNNING:
+                return '';
+            case EAgentRunStatus.POSTRUNNING:
+                return '';
+            default:
+                return '';
+        }
+    }
+    static getIconForMessageType(messageType) {
+        switch (messageType) {
+            case 'system':
+                return OrchestratorIconProvider.messageTypeSystem;
+            case 'human':
+                return OrchestratorIconProvider.messageTypeHuman;
+            case 'ai':
+                return OrchestratorIconProvider.messageTypeAI;
+            default:
+                return IconProvider.unknown;
+        }
+    }
+}
+
+class AgentChatMessageHumanInputInitialComponent {
+    agent = input(...(ngDevMode ? [undefined, { debugName: "agent" }] : []));
+    agentRunIdReceived = new EventEmitter();
+    messageService = inject(MessageService);
+    orchestratorService = inject(OrchestratorService);
+    sanitizer = inject(DomSanitizer);
+    form = new FormGroup({});
+    isSubmitting = false;
+    iconTextMapper = AgentRunIconTextDataprovider$1;
+    iconProvider = IconProvider;
+    _agentChanged$ = effect(() => {
+        this.agent()
+            .llmUserPrompt?.template.match(/{{(.*?)}}/g)
+            ?.forEach((m) => {
+            const key = m.slice(2, -2);
+            this.form.addControl(key, new FormControl('', [Validators.required]));
+        });
+    }, ...(ngDevMode ? [{ debugName: "_agentChanged$" }] : []));
+    run() {
+        if (this.form.invalid || this.isSubmitting) {
+            // Mark all fields as touched to show validation errors
+            Object.keys(this.form.controls).forEach((key) => {
+                this.form.get(key)?.markAsTouched();
+            });
+            return;
+        }
+        this.isSubmitting = true;
+        this.orchestratorService
+            .runAgent({
+            agentIdentifier: this.agent().identifier,
+            userInput: this.form.value,
+        })
+            .subscribe({
+            next: (res) => {
+                if (res instanceof MappedApiError) {
+                    this.messageService.add({
+                        severity: 'error',
+                        summary: 'Fehler',
+                        detail: res.messages.join(' | '),
+                    });
+                    this.isSubmitting = false;
+                    return;
+                }
+                this.agentRunIdReceived.emit(res);
+                this.isSubmitting = false;
+            },
+            error: () => {
+                this.isSubmitting = false;
+            },
+        });
+    }
+    getInputFormControlNames() {
+        return Object.keys(this.form.controls);
+    }
+    formatControlName(name) {
+        // Convert camelCase or snake_case to readable format
+        return name
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/_/g, ' ')
+            .trim()
+            .split(' ')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+            .join(' ');
+    }
+    getFormattedTemplate() {
+        const template = this.agent().llmUserPrompt?.template || '';
+        // First sanitize the template to remove any malicious content
+        const sanitizedTemplate = this.sanitizer.sanitize(SecurityContext.HTML, template) || '';
+        // Replace {{variable}} with highlighted spans (variables are now safe after sanitization)
+        const formatted = sanitizedTemplate.replace(/\{\{(.*?)\}\}/g, '<span class="inline-flex items-center px-2 py-1 mx-1 bg-primary-100 text-primary-700 rounded-md font-semibold text-sm border border-primary-200">$1</span>');
+        return this.sanitizer.sanitize(SecurityContext.HTML, formatted);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentChatMessageHumanInputInitialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AgentChatMessageHumanInputInitialComponent, isStandalone: true, selector: "sftech-agent-chat-message-human-input-initial", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { agentRunIdReceived: "agentRunIdReceived" }, ngImport: i0, template: "<div class=\"my-4 max-w-4xl mx-auto\">\n  <!-- Welcome Card -->\n  <div class=\"bg-gradient-to-br from-primary-50 to-white rounded-2xl shadow-lg border-2 border-primary-200 p-6 mb-4\">\n    <div class=\"flex items-start gap-4\">\n      <div class=\"flex-shrink-0\">\n        <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center text-white shadow-md\">\n          <fa-icon [icon]=\"iconTextMapper.getIconForMessageType('human')\" size=\"lg\"></fa-icon>\n        </div>\n      </div>\n      <div class=\"flex-grow\">\n        <h3 class=\"text-xl font-bold text-gray-900 mb-2 flex items-center gap-2\">\n          <fa-icon [icon]=\"iconProvider.sparkles\" class=\"text-primary-600\"></fa-icon>\n          Chat starten mit {{ agent()!.name }}\n        </h3>\n        <p class=\"text-gray-600 text-sm mb-4\">\n          F\u00FClle die Felder aus, um die Konversation zu beginnen. Der Agent wird basierend auf deinen Eingaben antworten.\n        </p>\n\n        <!-- Template Display -->\n        @if (agent()!.llmUserPrompt?.template) {\n          <div class=\"bg-white rounded-lg p-4 border border-primary-100 shadow-sm\">\n            <div class=\"flex items-center gap-2 mb-2\">\n              <fa-icon [icon]=\"iconProvider.message\" class=\"text-primary-600 text-sm\"></fa-icon>\n              <span class=\"text-xs font-semibold text-primary-700 uppercase tracking-wide\">Prompt Template</span>\n            </div>\n            <div class=\"text-gray-700 leading-relaxed\" [innerHTML]=\"getFormattedTemplate()\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- Input Form Card -->\n  <div class=\"bg-white rounded-2xl shadow-lg border border-gray-200 p-6\">\n    <form [formGroup]=\"form!\" (ngSubmit)=\"run()\">\n      <!-- Input Fields -->\n      @if (getInputFormControlNames().length > 0) {\n        <div class=\"mb-6\">\n          <div class=\"flex items-center gap-2 mb-4\">\n            <fa-icon [icon]=\"iconProvider.documentAdd\" class=\"text-gray-600\"></fa-icon>\n            <h4 class=\"font-semibold text-gray-900\">Erforderliche Informationen</h4>\n          </div>\n          <div class=\"space-y-4\">\n            @for (controlName of getInputFormControlNames(); track controlName) {\n              <div class=\"relative\">\n                <p-floatlabel variant=\"in\" class=\"w-full\">\n                  <input\n                    type=\"text\"\n                    id=\"{{ controlName }}\"\n                    formControlName=\"{{ controlName }}\"\n                    pInputText\n                    [class.border-red-500]=\"form!.get(controlName)?.invalid && form!.get(controlName)?.touched\"\n                    class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-all bg-white\"\n                    [tabindex]=\"getInputFormControlNames().indexOf(controlName) + 1\"\n                    />\n                    <label for=\"{{ controlName }}\" class=\"text-gray-600\">\n                      {{ formatControlName(controlName) }}\n                    </label>\n                  </p-floatlabel>\n                  <sftech-form-error-display\n                    [control]=\"form!.get(controlName)!\"\n                    [label]=\"formatControlName(controlName)\"\n                  ></sftech-form-error-display>\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Submit Button -->\n        <div class=\"flex items-center justify-between pt-4 border-t border-gray-100\">\n          <div class=\"text-sm text-gray-500\">\n            <fa-icon [icon]=\"iconProvider.sparkles\" class=\"mr-1\"></fa-icon>\n            @if (!isSubmitting) {\n              <span>Bereit zum Senden</span>\n            }\n            @if (isSubmitting) {\n              <span>Wird verarbeitet...</span>\n            }\n          </div>\n          <button\n            type=\"submit\"\n            [disabled]=\"form!.invalid || isSubmitting\"\n            class=\"px-6 py-3 bg-gradient-to-r from-primary-600 to-primary-700 text-white font-semibold rounded-xl shadow-md hover:shadow-lg hover:from-primary-700 hover:to-primary-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2\"\n            [tabindex]=\"getInputFormControlNames().length + 1\"\n            >\n            @if (isSubmitting) {\n              <fa-icon [icon]=\"iconProvider.loading\" [animation]=\"'spin'\"></fa-icon>\n              <span>Wird gesendet...</span>\n            } @else {\n              <fa-icon [icon]=\"iconProvider.sparkles\"></fa-icon>\n              <span>Chat starten</span>\n            }\n          </button>\n        </div>\n      </form>\n    </div>\n  </div>", styles: [""], dependencies: [{ 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: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: FormErrorDisplayComponent, selector: "sftech-form-error-display", inputs: ["control", "label"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentChatMessageHumanInputInitialComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sftech-agent-chat-message-human-input-initial', imports: [FaIconComponent, FloatLabel, FormErrorDisplayComponent, InputText, ReactiveFormsModule], template: "<div class=\"my-4 max-w-4xl mx-auto\">\n  <!-- Welcome Card -->\n  <div class=\"bg-gradient-to-br from-primary-50 to-white rounded-2xl shadow-lg border-2 border-primary-200 p-6 mb-4\">\n    <div class=\"flex items-start gap-4\">\n      <div class=\"flex-shrink-0\">\n        <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center text-white shadow-md\">\n          <fa-icon [icon]=\"iconTextMapper.getIconForMessageType('human')\" size=\"lg\"></fa-icon>\n        </div>\n      </div>\n      <div class=\"flex-grow\">\n        <h3 class=\"text-xl font-bold text-gray-900 mb-2 flex items-center gap-2\">\n          <fa-icon [icon]=\"iconProvider.sparkles\" class=\"text-primary-600\"></fa-icon>\n          Chat starten mit {{ agent()!.name }}\n        </h3>\n        <p class=\"text-gray-600 text-sm mb-4\">\n          F\u00FClle die Felder aus, um die Konversation zu beginnen. Der Agent wird basierend auf deinen Eingaben antworten.\n        </p>\n\n        <!-- Template Display -->\n        @if (agent()!.llmUserPrompt?.template) {\n          <div class=\"bg-white rounded-lg p-4 border border-primary-100 shadow-sm\">\n            <div class=\"flex items-center gap-2 mb-2\">\n              <fa-icon [icon]=\"iconProvider.message\" class=\"text-primary-600 text-sm\"></fa-icon>\n              <span class=\"text-xs font-semibold text-primary-700 uppercase tracking-wide\">Prompt Template</span>\n            </div>\n            <div class=\"text-gray-700 leading-relaxed\" [innerHTML]=\"getFormattedTemplate()\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- Input Form Card -->\n  <div class=\"bg-white rounded-2xl shadow-lg border border-gray-200 p-6\">\n    <form [formGroup]=\"form!\" (ngSubmit)=\"run()\">\n      <!-- Input Fields -->\n      @if (getInputFormControlNames().length > 0) {\n        <div class=\"mb-6\">\n          <div class=\"flex items-center gap-2 mb-4\">\n            <fa-icon [icon]=\"iconProvider.documentAdd\" class=\"text-gray-600\"></fa-icon>\n            <h4 class=\"font-semibold text-gray-900\">Erforderliche Informationen</h4>\n          </div>\n          <div class=\"space-y-4\">\n            @for (controlName of getInputFormControlNames(); track controlName) {\n              <div class=\"relative\">\n                <p-floatlabel variant=\"in\" class=\"w-full\">\n                  <input\n                    type=\"text\"\n                    id=\"{{ controlName }}\"\n                    formControlName=\"{{ controlName }}\"\n                    pInputText\n                    [class.border-red-500]=\"form!.get(controlName)?.invalid && form!.get(controlName)?.touched\"\n                    class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-all bg-white\"\n                    [tabindex]=\"getInputFormControlNames().indexOf(controlName) + 1\"\n                    />\n                    <label for=\"{{ controlName }}\" class=\"text-gray-600\">\n                      {{ formatControlName(controlName) }}\n                    </label>\n                  </p-floatlabel>\n                  <sftech-form-error-display\n                    [control]=\"form!.get(controlName)!\"\n                    [label]=\"formatControlName(controlName)\"\n                  ></sftech-form-error-display>\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Submit Button -->\n        <div class=\"flex items-center justify-between pt-4 border-t border-gray-100\">\n          <div class=\"text-sm text-gray-500\">\n            <fa-icon [icon]=\"iconProvider.sparkles\" class=\"mr-1\"></fa-icon>\n            @if (!isSubmitting) {\n              <span>Bereit zum Senden</span>\n            }\n            @if (isSubmitting) {\n              <span>Wird verarbeitet...</span>\n            }\n          </div>\n          <button\n            type=\"submit\"\n            [disabled]=\"form!.invalid || isSubmitting\"\n            class=\"px-6 py-3 bg-gradient-to-r from-primary-600 to-primary-700 text-white font-semibold rounded-xl shadow-md hover:shadow-lg hover:from-primary-700 hover:to-primary-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2\"\n            [tabindex]=\"getInputFormControlNames().length + 1\"\n            >\n            @if (isSubmitting) {\n              <fa-icon [icon]=\"iconProvider.loading\" [animation]=\"'spin'\"></fa-icon>\n              <span>Wird gesendet...</span>\n            } @else {\n              <fa-icon [icon]=\"iconProvider.sparkles\"></fa-icon>\n              <span>Chat starten</span>\n            }\n          </button>\n        </div>\n      </form>\n    </div>\n  </div>" }]
+        }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: false }] }], agentRunIdReceived: [{
+                type: Output
+            }] } });
+
+class AgentChatMessageHumanInputComponent {
+    agent = input(...(ngDevMode ? [undefined, { debugName: "agent" }] : []));
+    agentRunId = input(...(ngDevMode ? [undefined, { debugName: "agentRunId" }] : []));
+    agentRunIdReceived = new EventEmitter();
+    messageService = inject(MessageService);
+    orchestratorService = inject(OrchestratorService);
+    form = new FormGroup({
+        message: new FormControl('', [Validators.required]),
+    });
+    isSubmitting = false;
+    iconTextMapper = AgentRunIconTextDataprovider$1;
+    iconProvider = IconProvider;
+    run() {
+        if (this.form.invalid || this.isSubmitting) {
+            this.form.get('message')?.markAsTouched();
+            return;
+        }
+        this.isSubmitting = true;
+        this.form.get('message')?.disable();
+        const message = this.form.value.message;
+        this.orchestratorService.chatAgent(this.agentRunId(), message).subscribe({
+            next: (res) => {
+                if (res instanceof MappedApiError) {
+                    this.messageService.add({ severity: 'error', summary: 'Fehler', detail: res.messages.join('|') });
+                    this.form.get('message')?.enable();
+                    this.isSubmitting = false;
+                    return;
+                }
+                this.form.reset();
+                this.form.get('message')?.enable();
+                this.isSubmitting = false;
+                this.agentRunIdReceived.emit(res);
+            },
+            error: () => {
+                this.form.get('message')?.enable();
+                this.isSubmitting = false;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentChatMessageHumanInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AgentChatMessageHumanInputComponent, isStandalone: true, selector: "sftech-agent-chat-message-human-input", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: false, transformFunction: null }, agentRunId: { classPropertyName: "agentRunId", publicName: "agentRunId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { agentRunIdReceived: "agentRunIdReceived" }, ngImport: i0, template: "<div class=\"my-4 max-w-4xl mx-auto\">\n    <div class=\"bg-white rounded-2xl shadow-lg border border-gray-200 p-6\">\n        <form [formGroup]=\"form\" (ngSubmit)=\"run()\">\n            <div class=\"flex gap-4 items-start\">\n                <div class=\"flex-shrink-0\">\n                    <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center shadow-md\">\n                        <fa-icon [icon]=\"iconTextMapper.getIconForMessageType('human')\" size=\"lg\" class=\"text-white\"></fa-icon>\n                    </div>\n                </div>\n                <div class=\"flex-grow space-y-4\">\n                    <div class=\"relative\">\n                        <p-floatlabel variant=\"in\" class=\"w-full\">\n                            <input\n                                type=\"text\"\n                                id=\"message\"\n                                formControlName=\"message\"\n                                pInputText\n                                [class.border-red-500]=\"form.get('message')?.invalid && form.get('message')?.touched\"\n                                class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-all bg-white\"\n                            />\n                            <label for=\"message\" class=\"text-gray-600\">Deine Nachricht</label>\n                        </p-floatlabel>\n                        <sftech-form-error-display\n                            [control]=\"form.get('message')!\"\n                            label=\"Nachricht\"\n                        ></sftech-form-error-display>\n                    </div>\n                    <div class=\"flex items-center justify-between\">\n                        <div class=\"text-sm text-gray-500\">\n                            <fa-icon [icon]=\"iconProvider.message\" class=\"mr-1\"></fa-icon>\n                            @if (!isSubmitting) {\n                                <span>Bereit zum Senden</span>\n                            } @else {\n                                <span>Wird verarbeitet...</span>\n                            }\n                        </div>\n                        <button\n                            type=\"submit\"\n                            [disabled]=\"form.invalid || isSubmitting\"\n                            class=\"px-6 py-3 bg-gradient-to-r from-primary-600 to-primary-700 text-white font-semibold rounded-xl shadow-md hover:shadow-lg hover:from-primary-700 hover:to-primary-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2\"\n                        >\n                            @if (isSubmitting) {\n                                <fa-icon [icon]=\"iconProvider.loading\" [animation]=\"'spin'\"></fa-icon>\n                                <span>Wird gesendet...</span>\n                            } @else {\n                                <fa-icon [icon]=\"iconProvider.arrowRight\"></fa-icon>\n                                <span>Senden</span>\n                            }\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </form>\n    </div>\n</div>\n", styles: [""], dependencies: [{ 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: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: FormErrorDisplayComponent, selector: "sftech-form-error-display", inputs: ["control", "label"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentChatMessageHumanInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sftech-agent-chat-message-human-input', imports: [FaIconComponent, FloatLabel, FormErrorDisplayComponent, InputText, ReactiveFormsModule], template: "<div class=\"my-4 max-w-4xl mx-auto\">\n    <div class=\"bg-white rounded-2xl shadow-lg border border-gray-200 p-6\">\n        <form [formGroup]=\"form\" (ngSubmit)=\"run()\">\n            <div class=\"flex gap-4 items-start\">\n                <div class=\"flex-shrink-0\">\n                    <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center shadow-md\">\n                        <fa-icon [icon]=\"iconTextMapper.getIconForMessageType('human')\" size=\"lg\" class=\"text-white\"></fa-icon>\n                    </div>\n                </div>\n                <div class=\"flex-grow space-y-4\">\n                    <div class=\"relative\">\n                        <p-floatlabel variant=\"in\" class=\"w-full\">\n                            <input\n                                type=\"text\"\n                                id=\"message\"\n                                formControlName=\"message\"\n                                pInputText\n                                [class.border-red-500]=\"form.get('message')?.invalid && form.get('message')?.touched\"\n                                class=\"w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-all bg-white\"\n                            />\n                            <label for=\"message\" class=\"text-gray-600\">Deine Nachricht</label>\n                        </p-floatlabel>\n                        <sftech-form-error-display\n                            [control]=\"form.get('message')!\"\n                            label=\"Nachricht\"\n                        ></sftech-form-error-display>\n                    </div>\n                    <div class=\"flex items-center justify-between\">\n                        <div class=\"text-sm text-gray-500\">\n                            <fa-icon [icon]=\"iconProvider.message\" class=\"mr-1\"></fa-icon>\n                            @if (!isSubmitting) {\n                                <span>Bereit zum Senden</span>\n                            } @else {\n                                <span>Wird verarbeitet...</span>\n                            }\n                        </div>\n                        <button\n                            type=\"submit\"\n                            [disabled]=\"form.invalid || isSubmitting\"\n                            class=\"px-6 py-3 bg-gradient-to-r from-primary-600 to-primary-700 text-white font-semibold rounded-xl shadow-md hover:shadow-lg hover:from-primary-700 hover:to-primary-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2\"\n                        >\n                            @if (isSubmitting) {\n                                <fa-icon [icon]=\"iconProvider.loading\" [animation]=\"'spin'\"></fa-icon>\n                                <span>Wird gesendet...</span>\n                            } @else {\n                                <fa-icon [icon]=\"iconProvider.arrowRight\"></fa-icon>\n                                <span>Senden</span>\n                            }\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </form>\n    </div>\n</div>\n" }]
+        }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: false }] }], agentRunId: [{ type: i0.Input, args: [{ isSignal: true, alias: "agentRunId", required: false }] }], agentRunIdReceived: [{
+                type: Output
+            }] } });
+
+class AgentChatMessageComponent {
+    message = input('message', ...(ngDevMode ? [{ debugName: "message" }] : []));
+    type = input('type', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    iconTextMapper = AgentRunIconTextDataprovider;
+    extractJson(message) {
+        const jsonMatch = message.match(/```json\s*([\s\S]*?)\s*```/);
+        if (jsonMatch && jsonMatch[1]) {
+            try {
+                const data = JSON.parse(jsonMatch[1]);
+                const md = this._toMarkdownFromJson(data);
+                return md;
+            }
+            catch {
+                return 'Invalid JSON';
+            }
+        }
+        return 'No JSON found';
+    }
+    _toMarkdownFromJson(obj) {
+        let md = '';
+        for (const key of Object.keys(obj)) {
+            const value = obj[key];
+            // Überschrift für jede Kategorie
+            md += `\n### ${key}\n\n`;
+            if (Array.isArray(value) && value.length && typeof value[0] === 'object') {
+                // Tabellen-Header
+                const headers = Object.keys(value[0]);
+                md += `| ${headers.join(' | ')} |\n`;
+                md += `| ${headers.map(() => '---').join(' | ')} |\n`;
+                // Tabellen-Zeilen
+                for (const row of value) {
+                    md += `| ${headers.map((h) => row[h]).join(' | ')} |\n`;
+                }
+                md += '\n';
+            }
+            else if (typeof value === 'object') {
+                // Rekursiver Aufruf bei verschachtelten Objekten
+                md += this._toMarkdownFromJson(value);
+            }
+            else {
+                // Einfaches Feld
+                md += `- **${key}:** ${value}\n`;
+            }
+        }
+        return md;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AgentChatMessageComponent, isStandalone: true, selector: "sftech-agent-chat-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (type() === 'ai_loading') {\n    <div class=\"my-2 sm:my-4 max-w-4xl mx-auto\">\n        <div class=\"bg-white rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 p-4 sm:p-6\">\n            <div class=\"flex items-start gap-3 sm:gap-4\">\n                <div class=\"flex-shrink-0\">\n                    <div class=\"w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-md\">\n                        <fa-icon [icon]=\"iconTextMapper.getIconForMessageType('ai')\" class=\"text-white text-sm sm:text-lg\"></fa-icon>\n                    </div>\n                </div>\n                <div class=\"flex items-center space-x-3 text-gray-600 mt-1 sm:mt-2\">\n                    <span class=\"text-xs sm:text-sm font-medium\">Die Antwort wird ermittelt...</span>\n                    <div class=\"flex space-x-1\">\n                        <div class=\"w-2 h-2 sm:w-2.5 sm:h-2.5 bg-green-600 rounded-full animate-bounceDelay\"></div>\n                        <div class=\"w-2 h-2 sm:w-2.5 sm:h-2.5 bg-green-600 rounded-full animate-bounceDelay [animation-delay:-0.32s]\"></div>\n                        <div class=\"w-2 h-2 sm:w-2.5 sm:h-2.5 bg-green-600 rounded-full animate-bounceDelay [animation-delay:-0.16s]\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n}\n\n@else if (type() === 'ai_failed') {\n    <div class=\"my-2 sm:my-4 max-w-4xl mx-auto\">\n        <div class=\"bg-white rounded-xl sm:rounded-2xl shadow-lg border-2 border-red-300 p-4 sm:p-6\">\n            <div class=\"flex items-start gap-3 sm:gap-4\">\n                <div class=\"flex-shrink-0\">\n                    <div class=\"w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center shadow-md\">\n                        <fa-icon [icon]=\"iconTextMapper.getIconForMessageType('ai')\" class=\"text-white text-sm sm:text-lg\"></fa-icon>\n                    </div>\n                </div>\n                <div class=\"flex-grow\">\n                    <div class=\"text-xs sm:text-sm text-red-700 font-medium\">\n                        {{ message() }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n}\n\n@else {\n    <div class=\"my-2 sm:my-4 max-w-4xl mx-auto\">\n        <div\n            class=\"rounded-xl sm:rounded-2xl shadow-lg p-3 sm:p-6 flex gap-3 sm:gap-4 border-2\"\n            [ngClass]=\"{\n                'bg-white border-gray-200': type() === 'ai',\n                'bg-primary-50 border-primary-200 flex-row-reverse': type() === 'human',\n                'bg-yellow-50 border-yellow-300': type() === 'system'\n            }\"\n        >\n            <div class=\"flex-shrink-0\">\n                <div\n                    class=\"w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl flex items-center justify-center shadow-md bg-gradient-to-br\"\n                    [ngClass]=\"{\n                        'from-green-500 to-green-600': type() === 'ai',\n                        'from-primary-500 to-primary-600': type() === 'human',\n                        'from-yellow-500 to-yellow-600': type() === 'system'\n                    }\"\n                >\n                    <fa-icon\n                        [icon]=\"iconTextMapper.getIconForMessageType(type())\"\n                        class=\"text-white text-sm sm:text-lg\"\n                    ></fa-icon>\n                </div>\n            </div>\n\n            <div\n                class=\"flex-grow text-xs sm:text-sm leading-relaxed min-w-0\"\n                [ngClass]=\"{\n                    'text-left': type() === 'ai' || type() === 'system',\n                    'text-right': type() === 'human'\n                }\"\n            >\n                @if (message().includes('```json')) {\n                    <div class=\"p-2 sm:p-4 bg-gray-50 rounded-lg sm:rounded-xl border border-gray-200 overflow-x-auto\">\n                        <markdown class=\"markdown-body\">{{ extractJson(message()) }}</markdown>\n                    </div>\n                } @else {\n                    <div class=\"text-gray-700 break-words\">\n                        <markdown class=\"markdown-body\">{{ message() }}</markdown>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n}", styles: ["@layer utilities{@keyframes bounceDelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.animate-bounceDelay{animation:bounceDelay 1.4s infinite ease-in-out both}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentChatMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sftech-agent-chat-message', imports: [NgClass, FaIconComponent, MarkdownComponent], template: "@if (type() === 'ai_loading') {\n    <div class=\"my-2 sm:my-4 max-w-4xl mx-auto\">\n        <div class=\"bg-white rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 p-4 sm:p-6\">\n            <div class=\"flex items-start gap-3 sm:gap-4\">\n                <div class=\"flex-shrink-0\">\n                    <div class=\"w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-md\">\n                        <fa-icon [icon]=\"iconTextMapper.getIconForMessageType('ai')\" class=\"text-white text-sm sm:text-lg\"></fa-icon>\n                    </div>\n                </div>\n                <div class=\"flex items-center space-x-3 text-gray-600 mt-1 sm:mt-2\">\n                    <span class=\"text-xs sm:text-sm font-medium\">Die Antwort wird ermittelt...</span>\n                    <div class=\"flex space-x-1\">\n                        <div class=\"w-2 h-2 sm:w-2.5 sm:h-2.5 bg-green-600 rounded-full animate-bounceDelay\"></div>\n                        <div class=\"w-2 h-2 sm:w-2.5 sm:h-2.5 bg-green-600 rounded-full animate-bounceDelay [animation-delay:-0.32s]\"></div>\n                        <div class=\"w-2 h-2 sm:w-2.5 sm:h-2.5 bg-green-600 rounded-full animate-bounceDelay [animation-delay:-0.16s]\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n}\n\n@else if (type() === 'ai_failed') {\n    <div class=\"my-2 sm:my-4 max-w-4xl mx-auto\">\n        <div class=\"bg-white rounded-xl sm:rounded-2xl shadow-lg border-2 border-red-300 p-4 sm:p-6\">\n            <div class=\"flex items-start gap-3 sm:gap-4\">\n                <div class=\"flex-shrink-0\">\n                    <div class=\"w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center shadow-md\">\n                        <fa-icon [icon]=\"iconTextMapper.getIconForMessageType('ai')\" class=\"text-white text-sm sm:text-lg\"></fa-icon>\n                    </div>\n                </div>\n                <div class=\"flex-grow\">\n                    <div class=\"text-xs sm:text-sm text-red-700 font-medium\">\n                        {{ message() }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n}\n\n@else {\n    <div class=\"my-2 sm:my-4 max-w-4xl mx-auto\">\n        <div\n            class=\"rounded-xl sm:rounded-2xl shadow-lg p-3 sm:p-6 flex gap-3 sm:gap-4 border-2\"\n            [ngClass]=\"{\n                'bg-white border-gray-200': type() === 'ai',\n                'bg-primary-50 border-primary-200 flex-row-reverse': type() === 'human',\n                'bg-yellow-50 border-yellow-300': type() === 'system'\n            }\"\n        >\n            <div class=\"flex-shrink-0\">\n                <div\n                    class=\"w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl flex items-center justify-center shadow-md bg-gradient-to-br\"\n                    [ngClass]=\"{\n                        'from-green-500 to-green-600': type() === 'ai',\n                        'from-primary-500 to-primary-600': type() === 'human',\n                        'from-yellow-500 to-yellow-600': type() === 'system'\n                    }\"\n                >\n                    <fa-icon\n                        [icon]=\"iconTextMapper.getIconForMessageType(type())\"\n                        class=\"text-white text-sm sm:text-lg\"\n                    ></fa-icon>\n                </div>\n            </div>\n\n            <div\n                class=\"flex-grow text-xs sm:text-sm leading-relaxed min-w-0\"\n                [ngClass]=\"{\n                    'text-left': type() === 'ai' || type() === 'system',\n                    'text-right': type() === 'human'\n                }\"\n            >\n                @if (message().includes('```json')) {\n                    <div class=\"p-2 sm:p-4 bg-gray-50 rounded-lg sm:rounded-xl border border-gray-200 overflow-x-auto\">\n                        <markdown class=\"markdown-body\">{{ extractJson(message()) }}</markdown>\n                    </div>\n                } @else {\n                    <div class=\"text-gray-700 break-words\">\n                        <markdown class=\"markdown-body\">{{ message() }}</markdown>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n}", styles: ["@layer utilities{@keyframes bounceDelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.animate-bounceDelay{animation:bounceDelay 1.4s infinite ease-in-out both}}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+
+class AgentChatComponent {
+    activeRoute = inject(ActivatedRoute);
+    router = inject(Router);
+    agentService = inject(AgentService);
+    agentRunService = inject(AgentRunService);
+    chatService = inject(ChatService);
+    orchestratorService = inject(OrchestratorService);
+    messageService = inject(MessageService);
+    dialogService = inject(DialogService);
+    agent;
+    agentRuns = signal(undefined, ...(ngDevMode ? [{ debugName: "agentRuns" }] : []));
+    selectedAgentRun = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedAgentRun" }] : []));
+    selectedAgent = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedAgent" }] : []));
+    chatContainer;
+    iconProvider = IconProvider;
+    iconTextMapper = AgentRunIconTextDataprovider;
+    agentRunStatus = EAgentRunStatus;
+    // Mobile sidebar visibility
+    sidebarVisible = signal(false, ...(ngDevMode ? [{ debugName: "sidebarVisible" }] : []));
+    subscriptions = [];
+    toggleSidebar() {
+        this.sidebarVisible.update((v) => !v);
+    }
+    closeSidebar() {
+        this.sidebarVisible.set(false);
+    }
+    selectedAgentRunChanged$ = effect(() => {
+        if (!this.selectedAgentRun()) {
+            return;
+        }
+        this._loadChat();
+    }, ...(ngDevMode ? [{ debugName: "selectedAgentRunChanged$" }] : []));
+    chatMessagesChanged$ = effect(() => {
+        const messages = this.selectedAgentRun()?.chat?.messages;
+        if (messages && messages.length > 0) {
+            this.startScrollingStrategy();
+        }
+    }, ...(ngDevMode ? [{ debugName: "chatMessagesChanged$" }] : []));
+    loading = computed(() => {
+        if (!this.selectedAgentRun()?.status) {
+            return false;
+        }
+        return ![EAgentRunStatus.COMPLETED, EAgentRunStatus.CLARIFICATION_NEEDED, EAgentRunStatus.FAILED, EAgentRunStatus.INIT].includes(this.selectedAgentRun().status);
+    }, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    ngOnInit() {
+        const agentId = Number(this.activeRoute.snapshot.paramMap.get('agentId'));
+        const agentRunId = Number(this.activeRoute.snapshot.paramMap.get('agentRunId'));
+        if (agentId) {
+            const odata = new OData();
+            odata.filter.addAnd(new OdataFilter('agentId', agentId, EFilterOperator.EQUALS, EFilterTypes.NUMERIC));
+            odata.order.column = 'updatedAt';
+            odata.order.direction = ESortDirection.DESC;
+            this.agentRunService
+                .odata(odata)
+                .pipe(map((res) => {
+                if (res instanceof MappedApiError) {
+                    this.messageService.add({
+                        severity: 'error',
+                        summary: 'Error',
+                        detail: 'Fehler beim Laden der Chat-Daten',
+                    });
+                    throw new Error(res.messages.join('|'));
+                }
+                this.selectedAgentRun.set(res.data.items.find((ar) => agentRunId == ar.id));
+                this.agentRuns.set(res.data.items);
+            }))
+                .subscribe();
+            this.agentService.get(agentId, true).subscribe((res) => {
+                if (res instanceof MappedApiError) {
+                    this.messageService.add({
+                        severity: 'error',
+                        summary: 'Error',
+                        detail: 'Fehler beim Laden des Agenten-Daten',
+                    });
+                    throw new Error(res.messages.join('|'));
+                }
+                this.selectedAgent.set(res.data);
+            });
+        }
+        else {
+            this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Fehler beim Laden des Agenten' });
+            // this.router.navigate(['../chats']);
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+    }
+    startNewRun() {
+        if (!this.selectedAgent()) {
+            return;
+        }
+        const agentRun = new AgentRun();
+        agentRun.agentId = this.selectedAgent().id;
+        agentRun.agent = this.selectedAgent();
+        agentRun.status = EAgentRunStatus.INIT;
+        agentRun.createdAt = new Date();
+        agentRun.chat = new Chat();
+        const systemContextMessage = new ChatMessage();
+        systemContextMessage.messageType = 'system';
+        systemContextMessage.message = `${this.selectedAgent().llmSystemPrompt?.template}Antworte nach folgender Spezifikation:<br>${this.selectedAgent()?.answerSpecification}`;
+        agentRun.chat.messages = [systemContextMessage];
+        this.selectedAgentRun.set(agentRun);
+    }
+    selectAgentRun(agentRun) {
+        this.selectedAgentRun.set(agentRun);
+        if (this.selectedAgentRun().id) {
+            this._setRelativeUrl();
+        }
+    }
+    startObservingAgentRun(agentRunId) {
+        this.subscriptions.push(this.orchestratorService.observeAgentRun(agentRunId).subscribe({
+            next: (update) => {
+                if (update instanceof MappedApiError) {
+                    this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Fehler beim Beobachten des Agentenlaufs' });
+                    return;
+                }
+                this.selectedAgentRun.update((agentRun) => {
+                    return this._mapUpdateOnAgentRun(agentRun, update);
+                });
+                if (update.id && this.agentRuns()?.filter((ars) => ars.id === update.id).length === 0) {
+                    this.agentRuns.update((ars) => {
+                        ars?.unshift(update);
+                        return ars;
+                    });
+                }
+            },
+            error: () => {
+                this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Fehler beim Beobachten des Agentenlaufs' });
+            },
+            complete: () => { },
+        }));
+    }
+    goBack() {
+        const index = this.router.url.indexOf('/agent/');
+        const result = this.router.url.substring(0, index);
+        this.router.navigateByUrl(result);
+    }
+    _loadChat() {
+        if (!this.selectedAgentRun() || !this.selectedAgentRun().chatId) {
+            return;
+        }
+        this.chatService.get(this.selectedAgentRun().chatId, true).subscribe((res) => {
+            if (res instanceof MappedApiError) {
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'Fehler beim Laden der Chat-Daten',
+                });
+                return;
+            }
+            this.selectedAgentRun.update((ar) => {
+                ar.chat = res.data;
+                return ar;
+            });
+            this.startScrollingStrategy();
+        });
+    }
+    _setRelativeUrl() {
+        let relativeUrl;
+        if (this.router.url.includes('/r/')) {
+            const index = this.router.url.indexOf('/r/') + 3; // 3 = Länge von "/r/"
+            const result = this.router.url.substring(0, index);
+            relativeUrl = `${result}${this.selectedAgentRun().id}`;
+        }
+        else {
+            relativeUrl = `r/${this.selectedAgentRun().id}`;
+        }
+        this.router.navigate([relativeUrl], {
+            relativeTo: this.activeRoute,
+            replaceUrl: true, // überschreibt den Verlauf
+            skipLocationChange: false, // false = URL sichtbar, true = nur intern
+        });
+    }
+    _mapUpdateOnAgentRun(agentRun, update) {
+        if (!agentRun.chat?.messages && !update.chat?.messages) {
+            return update;
+        }
+        if (!update.chat && agentRun.chat) {
+            update.chat = agentRun.chat;
+        }
+        if (agentRun.chat?.messages && update.chat.messages.length <= agentRun.chat.messages.length) {
+            update.chat.messages = agentRun.chat.messages;
+        }
+        return update;
+    }
+    openRagUploadModal() {
+        const agent = this.selectedAgent();
+        const chatId = this.selectedAgentRun()?.chatId;
+        if (!agent) {
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Fehler',
+                detail: 'Agent nicht gefunden',
+            });
+            return;
+        }
+        const header = chatId ? 'RAG-Dokumente für Chat hochladen' : 'RAG-Dokumente für Agent hochladen';
+        this.dialogService.open(AgentRagUploadComponent, {
+            inputValues: { agentId: agent.id, chatId },
+            focusOnShow: false,
+            modal: true,
+            dismissableMask: true,
+            header: header,
+            width: '50%',
+            contentStyle: { overflow: 'auto' },
+        });
+    }
+    startScrollingStrategy() {
+        this.scrollToBottom();
+        // Fallback-Scrolls für langsames Markdown-Rendering
+        [100, 500, 1000, 2000].forEach((delay) => {
+            setTimeout(() => this.scrollToBottom(), delay);
+        });
+    }
+    scrollToBottom() {
+        if (!this.chatContainer?.nativeElement) {
+            return;
+        }
+        const container = this.chatContainer.nativeElement;
+        container.scrollTop = container.scrollHeight - container.clientHeight;
+    }
+    getFirstUserMessage(agentRun) {
+        if (!agentRun.chat?.messages || agentRun.chat.messages.length === 0) {
+            return 'Neuer Chat';
+        }
+        const firstUserMessage = agentRun.chat.messages.find((msg) => msg.messageType === 'human' || msg.messageType === 'user');
+        if (!firstUserMessage?.message) {
+            return 'Chat gestartet';
+        }
+        // Remove HTML tags and limit length
+        const cleanText = firstUserMessage.message.replace(/<[^>]*>/g, '').trim();
+        // Bei 220px Breite mit text-xs passen ca. 40-45 Zeichen gut
+        return cleanText.length > 42 ? `${cleanText.substring(0, 42)}...` : cleanText;
+    }
+    getMessageCount(agentRun) {
+        if (!agentRun.chat?.messages) {
+            return 0;
+        }
+        // Count only human and AI messages, exclude system messages
+        return agentRun.chat.messages.filter((msg) => msg.messageType === 'human' || msg.messageType === 'user' || msg.messageType === 'ai').length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AgentChatComponent, isStandalone: true, selector: "sftech-agent-chat", providers: [DialogService], viewQueries: [{ propertyName: "chatContainer", first: true, predicate: ["chatContainer"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full shadow-lg\">\n    <!-- Header \u00FCber gesamte Breite -->\n    @if (selectedAgent()) {\n        <div class=\"border-b border-gray-300 px-3 sm:px-4 py-3 flex items-center bg-white gap-2\">\n            <!-- Mobile Sidebar Toggle -->\n            <div class=\"relative lg:hidden flex-shrink-0\">\n                <button pButton\n                        type=\"button\"\n                        class=\"p-button-text p-button-rounded\"\n                        (click)=\"toggleSidebar()\"\n                        [pTooltip]=\"'Chat-Verlauf (' + (agentRuns()?.length ?? 0) + ')'\"\n                        tooltipPosition=\"bottom\">\n                    <fa-icon [icon]=\"iconProvider.chat\" size=\"lg\"></fa-icon>\n                </button>\n                @if (agentRuns()?.length) {\n                    <span class=\"absolute -top-1 -right-1 bg-primary-500 text-white text-xs font-bold rounded-full min-w-5 h-5 flex items-center justify-center px-1 pointer-events-none\">\n                        {{ agentRuns()!.length }}\n                    </span>\n                }\n            </div>\n\n            <div class=\"flex items-center gap-2 sm:gap-3 flex-1 min-w-0\">\n                <button pButton\n                        type=\"button\"\n                        class=\"p-button-text p-button-rounded flex-shrink-0\"\n                        (click)=\"goBack()\"\n                        [pTooltip]=\"'Zur\u00FCck'\"\n                        tooltipPosition=\"bottom\"\n                        tabindex=\"2\">\n                    <fa-icon [icon]=\"iconProvider.back\" size=\"lg\"></fa-icon>\n                </button>\n                @if (selectedAgentRun()) {\n                    <h2 class=\"text-base sm:text-xl font-semibold truncate\">\n                        <span class=\"hidden sm:inline\">Agent: </span>{{ selectedAgent()?.name }}\n                        <span class=\"hidden md:inline text-gray-500 font-normal\">\n                            vom {{ (selectedAgentRun()?.createdAt ?? selectedAgentRun()?.startedAt | date:'dd.MM.yyyy - HH:mm') }}\n                        </span>\n                    </h2>\n                } @else {\n                    <h2 class=\"text-base sm:text-xl font-semibold truncate\">\n                        <span class=\"hidden sm:inline\">Agent: </span>{{ selectedAgent()?.name }}\n                    </h2>\n                }\n            </div>\n            <div class=\"flex items-center gap-2 sm:gap-3 flex-shrink-0\">\n                <button pButton\n                        type=\"button\"\n                        class=\"p-button-sm\"\n                        (click)=\"startNewRun()\"\n                        tabindex=\"3\">\n                    <fa-icon [icon]=\"iconProvider.add\" class=\"sm:mr-2\"></fa-icon>\n                    <span class=\"hidden sm:inline\">Neuer Chat</span>\n                </button>\n\n                @if (selectedAgentRun()) {\n                    @if (selectedAgent()?.ragProvider && selectedAgent()?.ragModel) {\n                        <button pButton\n                                type=\"button\"\n                                class=\"p-button-text p-button-rounded\"\n                                (click)=\"openRagUploadModal()\"\n                                [pTooltip]=\"'RAG-Dokumente hochladen'\"\n                                tooltipPosition=\"bottom\">\n                            <fa-icon [icon]=\"iconProvider.documentAdd\" size=\"lg\"></fa-icon>\n                        </button>\n                    }\n                    <div [pTooltip]=\"'Status: ' + iconTextMapper.getTextForStatus(selectedAgentRun()?.status)\"\n                         tooltipPosition=\"bottom\"\n                         class=\"cursor-help\">\n                        <fa-icon [icon]=\"iconTextMapper.getIconForStatus(selectedAgentRun()?.status)\"\n                                 [classList]=\"iconTextMapper.getIconClassesForStatus(selectedAgentRun()?.status)\"\n                                 [animation]=\"selectedAgentRun()?.status === 'running' ? 'spin' : undefined\"\n                                 size=\"lg\"></fa-icon>\n                    </div>\n                }\n            </div>\n        </div>\n    }\n\n    <!-- Sidebar + Chat nebeneinander -->\n    <div class=\"flex flex-1 min-h-0 overflow-hidden relative\">\n        <!-- Mobile Overlay -->\n        @if (sidebarVisible()) {\n            <div class=\"fixed inset-0 bg-black/50 z-40 lg:hidden\"\n                 (click)=\"closeSidebar()\"></div>\n        }\n\n        <!-- Sidebar -->\n        <div class=\"chats-panel border-r border-gray-200 bg-gradient-to-b from-gray-50 to-white p-3 h-full flex-shrink-0 overflow-y-auto\n                    fixed lg:relative inset-y-0 left-0 z-50 lg:z-auto\n                    w-[280px] sm:w-[300px] lg:w-[220px]\n                    transform transition-transform duration-300 ease-in-out\n                    lg:transform-none\"\n             [class.-translate-x-full]=\"!sidebarVisible()\"\n             [class.translate-x-0]=\"sidebarVisible()\"\n             [class.lg:translate-x-0]=\"true\">\n\n            <!-- Mobile Close Button -->\n            <div class=\"flex items-center justify-between mb-3 lg:hidden\">\n                <h3 class=\"text-sm font-semibold text-gray-700\">Chat-Verlauf</h3>\n                <button class=\"p-2 hover:bg-gray-100 rounded-lg transition-colors\"\n                        (click)=\"closeSidebar()\">\n                    <fa-icon [icon]=\"iconProvider.close\" class=\"text-gray-500\"></fa-icon>\n                </button>\n            </div>\n\n            <div class=\"mb-3 hidden lg:block\">\n                <h3 class=\"text-xs font-semibold text-gray-500 uppercase tracking-wider px-2\">Chat Verlauf</h3>\n            </div>\n            @if (agentRuns() === undefined) {\n                <div class=\"flex items-center justify-center py-8\">\n                    <div class=\"text-center\">\n                        <fa-icon [icon]=\"iconProvider.loading\" [animation]=\"'spin'\" size=\"2x\" class=\"text-gray-400 mb-2\"></fa-icon>\n                        <p class=\"text-sm text-gray-500 m-0\">Chats werden geladen...</p>\n                    </div>\n                </div>\n            } @else if (!agentRuns()?.length) {\n                <div class=\"flex items-center justify-center py-8\">\n                    <div class=\"text-center\">\n                        <fa-icon [icon]=\"iconProvider.chat\" size=\"2x\" class=\"text-gray-300 mb-2\"></fa-icon>\n                        <p class=\"text-sm text-gray-500 m-0\">Noch keine Chats</p>\n                    </div>\n                </div>\n            } @else {\n                <div class=\"flex flex-col gap-2\">\n                    @for (agentRun of agentRuns(); track agentRun) {\n                        <div class=\"chat-item group relative rounded-xl p-3 cursor-pointer transition-all duration-200 border active:scale-[0.98]\"\n                             (click)=\"selectAgentRun(agentRun); closeSidebar()\"\n                             [class.active]=\"selectedAgentRun()?.id === agentRun.id\"\n                             [class.bg-white]=\"selectedAgentRun()?.id !== agentRun.id\"\n                             [class.shadow-sm]=\"selectedAgentRun()?.id !== agentRun.id\"\n                             [class.hover:shadow-md]=\"selectedAgentRun()?.id !== agentRun.id\"\n                             [class.border-gray-200]=\"selectedAgentRun()?.id !== agentRun.id\"\n                             [class.bg-primary-50]=\"selectedAgentRun()?.id === agentRun.id\"\n                             [class.border-primary-300]=\"selectedAgentRun()?.id === agentRun.id\"\n                             [class.shadow-md]=\"selectedAgentRun()?.id === agentRun.id\">\n                            <div class=\"flex items-start justify-between mb-2\">\n                                <div class=\"flex items-center gap-2 flex-1 min-w-0\">\n                                    <fa-icon [icon]=\"iconTextMapper.getIconForStatus(agentRun.status)\"\n                                             [classList]=\"iconTextMapper.getIconClassesForStatus(agentRun.status)\"\n                                             [animation]=\"agentRun.status === 'running' ? 'spin' : undefined\"\n                                             class=\"flex-shrink-0\"\n                                             size=\"sm\"></fa-icon>\n                                    <span class=\"text-xs font-medium truncate\"\n                                          [class.text-primary-700]=\"selectedAgentRun()?.id === agentRun.id\"\n                                          [class.text-gray-700]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                        {{ agentRun.createdAt | date:'dd.MM.YY' }}\n                                    </span>\n                                </div>\n                                <span class=\"text-xs font-medium flex-shrink-0 ml-2\"\n                                      [class.text-primary-600]=\"selectedAgentRun()?.id === agentRun.id\"\n                                      [class.text-gray-500]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                    {{ agentRun.createdAt | date:'HH:mm' }}\n                                </span>\n                            </div>\n                            @if (agentRun.chat && agentRun.chat.messages && agentRun.chat.messages.length > 0) {\n                                <div class=\"text-xs truncate leading-relaxed\"\n                                     [class.text-primary-600]=\"selectedAgentRun()?.id === agentRun.id\"\n                                     [class.text-gray-600]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                    {{ getFirstUserMessage(agentRun) }}\n                                </div>\n                            } @else {\n                                <div class=\"text-xs italic truncate\"\n                                     [class.text-primary-500]=\"selectedAgentRun()?.id === agentRun.id\"\n                                     [class.text-gray-400]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                    Neuer Chat\n                                </div>\n                            }\n                            @if (agentRun.chat && agentRun.chat.messages) {\n                                <div class=\"flex items-center gap-2 mt-2 pt-2 border-t\"\n                                     [class.border-primary-200]=\"selectedAgentRun()?.id === agentRun.id\"\n                                     [class.border-gray-100]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                    <fa-icon [icon]=\"iconProvider.message\" size=\"xs\"\n                                             [class.text-primary-500]=\"selectedAgentRun()?.id === agentRun.id\"\n                                             [class.text-gray-400]=\"selectedAgentRun()?.id !== agentRun.id\"></fa-icon>\n                                    <span class=\"text-xs\"\n                                          [class.text-primary-600]=\"selectedAgentRun()?.id === agentRun.id\"\n                                          [class.text-gray-500]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                        {{ getMessageCount(agentRun) }} Nachrichten\n                                    </span>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n\n        <!-- Chat Area -->\n        <div class=\"chat bg-gray-50 flex-1 relative min-w-0\">\n            @if (selectedAgentRun() === undefined) {\n                <div class=\"flex items-center justify-center h-full p-4\">\n                    <p class=\"m-0 text-gray-500 text-center\">\n                        <span class=\"hidden lg:inline\">Bitte einen Chat aus der linken Liste ausw\u00E4hlen</span>\n                        <span class=\"lg:hidden\">Tippe auf das Men\u00FC-Icon um einen Chat auszuw\u00E4hlen</span>\n                    </p>\n                </div>\n            } @else if (selectedAgent() === undefined) {\n                <div class=\"flex items-center justify-center h-full\">\n                    <p class=\"m-0 text-gray-500\">\n                        Die Chat-Daten werden geladen...\n                    </p>\n                </div>\n            } @else {\n                <div class=\"absolute inset-0 overflow-y-auto p-2 sm:p-3\" #chatContainer>\n                    @if (selectedAgentRun()!.chat) {\n                        @for (message of selectedAgentRun()!.chat!.messages; track message.id) {\n                            <div class=\"mb-2\">\n                                <sftech-agent-chat-message [message]=\"message.message\"\n                                                           [type]=\"message.messageType\"></sftech-agent-chat-message>\n                            </div>\n                        }\n                    }\n                    @if (selectedAgentRun()!.status === agentRunStatus.INIT) {\n                        <sftech-agent-chat-message-human-input-initial [agent]=\"selectedAgent()\"\n                                                                       (agentRunIdReceived)=\"startObservingAgentRun($event)\"></sftech-agent-chat-message-human-input-initial>\n                    }\n                    @if (loading()) {\n                        <div class=\"mb-2\">\n                            <sftech-agent-chat-message [message]=\"'Am \u00DCberlegen'\"\n                                                       [type]=\"'ai_loading'\"></sftech-agent-chat-message>\n                        </div>\n                    }\n                    @if (selectedAgentRun()?.status === agentRunStatus.FAILED) {\n                        <div class=\"mb-2\">\n                            <sftech-agent-chat-message\n                                    [message]=\"'Es ist ein Fehler aufgetreten! Bitte versuche es zu einem sp\u00E4teren Zeitpunkt erneut.'\"\n                                    [type]=\"'ai_failed'\"></sftech-agent-chat-message>\n                        </div>\n                    }\n                    @if (selectedAgentRun()!.status === agentRunStatus.COMPLETED) {\n                        <sftech-agent-chat-message-human-input [agent]=\"selectedAgent()\"\n                                                               [agentRunId]=\"selectedAgentRun()!.id\"\n                                                               (agentRunIdReceived)=\"startObservingAgentRun(selectedAgentRun()!.id!)\"></sftech-agent-chat-message-human-input>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block;height:100%;overflow:hidden}.chat-item{transform:translate(0);transition:all .2s ease-in-out}.chat-item:hover{transform:translate(2px)}.chat-item.active{border-left-width:3px}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: AgentChatMessageComponent, selector: "sftech-agent-chat-message", inputs: ["message", "type"] }, { 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: AgentChatMessageHumanInputInitialComponent, selector: "sftech-agent-chat-message-human-input-initial", inputs: ["agent"], outputs: ["agentRunIdReceived"] }, { kind: "component", type: AgentChatMessageHumanInputComponent, selector: "sftech-agent-chat-message-human-input", inputs: ["agent", "agentRunId"], outputs: ["agentRunIdReceived"] }, { 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"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sftech-agent-chat', imports: [ButtonDirective, AgentChatMessageComponent, DatePipe, FaIconComponent, AgentChatMessageHumanInputInitialComponent, AgentChatMessageHumanInputComponent, Tooltip], providers: [DialogService], template: "<div class=\"flex flex-col h-full shadow-lg\">\n    <!-- Header \u00FCber gesamte Breite -->\n    @if (selectedAgent()) {\n        <div class=\"border-b border-gray-300 px-3 sm:px-4 py-3 flex items-center bg-white gap-2\">\n            <!-- Mobile Sidebar Toggle -->\n            <div class=\"relative lg:hidden flex-shrink-0\">\n                <button pButton\n                        type=\"button\"\n                        class=\"p-button-text p-button-rounded\"\n                        (click)=\"toggleSidebar()\"\n                        [pTooltip]=\"'Chat-Verlauf (' + (agentRuns()?.length ?? 0) + ')'\"\n                        tooltipPosition=\"bottom\">\n                    <fa-icon [icon]=\"iconProvider.chat\" size=\"lg\"></fa-icon>\n                </button>\n                @if (agentRuns()?.length) {\n                    <span class=\"absolute -top-1 -right-1 bg-primary-500 text-white text-xs font-bold rounded-full min-w-5 h-5 flex items-center justify-center px-1 pointer-events-none\">\n                        {{ agentRuns()!.length }}\n                    </span>\n                }\n            </div>\n\n            <div class=\"flex items-center gap-2 sm:gap-3 flex-1 min-w-0\">\n                <button pButton\n                        type=\"button\"\n                        class=\"p-button-text p-button-rounded flex-shrink-0\"\n                        (click)=\"goBack()\"\n                        [pTooltip]=\"'Zur\u00FCck'\"\n                        tooltipPosition=\"bottom\"\n                        tabindex=\"2\">\n                    <fa-icon [icon]=\"iconProvider.back\" size=\"lg\"></fa-icon>\n                </button>\n                @if (selectedAgentRun()) {\n                    <h2 class=\"text-base sm:text-xl font-semibold truncate\">\n                        <span class=\"hidden sm:inline\">Agent: </span>{{ selectedAgent()?.name }}\n                        <span class=\"hidden md:inline text-gray-500 font-normal\">\n                            vom {{ (selectedAgentRun()?.createdAt ?? selectedAgentRun()?.startedAt | date:'dd.MM.yyyy - HH:mm') }}\n                        </span>\n                    </h2>\n                } @else {\n                    <h2 class=\"text-base sm:text-xl font-semibold truncate\">\n                        <span class=\"hidden sm:inline\">Agent: </span>{{ selectedAgent()?.name }}\n                    </h2>\n                }\n            </div>\n            <div class=\"flex items-center gap-2 sm:gap-3 flex-shrink-0\">\n                <button pButton\n                        type=\"button\"\n                        class=\"p-button-sm\"\n                        (click)=\"startNewRun()\"\n                        tabindex=\"3\">\n                    <fa-icon [icon]=\"iconProvider.add\" class=\"sm:mr-2\"></fa-icon>\n                    <span class=\"hidden sm:inline\">Neuer Chat</span>\n                </button>\n\n                @if (selectedAgentRun()) {\n                    @if (selectedAgent()?.ragProvider && selectedAgent()?.ragModel) {\n                        <button pButton\n                                type=\"button\"\n                                class=\"p-button-text p-button-rounded\"\n                                (click)=\"openRagUploadModal()\"\n                                [pTooltip]=\"'RAG-Dokumente hochladen'\"\n                                tooltipPosition=\"bottom\">\n                            <fa-icon [icon]=\"iconProvider.documentAdd\" size=\"lg\"></fa-icon>\n                        </button>\n                    }\n                    <div [pTooltip]=\"'Status: ' + iconTextMapper.getTextForStatus(selectedAgentRun()?.status)\"\n                         tooltipPosition=\"bottom\"\n                         class=\"cursor-help\">\n                        <fa-icon [icon]=\"iconTextMapper.getIconForStatus(selectedAgentRun()?.status)\"\n                                 [classList]=\"iconTextMapper.getIconClassesForStatus(selectedAgentRun()?.status)\"\n                                 [animation]=\"selectedAgentRun()?.status === 'running' ? 'spin' : undefined\"\n                                 size=\"lg\"></fa-icon>\n                    </div>\n                }\n            </div>\n        </div>\n    }\n\n    <!-- Sidebar + Chat nebeneinander -->\n    <div class=\"flex flex-1 min-h-0 overflow-hidden relative\">\n        <!-- Mobile Overlay -->\n        @if (sidebarVisible()) {\n            <div class=\"fixed inset-0 bg-black/50 z-40 lg:hidden\"\n                 (click)=\"closeSidebar()\"></div>\n        }\n\n        <!-- Sidebar -->\n        <div class=\"chats-panel border-r border-gray-200 bg-gradient-to-b from-gray-50 to-white p-3 h-full flex-shrink-0 overflow-y-auto\n                    fixed lg:relative inset-y-0 left-0 z-50 lg:z-auto\n                    w-[280px] sm:w-[300px] lg:w-[220px]\n                    transform transition-transform duration-300 ease-in-out\n                    lg:transform-none\"\n             [class.-translate-x-full]=\"!sidebarVisible()\"\n             [class.translate-x-0]=\"sidebarVisible()\"\n             [class.lg:translate-x-0]=\"true\">\n\n            <!-- Mobile Close Button -->\n            <div class=\"flex items-center justify-between mb-3 lg:hidden\">\n                <h3 class=\"text-sm font-semibold text-gray-700\">Chat-Verlauf</h3>\n                <button class=\"p-2 hover:bg-gray-100 rounded-lg transition-colors\"\n                        (click)=\"closeSidebar()\">\n                    <fa-icon [icon]=\"iconProvider.close\" class=\"text-gray-500\"></fa-icon>\n                </button>\n            </div>\n\n            <div class=\"mb-3 hidden lg:block\">\n                <h3 class=\"text-xs font-semibold text-gray-500 uppercase tracking-wider px-2\">Chat Verlauf</h3>\n            </div>\n            @if (agentRuns() === undefined) {\n                <div class=\"flex items-center justify-center py-8\">\n                    <div class=\"text-center\">\n                        <fa-icon [icon]=\"iconProvider.loading\" [animation]=\"'spin'\" size=\"2x\" class=\"text-gray-400 mb-2\"></fa-icon>\n                        <p class=\"text-sm text-gray-500 m-0\">Chats werden geladen...</p>\n                    </div>\n                </div>\n            } @else if (!agentRuns()?.length) {\n                <div class=\"flex items-center justify-center py-8\">\n                    <div class=\"text-center\">\n                        <fa-icon [icon]=\"iconProvider.chat\" size=\"2x\" class=\"text-gray-300 mb-2\"></fa-icon>\n                        <p class=\"text-sm text-gray-500 m-0\">Noch keine Chats</p>\n                    </div>\n                </div>\n            } @else {\n                <div class=\"flex flex-col gap-2\">\n                    @for (agentRun of agentRuns(); track agentRun) {\n                        <div class=\"chat-item group relative rounded-xl p-3 cursor-pointer transition-all duration-200 border active:scale-[0.98]\"\n                             (click)=\"selectAgentRun(agentRun); closeSidebar()\"\n                             [class.active]=\"selectedAgentRun()?.id === agentRun.id\"\n                             [class.bg-white]=\"selectedAgentRun()?.id !== agentRun.id\"\n                             [class.shadow-sm]=\"selectedAgentRun()?.id !== agentRun.id\"\n                             [class.hover:shadow-md]=\"selectedAgentRun()?.id !== agentRun.id\"\n                             [class.border-gray-200]=\"selectedAgentRun()?.id !== agentRun.id\"\n                             [class.bg-primary-50]=\"selectedAgentRun()?.id === agentRun.id\"\n                             [class.border-primary-300]=\"selectedAgentRun()?.id === agentRun.id\"\n                             [class.shadow-md]=\"selectedAgentRun()?.id === agentRun.id\">\n                            <div class=\"flex items-start justify-between mb-2\">\n                                <div class=\"flex items-center gap-2 flex-1 min-w-0\">\n                                    <fa-icon [icon]=\"iconTextMapper.getIconForStatus(agentRun.status)\"\n                                             [classList]=\"iconTextMapper.getIconClassesForStatus(agentRun.status)\"\n                                             [animation]=\"agentRun.status === 'running' ? 'spin' : undefined\"\n                                             class=\"flex-shrink-0\"\n                                             size=\"sm\"></fa-icon>\n                                    <span class=\"text-xs font-medium truncate\"\n                                          [class.text-primary-700]=\"selectedAgentRun()?.id === agentRun.id\"\n                                          [class.text-gray-700]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                        {{ agentRun.createdAt | date:'dd.MM.YY' }}\n                                    </span>\n                                </div>\n                                <span class=\"text-xs font-medium flex-shrink-0 ml-2\"\n                                      [class.text-primary-600]=\"selectedAgentRun()?.id === agentRun.id\"\n                                      [class.text-gray-500]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                    {{ agentRun.createdAt | date:'HH:mm' }}\n                                </span>\n                            </div>\n                            @if (agentRun.chat && agentRun.chat.messages && agentRun.chat.messages.length > 0) {\n                                <div class=\"text-xs truncate leading-relaxed\"\n                                     [class.text-primary-600]=\"selectedAgentRun()?.id === agentRun.id\"\n                                     [class.text-gray-600]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                    {{ getFirstUserMessage(agentRun) }}\n                                </div>\n                            } @else {\n                                <div class=\"text-xs italic truncate\"\n                                     [class.text-primary-500]=\"selectedAgentRun()?.id === agentRun.id\"\n                                     [class.text-gray-400]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                    Neuer Chat\n                                </div>\n                            }\n                            @if (agentRun.chat && agentRun.chat.messages) {\n                                <div class=\"flex items-center gap-2 mt-2 pt-2 border-t\"\n                                     [class.border-primary-200]=\"selectedAgentRun()?.id === agentRun.id\"\n                                     [class.border-gray-100]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                    <fa-icon [icon]=\"iconProvider.message\" size=\"xs\"\n                                             [class.text-primary-500]=\"selectedAgentRun()?.id === agentRun.id\"\n                                             [class.text-gray-400]=\"selectedAgentRun()?.id !== agentRun.id\"></fa-icon>\n                                    <span class=\"text-xs\"\n                                          [class.text-primary-600]=\"selectedAgentRun()?.id === agentRun.id\"\n                                          [class.text-gray-500]=\"selectedAgentRun()?.id !== agentRun.id\">\n                                        {{ getMessageCount(agentRun) }} Nachrichten\n                                    </span>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n\n        <!-- Chat Area -->\n        <div class=\"chat bg-gray-50 flex-1 relative min-w-0\">\n            @if (selectedAgentRun() === undefined) {\n                <div class=\"flex items-center justify-center h-full p-4\">\n                    <p class=\"m-0 text-gray-500 text-center\">\n                        <span class=\"hidden lg:inline\">Bitte einen Chat aus der linken Liste ausw\u00E4hlen</span>\n                        <span class=\"lg:hidden\">Tippe auf das Men\u00FC-Icon um einen Chat auszuw\u00E4hlen</span>\n                    </p>\n                </div>\n            } @else if (selectedAgent() === undefined) {\n                <div class=\"flex items-center justify-center h-full\">\n                    <p class=\"m-0 text-gray-500\">\n                        Die Chat-Daten werden geladen...\n                    </p>\n                </div>\n            } @else {\n                <div class=\"absolute inset-0 overflow-y-auto p-2 sm:p-3\" #chatContainer>\n                    @if (selectedAgentRun()!.chat) {\n                        @for (message of selectedAgentRun()!.chat!.messages; track message.id) {\n                            <div class=\"mb-2\">\n                                <sftech-agent-chat-message [message]=\"message.message\"\n                                                           [type]=\"message.messageType\"></sftech-agent-chat-message>\n                            </div>\n                        }\n                    }\n                    @if (selectedAgentRun()!.status === agentRunStatus.INIT) {\n                        <sftech-agent-chat-message-human-input-initial [agent]=\"selectedAgent()\"\n                                                                       (agentRunIdReceived)=\"startObservingAgentRun($event)\"></sftech-agent-chat-message-human-input-initial>\n                    }\n                    @if (loading()) {\n                        <div class=\"mb-2\">\n                            <sftech-agent-chat-message [message]=\"'Am \u00DCberlegen'\"\n                                                       [type]=\"'ai_loading'\"></sftech-agent-chat-message>\n                        </div>\n                    }\n                    @if (selectedAgentRun()?.status === agentRunStatus.FAILED) {\n                        <div class=\"mb-2\">\n                            <sftech-agent-chat-message\n                                    [message]=\"'Es ist ein Fehler aufgetreten! Bitte versuche es zu einem sp\u00E4teren Zeitpunkt erneut.'\"\n                                    [type]=\"'ai_failed'\"></sftech-agent-chat-message>\n                        </div>\n                    }\n                    @if (selectedAgentRun()!.status === agentRunStatus.COMPLETED) {\n                        <sftech-agent-chat-message-human-input [agent]=\"selectedAgent()\"\n                                                               [agentRunId]=\"selectedAgentRun()!.id\"\n                                                               (agentRunIdReceived)=\"startObservingAgentRun(selectedAgentRun()!.id!)\"></sftech-agent-chat-message-human-input>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block;height:100%;overflow:hidden}.chat-item{transform:translate(0);transition:all .2s ease-in-out}.chat-item:hover{transform:translate(2px)}.chat-item.active{border-left-width:3px}\n"] }]
+        }], propDecorators: { chatContainer: [{
+                type: ViewChild,
+                args: ['chatContainer']
+            }] } });
+
+class AgentSelectionComponent extends BaseListComponent {
+    _repo = inject(AgentService);
+    _route = 'chats/agents';
+    orchestratorService = inject(OrchestratorService);
+    messageService = inject(MessageService);
+    iconProvider = IconProvider;
+    tools = signal(undefined, ...(ngDevMode ? [{ debugName: "tools" }] : []));
+    searchTerm = '';
+    filteredAgents = signal([], ...(ngDevMode ? [{ debugName: "filteredAgents" }] : []));
+    constructor() {
+        super();
+        // Watch for data changes and update filtered agents
+        effect(() => {
+            const agents = this.data();
+            if (agents !== undefined) {
+                this.filterAgents();
+            }
+        });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.orchestratorService.getTools().subscribe((res) => {
+            if (res instanceof MappedApiError) {
+                this.messageService.add({ severity: 'error', summary: 'Fehler', detail: res.messages.join('|') });
+                return;
+            }
+            this.tools.set(res.data);
+        });
+    }
+    filterAgents() {
+        const agents = this.data() || [];
+        if (!this.searchTerm.trim()) {
+            this.filteredAgents.set(agents);
+            return;
+        }
+        const term = this.searchTerm.toLowerCase();
+        const filtered = agents.filter((agent) => {
+            // Search in name
+            if (agent.name.toLowerCase().includes(term)) {
+                return true;
+            }
+            // Search in description
+            if (agent.description?.toLowerCase().includes(term)) {
+                return true;
+            }
+            // Search in tools
+            const toolNames = this.getToolNames(agent).toLowerCase();
+            if (toolNames.includes(term)) {
+                return true;
+            }
+            return false;
+        });
+        this.filteredAgents.set(filtered);
+    }
+    clearSearch() {
+        this.searchTerm = '';
+        this.filterAgents();
+    }
+    getToolName(toolIdentifier) {
+        return this.tools()?.find((t) => t.identifier === toolIdentifier)?.name || toolIdentifier;
+    }
+    getToolNames(agent) {
+        if (!agent.tools || agent.tools.length === 0) {
+            return 'Keine Tools';
+        }
+        return agent.tools
+            .map((tool) => this.tools()?.find((t) => t.identifier === tool)?.name)
+            .filter((name) => !!name)
+            .join(' | ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AgentSelectionComponent, isStandalone: true, selector: "sftech-agent-selection", providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<div class=\"h-full overflow-y-auto px-4 sm:px-6 py-6 bg-gradient-to-b from-gray-50 to-white\">\n    <!-- Header Section -->\n    <div class=\"max-w-7xl mx-auto mb-6 sm:mb-8\">\n        <div class=\"flex flex-col gap-4\">\n            <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3\">\n                <div>\n                    <h1 class=\"text-2xl sm:text-3xl font-bold text-gray-900 flex items-center gap-3\">\n                        <fa-icon [icon]=\"iconProvider.robot\" class=\"text-primary-600\"></fa-icon>\n                        Agenten Auswahl\n                    </h1>\n                    <p class=\"text-gray-600 mt-1 text-sm sm:text-base\">W\u00E4hle einen KI-Agenten f\u00FCr deine Aufgabe</p>\n                </div>\n                @if (data() && data()!.length > 0) {\n                    <div class=\"text-sm text-gray-500 bg-white px-3 sm:px-4 py-2 rounded-lg border border-gray-200 self-start sm:self-auto\">\n                        <span class=\"font-semibold text-primary-600\">{{ filteredAgents().length }}</span>\n                        {{ filteredAgents().length === 1 ? 'Agent' : 'Agenten' }} verf\u00FCgbar\n                    </div>\n                }\n            </div>\n\n            <!-- Search Bar -->\n            @if (data() && data()!.length > 0) {\n                <div class=\"relative\">\n                    <fa-icon [icon]=\"iconProvider.search\"\n                             class=\"absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400\"></fa-icon>\n                    <input\n                        type=\"text\"\n                        [(ngModel)]=\"searchTerm\"\n                        (input)=\"filterAgents()\"\n                        placeholder=\"Suche nach Agenten, Beschreibung oder Tools...\"\n                        class=\"w-full pl-12 pr-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-all\"\n                    />\n                    @if (searchTerm) {\n                        <button\n                            (click)=\"clearSearch()\"\n                            class=\"absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors\">\n                            <fa-icon [icon]=\"iconProvider.close\"></fa-icon>\n                        </button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n\n    <!-- Loading State -->\n    @if (data() === undefined) {\n        <div class=\"flex items-center justify-center py-20\">\n            <div class=\"text-center\">\n                <fa-icon [icon]=\"iconProvider.loading\" [animation]=\"'spin'\" size=\"3x\" class=\"text-primary-500 mb-4\"></fa-icon>\n                <p class=\"text-gray-600 text-lg\">Agenten werden geladen...</p>\n            </div>\n        </div>\n    }\n\n    <!-- Empty State -->\n    @else if (!data()?.length) {\n        <div class=\"flex items-center justify-center py-20\">\n            <div class=\"text-center max-w-md\">\n                <fa-icon [icon]=\"iconProvider.robot\" size=\"4x\" class=\"text-gray-300 mb-4\"></fa-icon>\n                <h3 class=\"text-xl font-semibold text-gray-700 mb-2\">Keine Agenten vorhanden</h3>\n                <p class=\"text-gray-500\">Es wurden noch keine KI-Agenten konfiguriert.</p>\n            </div>\n        </div>\n    }\n\n    <!-- No Results State -->\n    @else if (filteredAgents().length === 0) {\n        <div class=\"flex items-center justify-center py-20\">\n            <div class=\"text-center max-w-md\">\n                <fa-icon [icon]=\"iconProvider.search\" size=\"4x\" class=\"text-gray-300 mb-4\"></fa-icon>\n                <h3 class=\"text-xl font-semibold text-gray-700 mb-2\">Keine Ergebnisse gefunden</h3>\n                <p class=\"text-gray-500\">Versuche einen anderen Suchbegriff.</p>\n                <button\n                    (click)=\"clearSearch()\"\n                    class=\"mt-4 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors\">\n                    Suche zur\u00FCcksetzen\n                </button>\n            </div>\n        </div>\n    }\n\n    <!-- Agents Grid -->\n    @else {\n        <div class=\"max-w-7xl mx-auto grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n            @for (agent of filteredAgents(); track agent.id) {\n                <div\n                    class=\"group relative flex flex-col p-4 sm:p-6 rounded-xl sm:rounded-2xl bg-white border-2 border-gray-300 shadow-sm hover:shadow-xl hover:border-primary-400 hover:-translate-y-1 transition-all duration-300 cursor-pointer overflow-hidden active:scale-[0.98]\"\n                    [routerLink]=\"['agent/' + agent.id]\"\n                >\n                    <!-- Gradient Overlay on Hover -->\n                    <div class=\"absolute inset-0 bg-gradient-to-br from-primary-50/0 to-primary-100/0 group-hover:from-primary-50/30 group-hover:to-primary-100/20 transition-all duration-300 rounded-2xl\"></div>\n\n                    <!-- Content -->\n                    <div class=\"relative z-10 flex flex-col h-full\">\n                        <!-- Header with Avatar and RAG Badge -->\n                        <div class=\"flex items-start justify-between mb-4\">\n                            <div class=\"flex items-center gap-3\">\n                                <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 text-white flex items-center justify-center font-bold text-xl shadow-md group-hover:scale-110 transition-transform\">\n                                    {{ agent.name[0].toUpperCase() }}\n                                </div>\n                                <div>\n                                    <h3 class=\"text-lg font-bold text-gray-900 group-hover:text-primary-700 transition-colors line-clamp-1\">\n                                        {{ agent.name }}\n                                    </h3>\n                                </div>\n                            </div>\n                            @if (agent.ragProvider && agent.ragModel) {\n                                <div class=\"flex-shrink-0 px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-lg border border-green-200\">\n                                    <fa-icon [icon]=\"iconProvider.database\" class=\"mr-1\"></fa-icon>\n                                    RAG\n                                </div>\n                            }\n                        </div>\n\n                        <!-- Description -->\n                        <p class=\"text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3 flex-grow\">\n                            {{ agent.description }}\n                        </p>\n\n                        <!-- Tools Section -->\n                        <div class=\"pt-4 border-t border-gray-100\">\n                            <div class=\"flex items-center gap-2 mb-2\">\n                                <fa-icon [icon]=\"iconProvider.tools\" class=\"text-gray-400 text-xs\"></fa-icon>\n                                <span class=\"text-xs font-semibold text-gray-500 uppercase tracking-wide\">Tools</span>\n                            </div>\n                            @if (!agent.tools || agent.tools.length === 0) {\n                                <span class=\"text-xs text-gray-400 italic\">Keine Tools konfiguriert</span>\n                            } @else {\n                                <div class=\"flex flex-wrap gap-1.5\">\n                                    @for (toolIdentifier of agent.tools.slice(0, 3); track toolIdentifier) {\n                                        <span class=\"px-2 py-1 bg-primary-50 text-primary-700 text-xs font-medium rounded-md border border-primary-100\">\n                                            {{ getToolName(toolIdentifier) }}\n                                        </span>\n                                    }\n                                    @if (agent.tools.length > 3) {\n                                        <span class=\"px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md\">\n                                            +{{ agent.tools.length - 3 }}\n                                        </span>\n                                    }\n                                </div>\n                            }\n                        </div>\n\n                        <!-- Hover Arrow -->\n                        <div class=\"absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity\">\n                            <fa-icon [icon]=\"iconProvider.arrowRight\" class=\"text-primary-600\"></fa-icon>\n                        </div>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</div>", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgentSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sftech-agent-selection', imports: [RouterLink, FaIconComponent, FormsModule], providers: [DialogService], template: "<div class=\"h-full overflow-y-auto px-4 sm:px-6 py-6 bg-gradient-to-b from-gray-50 to-white\">\n    <!-- Header Section -->\n    <div class=\"max-w-7xl mx-auto mb-6 sm:mb-8\">\n        <div class=\"flex flex-col gap-4\">\n            <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3\">\n                <div>\n                    <h1 class=\"text-2xl sm:text-3xl font-bold text-gray-900 flex items-center gap-3\">\n                        <fa-icon [icon]=\"iconProvider.robot\" class=\"text-primary-600\"></fa-icon>\n                        Agenten Auswahl\n                    </h1>\n                    <p class=\"text-gray-600 mt-1 text-sm sm:text-base\">W\u00E4hle einen KI-Agenten f\u00FCr deine Aufgabe</p>\n                </div>\n                @if (data() && data()!.length > 0) {\n                    <div class=\"text-sm text-gray-500 bg-white px-3 sm:px-4 py-2 rounded-lg border border-gray-200 self-start sm:self-auto\">\n                        <span class=\"font-semibold text-primary-600\">{{ filteredAgents().length }}</span>\n                        {{ filteredAgents().length === 1 ? 'Agent' : 'Agenten' }} verf\u00FCgbar\n                    </div>\n                }\n            </div>\n\n            <!-- Search Bar -->\n            @if (data() && data()!.length > 0) {\n                <div class=\"relative\">\n                    <fa-icon [icon]=\"iconProvider.search\"\n                             class=\"absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400\"></fa-icon>\n                    <input\n                        type=\"text\"\n                        [(ngModel)]=\"searchTerm\"\n                        (input)=\"filterAgents()\"\n                        placeholder=\"Suche nach Agenten, Beschreibung oder Tools...\"\n                        class=\"w-full pl-12 pr-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-600 focus:border-primary-600 transition-all\"\n                    />\n                    @if (searchTerm) {\n                        <button\n                            (click)=\"clearSearch()\"\n                            class=\"absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors\">\n                            <fa-icon [icon]=\"iconProvider.close\"></fa-icon>\n                        </button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n\n    <!-- Loading State -->\n    @if (data() === undefined) {\n        <div class=\"flex items-center justify-center py-20\">\n            <div class=\"text-center\">\n                <fa-icon [icon]=\"iconProvider.loading\" [animation]=\"'spin'\" size=\"3x\" class=\"text-primary-500 mb-4\"></fa-icon>\n                <p class=\"text-gray-600 text-lg\">Agenten werden geladen...</p>\n            </div>\n        </div>\n    }\n\n    <!-- Empty State -->\n    @else if (!data()?.length) {\n        <div class=\"flex items-center justify-center py-20\">\n            <div class=\"text-center max-w-md\">\n                <fa-icon [icon]=\"iconProvider.robot\" size=\"4x\" class=\"text-gray-300 mb-4\"></fa-icon>\n                <h3 class=\"text-xl font-semibold text-gray-700 mb-2\">Keine Agenten vorhanden</h3>\n                <p class=\"text-gray-500\">Es wurden noch keine KI-Agenten konfiguriert.</p>\n            </div>\n        </div>\n    }\n\n    <!-- No Results State -->\n    @else if (filteredAgents().length === 0) {\n        <div class=\"flex items-center justify-center py-20\">\n            <div class=\"text-center max-w-md\">\n                <fa-icon [icon]=\"iconProvider.search\" size=\"4x\" class=\"text-gray-300 mb-4\"></fa-icon>\n                <h3 class=\"text-xl font-semibold text-gray-700 mb-2\">Keine Ergebnisse gefunden</h3>\n                <p class=\"text-gray-500\">Versuche einen anderen Suchbegriff.</p>\n                <button\n                    (click)=\"clearSearch()\"\n                    class=\"mt-4 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors\">\n                    Suche zur\u00FCcksetzen\n                </button>\n            </div>\n        </div>\n    }\n\n    <!-- Agents Grid -->\n    @else {\n        <div class=\"max-w-7xl mx-auto grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n            @for (agent of filteredAgents(); track agent.id) {\n                <div\n                    class=\"group relative flex flex-col p-4 sm:p-6 rounded-xl sm:rounded-2xl bg-white border-2 border-gray-300 shadow-sm hover:shadow-xl hover:border-primary-400 hover:-translate-y-1 transition-all duration-300 cursor-pointer overflow-hidden active:scale-[0.98]\"\n                    [routerLink]=\"['agent/' + agent.id]\"\n                >\n                    <!-- Gradient Overlay on Hover -->\n                    <div class=\"absolute inset-0 bg-gradient-to-br from-primary-50/0 to-primary-100/0 group-hover:from-primary-50/30 group-hover:to-primary-100/20 transition-all duration-300 rounded-2xl\"></div>\n\n                    <!-- Content -->\n                    <div class=\"relative z-10 flex flex-col h-full\">\n                        <!-- Header with Avatar and RAG Badge -->\n                        <div class=\"flex items-start justify-between mb-4\">\n                            <div class=\"flex items-center gap-3\">\n                                <div class=\"w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 text-white flex items-center justify-center font-bold text-xl shadow-md group-hover:scale-110 transition-transform\">\n                                    {{ agent.name[0].toUpperCase() }}\n                                </div>\n                                <div>\n                                    <h3 class=\"text-lg font-bold text-gray-900 group-hover:text-primary-700 transition-colors line-clamp-1\">\n                                        {{ agent.name }}\n                                    </h3>\n                                </div>\n                            </div>\n                            @if (agent.ragProvider && agent.ragModel) {\n                                <div class=\"flex-shrink-0 px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-lg border border-green-200\">\n                                    <fa-icon [icon]=\"iconProvider.database\" class=\"mr-1\"></fa-icon>\n                                    RAG\n                                </div>\n                            }\n                        </div>\n\n                        <!-- Description -->\n                        <p class=\"text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3 flex-grow\">\n                            {{ agent.description }}\n                        </p>\n\n                        <!-- Tools Section -->\n                        <div class=\"pt-4 border-t border-gray-100\">\n                            <div class=\"flex items-center gap-2 mb-2\">\n                                <fa-icon [icon]=\"iconProvider.tools\" class=\"text-gray-400 text-xs\"></fa-icon>\n                                <span class=\"text-xs font-semibold text-gray-500 uppercase tracking-wide\">Tools</span>\n                            </div>\n                            @if (!agent.tools || agent.tools.length === 0) {\n                                <span class=\"text-xs text-gray-400 italic\">Keine Tools konfiguriert</span>\n                            } @else {\n                                <div class=\"flex flex-wrap gap-1.5\">\n                                    @for (toolIdentifier of agent.tools.slice(0, 3); track toolIdentifier) {\n                                        <span class=\"px-2 py-1 bg-primary-50 text-primary-700 text-xs font-medium rounded-md border border-primary-100\">\n                                            {{ getToolName(toolIdentifier) }}\n                                        </span>\n                                    }\n                                    @if (agent.tools.length > 3) {\n                                        <span class=\"px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md\">\n                                            +{{ agent.tools.length - 3 }}\n                                        </span>\n                                    }\n                                </div>\n                            }\n                        </div>\n\n                        <!-- Hover Arrow -->\n                        <div class=\"absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity\">\n                            <fa-icon [icon]=\"iconProvider.arrowRight\" class=\"text-primary-600\"></fa-icon>\n                        </div>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</div>" }]
+        }], ctorParameters: () => [] });
+
+class ChatsComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ChatsComponent, isStandalone: true, selector: "sftech-chats", ngImport: i0, template: '<router-outlet></router-outlet>', isInline: true, styles: [":host{display:block;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sftech-chats', imports: [RouterOutlet], template: '<router-outlet></router-outlet>', styles: [":host{display:block;height:100%;overflow:hidden}\n"] }]
+        }] });
+
+const chatsRoutes = [
+    {
+        path: '',
+        component: ChatsComponent,
+        children: [
+            {
+                path: '',
+                component: AgentSelectionComponent,
+            },
+            {
+                path: 'agent/:agentId/r/:agentRunId',
+                component: AgentChatComponent,
+            },
+            {
+                path: 'agent/:agentId',
+                component: AgentChatComponent,
+            },
+        ],
+        canActivate: [authenticationGuard],
+    },
+];
+
+export { chatsRoutes };
+//# sourceMappingURL=sftech-ng-orchestrator-chats.routes-CqFuG3l5.mjs.map