sf-aiembedded 0.1.2 → 0.2.4

package/fesm2022/sf-aiembedded.mjs

@@ -1,203 +1,128 @@
 import * as i0 from '@angular/core';
-import { Input, Component, ViewEncapsulation, InjectionToken, ViewChild, Inject } from '@angular/core';
+import { InjectionToken, Inject, Injectable, Input, Component, ViewEncapsulation, ViewChild, EventEmitter, Output, inject } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import { Avatar } from 'primeng/avatar';
 import { TagModule } from 'primeng/tag';
-import { Textarea } from 'primeng/textarea';
 import { ChipModule } from 'primeng/chip';
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import { Avatar } from 'primeng/avatar';
 import { marked } from 'marked';
 import * as i1$1 from '@angular/platform-browser';
-
-//import { Avatar } from 'primeng/avatar';
-class TextComponent {
-    text = '';
-    role = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TextComponent, isStandalone: true, selector: "app-text", inputs: { text: "text", role: "role" }, ngImport: i0, template: "<div\r\nclass=\"shadow-1 border-1 border-gray-200 px-3 py-2 border-round-bottom-xl  w-fit\"\r\n[ngClass]=\"role !== 'user' ? 'bg-white border-1 border-gray-300 text-gray-900 border-round-right-xl' : 'border-round-left-xl border-round-right-sm user-chat'\"\r\n>\r\n<span class=\"text-sm m-0 whitespace-normal md:text-base lg:text-lg\" style=\"word-break: break-word;\">{{text}}</span>\r\n</div>", styles: [".user-chat{background:linear-gradient(to bottom right,#60a5fa,#2563eb);color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-text', standalone: true, imports: [CommonModule, FormsModule], template: "<div\r\nclass=\"shadow-1 border-1 border-gray-200 px-3 py-2 border-round-bottom-xl  w-fit\"\r\n[ngClass]=\"role !== 'user' ? 'bg-white border-1 border-gray-300 text-gray-900 border-round-right-xl' : 'border-round-left-xl border-round-right-sm user-chat'\"\r\n>\r\n<span class=\"text-sm m-0 whitespace-normal md:text-base lg:text-lg\" style=\"word-break: break-word;\">{{text}}</span>\r\n</div>", styles: [".user-chat{background:linear-gradient(to bottom right,#60a5fa,#2563eb);color:#fff}\n"] }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], role: [{
-                type: Input
-            }] } });
-
-class FileComponent {
-    files = [];
-    role = 'assistant';
-    remove = false;
-    getFileIcon(mime) {
-        if (mime.includes('pdf'))
-            return 'pi pi-file-pdf';
-        if (mime.includes('image'))
-            return 'pi pi-image';
-        if (mime.includes('audio'))
-            return 'pi pi-volume-up';
-        if (mime.includes('video'))
-            return 'pi pi-video';
-        if (mime.includes('zip'))
-            return 'pi pi-file-zip';
-        if (mime.includes('xlsx'))
-            return 'pi pi-file-excel';
-        return 'pi pi-file';
-    }
-    getFileClasses(mime) {
-        if (mime.includes('pdf'))
-            return 'bg-red-500 border-red-800 text-white';
-        if (mime.includes('image'))
-            return 'bg-gray-100 border-gray-200 text-white';
-        if (mime.includes('audio'))
-            return 'bg-blue-500 border-blue-800 text-white';
-        if (mime.includes('video'))
-            return 'bg-yellow-500 border-yellow-800 text-white';
-        if (mime.includes('zip'))
-            return 'bg-indigo-500 border-indigo-800 text-white';
-        if (mime.includes('xlsx'))
-            return 'bg-green-500 border-green-800 text-white';
-        return 'bg-gray-100 border-3 border-gray-200 text-gray-500';
-    }
-    removeSelectedFile(i) {
-        this.files.splice(i, 1);
-    }
-    getGridClass() {
-        const fileCount = this.files.length;
-        if (fileCount === 1) {
-            return 'col-12';
-        }
-        else if (fileCount === 2) {
-            return 'col-12 sm:col-6';
-        }
-        else {
-            return 'col-12 sm:col-6 md:col-4';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FileComponent, isStandalone: true, selector: "app-file", inputs: { files: "files", role: "role", remove: "remove" }, ngImport: i0, template: "<div *ngIf=\"!remove\" class=\"grid w-full m-o\" [ngClass]=\"role !== 'user' ? 'items-start justify-content-start' : 'items-end justify-content-end'\">\r\n  <div *ngFor=\"let file of files\" [ngClass]=\"getGridClass()\">\r\n    <div class=\"flex align-items-center gap-3 border-1 border-gray-300 border-round-2xl p-2 bg-gray-100 h-full\">\r\n      <p-avatar class=\"p-1 border-1 avatar-responsive\" [ngClass]=\"getFileClasses(file.name)\" [icon]=\"getFileIcon(file.name)\"></p-avatar>\r\n      <div class=\"flex flex-column overflow-hidden\" style=\"min-width: 0;\">\r\n        <span class=\"text-sm font-semibold text-gray-500 md:text-base lg:text-lg\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n          {{ file.name }}\r\n        </span>\r\n        <p class=\"text-xs text-gray-400 md:text-sm lg:text-base\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n          ({{ file.type || 'Archivo' }})\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"remove\" class=\"grid w-full\">\r\n  <div *ngFor=\"let file of files; let i = index\" class=\"col-12 sm:col-6 md:col-4\">\r\n    <div class=\"relative border-1 border-gray-300 border-round-xl p-2 h-full\">\r\n      <p-button icon=\"pi pi-times\" [rounded]=\"true\" variant=\"text\" severity=\"secondary\" class=\"no-hover absolute top-0 right-0 z-1\" (click)=\"removeSelectedFile(i)\" size=\"small\"/>\r\n      <div class=\"flex align-items-center gap-3\">\r\n        <p-avatar \r\n          class=\"p-1 border-1 avatar-responsive\"\r\n          [ngClass]=\"getFileClasses(file.name)\" \r\n          [icon]=\"getFileIcon(file.name)\" \r\n          >\r\n        </p-avatar>\r\n        \r\n        <div class=\"flex flex-column overflow-hidden\" style=\"min-width: 0;\">\r\n          <span class=\"text-sm font-semibold text-gray-500 md:text-base lg:text-lg\" \r\n                style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n            {{ file.name }}\r\n          </span>\r\n          <p class=\"text-xs text-gray-400 md:text-sm lg:text-base\" \r\n            style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n            ({{ file.type || 'archivo' }})\r\n          </p>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>", styles: [".avatar-responsive{aspect-ratio:1/1;width:2.5rem;height:2.5rem;font-size:2rem;flex-shrink:0}@media (max-width: 768px){.avatar-responsive{width:2rem;height:2rem;font-size:1.5rem}}@media (max-width: 576px){.avatar-responsive{width:1.75rem;height:1.75rem;font-size:1.25rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-file', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, Avatar], template: "<div *ngIf=\"!remove\" class=\"grid w-full m-o\" [ngClass]=\"role !== 'user' ? 'items-start justify-content-start' : 'items-end justify-content-end'\">\r\n  <div *ngFor=\"let file of files\" [ngClass]=\"getGridClass()\">\r\n    <div class=\"flex align-items-center gap-3 border-1 border-gray-300 border-round-2xl p-2 bg-gray-100 h-full\">\r\n      <p-avatar class=\"p-1 border-1 avatar-responsive\" [ngClass]=\"getFileClasses(file.name)\" [icon]=\"getFileIcon(file.name)\"></p-avatar>\r\n      <div class=\"flex flex-column overflow-hidden\" style=\"min-width: 0;\">\r\n        <span class=\"text-sm font-semibold text-gray-500 md:text-base lg:text-lg\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n          {{ file.name }}\r\n        </span>\r\n        <p class=\"text-xs text-gray-400 md:text-sm lg:text-base\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n          ({{ file.type || 'Archivo' }})\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"remove\" class=\"grid w-full\">\r\n  <div *ngFor=\"let file of files; let i = index\" class=\"col-12 sm:col-6 md:col-4\">\r\n    <div class=\"relative border-1 border-gray-300 border-round-xl p-2 h-full\">\r\n      <p-button icon=\"pi pi-times\" [rounded]=\"true\" variant=\"text\" severity=\"secondary\" class=\"no-hover absolute top-0 right-0 z-1\" (click)=\"removeSelectedFile(i)\" size=\"small\"/>\r\n      <div class=\"flex align-items-center gap-3\">\r\n        <p-avatar \r\n          class=\"p-1 border-1 avatar-responsive\"\r\n          [ngClass]=\"getFileClasses(file.name)\" \r\n          [icon]=\"getFileIcon(file.name)\" \r\n          >\r\n        </p-avatar>\r\n        \r\n        <div class=\"flex flex-column overflow-hidden\" style=\"min-width: 0;\">\r\n          <span class=\"text-sm font-semibold text-gray-500 md:text-base lg:text-lg\" \r\n                style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n            {{ file.name }}\r\n          </span>\r\n          <p class=\"text-xs text-gray-400 md:text-sm lg:text-base\" \r\n            style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n            ({{ file.type || 'archivo' }})\r\n          </p>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>", styles: [".avatar-responsive{aspect-ratio:1/1;width:2.5rem;height:2.5rem;font-size:2rem;flex-shrink:0}@media (max-width: 768px){.avatar-responsive{width:2rem;height:2rem;font-size:1.5rem}}@media (max-width: 576px){.avatar-responsive{width:1.75rem;height:1.75rem;font-size:1.25rem}}\n"] }]
-        }], propDecorators: { files: [{
-                type: Input
-            }], role: [{
-                type: Input
-            }], remove: [{
-                type: Input
-            }] } });
-
-class TableComponent {
-    table = "";
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { table: "table" }, ngImport: i0, template: "<div\r\n    *ngIf=\"table\"\r\n    class=\"mt-2 overflow-auto\"\r\n    [innerHTML]=\"table\"\r\n    style=\"max-width: 100%; overflow-x: auto;\"\r\n></div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-table', imports: [CommonModule], template: "<div\r\n    *ngIf=\"table\"\r\n    class=\"mt-2 overflow-auto\"\r\n    [innerHTML]=\"table\"\r\n    style=\"max-width: 100%; overflow-x: auto;\"\r\n></div>" }]
-        }], propDecorators: { table: [{
-                type: Input
-            }] } });
-
-// marked.setOptions({
-//   highlight: (code, lang) => {
-//     if (lang && hljs.getLanguage(lang)) {
-//       return hljs.highlight(code, { language: lang }).value;
-//     }
-//     return hljs.highlightAuto(code).value;
-//   }
-// });
-const renderer = {
-    link(token) {
-        const href = token.href ?? '';
-        const title = token.title ? ` title="${token.title}"` : '';
-        const text = token.text ?? token.raw ?? href;
-        return `<a href="${href}"${title} target="_blank" rel="noopener noreferrer">${text}</a>`;
-    },
-};
-marked.use({ renderer });
-class MarkdownComponent {
-    sanitizer;
-    content = '';
-    role = '';
-    safeHtml = '';
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    async ngOnChanges(changes) {
-        if ('content' in changes) {
-            const rawHtml = await marked.parse(this.content || '');
-            this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: MarkdownComponent, isStandalone: true, selector: "app-markdown", inputs: { content: "content", role: "role" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"role !== 'user' ? 'flex items-start gap-2' : ''\">\r\n    <p-avatar\r\n    *ngIf=\"role !== 'user'\" \r\n    image=\"./images/bot.png\"\r\n    class=\"bg-gray-100 border-3 border-gray-300 p-1\"\r\n    shape=\"circle\" \r\n    size=\"large\"\r\n    [ngStyle]=\"{ 'aspect-ratio': '1 / 1', 'min-width': '40px' }\">\r\n    </p-avatar>\r\n    <div>\r\n        <div class=\"markdown-container\" [innerHTML]=\"safeHtml\"></div>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".markdown-container{font-family:Arial,sans-serif;line-height:1.5;color:#333;min-width:0;flex:1;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}.markdown-container table{display:block;width:100%;border-collapse:collapse;margin:1em 0;font-size:1.125rem;box-shadow:0 1px 2px #0000000d;border-right:none;border-left:none;overflow-x:auto}.markdown-container th{background-color:#f3f4f6;color:#333;font-weight:600;padding:10px;text-align:left;border-bottom:2px solid #d1d5db}.markdown-container td{padding:10px;border-top:1px solid #e5e7eb;vertical-align:top;text-align:left}@media (max-width: 1024px){.markdown-container table{font-size:1rem}}@media (max-width: 768px){.markdown-container table{font-size:.875rem}}.markdown-container tr:nth-child(2n){background-color:#f9fafb}.markdown-container tr:hover{background-color:#f1f5f9}.markdown-container a{color:#0366d6;text-decoration:underline}.markdown-container img{max-width:100%;margin:10px 0;border-radius:6px}.markdown-container pre{background:#f6f8fa;padding:12px;border-radius:6px;overflow-x:auto;margin:1em 0}.markdown-container code{font-family:monospace}.markdown-container p,li{font-size:1.125rem}@media (max-width: 1024px){.markdown-container p,li{font-size:1rem}}@media (max-width: 768px){.markdown-container p,li{font-size:.875rem}}.markdown-container ul,.markdown-container ol{padding-left:1.5rem;margin:.5rem 0}.markdown-container ul{list-style-type:disc}.markdown-container ol{list-style-type:decimal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-markdown', standalone: true, imports: [CommonModule, Avatar], encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"role !== 'user' ? 'flex items-start gap-2' : ''\">\r\n    <p-avatar\r\n    *ngIf=\"role !== 'user'\" \r\n    image=\"./images/bot.png\"\r\n    class=\"bg-gray-100 border-3 border-gray-300 p-1\"\r\n    shape=\"circle\" \r\n    size=\"large\"\r\n    [ngStyle]=\"{ 'aspect-ratio': '1 / 1', 'min-width': '40px' }\">\r\n    </p-avatar>\r\n    <div>\r\n        <div class=\"markdown-container\" [innerHTML]=\"safeHtml\"></div>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".markdown-container{font-family:Arial,sans-serif;line-height:1.5;color:#333;min-width:0;flex:1;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}.markdown-container table{display:block;width:100%;border-collapse:collapse;margin:1em 0;font-size:1.125rem;box-shadow:0 1px 2px #0000000d;border-right:none;border-left:none;overflow-x:auto}.markdown-container th{background-color:#f3f4f6;color:#333;font-weight:600;padding:10px;text-align:left;border-bottom:2px solid #d1d5db}.markdown-container td{padding:10px;border-top:1px solid #e5e7eb;vertical-align:top;text-align:left}@media (max-width: 1024px){.markdown-container table{font-size:1rem}}@media (max-width: 768px){.markdown-container table{font-size:.875rem}}.markdown-container tr:nth-child(2n){background-color:#f9fafb}.markdown-container tr:hover{background-color:#f1f5f9}.markdown-container a{color:#0366d6;text-decoration:underline}.markdown-container img{max-width:100%;margin:10px 0;border-radius:6px}.markdown-container pre{background:#f6f8fa;padding:12px;border-radius:6px;overflow-x:auto;margin:1em 0}.markdown-container code{font-family:monospace}.markdown-container p,li{font-size:1.125rem}@media (max-width: 1024px){.markdown-container p,li{font-size:1rem}}@media (max-width: 768px){.markdown-container p,li{font-size:.875rem}}.markdown-container ul,.markdown-container ol{padding-left:1.5rem;margin:.5rem 0}.markdown-container ul{list-style-type:disc}.markdown-container ol{list-style-type:decimal}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { content: [{
-                type: Input
-            }], role: [{
-                type: Input
-            }] } });
+import * as i2$1 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
+import { Skeleton } from 'primeng/skeleton';
+import { Textarea } from 'primeng/textarea';
+import * as i1$2 from 'primeng/api';
 
 // projects/general-agent/src/lib/agents-backend.port.ts
 const AI_AGENTS = new InjectionToken('AI_AGENTS');
 
-class GeneralAgentComponent {
+class AgentService {
     aiAgentsGatewayService;
-    cdr;
     zone;
-    chatContainer;
     // Propiedades internas (ya no inputs/outputs)
-    messages = [];
-    isBotWritting = false;
-    headerConfig;
-    isRecording = false;
+    // Propiedades para notificar cambios a los componentes que usan el servicio
+    messagesSubject = new BehaviorSubject([]);
+    messages$ = this.messagesSubject.asObservable();
+    isBotWrittingSubject = new BehaviorSubject(false);
+    isBotWritting$ = this.isBotWrittingSubject.asObservable();
+    isRecordingSubject = new BehaviorSubject(false);
+    isRecording$ = this.isRecordingSubject.asObservable();
+    isLoadingSubject = new BehaviorSubject(false);
+    isLoading$ = this.isLoadingSubject.asObservable();
+    headerConfigSubject = new BehaviorSubject(undefined);
+    headerConfig$ = this.headerConfigSubject.asObservable();
+    selectedFilesSubject = new BehaviorSubject([]);
+    selectedFiles$ = this.selectedFilesSubject.asObservable();
     mediaRecorder;
     audioChunks = [];
     recordingStream;
-    agentInfo;
-    isLoading = false;
-    userInput = '';
-    configuration;
-    selectedFiles = [];
-    sessionId = '';
-    agentType = '';
-    agentId = '';
-    idKatios = '';
-    constructor(aiAgentsGatewayService, cdr, zone) {
+    _agentInfo;
+    _configuration;
+    _sessionId = '';
+    _agentId = '';
+    _idKatios = '';
+    constructor(aiAgentsGatewayService, zone) {
         this.aiAgentsGatewayService = aiAgentsGatewayService;
-        this.cdr = cdr;
         this.zone = zone;
     }
-    async ngOnInit() {
-        await this.loadAgent();
+    get agentId() {
+        return this._agentId;
     }
-    async ngOnChanges(changes) {
-        if (changes['agentId'] || changes['agentType'] || changes['idKatios']) {
-            await this.loadAgent();
-        }
+    set agentId(value) {
+        this._agentId = value;
     }
-    ngAfterViewChecked() {
-        this.scrollToBottom();
+    get idKatios() {
+        return this._idKatios;
     }
-    scrollToBottom(behavior = 'smooth') {
-        if (!this.chatContainer)
-            return;
-        const el = this.chatContainer.nativeElement;
-        el.scrollTo({ top: el.scrollHeight, behavior });
+    set idKatios(value) {
+        this._idKatios = value;
+    }
+    set agentInfo(value) {
+        this._agentInfo = value;
+    }
+    get agentInfo() {
+        return this._agentInfo;
+    }
+    set selectedFiles(files) {
+        this.selectedFilesSubject.next(files);
+    }
+    get selectedFiles() {
+        return this.selectedFilesSubject.value;
+    }
+    set sessionId(value) {
+        this._sessionId = value;
+    }
+    get sessionId() {
+        return this._sessionId;
+    }
+    set isRecording(value) {
+        this.isRecordingSubject.next(value);
+    }
+    get isRecording() {
+        return this.isRecordingSubject.value;
+    }
+    set headerConfig(value) {
+        this.headerConfigSubject.next(value);
+    }
+    get headerConfig() {
+        return this.headerConfigSubject.value;
+    }
+    set isLoading(value) {
+        this.isLoadingSubject.next(value);
+    }
+    get isLoading() {
+        return this.isLoadingSubject.value;
+    }
+    set isBotWritting(isWritting) {
+        this.isBotWrittingSubject.next(isWritting);
+    }
+    get isBotWritting() {
+        return this.isBotWrittingSubject.value;
+    }
+    addMessage(message) {
+        const next = [...this.messagesSubject.value, message];
+        this.messagesSubject.next(next);
+    }
+    clearMessages() {
+        this.messagesSubject.next([]);
+    }
+    addFile(file) {
+        const next = [...this.selectedFilesSubject.value, file];
+        this.selectedFilesSubject.next(next);
+    }
+    addFullMessages(messages) {
+        const next = [...this.messagesSubject.value, ...messages];
+        this.messagesSubject.next(next);
     }
     async loadAgent() {
         this.isLoading = true;
         this.isBotWritting = false;
-        this.messages = [];
+        this.clearMessages();
         this.sessionId = "";
         try {
             const agentInfo = await this.aiAgentsGatewayService.getAgent(this.idKatios, this.agentId);
@@ -205,16 +130,15 @@ class GeneralAgentComponent {
                 this.agentInfo = JSON.parse(agentInfo.data.rawConfig);
                 let configurationAgent = null;
                 if (this.agentInfo.config?.i18n?.en) {
-                    configurationAgent = this.agentInfo.config.i18n.en;
+                    configurationAgent = this.agentInfo.config?.i18n.en;
                 }
                 else {
-                    configurationAgent = this.agentInfo.config.setUp;
+                    configurationAgent = this.agentInfo.config?.setUp;
                 }
                 this.headerConfig = {
                     title: configurationAgent.title,
                     subtitle: configurationAgent.subtitle,
                     initialMessages: this.agentInfo.config.initialMessages,
-                    type: this.agentType,
                     placeholder: configurationAgent.inputPlaceholder,
                     footer: configurationAgent.footer
                 };
@@ -227,7 +151,7 @@ class GeneralAgentComponent {
         }
     }
     get isInitial() {
-        return this.messages.length === 0 && !this.isBotWritting;
+        return this.messagesSubject.value.length === 0 && !this.isBotWritting;
     }
     /**
      * Converts File objects to Attachment format expected by the backend
@@ -268,16 +192,16 @@ class GeneralAgentComponent {
             reader.onerror = error => reject(error);
         });
     }
-    async send() {
+    async send(userInput) {
         this.isBotWritting = true;
-        let text = this.userInput.trim();
+        let text = userInput.trim();
         try {
             if (!text) {
                 this.isBotWritting = false;
                 return;
             }
             // 2️⃣ Pintar mensaje usuario
-            this.messages.push({ role: 'user', type: 'text', content: text });
+            this.addMessage({ role: 'user', type: 'text', content: text });
             // 3️⃣ Enviar SOLO texto al agente
             const requestData = {
                 conversationId: this.sessionId,
@@ -286,17 +210,23 @@ class GeneralAgentComponent {
                 metadata: {}
             };
             const response = await this.aiAgentsGatewayService.sendMessage(this.idKatios, this.agentId, requestData);
-            this.userInput = '';
+            //this.userInput = '';
             this.selectedFiles = [];
+            // Asegurar que Angular detecte los cambios después del await
             if (response.success) {
                 this.sessionId = response.data.conversationId;
-                response.data.messages.forEach((m) => this.messages.push({
+                const incoming = response.data.messages.map((m) => ({
                     role: m.role,
                     type: m.type || 'markdown',
                     content: m.content
                 }));
+                this.addFullMessages(incoming);
             }
         }
+        catch (error) {
+            console.error('Error en send:', error);
+            this.addMessage({ role: 'assistant', type: 'error', content: 'Ocurrió un error al enviar el mensaje' });
+        }
         finally {
             this.isBotWritting = false;
         }
@@ -345,9 +275,10 @@ class GeneralAgentComponent {
             if (!text)
                 return;
             // Render inmediato del mensaje del usuario
-            this.messages.push({ role: 'user', type: 'text', content: text });
-            this.isBotWritting = true;
-            this.cdr.detectChanges();
+            this.zone.run(() => {
+                this.addMessage({ role: 'user', type: 'text', content: text });
+                this.isBotWritting = true;
+            });
             const requestData = {
                 conversationId: this.sessionId,
                 text,
@@ -355,25 +286,26 @@ class GeneralAgentComponent {
                 metadata: { source: 'voice' }
             };
             const response = await this.aiAgentsGatewayService.sendMessage(this.idKatios, this.agentId, requestData);
-            if (response?.success && response?.data) {
-                this.sessionId = response.data.conversationId;
-                response.data.messages.forEach((m) => {
-                    this.messages.push({
+            // Asegurar que Angular detecte los cambios después del await
+            this.zone.run(() => {
+                if (response?.success && response?.data) {
+                    this.sessionId = response.data.conversationId;
+                    const incoming = response.data.messages.map((m) => ({
                         role: m.role || 'assistant',
                         type: m.type || 'markdown',
                         content: m.content
-                    });
-                });
-                // Render inmediato de la respuesta del agente
-                this.cdr.detectChanges();
-            }
+                    }));
+                    this.addFullMessages(incoming);
+                }
+            });
         }
         catch (err) {
             console.error('Error en sendVoiceMessage:', err);
         }
         finally {
-            this.isBotWritting = false;
-            this.cdr.detectChanges();
+            this.zone.run(() => {
+                this.isBotWritting = false;
+            });
         }
     }
     stopRecording() {
@@ -398,11 +330,41 @@ class GeneralAgentComponent {
             // Agrega los archivos nuevos sin duplicar por nombre
             for (const file of newFiles) {
                 if (!this.selectedFiles.some(f => f.name === file.name && f.size === file.size)) {
-                    this.selectedFiles.push(file);
+                    this.addFile(file);
                 }
             }
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AgentService, deps: [{ token: AI_AGENTS }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AgentService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AgentService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [AI_AGENTS]
+                }] }, { type: i0.NgZone }] });
+
+//import { Avatar } from 'primeng/avatar';
+class TextComponent {
+    text = '';
+    role = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TextComponent, isStandalone: true, selector: "app-text", inputs: { text: "text", role: "role" }, ngImport: i0, template: "<div\r\nclass=\"px-3 py-2 border-round-bottom-xl w-fit\"\r\n[ngClass]=\"role !== 'user' ? 'bg-white border-round-right-xl' : 'border-round-left-xl border-round-right-sm bg-primary text-white'\"\r\n>\r\n<span class=\"text-base m-0 whitespace-normal\" style=\"word-break: break-word;\">{{text}}</span>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-text', standalone: true, imports: [CommonModule, FormsModule], template: "<div\r\nclass=\"px-3 py-2 border-round-bottom-xl w-fit\"\r\n[ngClass]=\"role !== 'user' ? 'bg-white border-round-right-xl' : 'border-round-left-xl border-round-right-sm bg-primary text-white'\"\r\n>\r\n<span class=\"text-base m-0 whitespace-normal\" style=\"word-break: break-word;\">{{text}}</span>\r\n</div>" }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }] } });
+
+class FileComponent {
+    files = [];
+    role = 'assistant';
+    remove = false;
     getFileIcon(mime) {
         if (mime.includes('pdf'))
             return 'pi pi-file-pdf';
@@ -434,49 +396,367 @@ class GeneralAgentComponent {
         return 'bg-gray-100 border-3 border-gray-200 text-gray-500';
     }
     removeSelectedFile(i) {
-        this.selectedFiles.splice(i, 1);
+        this.files.splice(i, 1);
     }
+    getGridClass() {
+        const fileCount = this.files.length;
+        if (fileCount === 1) {
+            return 'col-12';
+        }
+        else if (fileCount === 2) {
+            return 'col-12 sm:col-6';
+        }
+        else {
+            return 'col-12 sm:col-6 md:col-4';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FileComponent, isStandalone: true, selector: "app-file", inputs: { files: "files", role: "role", remove: "remove" }, ngImport: i0, template: "<div *ngIf=\"!remove\" class=\"grid w-full m-o\" [ngClass]=\"role !== 'user' ? 'items-start justify-content-start' : 'items-end justify-content-end'\">\r\n  <div *ngFor=\"let file of files\" [ngClass]=\"getGridClass()\">\r\n    <div class=\"flex align-items-center gap-3 border-1 border-gray-300 border-round-2xl p-2 bg-gray-100 h-full\">\r\n      <p-avatar class=\"p-1 border-1 avatar-responsive\" [ngClass]=\"getFileClasses(file.name)\" [icon]=\"getFileIcon(file.name)\"></p-avatar>\r\n      <div class=\"flex flex-column overflow-hidden\" style=\"min-width: 0;\">\r\n        <span class=\"font-semibold text-gray-500 text-sm md:text-base\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n          {{ file.name }}\r\n        </span>\r\n        <p class=\"text-xs text-gray-400 md:text-base\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n          ({{ file.type || 'Archivo' }})\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"remove\" class=\"grid w-full\">\r\n  <div *ngFor=\"let file of files; let i = index\" class=\"col-12 sm:col-6 md:col-4\">\r\n    <div class=\"relative border-1 border-gray-300 border-round-xl p-2 h-full\">\r\n      <p-button icon=\"pi pi-times\" [rounded]=\"true\" variant=\"text\" severity=\"secondary\" class=\"no-hover absolute top-0 right-0 z-1\" (click)=\"removeSelectedFile(i)\" size=\"small\"/>\r\n      <div class=\"flex align-items-center gap-3\">\r\n        <p-avatar \r\n          class=\"p-1 border-1 avatar-responsive\"\r\n          [ngClass]=\"getFileClasses(file.name)\" \r\n          [icon]=\"getFileIcon(file.name)\" \r\n          >\r\n        </p-avatar>\r\n        \r\n        <div class=\"flex flex-column overflow-hidden\" style=\"min-width: 0;\">\r\n          <span class=\"font-semibold text-gray-500 md:text-base text-sm\" \r\n                style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n            {{ file.name }}\r\n          </span>\r\n          <p class=\"text-xs text-gray-400 md:text-base\" \r\n            style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n            ({{ file.type || 'archivo' }})\r\n          </p>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>", styles: [".avatar-responsive{aspect-ratio:1/1;width:2.5rem;height:2.5rem;font-size:2rem;flex-shrink:0}@media (max-width: 768px){.avatar-responsive{width:2rem;height:2rem;font-size:1.5rem}}@media (max-width: 576px){.avatar-responsive{width:1.75rem;height:1.75rem;font-size:1.25rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-file', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, Avatar], template: "<div *ngIf=\"!remove\" class=\"grid w-full m-o\" [ngClass]=\"role !== 'user' ? 'items-start justify-content-start' : 'items-end justify-content-end'\">\r\n  <div *ngFor=\"let file of files\" [ngClass]=\"getGridClass()\">\r\n    <div class=\"flex align-items-center gap-3 border-1 border-gray-300 border-round-2xl p-2 bg-gray-100 h-full\">\r\n      <p-avatar class=\"p-1 border-1 avatar-responsive\" [ngClass]=\"getFileClasses(file.name)\" [icon]=\"getFileIcon(file.name)\"></p-avatar>\r\n      <div class=\"flex flex-column overflow-hidden\" style=\"min-width: 0;\">\r\n        <span class=\"font-semibold text-gray-500 text-sm md:text-base\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n          {{ file.name }}\r\n        </span>\r\n        <p class=\"text-xs text-gray-400 md:text-base\" style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n          ({{ file.type || 'Archivo' }})\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"remove\" class=\"grid w-full\">\r\n  <div *ngFor=\"let file of files; let i = index\" class=\"col-12 sm:col-6 md:col-4\">\r\n    <div class=\"relative border-1 border-gray-300 border-round-xl p-2 h-full\">\r\n      <p-button icon=\"pi pi-times\" [rounded]=\"true\" variant=\"text\" severity=\"secondary\" class=\"no-hover absolute top-0 right-0 z-1\" (click)=\"removeSelectedFile(i)\" size=\"small\"/>\r\n      <div class=\"flex align-items-center gap-3\">\r\n        <p-avatar \r\n          class=\"p-1 border-1 avatar-responsive\"\r\n          [ngClass]=\"getFileClasses(file.name)\" \r\n          [icon]=\"getFileIcon(file.name)\" \r\n          >\r\n        </p-avatar>\r\n        \r\n        <div class=\"flex flex-column overflow-hidden\" style=\"min-width: 0;\">\r\n          <span class=\"font-semibold text-gray-500 md:text-base text-sm\" \r\n                style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n            {{ file.name }}\r\n          </span>\r\n          <p class=\"text-xs text-gray-400 md:text-base\" \r\n            style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n            ({{ file.type || 'archivo' }})\r\n          </p>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>", styles: [".avatar-responsive{aspect-ratio:1/1;width:2.5rem;height:2.5rem;font-size:2rem;flex-shrink:0}@media (max-width: 768px){.avatar-responsive{width:2rem;height:2rem;font-size:1.5rem}}@media (max-width: 576px){.avatar-responsive{width:1.75rem;height:1.75rem;font-size:1.25rem}}\n"] }]
+        }], propDecorators: { files: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }], remove: [{
+                type: Input
+            }] } });
+
+class TableComponent {
+    table = "";
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { table: "table" }, ngImport: i0, template: "<div\r\n    *ngIf=\"table\"\r\n    class=\"mt-2 overflow-auto\"\r\n    [innerHTML]=\"table\"\r\n    style=\"max-width: 100%; overflow-x: auto;\"\r\n></div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table', imports: [CommonModule], template: "<div\r\n    *ngIf=\"table\"\r\n    class=\"mt-2 overflow-auto\"\r\n    [innerHTML]=\"table\"\r\n    style=\"max-width: 100%; overflow-x: auto;\"\r\n></div>" }]
+        }], propDecorators: { table: [{
+                type: Input
+            }] } });
+
+// marked.setOptions({
+//   highlight: (code, lang) => {
+//     if (lang && hljs.getLanguage(lang)) {
+//       return hljs.highlight(code, { language: lang }).value;
+//     }
+//     return hljs.highlightAuto(code).value;
+//   }
+// });
+const renderer = {
+    link(token) {
+        const href = token.href ?? '';
+        const title = token.title ? ` title="${token.title}"` : '';
+        const text = token.text ?? token.raw ?? href;
+        return `<a href="${href}"${title} target="_blank" rel="noopener noreferrer">${text}</a>`;
+    },
+};
+marked.use({ renderer });
+class MarkdownComponent {
+    sanitizer;
+    content = '';
+    safeHtml = '';
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    async ngOnChanges(changes) {
+        if ('content' in changes) {
+            const rawHtml = await marked.parse(this.content || '');
+            this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: MarkdownComponent, isStandalone: true, selector: "app-markdown", inputs: { content: "content" }, usesOnChanges: true, ngImport: i0, template: "<div>\r\n    <div class=\"markdown-container\" [innerHTML]=\"safeHtml\"></div>\r\n</div>", styles: [".markdown-container{font-family:Arial,sans-serif;line-height:1.5;color:#333;min-width:0;flex:1;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}.markdown-container table{display:block;width:100%;border-collapse:collapse;margin:1em 0;font-size:1.125rem;box-shadow:0 1px 2px #0000000d;border-right:none;border-left:none;overflow-x:auto}.markdown-container th{background-color:#f3f4f6;color:#333;font-weight:600;padding:10px;text-align:left;border-bottom:2px solid #d1d5db}.markdown-container td{padding:10px;border-top:1px solid #e5e7eb;vertical-align:top;text-align:left}@media (max-width: 1024px){.markdown-container table{font-size:1rem}}@media (max-width: 768px){.markdown-container table{font-size:.875rem}}.markdown-container tr:nth-child(2n){background-color:#f9fafb}.markdown-container tr:hover{background-color:#f1f5f9}.markdown-container a{color:#0366d6;text-decoration:underline}.markdown-container img{max-width:100%;margin:10px 0;border-radius:6px}.markdown-container pre{background:#f6f8fa;padding:12px;border-radius:6px;overflow-x:auto;margin:1em 0}.markdown-container code{font-family:monospace}.markdown-container p,li{font-size:1rem}.markdown-container ul,.markdown-container ol{padding-left:1.5rem;margin:.5rem 0}.markdown-container ul{list-style-type:disc}.markdown-container ol{list-style-type:decimal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-markdown', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div>\r\n    <div class=\"markdown-container\" [innerHTML]=\"safeHtml\"></div>\r\n</div>", styles: [".markdown-container{font-family:Arial,sans-serif;line-height:1.5;color:#333;min-width:0;flex:1;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}.markdown-container table{display:block;width:100%;border-collapse:collapse;margin:1em 0;font-size:1.125rem;box-shadow:0 1px 2px #0000000d;border-right:none;border-left:none;overflow-x:auto}.markdown-container th{background-color:#f3f4f6;color:#333;font-weight:600;padding:10px;text-align:left;border-bottom:2px solid #d1d5db}.markdown-container td{padding:10px;border-top:1px solid #e5e7eb;vertical-align:top;text-align:left}@media (max-width: 1024px){.markdown-container table{font-size:1rem}}@media (max-width: 768px){.markdown-container table{font-size:.875rem}}.markdown-container tr:nth-child(2n){background-color:#f9fafb}.markdown-container tr:hover{background-color:#f1f5f9}.markdown-container a{color:#0366d6;text-decoration:underline}.markdown-container img{max-width:100%;margin:10px 0;border-radius:6px}.markdown-container pre{background:#f6f8fa;padding:12px;border-radius:6px;overflow-x:auto;margin:1em 0}.markdown-container code{font-family:monospace}.markdown-container p,li{font-size:1rem}.markdown-container ul,.markdown-container ol{padding-left:1.5rem;margin:.5rem 0}.markdown-container ul{list-style-type:disc}.markdown-container ol{list-style-type:decimal}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { content: [{
+                type: Input
+            }] } });
+
+class RobotIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RobotIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: RobotIconComponent, isStandalone: true, selector: "lib-robot-icon", host: { styleAttribute: "display: inline-flex; width: 1.5em; height: 1.5em;" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" width=\"100%\" height=\"100%\" fill=\"currentColor\">\r\n    <path d=\"M440-120v-80h320v-284q0-117-81.5-198.5T480-764q-117 0-198.5 81.5T200-484v244h-40q-33 0-56.5-23.5T80-320v-80q0-21 10.5-39.5T120-469l3-53q8-68 39.5-126t79-101q47.5-43 109-67T480-840q68 0 129 24t109 66.5Q766-707 797-649t40 126l3 52q19 9 29.5 27t10.5 38v92q0 20-10.5 38T840-249v49q0 33-23.5 56.5T760-120H440Zm-80-280q-17 0-28.5-11.5T320-440q0-17 11.5-28.5T360-480q17 0 28.5 11.5T400-440q0 17-11.5 28.5T360-400Zm240 0q-17 0-28.5-11.5T560-440q0-17 11.5-28.5T600-480q17 0 28.5 11.5T640-440q0 17-11.5 28.5T600-400Zm-359-62q-7-106 64-182t177-76q89 0 156.5 56.5T720-519q-91-1-167.5-49T435-698q-16 80-67.5 142.5T241-462Z\"/>\r\n</svg>\r\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RobotIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-robot-icon', imports: [], host: {
+                        style: 'display: inline-flex; width: 1.5em; height: 1.5em;'
+                    }, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" width=\"100%\" height=\"100%\" fill=\"currentColor\">\r\n    <path d=\"M440-120v-80h320v-284q0-117-81.5-198.5T480-764q-117 0-198.5 81.5T200-484v244h-40q-33 0-56.5-23.5T80-320v-80q0-21 10.5-39.5T120-469l3-53q8-68 39.5-126t79-101q47.5-43 109-67T480-840q68 0 129 24t109 66.5Q766-707 797-649t40 126l3 52q19 9 29.5 27t10.5 38v92q0 20-10.5 38T840-249v49q0 33-23.5 56.5T760-120H440Zm-80-280q-17 0-28.5-11.5T320-440q0-17 11.5-28.5T360-480q17 0 28.5 11.5T400-440q0 17-11.5 28.5T360-400Zm240 0q-17 0-28.5-11.5T560-440q0-17 11.5-28.5T600-480q17 0 28.5 11.5T640-440q0 17-11.5 28.5T600-400Zm-359-62q-7-106 64-182t177-76q89 0 156.5 56.5T720-519q-91-1-167.5-49T435-698q-16 80-67.5 142.5T241-462Z\"/>\r\n</svg>\r\n" }]
+        }] });
+
+class AgentAvatarComponent {
+    size = 'large';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AgentAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AgentAvatarComponent, isStandalone: true, selector: "lib-agent-avatar", inputs: { size: "size" }, ngImport: i0, template: "<p-avatar [size]=\"size\" class=\"agent-avatar\" shape=\"circle\">\r\n        <lib-robot-icon style=\"color: var(--primary-color)\"></lib-robot-icon>\r\n</p-avatar> \r\n\r\n", styles: [".agent-avatar{--p1: color-mix(in srgb, var(--primary-color) 18%, transparent);flex-shrink:0;background-color:var(--p1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: RobotIconComponent, selector: "lib-robot-icon" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AgentAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-agent-avatar', imports: [CommonModule, Avatar, RobotIconComponent], template: "<p-avatar [size]=\"size\" class=\"agent-avatar\" shape=\"circle\">\r\n        <lib-robot-icon style=\"color: var(--primary-color)\"></lib-robot-icon>\r\n</p-avatar> \r\n\r\n", styles: [".agent-avatar{--p1: color-mix(in srgb, var(--primary-color) 18%, transparent);flex-shrink:0;background-color:var(--p1)}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }] } });
+
+class MessagesComponent {
+    chatContainer;
+    messages = [];
+    isBotWritting = false;
+    scrollMode = 'edge';
+    agentIcon = 'pi pi-sparkles';
+    ngAfterViewChecked() {
+        this.scrollToBottom();
+    }
+    scrollToBottom(behavior = 'smooth') {
+        if (!this.chatContainer)
+            return;
+        const el = this.chatContainer.nativeElement;
+        el.scrollTo({ top: el.scrollHeight, behavior });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: MessagesComponent, isStandalone: true, selector: "lib-messages", inputs: { messages: "messages", isBotWritting: "isBotWritting", scrollMode: "scrollMode", agentIcon: "agentIcon" }, host: { classAttribute: "block h-full w-full overflow-hidden" }, viewQueries: [{ propertyName: "chatContainer", first: true, predicate: ["chatContainer"], descendants: true }], ngImport: i0, template: "<div class=\"messages-container\" [class.scroll-inline]=\"scrollMode === 'inline'\" #chatContainer>\r\n  <div class=\"messages-content\">\r\n    <div *ngFor=\"let msg of messages\" class=\"message-item\">\r\n      <div class=\"flex w-full\" [ngClass]=\"msg.role !== 'user' ? 'justify-content-start' : 'justify-content-end'\">\r\n        <div [ngClass]=\"msg.role !== 'user' ? 'message-bot' : 'message-user'\">\r\n          <app-table *ngIf=\"msg.type === 'table'\" [table]=\"msg.content\"></app-table>\r\n          <app-file *ngIf=\"msg.type === 'file'\" [files]=\"msg.content\" [role]=\"msg.role\"></app-file>\r\n          <app-text *ngIf=\"msg.type === 'text'\" [text]=\"msg.content\" [role]=\"msg.role\"></app-text>\r\n          <div [ngClass]=\"msg.role !== 'user' ? 'flex items-start gap-2' : ''\" *ngIf=\"msg.type === 'markdown'\">\r\n            <lib-agent-avatar *ngIf=\"msg.role !== 'user'\" size=\"normal\"></lib-agent-avatar>\r\n            <app-markdown [content]=\"msg.content\"></app-markdown>\r\n          </div>\r\n          <div *ngIf=\"msg.type === 'error'\" class=\"message-item\">\r\n            <div class=\"flex gap-2 message-bot\">\r\n              <lib-agent-avatar size=\"normal\"></lib-agent-avatar>\r\n              <p-message severity=\"error\">{{msg.content}}</p-message>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"isBotWritting\" class=\"message-item\">\r\n      <div class=\"flex gap-2 message-bot\">\r\n        <lib-agent-avatar size=\"normal\"></lib-agent-avatar>\r\n        <div\r\n          class=\"w-fit\">\r\n          <span class=\"typing-dots\">\r\n            <span class=\"dot\"></span>\r\n            <span class=\"dot\"></span>\r\n            <span class=\"dot\"></span>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #bottom></div>\r\n</div>", styles: ["@charset \"UTF-8\";.messages-container{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.5) transparent}.messages-container::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-track{background:transparent}.messages-container::-webkit-scrollbar-thumb{background-color:#9ca3af80;border-radius:4px}.messages-container::-webkit-scrollbar-thumb:hover{background-color:#9ca3afb3}@media (max-width: 768px){.messages-container{scrollbar-width:none;-ms-overflow-style:none}.messages-container::-webkit-scrollbar{display:none}}.messages-container.scroll-inline{max-width:60rem;margin:0 auto}.messages-container.scroll-inline .messages-content{max-width:100%}.messages-content{max-width:60rem;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.message-item{width:100%}.message-bot{width:100%;max-width:100%}.message-user{max-width:85%}.typing-dots{display:inline-flex;align-items:center;gap:4px;padding:4px 0}.typing-dots .dot{width:8px;height:8px;background-color:var(--primary-color);border-radius:50%;animation:typingBounce 1.4s infinite ease-in-out both}.typing-dots .dot:nth-child(1){animation-delay:0s}.typing-dots .dot:nth-child(2){animation-delay:.2s}.typing-dots .dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TextComponent, selector: "app-text", inputs: ["text", "role"] }, { kind: "component", type: FileComponent, selector: "app-file", inputs: ["files", "role", "remove"] }, { kind: "component", type: TableComponent, selector: "app-table", inputs: ["table"] }, { kind: "component", type: MarkdownComponent, selector: "app-markdown", inputs: ["content"] }, { kind: "component", type: AgentAvatarComponent, selector: "lib-agent-avatar", inputs: ["size"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$1.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MessagesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-messages', imports: [CommonModule, FormsModule, ButtonModule, TextComponent, FileComponent, TableComponent, MarkdownComponent, AgentAvatarComponent, MessageModule], host: {
+                        'class': 'block h-full w-full overflow-hidden'
+                    }, template: "<div class=\"messages-container\" [class.scroll-inline]=\"scrollMode === 'inline'\" #chatContainer>\r\n  <div class=\"messages-content\">\r\n    <div *ngFor=\"let msg of messages\" class=\"message-item\">\r\n      <div class=\"flex w-full\" [ngClass]=\"msg.role !== 'user' ? 'justify-content-start' : 'justify-content-end'\">\r\n        <div [ngClass]=\"msg.role !== 'user' ? 'message-bot' : 'message-user'\">\r\n          <app-table *ngIf=\"msg.type === 'table'\" [table]=\"msg.content\"></app-table>\r\n          <app-file *ngIf=\"msg.type === 'file'\" [files]=\"msg.content\" [role]=\"msg.role\"></app-file>\r\n          <app-text *ngIf=\"msg.type === 'text'\" [text]=\"msg.content\" [role]=\"msg.role\"></app-text>\r\n          <div [ngClass]=\"msg.role !== 'user' ? 'flex items-start gap-2' : ''\" *ngIf=\"msg.type === 'markdown'\">\r\n            <lib-agent-avatar *ngIf=\"msg.role !== 'user'\" size=\"normal\"></lib-agent-avatar>\r\n            <app-markdown [content]=\"msg.content\"></app-markdown>\r\n          </div>\r\n          <div *ngIf=\"msg.type === 'error'\" class=\"message-item\">\r\n            <div class=\"flex gap-2 message-bot\">\r\n              <lib-agent-avatar size=\"normal\"></lib-agent-avatar>\r\n              <p-message severity=\"error\">{{msg.content}}</p-message>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"isBotWritting\" class=\"message-item\">\r\n      <div class=\"flex gap-2 message-bot\">\r\n        <lib-agent-avatar size=\"normal\"></lib-agent-avatar>\r\n        <div\r\n          class=\"w-fit\">\r\n          <span class=\"typing-dots\">\r\n            <span class=\"dot\"></span>\r\n            <span class=\"dot\"></span>\r\n            <span class=\"dot\"></span>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #bottom></div>\r\n</div>", styles: ["@charset \"UTF-8\";.messages-container{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.5) transparent}.messages-container::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-track{background:transparent}.messages-container::-webkit-scrollbar-thumb{background-color:#9ca3af80;border-radius:4px}.messages-container::-webkit-scrollbar-thumb:hover{background-color:#9ca3afb3}@media (max-width: 768px){.messages-container{scrollbar-width:none;-ms-overflow-style:none}.messages-container::-webkit-scrollbar{display:none}}.messages-container.scroll-inline{max-width:60rem;margin:0 auto}.messages-container.scroll-inline .messages-content{max-width:100%}.messages-content{max-width:60rem;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.message-item{width:100%}.message-bot{width:100%;max-width:100%}.message-user{max-width:85%}.typing-dots{display:inline-flex;align-items:center;gap:4px;padding:4px 0}.typing-dots .dot{width:8px;height:8px;background-color:var(--primary-color);border-radius:50%;animation:typingBounce 1.4s infinite ease-in-out both}.typing-dots .dot:nth-child(1){animation-delay:0s}.typing-dots .dot:nth-child(2){animation-delay:.2s}.typing-dots .dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}\n"] }]
+        }], propDecorators: { chatContainer: [{
+                type: ViewChild,
+                args: ['chatContainer']
+            }], messages: [{
+                type: Input
+            }], isBotWritting: [{
+                type: Input
+            }], scrollMode: [{
+                type: Input
+            }], agentIcon: [{
+                type: Input
+            }] } });
+
+class InputComponent {
+    files = [];
+    isRecording = false;
+    isLoading = false;
+    isBotWritting = false;
+    header;
+    mode = 'default';
+    sendInput = new EventEmitter();
+    startRecording = new EventEmitter();
+    stopRecording = new EventEmitter();
+    uploadFile = new EventEmitter();
+    userInput = '';
     handleKeyDown(event) {
         const trimmedInput = this.userInput?.trim();
         if (event.key === 'Enter' && !event.shiftKey) {
-            if (!trimmedInput || this.isBotWritting) {
+            if (!trimmedInput || this.isBotWritting || this.isLoading) {
                 event.preventDefault();
                 return;
             }
             event.preventDefault();
-            this.send();
+            this.sendInput.emit(trimmedInput);
+            this.userInput = '';
         }
     }
-    getAvatarStyles() {
-        const width = window.innerWidth;
-        if (width < 576) {
-            return { 'font-size': '1.25rem', 'width': '2rem', 'aspect-ratio': '1 / 1' };
+    send() {
+        const trimmedInput = this.userInput?.trim();
+        if (!trimmedInput || this.isBotWritting) {
+            return;
         }
-        if (width < 768) {
-            return { 'font-size': '1.5rem', 'width': '2.25rem', 'aspect-ratio': '1 / 1' };
+        this.sendInput.emit(trimmedInput);
+        this.userInput = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: InputComponent, isStandalone: true, selector: "lib-input", inputs: { files: "files", isRecording: "isRecording", isLoading: "isLoading", isBotWritting: "isBotWritting", header: "header", mode: "mode" }, outputs: { sendInput: "sendInput", startRecording: "startRecording", stopRecording: "stopRecording", uploadFile: "uploadFile" }, host: { properties: { "class.inputModeDefault": "mode === \"default\"", "class.inputModeBubble": "mode === \"bubble\"" }, classAttribute: "block w-full" }, ngImport: i0, template: "<div class=\"input-wrapper input-default\">\r\n    <app-file [files]=\"files || []\" role=\"assitant\" [remove]=\"true\" />\r\n    <form (ngSubmit)=\"send()\" class=\"w-full flex flex-column gap-2\">\r\n        <textarea pTextarea id=\"input\" name=\"userInput\" [(ngModel)]=\"userInput\"\r\n            class=\"custom-input w-full text-base\" style=\"max-height: 200px\"\r\n            [placeholder]=\"header?.placeholder || ''\" rows=\"1\" [autoResize]=\"true\"\r\n            (keydown)=\"handleKeyDown($event)\"></textarea>\r\n        <div class=\"flex align-items-center justify-content-between w-full\">\r\n\r\n            <p-button icon=\"pi pi-paperclip\" [text]=\"true\" (click)=\"fileInputChat.click()\"\r\n                [rounded]=\"true\" />\r\n            <input type=\"file\" #fileInputChat multiple (change)=\"uploadFile.emit($event)\" style=\"display: none;\">\r\n\r\n            <div class=\"flex align-items-center justify-content-end w-full gap-2\">\r\n                <p-button *ngIf=\"!isRecording\" icon=\"pi pi-microphone\" [text]=\"true\" (click)=\"startRecording.emit()\"\r\n                    [rounded]=\"true\" />\r\n                <p-button *ngIf=\"isRecording\" icon=\"pi pi-stop\" [text]=\"true\" (click)=\"stopRecording.emit()\"\r\n                    severity=\"danger\" [rounded]=\"true\" />\r\n                <p-button icon=\"pi pi-send\" [rounded]=\"true\" type=\"submit\"\r\n                    [disabled]=\"isLoading || isBotWritting || (!userInput.trim() && (!files || files.length === 0))\" />\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".input-wrapper{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;width:100%}:host.inputModeDefault .input-default{border:1px solid var(--p-surface-400);border-radius:1.5rem;background-color:var(--p-surface-0)}:host.inputModeBubble .input-default{border:none;border-radius:0;background-color:var(--p-surface-0);border-top:1px solid var(--p-surface-200);padding:.75rem 1rem}.custom-input{border:none!important;box-shadow:none!important}.custom-input:focus{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: FileComponent, selector: "app-file", inputs: ["files", "role", "remove"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-input', imports: [CommonModule, FormsModule, ButtonModule, Textarea, ChipModule, FileComponent], host: {
+                        'class': 'block w-full',
+                        '[class.inputModeDefault]': 'mode === "default"',
+                        '[class.inputModeBubble]': 'mode === "bubble"',
+                    }, template: "<div class=\"input-wrapper input-default\">\r\n    <app-file [files]=\"files || []\" role=\"assitant\" [remove]=\"true\" />\r\n    <form (ngSubmit)=\"send()\" class=\"w-full flex flex-column gap-2\">\r\n        <textarea pTextarea id=\"input\" name=\"userInput\" [(ngModel)]=\"userInput\"\r\n            class=\"custom-input w-full text-base\" style=\"max-height: 200px\"\r\n            [placeholder]=\"header?.placeholder || ''\" rows=\"1\" [autoResize]=\"true\"\r\n            (keydown)=\"handleKeyDown($event)\"></textarea>\r\n        <div class=\"flex align-items-center justify-content-between w-full\">\r\n\r\n            <p-button icon=\"pi pi-paperclip\" [text]=\"true\" (click)=\"fileInputChat.click()\"\r\n                [rounded]=\"true\" />\r\n            <input type=\"file\" #fileInputChat multiple (change)=\"uploadFile.emit($event)\" style=\"display: none;\">\r\n\r\n            <div class=\"flex align-items-center justify-content-end w-full gap-2\">\r\n                <p-button *ngIf=\"!isRecording\" icon=\"pi pi-microphone\" [text]=\"true\" (click)=\"startRecording.emit()\"\r\n                    [rounded]=\"true\" />\r\n                <p-button *ngIf=\"isRecording\" icon=\"pi pi-stop\" [text]=\"true\" (click)=\"stopRecording.emit()\"\r\n                    severity=\"danger\" [rounded]=\"true\" />\r\n                <p-button icon=\"pi pi-send\" [rounded]=\"true\" type=\"submit\"\r\n                    [disabled]=\"isLoading || isBotWritting || (!userInput.trim() && (!files || files.length === 0))\" />\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>", styles: [".input-wrapper{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;width:100%}:host.inputModeDefault .input-default{border:1px solid var(--p-surface-400);border-radius:1.5rem;background-color:var(--p-surface-0)}:host.inputModeBubble .input-default{border:none;border-radius:0;background-color:var(--p-surface-0);border-top:1px solid var(--p-surface-200);padding:.75rem 1rem}.custom-input{border:none!important;box-shadow:none!important}.custom-input:focus{outline:none!important;box-shadow:none!important}\n"] }]
+        }], propDecorators: { files: [{
+                type: Input
+            }], isRecording: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], isBotWritting: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], sendInput: [{
+                type: Output
+            }], startRecording: [{
+                type: Output
+            }], stopRecording: [{
+                type: Output
+            }], uploadFile: [{
+                type: Output
+            }] } });
+
+class GeneralAgentComponent {
+    // Propiedades internas (ya no inputs/outputs)
+    agentService = inject(AgentService);
+    messages$ = this.agentService.messages$;
+    isBotWritting$ = this.agentService.isBotWritting$;
+    headerConfig$ = this.agentService.headerConfig$;
+    isRecording$ = this.agentService.isRecording$;
+    selectedFiles$ = this.agentService.selectedFiles$;
+    isLoading$ = this.agentService.isLoading$;
+    vm$ = combineLatest({
+        header: this.headerConfig$,
+        files: this.selectedFiles$,
+        isRec: this.isRecording$,
+        bot: this.isBotWritting$,
+        messages: this.messages$,
+        loading: this.isLoading$
+    });
+    agentId = '';
+    idKatios = '';
+    /** 'edge' = scroll en el borde del contenedor, 'inline' = scroll pegado al chat */
+    scrollMode = 'edge';
+    async ngOnChanges(changes) {
+        if (changes['agentId'] || changes['idKatios']) {
+            await this.initAgent();
         }
-        return { 'font-size': '2rem', 'width': '2.5rem', 'height': '2.5rem', 'aspect-ratio': '1 / 1' };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GeneralAgentComponent, deps: [{ token: AI_AGENTS }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: GeneralAgentComponent, isStandalone: true, selector: "app-general-agent", inputs: { agentType: "agentType", agentId: "agentId", idKatios: "idKatios" }, viewQueries: [{ propertyName: "chatContainer", first: true, predicate: ["chatContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative custom-chat flex flex-column items-center w-full\"\r\n  [ngClass]=\"{ 'justify-content-center': isInitial }\">\r\n  <div class=\"flex flex-column items-center justify-content-center gap-4 p-3 mb-3 text-center md:p-1\" *ngIf=\"isInitial\">\r\n    <h2 class=\"text-2xl font-semibold text-gray-900 md:text-3xl lg:text-4xl\">{{headerConfig?.title || 'Agente'}}</h2>\r\n    <div\r\n      class=\"flex flex-wrap items-start justify-content-center gap-2 border-1 border-300 border-round-3xl p-2 shadow-2 surface-100\">\r\n      <p-avatar image=\"./images/bot.png\" class=\"border-3 border-300 p-1\" shape=\"circle\" size=\"large\"></p-avatar>\r\n      <div *ngIf=\"headerConfig?.initialMessages\" class=\"flex flex-column items-start\">\r\n        <div *ngFor=\"let msg of headerConfig?.initialMessages\">\r\n          <span class=\"text-sm m-0 text-gray-700 md:text-base lg:text-lg\">{{msg}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <p class=\"text-sm text-gray-500\">{{headerConfig?.subtitle}}</p>\r\n  </div>\r\n  <!-- <div class=\"p-2 w-full flex justify-content-center\" *ngIf=\"!isInitial\" >\r\n    <p-tag [rounded]=\"true\" class=\"custom-tag\">\r\n        <div class=\"flex items-center gap-2 px-1\">\r\n          <img alt=\"AI logo\" src=\"./images/n8n.png\" style=\"width: 20px\" />\r\n        <span class=\"text-base\">\r\n            Online\r\n        </span>\r\n      </div>\r\n  </p-tag>  \r\n  </div>  -->\r\n  <div class=\"overflow-auto w-full scroll\" #chatContainer *ngIf=\"!isInitial\">\r\n    <div class=\"flex flex-column gap-3 mx-auto w-full custom-size min-height-0 pt-5 custom-message pb-2\">\r\n      <div *ngFor=\"let msg of messages\">\r\n        <div class=\"flex\"\r\n          [ngClass]=\"msg.role !== 'user' ? 'align-start justify-content-start w-full' : 'align-end justify-content-end'\">\r\n          <div [ngClass]=\"msg.role !== 'user' ? 'w-full' : 'chat-container'\">\r\n            <app-table *ngIf=\"msg.type === 'table'\" [table]=\"msg.content\"></app-table>\r\n            <app-file *ngIf=\"msg.type === 'file'\" [files]=\"msg.content\" [role]=\"msg.role\"></app-file>\r\n            <app-text *ngIf=\"msg.type === 'text'\" [text]=\"msg.content\" [role]=\"msg.role\"></app-text>\r\n            <app-markdown *ngIf=\"msg.type === 'markdown'\" [content]=\"msg.content\" [role]=\"msg.role\"></app-markdown>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"isBotWritting\" class=\"flex gap-2 chat-container\">\r\n        <p-avatar image=\"./images/bot.png\" class=\"bg-gray-100 border-3 border-gray-300 p-1 flex-shrink-0\" shape=\"circle\"\r\n          size=\"large\" [ngStyle]=\"{ 'aspect-ratio': '1 / 1', 'min-width': '40px' }\">\r\n        </p-avatar>\r\n        <div\r\n          class=\"shadow-3 bg-white border-1 border-gray-300 text-gray-900 border-round-right-xl px-3 py-2 border-round-bottom-xl shadow-3 w-fit\">\r\n          <div class=\"flex items-center gap-2\">\r\n            <i class=\"pi pi-spin pi-spinner text-gray-600\"></i>\r\n            <span class=\"text-sm text-gray-600 md:text-base lg:text-lg\">Escribiendo...</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div #bottom></div>\r\n  </div>\r\n\r\n  <!-- Input -->\r\n  <div class=\"flex flex-column items-center justify-content-center custom-size w-full pt-1 pb-1\"\r\n    [ngClass]=\"isInitial ? '' : 'down'\">\r\n    <div class=\"flex flex-column gap-2 p-2 w-full border-1 border-400 border-round-3xl bg-white\">\r\n      <app-file [files]=\"selectedFiles\" role=\"assitant\" [remove]=\"true\" />\r\n      <form (ngSubmit)=\"send()\" class=\"w-full flex flex-column align-items-end gap-2\">\r\n        <textarea pTextarea id=\"input\" name=\"userInput\" [(ngModel)]=\"userInput\"\r\n          class=\"custom-input w-full text-sm md:text-base lg:text-lg\" style=\"max-height: 200px\"\r\n          [placeholder]=\"headerConfig?.placeholder || 'Pregunta lo que necesites...'\" rows=\"1\" [autoResize]=\"true\"\r\n          (keydown)=\"handleKeyDown($event)\"></textarea>\r\n        <div class=\"flex align-items-center justify-content-between w-full p-1\">\r\n          <div class=\"file-upload-container\">\r\n            <p-button icon=\"pi pi-paperclip\" [text]=\"true\" (click)=\"fileInput.click()\" severity=\"contrast\" />\r\n              <!-- NUEVO: grabaci\u00F3n -->\r\n            <p-button *ngIf=\"!isRecording\" icon=\"pi pi-microphone\" [text]=\"true\"\r\n            (click)=\"startRecording()\" severity=\"contrast\" />\r\n\r\n            <p-button *ngIf=\"isRecording\" icon=\"pi pi-stop\" [text]=\"true\"\r\n              (click)=\"stopRecording()\" severity=\"danger\" />\r\n      <input type=\"file\" #fileInput multiple (change)=\"uploadFile($event)\" style=\"display: none;\">\r\n          \r\n          </div>\r\n          <p-button icon=\"pi pi-send\" [rounded]=\"true\" severity=\"contrast\" type=\"submit\"\r\n          [disabled]=\"isBotWritting || (!userInput.trim() && selectedFiles.length === 0)\"\r\n          />\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <p class=\"mx-auto text-sm text-gray-600 mt-1\">{{headerConfig?.footer}}</p>\r\n  </div>\r\n</div>", styles: [".custom-chat{height:calc(100vh - 4rem)}.chat-container{max-width:85%}.file-custom{height:100%}.file-upload-container{display:flex;align-items:center}.custom-size{width:auto;max-width:60rem;padding:0 1rem}.user-chat{background:linear-gradient(to bottom right,#60a5fa,#2563eb);color:#fff}.custom-input{border:none!important;box-shadow:none!important}.custom-input:focus{outline:none!important;box-shadow:none!important}.avatar-responsive{aspect-ratio:1/1;width:2.5rem;height:2.5rem;font-size:2rem;flex-shrink:0}@media (max-width: 768px){.avatar-responsive{width:2rem;height:2rem;font-size:1.5rem}}@media (max-width: 576px){.avatar-responsive{width:1.75rem;height:1.75rem;font-size:1.25rem}}.down{position:absolute;bottom:0;left:50%;transform:translate(-50%)}.custom-message{margin-bottom:150px}.custom-tag{background-color:#ea4b714d;border:1px solid #ea4b71;color:#ea4b71}.scroll{scrollbar-width:thin;scrollbar-color:rgba(188,195,205,.8) transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: TextComponent, selector: "app-text", inputs: ["text", "role"] }, { kind: "component", type: FileComponent, selector: "app-file", inputs: ["files", "role", "remove"] }, { kind: "component", type: TableComponent, selector: "app-table", inputs: ["table"] }, { kind: "component", type: MarkdownComponent, selector: "app-markdown", inputs: ["content", "role"] }] });
+    async initAgent() {
+        this.agentService.agentId = this.agentId;
+        this.agentService.idKatios = this.idKatios;
+        await this.agentService.loadAgent();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GeneralAgentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: GeneralAgentComponent, isStandalone: true, selector: "app-general-agent", inputs: { agentId: "agentId", idKatios: "idKatios", scrollMode: "scrollMode" }, host: { classAttribute: "block w-full h-full" }, providers: [AgentService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as vm\">\r\n  <!-- Vista inicial (bienvenida) -->\r\n  <div *ngIf=\"agentService.isInitial\" class=\"custom-chat flex flex-column items-center justify-content-center w-full\">\r\n    <div class=\"flex flex-column items-center justify-content-center gap-4 p-3 mb-3 text-center md:p-1\">\r\n      <h2 *ngIf=\"!vm.loading\" class=\"text-3xl font-semibold text-gray-900 lg:text-4xl\">{{vm.header?.title ||\r\n        'Agente'}}</h2>\r\n      <p-skeleton *ngIf=\"vm.loading\" width=\"25rem\" height=\"2rem\" borderRadius=\"16px\"></p-skeleton>\r\n      <div\r\n        class=\"flex items-start justify-content-center gap-2\">\r\n        <lib-agent-avatar [size]=\"'large'\"></lib-agent-avatar>\r\n        <div *ngIf=\"vm.header?.initialMessages && !vm.loading\" class=\"flex flex-column items-start\">\r\n          <div *ngFor=\"let msg of vm.header?.initialMessages\" class=\"text-left\">\r\n            <span class=\"m-0 text-gray-700 text-base lg:text-lg\">{{msg}}</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"flex flex-column gap-2\">\r\n          <p-skeleton *ngIf=\"vm.loading\" width=\"5rem\" borderRadius=\"16px\"></p-skeleton>\r\n          <p-skeleton *ngIf=\"vm.loading\" width=\"15rem\" borderRadius=\"16px\"></p-skeleton>\r\n        </div>\r\n      </div>\r\n      <p *ngIf=\"!vm.loading\" class=\"text-base text-gray-500\">{{vm.header?.subtitle}}</p>\r\n      <p-skeleton *ngIf=\"vm.loading\" width=\"17rem\" borderRadius=\"16px\"></p-skeleton>\r\n    </div>\r\n    <!-- Input centrado para vista inicial -->\r\n    <div class=\"flex flex-column items-center justify-content-center custom-size w-full pt-1 pb-1\">\r\n      <lib-input [files]=\"vm.files || []\" [isRecording]=\"vm.isRec || false\" [isLoading]=\"vm.loading || false\" [isBotWritting]=\"vm.bot || false\" [header]=\"vm.header\" (sendInput)=\"agentService.send($event)\" (startRecording)=\"agentService.startRecording()\" (stopRecording)=\"agentService.stopRecording()\" (uploadFile)=\"agentService.uploadFile($event)\"></lib-input>\r\n      <p class=\"mx-auto text-sm text-gray-600 mt-1\">{{vm.header?.footer}}</p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Vista de chat (con mensajes) -->\r\n  <div *ngIf=\"!agentService.isInitial\" class=\"custom-chat chat-layout flex flex-column w-full\">\r\n    <!-- \u00C1rea de mensajes con scroll -->\r\n    <div class=\"messages-area flex-1 overflow-hidden\">\r\n      <lib-messages [messages]=\"vm.messages || []\" [isBotWritting]=\"vm.bot || false\" [scrollMode]=\"scrollMode\"></lib-messages>\r\n    </div>\r\n    <!-- Input fijo abajo -->\r\n    <div class=\"input-area flex flex-column items-center w-full py-2 px-2 md:px-0\">\r\n      <div class=\"custom-size w-full\">\r\n        <lib-input [files]=\"vm.files || []\" [isRecording]=\"vm.isRec || false\" [isLoading]=\"vm.loading || false\" [isBotWritting]=\"vm.bot || false\" [header]=\"vm.header\" (sendInput)=\"agentService.send($event)\" (startRecording)=\"agentService.startRecording()\" (stopRecording)=\"agentService.stopRecording()\" (uploadFile)=\"agentService.uploadFile($event)\"></lib-input>\r\n        <p class=\"mx-auto text-sm text-gray-600 mt-1 text-center\">{{vm.header?.footer}}</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>", styles: [".custom-chat{height:100%;width:100%}.chat-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.messages-area{flex:1 1 auto;min-height:0;overflow:hidden}.input-area{flex:0 0 auto;z-index:10}.custom-size{width:100%;max-width:60rem;padding:0 1rem;margin:0 auto}.welcome-agent{--p1: color-mix(in srgb, var(--primary-color) 8%, transparent);background-color:var(--p1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: AgentAvatarComponent, selector: "lib-agent-avatar", inputs: ["size"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: MessagesComponent, selector: "lib-messages", inputs: ["messages", "isBotWritting", "scrollMode", "agentIcon"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: InputComponent, selector: "lib-input", inputs: ["files", "isRecording", "isLoading", "isBotWritting", "header", "mode"], outputs: ["sendInput", "startRecording", "stopRecording", "uploadFile"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GeneralAgentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-general-agent', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, Avatar, TagModule, Textarea, ChipModule, TextComponent, FileComponent, TableComponent, MarkdownComponent], template: "<div class=\"relative custom-chat flex flex-column items-center w-full\"\r\n  [ngClass]=\"{ 'justify-content-center': isInitial }\">\r\n  <div class=\"flex flex-column items-center justify-content-center gap-4 p-3 mb-3 text-center md:p-1\" *ngIf=\"isInitial\">\r\n    <h2 class=\"text-2xl font-semibold text-gray-900 md:text-3xl lg:text-4xl\">{{headerConfig?.title || 'Agente'}}</h2>\r\n    <div\r\n      class=\"flex flex-wrap items-start justify-content-center gap-2 border-1 border-300 border-round-3xl p-2 shadow-2 surface-100\">\r\n      <p-avatar image=\"./images/bot.png\" class=\"border-3 border-300 p-1\" shape=\"circle\" size=\"large\"></p-avatar>\r\n      <div *ngIf=\"headerConfig?.initialMessages\" class=\"flex flex-column items-start\">\r\n        <div *ngFor=\"let msg of headerConfig?.initialMessages\">\r\n          <span class=\"text-sm m-0 text-gray-700 md:text-base lg:text-lg\">{{msg}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <p class=\"text-sm text-gray-500\">{{headerConfig?.subtitle}}</p>\r\n  </div>\r\n  <!-- <div class=\"p-2 w-full flex justify-content-center\" *ngIf=\"!isInitial\" >\r\n    <p-tag [rounded]=\"true\" class=\"custom-tag\">\r\n        <div class=\"flex items-center gap-2 px-1\">\r\n          <img alt=\"AI logo\" src=\"./images/n8n.png\" style=\"width: 20px\" />\r\n        <span class=\"text-base\">\r\n            Online\r\n        </span>\r\n      </div>\r\n  </p-tag>  \r\n  </div>  -->\r\n  <div class=\"overflow-auto w-full scroll\" #chatContainer *ngIf=\"!isInitial\">\r\n    <div class=\"flex flex-column gap-3 mx-auto w-full custom-size min-height-0 pt-5 custom-message pb-2\">\r\n      <div *ngFor=\"let msg of messages\">\r\n        <div class=\"flex\"\r\n          [ngClass]=\"msg.role !== 'user' ? 'align-start justify-content-start w-full' : 'align-end justify-content-end'\">\r\n          <div [ngClass]=\"msg.role !== 'user' ? 'w-full' : 'chat-container'\">\r\n            <app-table *ngIf=\"msg.type === 'table'\" [table]=\"msg.content\"></app-table>\r\n            <app-file *ngIf=\"msg.type === 'file'\" [files]=\"msg.content\" [role]=\"msg.role\"></app-file>\r\n            <app-text *ngIf=\"msg.type === 'text'\" [text]=\"msg.content\" [role]=\"msg.role\"></app-text>\r\n            <app-markdown *ngIf=\"msg.type === 'markdown'\" [content]=\"msg.content\" [role]=\"msg.role\"></app-markdown>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"isBotWritting\" class=\"flex gap-2 chat-container\">\r\n        <p-avatar image=\"./images/bot.png\" class=\"bg-gray-100 border-3 border-gray-300 p-1 flex-shrink-0\" shape=\"circle\"\r\n          size=\"large\" [ngStyle]=\"{ 'aspect-ratio': '1 / 1', 'min-width': '40px' }\">\r\n        </p-avatar>\r\n        <div\r\n          class=\"shadow-3 bg-white border-1 border-gray-300 text-gray-900 border-round-right-xl px-3 py-2 border-round-bottom-xl shadow-3 w-fit\">\r\n          <div class=\"flex items-center gap-2\">\r\n            <i class=\"pi pi-spin pi-spinner text-gray-600\"></i>\r\n            <span class=\"text-sm text-gray-600 md:text-base lg:text-lg\">Escribiendo...</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div #bottom></div>\r\n  </div>\r\n\r\n  <!-- Input -->\r\n  <div class=\"flex flex-column items-center justify-content-center custom-size w-full pt-1 pb-1\"\r\n    [ngClass]=\"isInitial ? '' : 'down'\">\r\n    <div class=\"flex flex-column gap-2 p-2 w-full border-1 border-400 border-round-3xl bg-white\">\r\n      <app-file [files]=\"selectedFiles\" role=\"assitant\" [remove]=\"true\" />\r\n      <form (ngSubmit)=\"send()\" class=\"w-full flex flex-column align-items-end gap-2\">\r\n        <textarea pTextarea id=\"input\" name=\"userInput\" [(ngModel)]=\"userInput\"\r\n          class=\"custom-input w-full text-sm md:text-base lg:text-lg\" style=\"max-height: 200px\"\r\n          [placeholder]=\"headerConfig?.placeholder || 'Pregunta lo que necesites...'\" rows=\"1\" [autoResize]=\"true\"\r\n          (keydown)=\"handleKeyDown($event)\"></textarea>\r\n        <div class=\"flex align-items-center justify-content-between w-full p-1\">\r\n          <div class=\"file-upload-container\">\r\n            <p-button icon=\"pi pi-paperclip\" [text]=\"true\" (click)=\"fileInput.click()\" severity=\"contrast\" />\r\n              <!-- NUEVO: grabaci\u00F3n -->\r\n            <p-button *ngIf=\"!isRecording\" icon=\"pi pi-microphone\" [text]=\"true\"\r\n            (click)=\"startRecording()\" severity=\"contrast\" />\r\n\r\n            <p-button *ngIf=\"isRecording\" icon=\"pi pi-stop\" [text]=\"true\"\r\n              (click)=\"stopRecording()\" severity=\"danger\" />\r\n      <input type=\"file\" #fileInput multiple (change)=\"uploadFile($event)\" style=\"display: none;\">\r\n          \r\n          </div>\r\n          <p-button icon=\"pi pi-send\" [rounded]=\"true\" severity=\"contrast\" type=\"submit\"\r\n          [disabled]=\"isBotWritting || (!userInput.trim() && selectedFiles.length === 0)\"\r\n          />\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <p class=\"mx-auto text-sm text-gray-600 mt-1\">{{headerConfig?.footer}}</p>\r\n  </div>\r\n</div>", styles: [".custom-chat{height:calc(100vh - 4rem)}.chat-container{max-width:85%}.file-custom{height:100%}.file-upload-container{display:flex;align-items:center}.custom-size{width:auto;max-width:60rem;padding:0 1rem}.user-chat{background:linear-gradient(to bottom right,#60a5fa,#2563eb);color:#fff}.custom-input{border:none!important;box-shadow:none!important}.custom-input:focus{outline:none!important;box-shadow:none!important}.avatar-responsive{aspect-ratio:1/1;width:2.5rem;height:2.5rem;font-size:2rem;flex-shrink:0}@media (max-width: 768px){.avatar-responsive{width:2rem;height:2rem;font-size:1.5rem}}@media (max-width: 576px){.avatar-responsive{width:1.75rem;height:1.75rem;font-size:1.25rem}}.down{position:absolute;bottom:0;left:50%;transform:translate(-50%)}.custom-message{margin-bottom:150px}.custom-tag{background-color:#ea4b714d;border:1px solid #ea4b71;color:#ea4b71}.scroll{scrollbar-width:thin;scrollbar-color:rgba(188,195,205,.8) transparent}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [AI_AGENTS]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { chatContainer: [{
-                type: ViewChild,
-                args: ['chatContainer']
-            }], agentType: [{
+            args: [{ selector: 'app-general-agent', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, AgentAvatarComponent, TagModule, ChipModule, MessagesComponent, Skeleton, InputComponent], providers: [AgentService], host: {
+                        'class': 'block w-full h-full'
+                    }, template: "<ng-container *ngIf=\"vm$ | async as vm\">\r\n  <!-- Vista inicial (bienvenida) -->\r\n  <div *ngIf=\"agentService.isInitial\" class=\"custom-chat flex flex-column items-center justify-content-center w-full\">\r\n    <div class=\"flex flex-column items-center justify-content-center gap-4 p-3 mb-3 text-center md:p-1\">\r\n      <h2 *ngIf=\"!vm.loading\" class=\"text-3xl font-semibold text-gray-900 lg:text-4xl\">{{vm.header?.title ||\r\n        'Agente'}}</h2>\r\n      <p-skeleton *ngIf=\"vm.loading\" width=\"25rem\" height=\"2rem\" borderRadius=\"16px\"></p-skeleton>\r\n      <div\r\n        class=\"flex items-start justify-content-center gap-2\">\r\n        <lib-agent-avatar [size]=\"'large'\"></lib-agent-avatar>\r\n        <div *ngIf=\"vm.header?.initialMessages && !vm.loading\" class=\"flex flex-column items-start\">\r\n          <div *ngFor=\"let msg of vm.header?.initialMessages\" class=\"text-left\">\r\n            <span class=\"m-0 text-gray-700 text-base lg:text-lg\">{{msg}}</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"flex flex-column gap-2\">\r\n          <p-skeleton *ngIf=\"vm.loading\" width=\"5rem\" borderRadius=\"16px\"></p-skeleton>\r\n          <p-skeleton *ngIf=\"vm.loading\" width=\"15rem\" borderRadius=\"16px\"></p-skeleton>\r\n        </div>\r\n      </div>\r\n      <p *ngIf=\"!vm.loading\" class=\"text-base text-gray-500\">{{vm.header?.subtitle}}</p>\r\n      <p-skeleton *ngIf=\"vm.loading\" width=\"17rem\" borderRadius=\"16px\"></p-skeleton>\r\n    </div>\r\n    <!-- Input centrado para vista inicial -->\r\n    <div class=\"flex flex-column items-center justify-content-center custom-size w-full pt-1 pb-1\">\r\n      <lib-input [files]=\"vm.files || []\" [isRecording]=\"vm.isRec || false\" [isLoading]=\"vm.loading || false\" [isBotWritting]=\"vm.bot || false\" [header]=\"vm.header\" (sendInput)=\"agentService.send($event)\" (startRecording)=\"agentService.startRecording()\" (stopRecording)=\"agentService.stopRecording()\" (uploadFile)=\"agentService.uploadFile($event)\"></lib-input>\r\n      <p class=\"mx-auto text-sm text-gray-600 mt-1\">{{vm.header?.footer}}</p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Vista de chat (con mensajes) -->\r\n  <div *ngIf=\"!agentService.isInitial\" class=\"custom-chat chat-layout flex flex-column w-full\">\r\n    <!-- \u00C1rea de mensajes con scroll -->\r\n    <div class=\"messages-area flex-1 overflow-hidden\">\r\n      <lib-messages [messages]=\"vm.messages || []\" [isBotWritting]=\"vm.bot || false\" [scrollMode]=\"scrollMode\"></lib-messages>\r\n    </div>\r\n    <!-- Input fijo abajo -->\r\n    <div class=\"input-area flex flex-column items-center w-full py-2 px-2 md:px-0\">\r\n      <div class=\"custom-size w-full\">\r\n        <lib-input [files]=\"vm.files || []\" [isRecording]=\"vm.isRec || false\" [isLoading]=\"vm.loading || false\" [isBotWritting]=\"vm.bot || false\" [header]=\"vm.header\" (sendInput)=\"agentService.send($event)\" (startRecording)=\"agentService.startRecording()\" (stopRecording)=\"agentService.stopRecording()\" (uploadFile)=\"agentService.uploadFile($event)\"></lib-input>\r\n        <p class=\"mx-auto text-sm text-gray-600 mt-1 text-center\">{{vm.header?.footer}}</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>", styles: [".custom-chat{height:100%;width:100%}.chat-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.messages-area{flex:1 1 auto;min-height:0;overflow:hidden}.input-area{flex:0 0 auto;z-index:10}.custom-size{width:100%;max-width:60rem;padding:0 1rem;margin:0 auto}.welcome-agent{--p1: color-mix(in srgb, var(--primary-color) 8%, transparent);background-color:var(--p1)}\n"] }]
+        }], propDecorators: { agentId: [{
                 type: Input
-            }], agentId: [{
+            }], idKatios: [{
+                type: Input
+            }], scrollMode: [{
+                type: Input
+            }] } });
+
+class BubbleChatComponent {
+    agentService = inject(AgentService);
+    messages$ = this.agentService.messages$;
+    isBotWritting$ = this.agentService.isBotWritting$;
+    headerConfig$ = this.agentService.headerConfig$;
+    isRecording$ = this.agentService.isRecording$;
+    selectedFiles$ = this.agentService.selectedFiles$;
+    isLoading$ = this.agentService.isLoading$;
+    vm$ = combineLatest({
+        header: this.headerConfig$,
+        files: this.selectedFiles$,
+        isRec: this.isRecording$,
+        bot: this.isBotWritting$,
+        messages: this.messages$,
+        loading: this.isLoading$
+    });
+    agentId = '';
+    idKatios = '';
+    async ngOnChanges(changes) {
+        if (changes['agentId'] || changes['agentType'] || changes['idKatios']) {
+            await this.initAgent();
+            this.addInitialMessages();
+        }
+    }
+    async initAgent() {
+        this.agentService.agentId = this.agentId;
+        this.agentService.idKatios = this.idKatios;
+        await this.agentService.loadAgent();
+    }
+    addInitialMessages() {
+        const initialMessages = [];
+        this.agentService.headerConfig?.initialMessages?.map(msg => {
+            initialMessages.push({
+                role: 'assistant',
+                type: 'markdown',
+                content: msg
+            });
+        });
+        this.agentService.addFullMessages(initialMessages);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BubbleChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: BubbleChatComponent, isStandalone: true, selector: "lib-bubble-chat", inputs: { agentId: "agentId", idKatios: "idKatios" }, host: { classAttribute: "block w-full h-full" }, providers: [AgentService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"chat-view\">\r\n        <div class=\"messages-wrapper\">\r\n            <lib-messages [messages]=\"vm.messages\" [isBotWritting]=\"vm.bot || vm.loading\" scrollMode=\"inline\" [agentIcon]=\"vm.header?.avatar || 'pi pi-sparkles'\">\r\n            </lib-messages>\r\n        </div>\r\n        <div class=\"input-wrapper\">\r\n            <lib-input mode=\"bubble\" [files]=\"vm.files || []\" [isRecording]=\"vm.isRec || false\" [isLoading]=\"vm.loading || false\"\r\n                [isBotWritting]=\"vm.bot || vm.loading\" [header]=\"vm.header\" (sendInput)=\"agentService.send($event)\"\r\n                (startRecording)=\"agentService.startRecording()\" (stopRecording)=\"agentService.stopRecording()\"\r\n                (uploadFile)=\"agentService.uploadFile($event)\">\r\n            </lib-input>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.chat-view{display:flex;flex-direction:column;height:100%;overflow:hidden}.messages-wrapper{flex:1;overflow:hidden;min-height:0}.chat-view .input-wrapper{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0)}@media (max-width: 768px){.chat-view{height:100%;max-height:100%}.input-wrapper{padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: MessagesComponent, selector: "lib-messages", inputs: ["messages", "isBotWritting", "scrollMode", "agentIcon"] }, { kind: "component", type: InputComponent, selector: "lib-input", inputs: ["files", "isRecording", "isLoading", "isBotWritting", "header", "mode"], outputs: ["sendInput", "startRecording", "stopRecording", "uploadFile"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BubbleChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-bubble-chat', imports: [CommonModule, MessagesComponent, InputComponent], providers: [AgentService], host: {
+                        'class': 'block w-full h-full',
+                    }, template: "<ng-container *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"chat-view\">\r\n        <div class=\"messages-wrapper\">\r\n            <lib-messages [messages]=\"vm.messages\" [isBotWritting]=\"vm.bot || vm.loading\" scrollMode=\"inline\" [agentIcon]=\"vm.header?.avatar || 'pi pi-sparkles'\">\r\n            </lib-messages>\r\n        </div>\r\n        <div class=\"input-wrapper\">\r\n            <lib-input mode=\"bubble\" [files]=\"vm.files || []\" [isRecording]=\"vm.isRec || false\" [isLoading]=\"vm.loading || false\"\r\n                [isBotWritting]=\"vm.bot || vm.loading\" [header]=\"vm.header\" (sendInput)=\"agentService.send($event)\"\r\n                (startRecording)=\"agentService.startRecording()\" (stopRecording)=\"agentService.stopRecording()\"\r\n                (uploadFile)=\"agentService.uploadFile($event)\">\r\n            </lib-input>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.chat-view{display:flex;flex-direction:column;height:100%;overflow:hidden}.messages-wrapper{flex:1;overflow:hidden;min-height:0}.chat-view .input-wrapper{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0)}@media (max-width: 768px){.chat-view{height:100%;max-height:100%}.input-wrapper{padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0))}}\n"] }]
+        }], propDecorators: { agentId: [{
                 type: Input
             }], idKatios: [{
                 type: Input
             }] } });
 
+class BubbleAgentComponent {
+    aiAgentsGatewayService;
+    messageService;
+    idKatios = '';
+    // Estado del componente
+    isOpen = false;
+    selectedAgent = null;
+    agents = [];
+    loading = false;
+    constructor(aiAgentsGatewayService, messageService) {
+        this.aiAgentsGatewayService = aiAgentsGatewayService;
+        this.messageService = messageService;
+    }
+    ngOnChanges() {
+        if (this.idKatios) {
+            this.loading = true;
+            this.aiAgentsGatewayService.getAgents(this.idKatios).subscribe({
+                next: (response) => {
+                    if (response.data)
+                        this.agents = response.data;
+                    this.loading = false;
+                },
+                error: (err) => {
+                    console.error('Error al cargar agentes desde el servicio:', err);
+                    this.agents = [];
+                    this.messageService.add({ severity: 'error', summary: 'Error', detail: 'No se pudieron cargar los agentes. Por favor, inténtalo de nuevo más tarde.' });
+                }
+            });
+        }
+    }
+    toggleChat() {
+        this.isOpen = !this.isOpen;
+        // Si se cierra, volver a la lista de agentes
+        // if (!this.isOpen) {
+        //   this.selectedAgent = null;
+        //   this.messages = [];
+        // }
+    }
+    selectAgent(agent) {
+        this.selectedAgent = agent;
+    }
+    goBack() {
+        this.selectedAgent = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BubbleAgentComponent, deps: [{ token: AI_AGENTS }, { token: i1$2.MessageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: BubbleAgentComponent, isStandalone: true, selector: "lib-bubble-agent", inputs: { idKatios: "idKatios" }, usesOnChanges: true, ngImport: i0, template: "<!-- Bot\u00F3n burbuja flotante -->\r\n<button class=\"bubble-button\" (click)=\"toggleChat()\" [class.is-open]=\"isOpen\">\r\n  <i class=\"pi\" [ngClass]=\"isOpen ? 'pi-times' : 'pi-comments'\"></i>\r\n</button>\r\n\r\n<!-- Panel del chat -->\r\n<div class=\"chat-panel\" [class.is-open]=\"isOpen\">\r\n  <!-- Header del panel -->\r\n  <div class=\"p-3 chat-header\">\r\n    <div class=\"flex align-items-center gap-2\">\r\n      <button *ngIf=\"selectedAgent\" class=\"back-button\" (click)=\"goBack()\">\r\n        <i class=\"pi pi-arrow-left\"></i>\r\n      </button>\r\n      <lib-robot-icon style=\"color: white\" *ngIf=\"selectedAgent\"></lib-robot-icon>\r\n      <div class=\"header-text\">\r\n        <p class=\"header-title text-white font-semibold text-lg\">{{ selectedAgent ? selectedAgent.name : 'Asistentes disponibles' }}</p>\r\n      </div>\r\n    </div>\r\n    <button class=\"close-button\" (click)=\"toggleChat()\">\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Contenido del panel -->\r\n  <div class=\"chat-content\">\r\n    <!-- Vista de lista de agentes -->\r\n    <div *ngIf=\"!selectedAgent\" class=\"agents-list\">\r\n      <!-- Mensaje cuando no hay agentes -->\r\n      <div *ngIf=\"!agents || agents.length === 0 || loading\" class=\"no-agents\">\r\n        <i class=\"pi text-4xl text-gray-400\" [ngClass]=\"loading ? 'pi-spin pi-cog' : 'pi-users'\"></i>\r\n        <p class=\"text-gray-500 mt-2\">{{ loading ? 'Cargando agentes...' : 'No se encontraron agentes' }}</p>\r\n      </div>\r\n      <!-- Lista de agentes -->\r\n      <div class=\"agent-card\" *ngFor=\"let agent of agents\" (click)=\"selectAgent(agent)\">\r\n        <lib-agent-avatar \r\n          [size]=\"'large'\">\r\n        </lib-agent-avatar>\r\n        <div class=\"agent-info\">\r\n          <p class=\"agent-name text-base font-medium\">{{ agent.name }}</p>\r\n          <p class=\"agent-description text-sm text-color-secondary\">{{ agent.description }}</p>\r\n        </div>\r\n        <i class=\"pi pi-chevron-right agent-arrow\"></i>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Vista de chat con el agente seleccionado -->\r\n    <lib-bubble-chat *ngIf=\"selectedAgent\" \r\n      [agentId]=\"selectedAgent.Id\" \r\n      [idKatios]=\"selectedAgent.idKatios\">\r\n    </lib-bubble-chat>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.bubble-button{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:var(--primary-color);border:none;cursor:pointer;box-shadow:0 4px 20px #b0b4b9;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:1000}.bubble-button:hover{transform:scale(1.1);box-shadow:0 6px 25px #96999d}.bubble-button.is-open{transform:rotate(90deg)}.bubble-button i{font-size:1.5rem;color:#fff;transition:transform .3s ease}.chat-panel{position:fixed;bottom:100px;right:24px;width:380px;height:550px;background:var(--p-surface-0);border-radius:16px;box-shadow:0 10px 40px #00000026;display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s ease;z-index:999}.chat-panel.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.chat-header{background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.header-text{display:flex;flex-direction:column}.header-title{margin:0}.header-subtitle{opacity:.9}.back-button,.close-button{background:#fff3;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease}.back-button:hover,.close-button:hover{background:#ffffff4d}.back-button i,.close-button i{color:#fff;font-size:.875rem}.chat-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.agents-list{overflow-y:auto;flex:1}.no-agents{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:2rem;text-align:center}.agents-subtitle{color:var(--p-text-muted-color);font-size:.875rem;margin:0 0 16px;text-align:center}.agent-card{display:flex;align-items:center;gap:12px;padding:12px;cursor:pointer;transition:all .2s ease;border-bottom:1px solid var(--p-surface-200)}.agent-card:hover{background:var(--p-surface-100)}.agent-card:last-child{margin-bottom:0}.agent-info{flex:1;min-width:0}.agent-name{margin:0 0 4px}.agent-description{margin:0;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.agent-arrow{color:var(--p-text-muted-color);font-size:.875rem;flex-shrink:0}@media (max-width: 768px){.chat-panel{width:100vw;height:100vh;height:-webkit-fill-available;height:100dvh;max-height:none;inset:0;border-radius:0;transform:translateY(100%)}.chat-panel.is-open{transform:translateY(0)}.bubble-button{bottom:16px;right:16px;width:56px;height:56px}.bubble-button.is-open{opacity:0;visibility:hidden;transform:scale(0)}.chat-content{flex:1;min-height:0;overflow:hidden}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: AgentAvatarComponent, selector: "lib-agent-avatar", inputs: ["size"] }, { kind: "component", type: BubbleChatComponent, selector: "lib-bubble-chat", inputs: ["agentId", "idKatios"] }, { kind: "component", type: RobotIconComponent, selector: "lib-robot-icon" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BubbleAgentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-bubble-agent', standalone: true, imports: [CommonModule, ButtonModule, AgentAvatarComponent, BubbleChatComponent, RobotIconComponent], template: "<!-- Bot\u00F3n burbuja flotante -->\r\n<button class=\"bubble-button\" (click)=\"toggleChat()\" [class.is-open]=\"isOpen\">\r\n  <i class=\"pi\" [ngClass]=\"isOpen ? 'pi-times' : 'pi-comments'\"></i>\r\n</button>\r\n\r\n<!-- Panel del chat -->\r\n<div class=\"chat-panel\" [class.is-open]=\"isOpen\">\r\n  <!-- Header del panel -->\r\n  <div class=\"p-3 chat-header\">\r\n    <div class=\"flex align-items-center gap-2\">\r\n      <button *ngIf=\"selectedAgent\" class=\"back-button\" (click)=\"goBack()\">\r\n        <i class=\"pi pi-arrow-left\"></i>\r\n      </button>\r\n      <lib-robot-icon style=\"color: white\" *ngIf=\"selectedAgent\"></lib-robot-icon>\r\n      <div class=\"header-text\">\r\n        <p class=\"header-title text-white font-semibold text-lg\">{{ selectedAgent ? selectedAgent.name : 'Asistentes disponibles' }}</p>\r\n      </div>\r\n    </div>\r\n    <button class=\"close-button\" (click)=\"toggleChat()\">\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Contenido del panel -->\r\n  <div class=\"chat-content\">\r\n    <!-- Vista de lista de agentes -->\r\n    <div *ngIf=\"!selectedAgent\" class=\"agents-list\">\r\n      <!-- Mensaje cuando no hay agentes -->\r\n      <div *ngIf=\"!agents || agents.length === 0 || loading\" class=\"no-agents\">\r\n        <i class=\"pi text-4xl text-gray-400\" [ngClass]=\"loading ? 'pi-spin pi-cog' : 'pi-users'\"></i>\r\n        <p class=\"text-gray-500 mt-2\">{{ loading ? 'Cargando agentes...' : 'No se encontraron agentes' }}</p>\r\n      </div>\r\n      <!-- Lista de agentes -->\r\n      <div class=\"agent-card\" *ngFor=\"let agent of agents\" (click)=\"selectAgent(agent)\">\r\n        <lib-agent-avatar \r\n          [size]=\"'large'\">\r\n        </lib-agent-avatar>\r\n        <div class=\"agent-info\">\r\n          <p class=\"agent-name text-base font-medium\">{{ agent.name }}</p>\r\n          <p class=\"agent-description text-sm text-color-secondary\">{{ agent.description }}</p>\r\n        </div>\r\n        <i class=\"pi pi-chevron-right agent-arrow\"></i>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Vista de chat con el agente seleccionado -->\r\n    <lib-bubble-chat *ngIf=\"selectedAgent\" \r\n      [agentId]=\"selectedAgent.Id\" \r\n      [idKatios]=\"selectedAgent.idKatios\">\r\n    </lib-bubble-chat>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.bubble-button{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:var(--primary-color);border:none;cursor:pointer;box-shadow:0 4px 20px #b0b4b9;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:1000}.bubble-button:hover{transform:scale(1.1);box-shadow:0 6px 25px #96999d}.bubble-button.is-open{transform:rotate(90deg)}.bubble-button i{font-size:1.5rem;color:#fff;transition:transform .3s ease}.chat-panel{position:fixed;bottom:100px;right:24px;width:380px;height:550px;background:var(--p-surface-0);border-radius:16px;box-shadow:0 10px 40px #00000026;display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s ease;z-index:999}.chat-panel.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.chat-header{background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.header-text{display:flex;flex-direction:column}.header-title{margin:0}.header-subtitle{opacity:.9}.back-button,.close-button{background:#fff3;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease}.back-button:hover,.close-button:hover{background:#ffffff4d}.back-button i,.close-button i{color:#fff;font-size:.875rem}.chat-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.agents-list{overflow-y:auto;flex:1}.no-agents{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:2rem;text-align:center}.agents-subtitle{color:var(--p-text-muted-color);font-size:.875rem;margin:0 0 16px;text-align:center}.agent-card{display:flex;align-items:center;gap:12px;padding:12px;cursor:pointer;transition:all .2s ease;border-bottom:1px solid var(--p-surface-200)}.agent-card:hover{background:var(--p-surface-100)}.agent-card:last-child{margin-bottom:0}.agent-info{flex:1;min-width:0}.agent-name{margin:0 0 4px}.agent-description{margin:0;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.agent-arrow{color:var(--p-text-muted-color);font-size:.875rem;flex-shrink:0}@media (max-width: 768px){.chat-panel{width:100vw;height:100vh;height:-webkit-fill-available;height:100dvh;max-height:none;inset:0;border-radius:0;transform:translateY(100%)}.chat-panel.is-open{transform:translateY(0)}.bubble-button{bottom:16px;right:16px;width:56px;height:56px}.bubble-button.is-open{opacity:0;visibility:hidden;transform:scale(0)}.chat-content{flex:1;min-height:0;overflow:hidden}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [AI_AGENTS]
+                }] }, { type: i1$2.MessageService }], propDecorators: { idKatios: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of general-agent
  */
@@ -485,5 +765,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AI_AGENTS, GeneralAgentComponent };
+export { AI_AGENTS, BubbleAgentComponent, GeneralAgentComponent };
 //# sourceMappingURL=sf-aiembedded.mjs.map