@dataclouder/ngx-agent-cards 0.0.86 → 0.0.88

package/fesm2022/dataclouder-ngx-agent-cards.mjs

@@ -1,66 +1,62 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, EventEmitter, Component, Input, Output, inject, DestroyRef, signal, Injector, effect, runInInjectionContext, ChangeDetectionStrategy, Pipe, ViewChild, Optional, ViewChildren } from '@angular/core';
-import * as i1$2 from '@angular/common';
-import { CommonModule, NgComponentOutlet } from '@angular/common';
-import * as i1$3 from 'primeng/dynamicdialog';
-import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
-import * as i6 from 'primeng/dialog';
+import { InjectionToken, Injectable, inject, input, output, Input, Component, signal, DestroyRef, computed, ChangeDetectorRef, effect, ChangeDetectionStrategy, Pipe, ViewChild, ViewChildren } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule, DatePipe, DecimalPipe, NgComponentOutlet } from '@angular/common';
+import { DynamicDialogRef, DialogService, DynamicDialogConfig, DynamicDialogModule } from 'primeng/dynamicdialog';
+import * as i2$4 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i2 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
 import * as i1 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormBuilder, FormsModule } from '@angular/forms';
 import { DCMicComponent } from '@dataclouder/ngx-mic';
 import * as i3 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
-import * as i7 from 'primeng/button';
+import * as i2$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i1$1 from '@angular/platform-browser';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, Subject, fromEvent, filter } from 'rxjs';
 import { takeUntil, map } from 'rxjs/operators';
-import * as i4 from 'primeng/skeleton';
+import { DomSanitizer } from '@angular/platform-browser';
+import { AudioSpeed as AudioSpeed$1, TOAST_ALERTS_TOKEN, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
+import * as i1$2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i4$2 from 'primeng/checkbox';
+import * as i2$3 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import { SliderModule } from 'primeng/slider';
-import * as i3$1 from 'primeng/radiobutton';
+import * as i2$2 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i8 from 'primeng/rating';
+import * as i6$1 from 'primeng/rating';
 import { RatingModule } from 'primeng/rating';
-import * as i5 from 'primeng/table';
+import * as i4 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { BadgeModule } from 'primeng/badge';
-import * as i7$1 from 'primeng/tooltip';
+import * as i6 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i4$1 from 'primeng/api';
-import * as i6$1 from '@dataclouder/ngx-core';
-import { TOAST_ALERTS_TOKEN, AudioSpeed as AudioSpeed$1, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
+import * as i3$1 from 'primeng/api';
+import { ActivatedRoute, Router } from '@angular/router';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { PortalModule } from '@angular/cdk/portal';
-import * as i5$1 from 'primeng/inputtext';
+import * as i4$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i11 from 'primeng/togglebutton';
+import * as i6$2 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
-import * as i2$2 from '@dataclouder/ngx-cloud-storage';
-import { AspectType, ResolutionType, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
-import * as i2$1 from '@angular/cdk/dialog';
-import { DIALOG_DATA } from '@angular/cdk/dialog';
-import * as i13 from 'primeng/toggleswitch';
+import { ResolutionType, AspectType, MultiImagesStorageService, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
+import { DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';
+import * as i8 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
-import * as i14 from 'primeng/select';
+import * as i9 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i15 from 'primeng/popover';
+import * as i10 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
-import * as i3$2 from 'primeng/card';
+import * as i2$5 from 'primeng/card';
 import { CardModule } from 'primeng/card';
-import * as i4$3 from 'primeng/dropdown';
+import * as i3$2 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import { ChipModule } from 'primeng/chip';
-import * as i1$4 from '@angular/router';
-import * as i3$3 from 'primeng/paginator';
+import * as i1$3 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i2$3 from 'primeng/speeddial';
+import * as i2$6 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
 
 const characterCardStringDataDefinition = `
@@ -512,10 +508,10 @@ class AudioService {
         // const srcURL = await this.filesCacheService.getURLSrcFile(path);
         this.playWithSrc(path);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AudioService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AudioService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AudioService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -535,8 +531,8 @@ class UserDataExchangeAbstractService {
 }
 
 class DCConversationPromptBuilderService {
-    constructor(userDataExchange) {
-        this.userDataExchange = userDataExchange;
+    constructor() {
+        this.userDataExchange = inject(USER_DATA_EXCHANGE);
     }
     // For chat conversation i need inital settings.
     buildConversationSettings(agentCard, parseDict = null) {
@@ -678,27 +674,24 @@ class DCConversationPromptBuilderService {
         };
         return settings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCConversationPromptBuilderService, deps: [{ token: USER_DATA_EXCHANGE }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCConversationPromptBuilderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationPromptBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationPromptBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCConversationPromptBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationPromptBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: UserDataExchangeAbstractService, decorators: [{
-                    type: Inject,
-                    args: [USER_DATA_EXCHANGE]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class ChatHeaderComponent {
-    constructor(agentCardService) {
-        this.agentCardService = agentCardService;
-        this.isAdmin = false;
+    constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.isAdmin = input(false);
         this.alternativeConversation = [];
-        this.restartConversationEvent = new EventEmitter();
-        this.showInfoEvent = new EventEmitter();
-        this.settingsClickEvent = new EventEmitter();
+        this.restartConversationEvent = output();
+        this.showInfoEvent = output();
+        this.settingsClickEvent = output();
     }
     restartConversation(conversation = null) {
         this.restartConversationEvent.emit(conversation);
@@ -723,87 +716,16 @@ class ChatHeaderComponent {
             this.alternativeConversation = conversationCards.rows;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatHeaderComponent, deps: [{ token: CONVERSATION_AI_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: ChatHeaderComponent, isStandalone: true, selector: "dc-chat-header", inputs: { isAdmin: "isAdmin", alternativeConversation: "alternativeConversation", agentCard: "agentCard" }, outputs: { restartConversationEvent: "restartConversationEvent", showInfoEvent: "showInfoEvent", settingsClickEvent: "settingsClickEvent" }, ngImport: i0, template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n      {{ agentCard.title }}\n    } @else {\n      Reiniciar conversaci\u00F3n\n    }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (isAdmin){\n    <div class=\"admin-controls\">\n      <span class=\"pointer\" (click)=\"changeConversationCard()\"> \uD83D\uDD04 </span>\n      <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span>\n    </div>\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatHeaderComponent, isStandalone: true, selector: "dc-chat-header", inputs: { isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, alternativeConversation: { classPropertyName: "alternativeConversation", publicName: "alternativeConversation", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { restartConversationEvent: "restartConversationEvent", showInfoEvent: "showInfoEvent", settingsClickEvent: "settingsClickEvent" }, ngImport: i0, template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n      {{ agentCard.title }}\n    } @else {\n      Reiniciar conversaci\u00F3n\n    }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (isAdmin()){\n    <div class=\"admin-controls\">\n      <span class=\"pointer\" (click)=\"changeConversationCard()\"> \uD83D\uDD04 </span>\n      <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span>\n    </div>\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat-header', standalone: true, imports: [CommonModule], template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n      {{ agentCard.title }}\n    } @else {\n      Reiniciar conversaci\u00F3n\n    }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (isAdmin){\n    <div class=\"admin-controls\">\n      <span class=\"pointer\" (click)=\"changeConversationCard()\"> \uD83D\uDD04 </span>\n      <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span>\n    </div>\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"] }]
-        }], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }], propDecorators: { isAdmin: [{
-                type: Input
-            }], alternativeConversation: [{
+            args: [{ selector: 'dc-chat-header', standalone: true, imports: [], template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n      {{ agentCard.title }}\n    } @else {\n      Reiniciar conversaci\u00F3n\n    }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (isAdmin()){\n    <div class=\"admin-controls\">\n      <span class=\"pointer\" (click)=\"changeConversationCard()\"> \uD83D\uDD04 </span>\n      <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span>\n    </div>\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { alternativeConversation: [{
                 type: Input
             }], agentCard: [{
                 type: Input
-            }], restartConversationEvent: [{
-                type: Output
-            }], showInfoEvent: [{
-                type: Output
-            }], settingsClickEvent: [{
-                type: Output
-            }] } });
-
-class ChatFooterComponent {
-    constructor() {
-        this.isAIThinking = false;
-        this.score = 0;
-        this.micSettings = { useWhisper: true, lang: 'en' };
-        this.sendMessage = new EventEmitter();
-        this.textInputChanged = new EventEmitter();
-        this.micFinishedEvent = new EventEmitter();
-        this.chatInputControl = new FormControl();
-    }
-    /**
-     * Sets the input text in the textarea
-     * @param text The text to set
-     */
-    setInputText(text) {
-        this.chatInputControl.setValue(text);
-        this.textInputChanged.emit(text);
-    }
-    /**
-     * Handles the mic finished event
-     * @param eventBlob The blob event from the mic component
-     */
-    micFinished(eventBlob) {
-        this.micFinishedEvent.emit(eventBlob);
-    }
-    /**
-     * Sends the user message
-     */
-    sendUserMessage() {
-        if (this.isAIThinking || !this.chatInputControl.value) {
-            return;
-        }
-        const text = this.chatInputControl.value;
-        const message = {
-            content: text,
-            role: ChatRole.User,
-        };
-        this.sendMessage.emit(message);
-        this.chatInputControl.setValue('');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: ChatFooterComponent, isStandalone: true, selector: "dc-chat-footer", inputs: { isAIThinking: "isAIThinking", score: "score", micSettings: "micSettings" }, outputs: { sendMessage: "sendMessage", textInputChanged: "textInputChanged", micFinishedEvent: "micFinishedEvent" }, ngImport: i0, template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <dc-mic\n      style=\"display: flex; align-items: center\"\n      (onInterpretedText)=\"setInputText($event)\"\n      (onFinished)=\"micFinished($event)\"\n      [micSettings]=\"micSettings\"></dc-mic>\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"sendUserMessage()\" [disabled]=\"isAIThinking || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  <div>\n    <p-progressbar showValue=\"false\" [value]=\"score\" [style]=\"{ height: '6px' }\" />\n  </div>\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["isDone", "useWhisper", "targetOrBase", "micSettings"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i7.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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-chat-footer', standalone: true, imports: [CommonModule, ReactiveFormsModule, ProgressBarModule, DCMicComponent, TextareaModule, ButtonModule], template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <dc-mic\n      style=\"display: flex; align-items: center\"\n      (onInterpretedText)=\"setInputText($event)\"\n      (onFinished)=\"micFinished($event)\"\n      [micSettings]=\"micSettings\"></dc-mic>\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"sendUserMessage()\" [disabled]=\"isAIThinking || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  <div>\n    <p-progressbar showValue=\"false\" [value]=\"score\" [style]=\"{ height: '6px' }\" />\n  </div>\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"] }]
-        }], propDecorators: { isAIThinking: [{
-                type: Input
-            }], score: [{
-                type: Input
-            }], micSettings: [{
-                type: Input
-            }], sendMessage: [{
-                type: Output
-            }], textInputChanged: [{
-                type: Output
-            }], micFinishedEvent: [{
-                type: Output
             }] } });
 
 function markdownToHtml(markdown) {
@@ -1007,119 +929,452 @@ function removeAllEmojis(text) {
     return text.replace(/[\p{Emoji_Presentation}\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{E0020}-\u{E007F}\u{FE00}-\u{FE0F}\u{1F900}-\u{1F9FF}\u{1F1E6}-\u{1F1FF}]/gu, '');
 }
 
-const ICONS = {
-    chat: `<svg viewBox="0 0 24 24" fill="currentColor">
-    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c..." />
-  </svg>`,
-    play: `<svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="#263042"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round">
-      <circle cx="12" cy="12" r="10"></circle>
-      <polygon points="10 8 16 12 10 16 10 8"></polygon>
-    </svg>`,
-    loading: `<svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="#263042"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round">
-      <line x1="12" y1="2" x2="12" y2="6"></line>
-      <line x1="12" y1="18" x2="12" y2="22"></line>
-      <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
-      <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
-      <line x1="2" y1="12" x2="6" y2="12"></line>
-      <line x1="18" y1="12" x2="22" y2="12"></line>
-      <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
-      <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
-    </svg>`,
-};
-
-class IconsComponent {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-        this.size = 14;
-        this.color = 'currentColor';
+class MessageProcessingService {
+    constructor() { }
+    // Process message for display
+    processMessage(message, conversationSettings, mutate = false) {
+        const defaultVoice = this.getVoice(conversationSettings.voice);
+        let processedMessage;
+        if (mutate) {
+            // Modify the existing message object
+            message.voice = defaultVoice;
+            processedMessage = message;
+        }
+        else {
+            // Create a new message object
+            processedMessage = {
+                content: message.content,
+                role: message.role,
+                voice: defaultVoice
+            };
+        }
+        // Process based on text engine
+        if (conversationSettings.textEngine === TextEngines.MarkdownMultiMessages) {
+            this.processMultiMessages(processedMessage, conversationSettings);
+        }
+        else if (conversationSettings.textEngine === TextEngines.MarkdownSSML) {
+            if (!conversationSettings.secondaryVoice) {
+                throw new Error('Secondary voice is required for SSML');
+            }
+            const content = this.subsItalicsByTag(processedMessage.content, conversationSettings.secondaryVoice);
+            processedMessage.ssml = '<speak>' + content + '</speak>';
+        }
+        return processedMessage;
     }
-    ngOnChanges(changes) {
-        if (changes['name']) {
-            const svg = ICONS[this.name] || '';
-            this.sanitizedIcon = this.sanitizer.bypassSecurityTrustHtml(svg);
+    // Process multi-messages from markdown
+    processMultiMessages(message, settings) {
+        // Convert markdown to HTML segments
+        const mdToHtml = convertToHTML(message.content);
+        // Map segments to multi-messages
+        message.multiMessages = mdToHtml.map((val) => {
+            // Get the narrator voice from conversation settings
+            const narratorVoice = settings.secondaryVoice || 'en-US-News-L';
+            // Determine if this is italicized text (narrator)
+            const isItalics = val.tag === 'em';
+            const voice = isItalics ? narratorVoice : message.voice;
+            return {
+                voice,
+                content: val.content,
+                audioUrl: null,
+                audioPromise: null,
+                text: val.text,
+                tag: val.tag
+            };
+        });
+    }
+    // Replace italics with voice tags for SSML
+    subsItalicsByTag(text, voiceId = 'it-IT-Neural2-A', tagName = 'voice') {
+        const regex = /\*(.*?)\*/g;
+        return text.replace(regex, (match, p1) => `<${tagName} name="${voiceId}">${p1}</${tagName}>`);
+    }
+    // Get appropriate voice based on settings
+    getVoice(voice_value, targetLang = 'en') {
+        if ([null, '', 'random'].includes(voice_value)) {
+            const voiceCodes = VoiceTTSOptions.map((val) => val.id);
+            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
+        }
+        if (voice_value === 'randomMan') {
+            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender === 'male' && voice.lang.includes(targetLang)).map((val) => val.id);
+            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
+        }
+        else if (voice_value === 'randomWoman') {
+            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender === 'female' && voice.lang.includes(targetLang)).map((val) => val.id);
+            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
+        }
+        else {
+            const voice = VoiceTTSOptions.find((voice) => voice.id === voice_value);
+            if (voice) {
+                return voice.id;
+            }
+            else {
+                console.error('Voice not found getting something random', voice_value);
+                return VoiceTTSOptions.find((voice) => voice.lang.includes(targetLang))?.id || '';
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: IconsComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: IconsComponent, isStandalone: true, selector: "dc-icon", inputs: { name: "name", size: "size", color: "color" }, usesOnChanges: true, ngImport: i0, template: `
-    <span
-      [innerHTML]="sanitizedIcon"
-      [style.display]="'inline-flex'"
-      [style.alignItems]="'center'"
-      [style.justifyContent]="'center'"
-      [style.width.px]="size"
-      [style.height.px]="size"
-      [style.color]="color"></span>
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;line-height:0}span{line-height:0}:host ::ng-deep svg{width:100%;height:100%}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageProcessingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageProcessingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: IconsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-icon', template: `
-    <span
-      [innerHTML]="sanitizedIcon"
-      [style.display]="'inline-flex'"
-      [style.alignItems]="'center'"
-      [style.justifyContent]="'center'"
-      [style.width.px]="size"
-      [style.height.px]="size"
-      [style.color]="color"></span>
-  `, standalone: true, styles: [":host{display:inline-flex;align-items:center;line-height:0}span{line-height:0}:host ::ng-deep svg{width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { name: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageProcessingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
-class AudioTextSyncService {
+class ConversationService {
     constructor() {
-        // Maps to store message-specific signals and observables
-        this.highlightedWordsSignalMap = new Map();
-        this.highlightedWords$Map = new Map();
-        // Maps for cleanup and active audio elements
-        this.cleanup$Map = new Map();
-        this.activeAudioMap = new Map();
-        this.destroyRef = inject(DestroyRef);
-        // Ensure cleanup when service is destroyed
-        this.destroyRef.onDestroy(() => {
-            this.stopAllSyncs();
-        });
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.messageProcessingService = inject(MessageProcessingService);
+        this.messagesSignal = signal([]);
+        this.isThinkingSignal = signal(false);
+        this.conversationSettingsSignal = signal(null);
+        this.agentCardSignal = signal(null);
+        this.isDestroyedSignal = signal(false);
     }
-    /**
-     * Synchronizes audio playback with text transcription
-     * @param audioElement The audio element to sync with
-     * @param transcriptionTimestamps Array of word timestamps
-     * @param messageId Unique identifier for the message
-     */
-    syncAudioWithText(audioElement, transcriptionTimestamps, messageId) {
-        // Stop any existing sync for this message
-        this.stopSync(messageId);
-        // Create new signal and subject for this message if they don't exist
-        if (!this.highlightedWordsSignalMap.has(messageId)) {
-            this.highlightedWordsSignalMap.set(messageId, signal([]));
+    // Get messages as a signal
+    getMessages() {
+        return this.messagesSignal;
+    }
+    // Get thinking state as a signal
+    isThinking() {
+        return this.isThinkingSignal;
+    }
+    // Get conversation settings as a signal
+    getConversationSettings() {
+        return this.conversationSettingsSignal;
+    }
+    // Get agent card as a signal
+    getAgentCard() {
+        return this.agentCardSignal;
+    }
+    // Set destroyed state
+    setDestroyed(value) {
+        this.isDestroyedSignal.set(value);
+    }
+    // Initialize conversation
+    async initConversation(agentCard, conversationBuilder, parseDict) {
+        if (!agentCard?.conversationSettings) {
+            throw new Error('Conversation settings are required');
         }
-        if (!this.highlightedWords$Map.has(messageId)) {
-            this.highlightedWords$Map.set(messageId, new BehaviorSubject([]));
+        this.agentCardSignal.set(agentCard);
+        // Build conversation settings
+        const conversationSettings = conversationBuilder.buildConversationSettings(agentCard, parseDict);
+        this.conversationSettingsSignal.set(conversationSettings);
+        // Update agent card with conversation settings
+        const updatedAgentCard = { ...agentCard, conversationSettings };
+        this.agentCardSignal.set(updatedAgentCard);
+        if (!conversationSettings.messages) {
+            throw new Error('conversationSettings.messages is required in proper format to start conversation');
         }
-        // Create cleanup subject
+        // Set initial messages
+        this.messagesSignal.set(conversationSettings.messages);
+        // Find first assistant message
+        const firstAssistantMsg = conversationSettings.messages.find((message) => message.role === ChatRole.Assistant);
+        if (firstAssistantMsg) {
+            // Process the first assistant message
+            this.processAssistantMessage(firstAssistantMsg, true);
+        }
+        else if (agentCard.conversationSettings.autoStart) {
+            // Auto-start conversation if configured
+            await this.sendCurrentConversation();
+        }
+    }
+    // Send user message
+    async sendUserMessage(message) {
+        if (this.isThinkingSignal()) {
+            return;
+        }
+        // Add message to conversation
+        this.addMessage(message);
+        // Set thinking state
+        this.isThinkingSignal.set(true);
+        try {
+            if (message.audioUrl && this.getAudioPlaybackSetting()) {
+                // Wait for audio to finish playing before sending response
+                await new Promise((resolve) => {
+                    if (message.audioHtml) {
+                        message.audioHtml.addEventListener('ended', () => {
+                            resolve();
+                        });
+                    }
+                    else {
+                        resolve();
+                    }
+                });
+            }
+            // Send to AI service
+            await this.sendCurrentConversation();
+        }
+        finally {
+            this.isThinkingSignal.set(false);
+        }
+    }
+    // Add message to conversation
+    addMessage(message) {
+        this.messagesSignal.update((messages) => [...messages, message]);
+    }
+    // Process assistant message
+    processAssistantMessage(message, mutate = false) {
+        const conversationSettings = this.conversationSettingsSignal();
+        if (!conversationSettings) {
+            throw new Error('Conversation settings not initialized');
+        }
+        return this.messageProcessingService.processMessage(message, conversationSettings, mutate);
+    }
+    // Send current conversation to AI
+    async sendCurrentConversation() {
+        if (this.isDestroyedSignal()) {
+            return;
+        }
+        const messages = this.messagesSignal();
+        const conversationSettings = this.conversationSettingsSignal();
+        const agentCard = this.agentCardSignal();
+        if (!conversationSettings || !agentCard) {
+            throw new Error('Conversation not properly initialized');
+        }
+        if (messages.length > 31) {
+            // Safety limit to prevent infinite conversations
+            return;
+        }
+        let conversationMessages = messages;
+        // Add last prompt if available
+        if (conversationSettings.last_prompt) {
+            conversationMessages = [
+                ...messages,
+                { content: conversationSettings.last_prompt, role: ChatRole.System },
+            ];
+        }
+        // Prepare conversation DTO
+        const conversation = {
+            messages: conversationMessages,
+            conversationType: conversationSettings.conversationType,
+            textEngine: conversationSettings.textEngine,
+            model: agentCard.model,
+        };
+        // Call AI service
+        const response = await this.agentCardService.callChatCompletion(conversation);
+        if (!response) {
+            console.error('No message returned from AI, is your service working?');
+            throw new Error('No message returned from AI');
+        }
+        // Process response
+        const newMessage = this.processAssistantMessage(response);
+        // Add to messages
+        this.addMessage(newMessage);
+        this.isThinkingSignal.set(false);
+    }
+    // Helper to get audio playback setting
+    getAudioPlaybackSetting() {
+        const agentCard = this.agentCardSignal();
+        return agentCard?.conversationSettings?.repeatRecording || false;
+    }
+    // Reset conversation
+    async resetConversation(agentCard) {
+        if (agentCard) {
+            this.agentCardSignal.set(agentCard);
+        }
+        // Clear messages
+        this.messagesSignal.set([]);
+        // Re-initialize with current agent card
+        const currentAgentCard = agentCard || this.agentCardSignal();
+        if (currentAgentCard) {
+            // Note: This would need the conversationBuilder to be injected or passed
+            // await this.initConversation(currentAgentCard, conversationBuilder);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+function extractJsonFromResponse(content) {
+    const jsonMatch = content.match(/\{[\s\S]*?\}/); // Match everything between first { and }
+    if (!jsonMatch)
+        return null;
+    try {
+        return JSON.parse(jsonMatch[0]);
+    }
+    catch (error) {
+        console.error('Error parsing JSON:', error);
+        return null;
+    }
+}
+
+class EvaluationService {
+    constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.scoreSignal = signal(10);
+        this.evaluationResultSignal = signal(null);
+    }
+    // Get score as a signal
+    getScore() {
+        return this.scoreSignal;
+    }
+    // Get evaluation result as a signal
+    getEvaluationResult() {
+        return this.evaluationResultSignal;
+    }
+    // Evaluate conversation
+    async evaluateConversation(messages, evaluator) {
+        // Filter conversation to only include user and assistant messages
+        const conversationMessages = messages.filter((message) => [ChatRole.User, ChatRole.Assistant].includes(message.role));
+        // Check if there are any user messages to evaluate
+        const userMessages = conversationMessages.filter((message) => message.role === ChatRole.User);
+        if (userMessages.length <= 0) {
+            console.log('No messages to evaluate', conversationMessages);
+            return;
+        }
+        // Format conversation for evaluation
+        const conversationMessagesString = conversationMessages
+            .map((message) => `${message.role}: ${message.content}`)
+            .join('\n');
+        // Create evaluation prompt
+        const instructions = `
+Please replay to this task:
+    ${evaluator.task}
+This is the conversation history:
+    ${conversationMessagesString}
+and give the response in next JSON format.
+    ${evaluator.expectedResponseType}
+    `;
+        // Send evaluation request
+        const evaluationMessages = [{ content: instructions, role: ChatRole.User }];
+        const response = await this.agentCardService.callChatCompletion({ messages: evaluationMessages });
+        // Extract JSON from response
+        const jsonData = extractJsonFromResponse(response.content);
+        this.evaluationResultSignal.set(jsonData);
+        // Update score if available
+        if (jsonData.score) {
+            if (jsonData.score <= 3) {
+                this.updateScore(jsonData.score * 10);
+            }
+        }
+    }
+    // Update score with limits
+    updateScore(additionalScore) {
+        this.scoreSignal.update(currentScore => {
+            const newScore = currentScore + additionalScore;
+            return newScore > 100 ? 100 : newScore;
+        });
+    }
+    // Reset score
+    resetScore() {
+        this.scoreSignal.set(10);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class ChatFooterComponent {
+    constructor() {
+        this.conversationService = inject(ConversationService);
+        this.evaluationService = inject(EvaluationService);
+        this.isAIThinking = input(false);
+        this.evaluatorAgentCard = input();
+        this.micSettings = input({ useWhisper: true, lang: 'en' });
+        this.sendMessage = output();
+        this.textInputChanged = output();
+        this.micFinishedEvent = output();
+        this.chatInputControl = new FormControl();
+        // Get score from evaluation service
+        this.score = this.evaluationService.getScore();
+    }
+    /**
+     * Sets the input text in the textarea
+     * @param text The text to set
+     */
+    setInputText(text) {
+        this.chatInputControl.setValue(text);
+        this.textInputChanged.emit(text);
+    }
+    /**
+     * Handles the mic finished event
+     * @param eventBlob The blob event from the mic component
+     */
+    micFinished(eventBlob) {
+        this.micFinishedEvent.emit(eventBlob);
+    }
+    /**
+     * Sends the user message
+     */
+    async sendUserMessage() {
+        if (this.isAIThinking() || !this.chatInputControl.value) {
+            return;
+        }
+        const text = this.chatInputControl.value;
+        const message = {
+            content: text,
+            role: ChatRole.User,
+        };
+        // Emit the message for parent components that need it
+        this.sendMessage.emit(message);
+        // Clear the input field
+        this.chatInputControl.setValue('');
+        // Send the user message to the conversation service
+        await this.conversationService.sendUserMessage(message);
+        // Evaluate conversation after sending message
+        this.evaluateConversation();
+    }
+    /**
+     * Evaluate conversation using evaluator agent
+     */
+    async evaluateConversation() {
+        const messages = this.conversationService.getMessages()();
+        if (this.evaluatorAgentCard()) {
+            await this.evaluationService.evaluateConversation(messages, this.evaluatorAgentCard());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", type: ChatFooterComponent, isStandalone: true, selector: "dc-chat-footer", inputs: { isAIThinking: { classPropertyName: "isAIThinking", publicName: "isAIThinking", isSignal: true, isRequired: false, transformFunction: null }, evaluatorAgentCard: { classPropertyName: "evaluatorAgentCard", publicName: "evaluatorAgentCard", isSignal: true, isRequired: false, transformFunction: null }, micSettings: { classPropertyName: "micSettings", publicName: "micSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", textInputChanged: "textInputChanged", micFinishedEvent: "micFinishedEvent" }, ngImport: i0, template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <dc-mic\n      style=\"display: flex; align-items: center\"\n      (onInterpretedText)=\"setInputText($event)\"\n      (onFinished)=\"micFinished($event)\"\n      [micSettings]=\"micSettings()\"></dc-mic>\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"sendUserMessage()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  <div>\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["isDone", "useWhisper", "targetOrBase", "micSettings"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-chat-footer', standalone: true, imports: [ReactiveFormsModule, ProgressBarModule, DCMicComponent, TextareaModule, ButtonModule], template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <dc-mic\n      style=\"display: flex; align-items: center\"\n      (onInterpretedText)=\"setInputText($event)\"\n      (onFinished)=\"micFinished($event)\"\n      [micSettings]=\"micSettings()\"></dc-mic>\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"sendUserMessage()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  <div>\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"] }]
+        }] });
+
+class AudioTextSyncService {
+    constructor() {
+        // Maps to store message-specific signals and observables
+        this.highlightedWordsSignalMap = new Map();
+        this.highlightedWords$Map = new Map();
+        // Maps for cleanup and active audio elements
+        this.cleanup$Map = new Map();
+        this.activeAudioMap = new Map();
+        this.destroyRef = inject(DestroyRef);
+        // Ensure cleanup when service is destroyed
+        this.destroyRef.onDestroy(() => {
+            this.stopAllSyncs();
+        });
+    }
+    /**
+     * Synchronizes audio playback with text transcription
+     * @param audioElement The audio element to sync with
+     * @param transcriptionTimestamps Array of word timestamps
+     * @param messageId Unique identifier for the message
+     */
+    syncAudioWithText(audioElement, transcriptionTimestamps, messageId) {
+        // Stop any existing sync for this message
+        this.stopSync(messageId);
+        // Create new signal and subject for this message if they don't exist
+        if (!this.highlightedWordsSignalMap.has(messageId)) {
+            this.highlightedWordsSignalMap.set(messageId, signal([]));
+        }
+        if (!this.highlightedWords$Map.has(messageId)) {
+            this.highlightedWords$Map.set(messageId, new BehaviorSubject([]));
+        }
+        // Create cleanup subject
         const cleanup$ = new Subject();
         this.cleanup$Map.set(messageId, cleanup$);
         // Store the active audio element
@@ -1243,202 +1498,385 @@ class AudioTextSyncService {
     isWordHighlighted$(messageId, index) {
         return this.getHighlightedWords$(messageId).pipe(map((words) => words.some((word) => word.index === index && word.isHighlighted)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioTextSyncService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioTextSyncService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AudioTextSyncService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AudioTextSyncService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioTextSyncService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AudioTextSyncService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
-class AudioTextSyncComponent {
-    constructor(cdr, audioTextSyncService) {
-        this.cdr = cdr;
-        this.audioTextSyncService = audioTextSyncService;
-        this.isLoading = false;
-        this.playAudio = new EventEmitter();
-        // Get the highlighted words signal from the service for this specific message
-        this.highlightedWords = signal([]);
-        // Unique ID for this message instance
-        this.messageId = '';
-        this.injector = inject(Injector);
-        // Setup effect to mark for check when highlighted words change
+const ICONS = {
+    chat: `<svg viewBox="0 0 24 24" fill="currentColor">
+    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c..." />
+  </svg>`,
+    play: `<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="#263042"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10"></circle>
+      <polygon points="10 8 16 12 10 16 10 8"></polygon>
+    </svg>`,
+    loading: `<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="#263042"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <line x1="12" y1="2" x2="12" y2="6"></line>
+      <line x1="12" y1="18" x2="12" y2="22"></line>
+      <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
+      <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
+      <line x1="2" y1="12" x2="6" y2="12"></line>
+      <line x1="18" y1="12" x2="22" y2="12"></line>
+      <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
+      <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
+    </svg>`,
+};
+
+class IconsComponent {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+        this.name = input.required();
+        this.size = input(14);
+        this.color = input('currentColor');
+    }
+    ngOnChanges(changes) {
+        if (changes['name']) {
+            const svg = ICONS[this.name()] || '';
+            this.sanitizedIcon = this.sanitizer.bypassSecurityTrustHtml(svg);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: IconsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", type: IconsComponent, isStandalone: true, selector: "dc-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: `
+    <span
+      [innerHTML]="sanitizedIcon"
+      [style.display]="'inline-flex'"
+      [style.alignItems]="'center'"
+      [style.justifyContent]="'center'"
+      [style.width.px]="size()"
+      [style.height.px]="size()"
+      [style.color]="color()"></span>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;line-height:0}span{line-height:0}:host ::ng-deep svg{width:100%;height:100%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: IconsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-icon', template: `
+    <span
+      [innerHTML]="sanitizedIcon"
+      [style.display]="'inline-flex'"
+      [style.alignItems]="'center'"
+      [style.justifyContent]="'center'"
+      [style.width.px]="size()"
+      [style.height.px]="size()"
+      [style.color]="color()"></span>
+  `, standalone: true, styles: [":host{display:inline-flex;align-items:center;line-height:0}span{line-height:0}:host ::ng-deep svg{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Standalone component for audio-text synchronization
+ * This component can work independently from the chat component
+ */
+class StandaloneAudioTextSyncComponent {
+    constructor() {
+        this.message = input(undefined); // Or input.required<MessageAudio>() if always expected
+        this.highlightedWords = signal([]); // Signal for highlighted words
+        this.isLoading = computed(() => this.message()?.isLoading);
+        this.shouldPlayAudio = computed(() => {
+            debugger;
+            const shouldPlay = !!this.message() && this.message()?.shouldPlayAudio;
+            return shouldPlay;
+        });
+        this.playAudio = output();
+        this.audioCompleted = output();
+        this.audioElement = null; // Audio element for playback
+        this.destroy$ = new Subject(); // Cleanup subject
+        // Inject services
+        this.cdr = inject(ChangeDetectorRef); // Keep for now, might remove if template fully signal-driven
+        this.destroyRef = inject(DestroyRef);
+        // Computed signal for message text
+        this.messageText = computed(() => {
+            const msg = this.message(); // Read the input signal
+            return msg?.content || msg?.text || '';
+        });
+        // Computed signal for transcription availability
+        this.hasTranscription = computed(() => {
+            const hasTranscription = !!this.message()?.transcriptionTimestamps && this.message()?.transcriptionTimestamps.length > 0;
+            return hasTranscription;
+        });
+        // Effect to react to message changes and re-initialize
+        effect(() => {
+            debugger;
+            const currentMsg = this.message(); // Read the input signal
+            console.log('Input message signal changed:', currentMsg);
+            if (currentMsg) {
+                // Re-run initialization logic whenever the message signal changes
+                this.initializeBasedOnMessage(currentMsg);
+                // Check if shouldPlayAudio flag is set
+                if (currentMsg.shouldPlayAudio) {
+                    this.startAudioPlayback();
+                }
+            }
+            else {
+                // Handle case where message becomes undefined (cleanup?)
+                this.cleanupAudio();
+                this.highlightedWords.set([]);
+            }
+            // No cdr.markForCheck() needed here usually if template bindings use signals/computed
+        });
+        // Keep the effect for highlightedWords for now, might be redundant if template binds directly
         effect(() => {
-            // Just accessing the signal in an effect will re-run the effect when the signal changes
             this.highlightedWords();
-            // Mark for check to ensure the component updates
-            this.cdr.markForCheck();
+            this.cdr.markForCheck(); // Keep if template uses non-signal bindings for highlighted words
         });
     }
     /**
-     * Check if the message has transcription timestamps
+     * Track function for ngFor to improve performance
      */
-    get hasTranscription() {
-        const hasTranscription = !!this.message.transcriptionTimestamps;
-        console.log('hasTranscription check:', {
-            hasTranscription,
-            transcriptionTimestamps: this.message.transcriptionTimestamps,
-            messageId: this.messageId,
-        });
-        return hasTranscription;
+    trackByIndex(index, item) {
+        return index;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.cleanupAudio();
+    }
+    // This method is called by the effect when the message signal changes
+    initializeBasedOnMessage(msg) {
+        // Initialize or cleanup audio based on URL presence and change
+        if (msg.audioUrl && (!this.audioElement || this.audioElement.src !== msg.audioUrl)) {
+            this.initializeAudio(msg.audioUrl); // Pass URL
+        }
+        else if (!msg.audioUrl && this.audioElement) {
+            // Cleanup if URL removed and element exists
+            this.cleanupAudio();
+        }
+        // Initialize words and sync based on transcription presence
+        if (this.hasTranscription()) {
+            // Use computed signal
+            const timestamps = msg.transcriptionTimestamps || [];
+            this.initializeHighlightedWords(timestamps); // Pass timestamps
+            // Ensure audio sync setup happens if audio element exists
+            if (this.audioElement) {
+                this.setupAudioSync(timestamps); // Pass timestamps
+            }
+        }
+        else {
+            // No transcription, clear words and potentially stop sync listeners
+            this.highlightedWords.set([]);
+            this.destroy$.next(); // Signal existing listeners to stop
+        }
     }
     /**
-     * Get the message text content
+     * Initialize the audio element and set up event listeners
      */
-    get messageText() {
-        return this.message.content || this.message.text;
+    initializeAudio(audioUrl) {
+        // Clean up any existing audio element and listeners first
+        this.cleanupAudio();
+        this.audioElement = new Audio(audioUrl); // Use passed URL
     }
     /**
-     * Track function for ngFor to improve performance
-     * @param index The current item's index
-     * @param item The current item
+     * Initialize highlighted words from transcription timestamps
      */
-    trackByIndex(index, item) {
-        return index;
+    initializeHighlightedWords(timestamps) {
+        const initialWords = timestamps.map((word, index) => ({
+            word: word.word,
+            index,
+            isHighlighted: false,
+        }));
+        this.highlightedWords.set(initialWords);
     }
-    ngOnInit() {
-        // Generate a unique ID for this message instance
-        this.messageId = this.generateMessageId();
-        // Connect to the service's signal for this message
-        // We need to use a different approach since we can't directly assign a read-only signal
-        const messageSignal = this.audioTextSyncService.getHighlightedWordsSignal(this.messageId);
-        // Create an effect to update our local signal when the service signal changes
-        // Use runInInjectionContext to properly create the effect in ngOnInit
-        runInInjectionContext(this.injector, () => {
-            effect(() => {
-                const words = messageSignal();
-                console.log('Effect updating highlightedWords:', {
-                    words,
-                    messageId: this.messageId,
-                    length: words.length,
-                });
-                this.highlightedWords.set(words);
+    /**
+     * Set up audio synchronization with text
+     */
+    setupAudioSync(timestamps) {
+        // Accept timestamps
+        if (!this.audioElement) {
+            // Guard against missing audio element
+            return;
+        }
+        // Important: Clean up previous listeners before setting up new ones
+        this.destroy$.next(); // Signal previous subscriptions to complete
+        // Listen to timeupdate events
+        fromEvent(this.audioElement, 'timeupdate')
+            .pipe(takeUntilDestroyed(this.destroyRef), // Use DestroyRef for component lifecycle
+        takeUntil(this.destroy$), // Use manual subject for re-initialization cleanup
+        map(() => this.audioElement?.currentTime || 0))
+            .subscribe((currentTime) => {
+            // Use the passed timestamps array
+            const updatedWords = timestamps.map((word, index) => {
+                const isHighlighted = currentTime >= word.start - 0.15 && currentTime < word.end + 0.15;
+                return { word: word.word, index, isHighlighted };
             });
+            this.highlightedWords.set(updatedWords);
         });
-        // If the message has transcription but no highlighted words are set,
-        // initialize them with the message's transcription
-        if (this.hasTranscription && this.highlightedWords().length === 0) {
-            const transcriptionTimestamps = this.message.transcriptionTimestamps || [];
-            const initialWords = transcriptionTimestamps.map((word, index) => ({
-                word: word.word,
-                index,
-                isHighlighted: word.highlighted || false,
+        // Listen to ended event for cleanup
+        fromEvent(this.audioElement, 'ended')
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.destroy$))
+            .subscribe(() => {
+            // Reset highlighting when audio ends
+            const resetWords = this.highlightedWords().map((word) => ({
+                // Read current words signal
+                ...word,
+                isHighlighted: false,
             }));
-            this.highlightedWords.set(initialWords);
-            // Also initialize the service signal for this message
-            // This ensures the words are available even before playing
-            this.audioTextSyncService.syncAudioWithText(this.message['audioHtml'] || new Audio(), this.message.transcriptionTimestamps || [], this.messageId);
-        }
+            this.highlightedWords.set(resetWords);
+            // Emit audio completed event with the current message
+            const currentMsg = this.message();
+            if (currentMsg) {
+                // Reset the shouldPlayAudio flag
+                currentMsg.shouldPlayAudio = false;
+                this.audioCompleted.emit(currentMsg);
+            }
+        });
     }
     /**
-     * Generate a unique ID for this message instance
-     * Uses message content/text and a timestamp to ensure uniqueness
+     * Clean up audio element and event listeners
      */
-    generateMessageId() {
-        const messageContent = this.message.content || this.message.text || '';
-        const timestamp = new Date().getTime();
-        return `msg_${messageContent.substring(0, 20).replace(/\s+/g, '_')}_${timestamp}`;
+    cleanupAudio() {
+        if (this.audioElement) {
+            this.audioElement.pause();
+            this.audioElement.removeAttribute('src'); // Use removeAttribute for better cleanup
+            this.audioElement = null;
+            this.destroy$.next(); // Ensure listeners tied to this audio instance are cleaned up
+            // Reset highlighting immediately on cleanup
+            const resetWords = this.highlightedWords().map((word) => ({
+                ...word,
+                isHighlighted: false,
+            }));
+            this.highlightedWords.set(resetWords);
+        }
     }
     /**
-     * Emit event to play the audio message
+     * Play or pause the audio
      */
     onPlayMessage() {
-        this.playAudio.emit(this.message);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioTextSyncComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AudioTextSyncService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AudioTextSyncComponent, isStandalone: true, selector: "dc-audio-text-sync", inputs: { message: "message", isLoading: "isLoading" }, outputs: { playAudio: "playAudio" }, ngImport: i0, template: "<div style=\"display: flex\">\n  <!-- Icon for play/loading status -->\n  <i (click)=\"onPlayMessage()\">\n    <dc-icon *ngIf=\"isLoading\" class=\"spin-animation\" name=\"loading\"></dc-icon>\n    <dc-icon *ngIf=\"!isLoading\" name=\"play\"></dc-icon>\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div>\n    @if (hasTranscription) { @for (wordState of highlightedWords(); track trackByIndex($index, wordState)) {\n    <span [class.highlight]=\"wordState.isHighlighted\">{{ wordState.word }}&nbsp;</span>\n\n    } }@else {\n    <!-- Display regular text content when no transcription is available -->\n    <span [innerHtml]=\"messageText\"></span>\n    }\n  </div>\n</div>\n", styles: [".highlight{background-color:#ff0;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioTextSyncComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-audio-text-sync', standalone: true, imports: [CommonModule, IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div style=\"display: flex\">\n  <!-- Icon for play/loading status -->\n  <i (click)=\"onPlayMessage()\">\n    <dc-icon *ngIf=\"isLoading\" class=\"spin-animation\" name=\"loading\"></dc-icon>\n    <dc-icon *ngIf=\"!isLoading\" name=\"play\"></dc-icon>\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div>\n    @if (hasTranscription) { @for (wordState of highlightedWords(); track trackByIndex($index, wordState)) {\n    <span [class.highlight]=\"wordState.isHighlighted\">{{ wordState.word }}&nbsp;</span>\n\n    } }@else {\n    <!-- Display regular text content when no transcription is available -->\n    <span [innerHtml]=\"messageText\"></span>\n    }\n  </div>\n</div>\n", styles: [".highlight{background-color:#ff0;border-radius:3px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AudioTextSyncService }], propDecorators: { message: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], playAudio: [{
-                type: Output
-            }] } });
-
-class MessageContentComponent {
-    constructor() {
-        this.isLoading = false;
-        this.playAudio = new EventEmitter();
-    }
-    get hasTranscription() {
-        return !!this.message.transcriptionTimestamps;
-    }
-    get messageText() {
-        return this.message.content || this.message.text;
-    }
-    get messageTag() {
-        return this.message.tag || null;
-    }
-    onPlayMessage() {
-        this.playAudio.emit(this.message);
+        const currentMsg = this.message(); // Read signal
+        if (this.audioElement) {
+            if (this.audioElement.paused) {
+                this.startAudioPlayback();
+            }
+            else {
+                this.audioElement.pause();
+            }
+        }
+        else if (currentMsg?.audioUrl) {
+            // Initialization now happens via effect. If element doesn't exist yet,
+            // the effect should create it. Clicking play might need to ensure init runs.
+            // For simplicity, let's re-call initializeAudio here if needed,
+            // though ideally the effect handles it.
+            this.initializeAudio(currentMsg.audioUrl); // Ensure it's created if somehow missed
+            this.startAudioPlayback();
+        }
+        else if (currentMsg) {
+            // If no audio URL is available, emit event to parent component
+            this.playAudio.emit(currentMsg); // Emit the message value
+        }
     }
     /**
-     * Track function for ngFor to improve performance
-     * @param index The current item's index
-     * @param item The current item
+     * Start audio playback and handle any setup needed
      */
-    trackByIndex(index, item) {
-        return index;
-    }
-    ngOnInit() {
-        console.log(this.message);
+    startAudioPlayback() {
+        if (!this.audioElement)
+            return;
+        // Play the audio
+        this.audioElement.play().catch((error) => {
+            console.error('Error playing audio:', error);
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: MessageContentComponent, isStandalone: true, selector: "dc-message-content", inputs: { message: "message", isLoading: "isLoading" }, outputs: { playAudio: "playAudio" }, ngImport: i0, template: "<!-- Message with transcription -->\n@if (hasTranscription) {\n<dc-audio-text-sync [message]=\"message\" [isLoading]=\"isLoading\" (playAudio)=\"playAudio.emit($event)\"></dc-audio-text-sync>\n}@else {\n<!-- Message without transcription -->\n<div style=\"display: flex\">\n  <!-- Icon for play/loading status -->\n  <i (click)=\"onPlayMessage()\">\n    <dc-icon *ngIf=\"isLoading\" class=\"spin-animation\" name=\"loading\"></dc-icon>\n    <dc-icon *ngIf=\"!isLoading\" name=\"play\"></dc-icon>\n  </i>\n  <span style=\"margin-left: 2px\" [ngClass]=\"messageTag\" [innerHtml]=\"message.text || message.content\"></span>\n</div>\n}\n", styles: [".highlight{background-color:#ffff004d}i{cursor:pointer;display:inline-flex;align-items:center;margin-right:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: AudioTextSyncComponent, selector: "dc-audio-text-sync", inputs: ["message", "isLoading"], outputs: ["playAudio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StandaloneAudioTextSyncComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: StandaloneAudioTextSyncComponent, isStandalone: true, selector: "dc-standalone-audio-text-sync", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted" }, ngImport: i0, template: "<div class=\"audio-text-sync-container\">\n  <!-- Icon for play/loading status -->\n  <div>\n    <!-- <span> lo: {{ isLoading() }} tr: {{ hasTranscription() }} play: {{ shouldPlayAudio() }} </span> -->\n  </div>\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @if (isLoading()) {\n    <!-- <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon> -->\n    <i class=\"spin-animation pi pi-spinner-dotted\"></i>\n\n    } @else {\n    <dc-icon name=\"play\"></dc-icon>\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div class=\"text-content\">\n    @if (hasTranscription()) { @for (wordState of highlightedWords(); track trackByIndex($index, wordState)) {\n    <span [class.highlight]=\"wordState.isHighlighted\">{{ wordState.word }}&nbsp;</span>\n    } } @else {\n    <!-- Display regular text content when no transcription is available -->\n    <span [innerHtml]=\"messageText()\"></span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:8px}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MessageContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StandaloneAudioTextSyncComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-message-content', standalone: true, imports: [CommonModule, IconsComponent, AudioTextSyncComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Message with transcription -->\n@if (hasTranscription) {\n<dc-audio-text-sync [message]=\"message\" [isLoading]=\"isLoading\" (playAudio)=\"playAudio.emit($event)\"></dc-audio-text-sync>\n}@else {\n<!-- Message without transcription -->\n<div style=\"display: flex\">\n  <!-- Icon for play/loading status -->\n  <i (click)=\"onPlayMessage()\">\n    <dc-icon *ngIf=\"isLoading\" class=\"spin-animation\" name=\"loading\"></dc-icon>\n    <dc-icon *ngIf=\"!isLoading\" name=\"play\"></dc-icon>\n  </i>\n  <span style=\"margin-left: 2px\" [ngClass]=\"messageTag\" [innerHtml]=\"message.text || message.content\"></span>\n</div>\n}\n", styles: [".highlight{background-color:#ffff004d}i{cursor:pointer;display:inline-flex;align-items:center;margin-right:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { message: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], playAudio: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'dc-standalone-audio-text-sync', standalone: true, imports: [IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\">\n  <!-- Icon for play/loading status -->\n  <div>\n    <!-- <span> lo: {{ isLoading() }} tr: {{ hasTranscription() }} play: {{ shouldPlayAudio() }} </span> -->\n  </div>\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @if (isLoading()) {\n    <!-- <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon> -->\n    <i class=\"spin-animation pi pi-spinner-dotted\"></i>\n\n    } @else {\n    <dc-icon name=\"play\"></dc-icon>\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div class=\"text-content\">\n    @if (hasTranscription()) { @for (wordState of highlightedWords(); track trackByIndex($index, wordState)) {\n    <span [class.highlight]=\"wordState.isHighlighted\">{{ wordState.word }}&nbsp;</span>\n    } } @else {\n    <!-- Display regular text content when no transcription is available -->\n    <span [innerHtml]=\"messageText()\"></span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:8px}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [] });
 
 class MultiMessageContentComponent {
     constructor() {
-        this.isLoading = false;
-        this.playAudio = new EventEmitter();
+        this.messages = input.required();
+        this.isLoading = input(false);
+        this.playAudio = output();
+        // Track current playing message index
+        this.currentPlayingIndex = -1;
     }
     /**
      * Checks if a message has transcription timestamps
      * @param message The message to check
      */
     hasTranscription(message) {
-        // debugger;
+        //
         return !!message.transcriptionTimestamps;
     }
     /**
-     * Emits the playAudio event with the selected message
+     * Emits the playAudio event with the selected message and starts sequential playback
      * @param message The message to play
      */
     onPlayMessage(message) {
+        // Find the index of the message to play
+        const index = this.messages().findIndex((msg) => msg === message || msg.messageId === message.messageId);
+        if (index >= 0) {
+            this.startSequentialPlayback(index);
+        }
+        // Also emit to parent if needed
         this.playAudio.emit(message);
     }
+    /**
+     * Method to start playing the sequence
+     * @param startIndex Index of the message to start playing from
+     */
+    startSequentialPlayback(startIndex = 0) {
+        this.currentPlayingIndex = startIndex;
+        const messages = this.messages();
+        if (messages && messages.length > startIndex) {
+            // Reset all messages
+            messages.forEach((msg) => (msg.shouldPlayAudio = false));
+            // Set the current message to play
+            messages[startIndex].shouldPlayAudio = true;
+        }
+    }
+    /**
+     * Handle audio completion from child component
+     * @param message The message that completed playback
+     */
+    onAudioCompleted(message) {
+        // Find the index of the completed message
+        const completedIndex = this.messages().findIndex((msg) => msg === message || msg.messageId === message.messageId);
+        if (completedIndex >= 0 && completedIndex < this.messages().length - 1) {
+            // Reset current message
+            const messages = this.messages();
+            messages[completedIndex].shouldPlayAudio = false;
+            // Play the next message
+            this.currentPlayingIndex = completedIndex + 1;
+            messages[this.currentPlayingIndex].shouldPlayAudio = true;
+        }
+        else {
+            // All messages played or message not found
+            this.currentPlayingIndex = -1;
+        }
+    }
     ngOnInit() {
-        console.log(this.messages);
+        console.log(this.messages());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MultiMessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: MultiMessageContentComponent, isStandalone: true, selector: "dc-multi-message-content", inputs: { messages: "messages", isLoading: "isLoading" }, outputs: { playAudio: "playAudio" }, ngImport: i0, template: "@for (message of messages; track message) {\n<!-- Message with transcription -->\n@if (hasTranscription(message)) {\n<div style=\"display: flex\">\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading, message: message }\"></ng-container>\n  <dc-audio-text-sync [message]=\"message\"></dc-audio-text-sync>\n</div>\n}@else {\n<!-- Message without transcription -->\n\n<div style=\"display: flex\">\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading, message: message }\"></ng-container>\n  <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text || message.content\"></span>\n</div>\n} }\n\n<!-- Icon template for play/loading status -->\n<ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n  <i (click)=\"onPlayMessage(message)\">\n    <dc-icon *ngIf=\"isLoading\" class=\"spin-animation\" name=\"loading\"></dc-icon>\n    <dc-icon *ngIf=\"!isLoading\" name=\"play\"></dc-icon>\n  </i>\n</ng-template>\n", styles: [".highlight{background-color:#ffff004d}i{cursor:pointer;display:inline-flex;align-items:center;margin-right:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: AudioTextSyncComponent, selector: "dc-audio-text-sync", inputs: ["message", "isLoading"], outputs: ["playAudio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MultiMessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: MultiMessageContentComponent, isStandalone: true, selector: "dc-multi-message-content", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playAudio: "playAudio" }, ngImport: i0, template: "@for (message of messages(); track message) {\n  <!-- Message with transcription -->\n  @if (hasTranscription(message)) {\n    <dc-standalone-audio-text-sync [message]=\"message\" (playAudio)=\"onPlayMessage(message)\" (audioCompleted)=\"onAudioCompleted(message)\"></dc-standalone-audio-text-sync>\n    }@else {\n    <!-- Message without transcription -->\n\n    <div style=\"display: flex\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading(), message: message }\"></ng-container>\n      <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text || message.content\"></span>\n    </div>\n    } }\n\n    <!-- Icon template for play/loading status -->\n    <ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n      <i (click)=\"onPlayMessage(message)\">\n        @if (isLoading) {\n          <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon>\n        }\n        @if (!isLoading) {\n          <dc-icon name=\"play\"></dc-icon>\n        }\n      </i>\n    </ng-template>\n", styles: [".highlight{background-color:#ffff004d}i{cursor:pointer;display:inline-flex;align-items:center;margin-right:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: StandaloneAudioTextSyncComponent, selector: "dc-standalone-audio-text-sync", inputs: ["message"], outputs: ["playAudio", "audioCompleted"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MultiMessageContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-multi-message-content', standalone: true, imports: [CommonModule, IconsComponent, AudioTextSyncComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (message of messages; track message) {\n<!-- Message with transcription -->\n@if (hasTranscription(message)) {\n<div style=\"display: flex\">\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading, message: message }\"></ng-container>\n  <dc-audio-text-sync [message]=\"message\"></dc-audio-text-sync>\n</div>\n}@else {\n<!-- Message without transcription -->\n\n<div style=\"display: flex\">\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading, message: message }\"></ng-container>\n  <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text || message.content\"></span>\n</div>\n} }\n\n<!-- Icon template for play/loading status -->\n<ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n  <i (click)=\"onPlayMessage(message)\">\n    <dc-icon *ngIf=\"isLoading\" class=\"spin-animation\" name=\"loading\"></dc-icon>\n    <dc-icon *ngIf=\"!isLoading\" name=\"play\"></dc-icon>\n  </i>\n</ng-template>\n", styles: [".highlight{background-color:#ffff004d}i{cursor:pointer;display:inline-flex;align-items:center;margin-right:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { messages: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], playAudio: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MultiMessageContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-multi-message-content', standalone: true, imports: [IconsComponent, StandaloneAudioTextSyncComponent, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (message of messages(); track message) {\n  <!-- Message with transcription -->\n  @if (hasTranscription(message)) {\n    <dc-standalone-audio-text-sync [message]=\"message\" (playAudio)=\"onPlayMessage(message)\" (audioCompleted)=\"onAudioCompleted(message)\"></dc-standalone-audio-text-sync>\n    }@else {\n    <!-- Message without transcription -->\n\n    <div style=\"display: flex\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading(), message: message }\"></ng-container>\n      <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text || message.content\"></span>\n    </div>\n    } }\n\n    <!-- Icon template for play/loading status -->\n    <ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n      <i (click)=\"onPlayMessage(message)\">\n        @if (isLoading) {\n          <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon>\n        }\n        @if (!isLoading) {\n          <dc-icon name=\"play\"></dc-icon>\n        }\n      </i>\n    </ng-template>\n", styles: [".highlight{background-color:#ffff004d}i{cursor:pointer;display:inline-flex;align-items:center;margin-right:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [] });
 
 function matchTranscription(originalText, transcription) {
     const result = [];
@@ -1485,65 +1923,104 @@ function extractAudioAndTranscription(message, audio) {
         message.transcriptionTimestamps = matchTranscription(message.text || message.content, message.transcription.words);
     }
 }
+function buildObjectTTSRequest(message, settings = {}) {
+    const generateTranscription = settings?.highlightWords ?? false;
+    const speedRate = settings?.speedRate || 0;
+    const speed = typeof settings?.speed === 'string' ? settings.speed : AudioSpeed$1.Regular;
+    const text = removeEmojis(message.text || message.content);
+    return {
+        text,
+        voice: message.voice || settings.voice,
+        generateTranscription,
+        speedRate,
+        speed,
+    };
+}
 
 class ChatMessageComponent {
-    constructor(audioService, agentCardService, audioTextSyncService) {
-        this.audioService = audioService;
-        this.agentCardService = agentCardService;
-        this.audioTextSyncService = audioTextSyncService;
+    constructor() {
+        this.audioService = inject(AudioService);
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.audioTextSyncService = inject(AudioTextSyncService);
+        this.chatMessage = input.required();
+        this.chatUserSettings = input(null);
+        this.audioMessage = signal(null);
         this.destroyRef = inject(DestroyRef);
         this.conversationChatSettings = signal(null);
         this.isLoading = signal(false);
+        // Field initializer for the effect - runs during component creation
+        this.messageEffect = effect(() => {
+            const message = this.chatMessage();
+            if (!message)
+                return;
+            const settings$ = this.conversationChatSettings();
+            // Skip processing if settings aren't loaded yet
+            if (!settings$)
+                return;
+            if (message.role === ChatRole.AssistantHelper) {
+                return;
+            }
+            if (message.role === ChatRole.User) {
+                if (settings$.repeatRecording && settings$.synthVoice && message.audioUrl) {
+                    this.playMessage(message);
+                }
+            }
+            else if (settings$.synthVoice) {
+                if (message.multiMessages) {
+                    this.generateAndPlayAllAudios(message.multiMessages);
+                }
+                else {
+                    this.generateAndPlayAudio(message);
+                }
+            }
+        });
+        // Computed properties for easier access to signal values
+        this.messageRole = computed(() => this.chatMessage()?.role);
+        this.hasMultiMessages = computed(() => !!this.chatMessage()?.multiMessages);
+        this.multiMessages = computed(() => this.chatMessage()?.multiMessages || []);
+        this.messageContent = computed(() => this.chatMessage()?.content || '');
+        this.messageTranslation = computed(() => this.chatMessage()?.translation);
+        this.isUserMessage = computed(() => this.messageRole() === ChatRole.User);
+        this.isAssistantMessage = computed(() => this.messageRole() === ChatRole.Assistant);
+        this.isAssistantHelperMessage = computed(() => this.messageRole() === ChatRole.AssistantHelper);
     }
     async ngOnInit() {
+        // Load settings - the effect will react to this change
         const settings = await this.agentCardService.getConversationUserChatSettings();
         this.conversationChatSettings.set(settings);
-        if (this.chatMessage.role === ChatRole.AssistantHelper) {
-            return;
-        }
-        const settings$ = this.conversationChatSettings();
-        if (this.chatMessage.role === ChatRole.User) {
-            if (settings$?.repeatRecording && settings$?.synthVoice) {
-                this.playMessage(this.chatMessage);
-            }
-        }
-        else if (settings$?.synthVoice) {
-            if (this.chatMessage.multiMessages) {
-                this.generateAndPlayAllAudios(this.chatMessage.multiMessages);
-            }
-            else {
-                this.generateAndPlayAudio(this.chatMessage);
-            }
-        }
+        // No need for effect here as it's now a field initializer
     }
     async generateAndPlayAudio(message, overwriteText = null) {
-        this.isLoading.set(true);
+        // this.isLoading.set(true);
+        this.audioMessage.set({ ...message, isLoading: true });
         try {
             const text = overwriteText || message.content;
-            const ttsObject = this.buildObjectTTSRequest({ ...this.chatMessage, text });
+            const ttsObject = buildObjectTTSRequest({ ...message, text }, this.conversationChatSettings());
             if (message.ssml) {
                 ttsObject.ssml = message.ssml;
             }
             const speechAudio = await this.agentCardService.getTextAudioFile(ttsObject);
             extractAudioAndTranscription(message, speechAudio);
-            this.playMessage(message);
+            this.audioMessage.set({ ...message, isLoading: false, shouldPlayAudio: true });
+            // this.playMessage(message);
         }
         finally {
             this.isLoading.set(false);
         }
     }
     playMessage(message) {
+        debugger;
         if (!message.audioUrl) {
             return null;
         }
         const audioElement = this.audioService.playAudio(message.audioUrl);
         message['audioHtml'] = audioElement;
-        console.log('Playing message with transcription:', {
-            hasTranscription: !!message.transcriptionTimestamps,
-            transcriptionLength: message.transcriptionTimestamps?.length,
-            audioUrl: message.audioUrl,
-            audioElement,
-        });
+        // console.log('Playing message with transcription:', {
+        //   hasTranscription: !!message.transcriptionTimestamps,
+        //   transcriptionLength: message.transcriptionTimestamps?.length,
+        //   audioUrl: message.audioUrl,
+        //   audioElement,
+        // });
         if (message.transcriptionTimestamps) {
             // Generate a unique ID for this message
             const messageId = this.generateMessageId(message);
@@ -1554,7 +2031,7 @@ class ChatMessageComponent {
             });
             // Use the audio-text sync service instead of direct manipulation
             // Pass the messageId to ensure each message has its own state
-            this.audioTextSyncService.syncAudioWithText(audioElement, message.transcriptionTimestamps, messageId);
+            // this.audioTextSyncService.syncAudioWithText(audioElement, message.transcriptionTimestamps, messageId);
         }
         return audioElement;
     }
@@ -1574,387 +2051,107 @@ class ChatMessageComponent {
     /*
     private setupTranscriptionHighlighting(audioElement: HTMLAudioElement, transcriptionTimestamps: WordTimestamps[]): void {
       // This functionality has been moved to AudioTextSyncService
-    }
-    */
-    generateAndPlayAllAudios(multiMessages) {
-        if (!multiMessages.length)
-            return;
-        let currentIndex = 0;
-        const playAudioSequentially = async () => {
-            if (currentIndex >= multiMessages.length) {
-                return;
-            }
-            const currentMessage = multiMessages[currentIndex];
-            currentMessage.isLoading = true;
-            try {
-                // Process current message audio if needed
-                if (!currentMessage.audioUrl) {
-                    if (currentMessage.audioPromise) {
-                        await currentMessage.audioPromise;
-                    }
-                    else {
-                        const request = this.buildObjectTTSRequest(currentMessage);
-                        currentMessage.audioPromise = this.agentCardService.getTextAudioFile(request);
-                        const audio = await currentMessage.audioPromise;
-                        extractAudioAndTranscription(currentMessage, audio);
-                    }
-                }
-                // Play the current message
-                const audioElement = this.playMessage(currentMessage);
-                if (audioElement) {
-                    audioElement.addEventListener('ended', () => {
-                        currentIndex++;
-                        playAudioSequentially();
-                    });
-                }
-                else {
-                    // If playback failed, move to next message
-                    currentIndex++;
-                    playAudioSequentially();
-                }
-                // Preload next message audio
-                this.preloadNextMessageAudio(multiMessages, currentIndex);
-            }
-            finally {
-                currentMessage.isLoading = false;
-            }
-        };
-        // Start the sequential playback
-        playAudioSequentially();
-    }
-    preloadNextMessageAudio(messages, currentIndex) {
-        if (currentIndex + 1 < messages.length) {
-            const nextMessage = messages[currentIndex + 1];
-            if (!nextMessage.audioUrl && !nextMessage.audioPromise) {
-                const request = this.buildObjectTTSRequest(nextMessage);
-                nextMessage.isLoading = true;
-                nextMessage.audioPromise = this.agentCardService.getTextAudioFile(request);
-                nextMessage.audioPromise.then((audio) => {
-                    extractAudioAndTranscription(nextMessage, audio);
-                    nextMessage.isLoading = false;
-                });
-            }
-        }
-    }
-    buildObjectTTSRequest(message) {
-        const settings = this.conversationChatSettings();
-        const generateTranscription = settings?.highlightWords ?? false;
-        const speedRate = settings?.speedRate || 0;
-        const speed = typeof settings?.speed === 'string' ? settings.speed : AudioSpeed.Regular;
-        const text = removeEmojis(message.text || message.content);
-        return {
-            text,
-            voice: message.voice || this.chatMessage.voice,
-            generateTranscription,
-            speedRate,
-            speed,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatMessageComponent, deps: [{ token: AudioService }, { token: CONVERSATION_AI_TOKEN }, { token: AudioTextSyncService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: ChatMessageComponent, isStandalone: true, selector: "dc-chat-message", inputs: { chatMessage: "chatMessage", chatUserSettings: "chatUserSettings" }, ngImport: i0, template: "<!-- Multi-message display -->\n<span class=\"message-container\">\n  @if (chatMessage?.multiMessages) {\n  <!-- Single message display -->\n  <dc-multi-message-content [messages]=\"chatMessage.multiMessages\" (playAudio)=\"playMessage($event)\"> </dc-multi-message-content>\n  } @else {\n  <dc-message-content [message]=\"chatMessage\" [isLoading]=\"isLoading()\" (playAudio)=\"playMessage($event)\"> </dc-message-content>\n  }\n</span>\n\n@if (chatMessage.translation) {\n<!-- Translation display if available -->\n\n<div class=\"translation\">\n  <hr class=\"divider\" />\n  {{ chatMessage.translation }}\n</div>\n}\n", styles: [":host{display:block}.message-container{display:block;line-height:1.5}::ng-deep .em{color:#0d5878;font-style:italic}::ng-deep .strong{font-weight:700;color:#515151}::ng-deep .em_strong{font-weight:700;font-style:italic;color:#0d5878}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid #ffa77e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MessageContentComponent, selector: "dc-message-content", inputs: ["message", "isLoading"], outputs: ["playAudio"] }, { kind: "component", type: MultiMessageContentComponent, selector: "dc-multi-message-content", inputs: ["messages", "isLoading"], outputs: ["playAudio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatMessageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, MessageContentComponent, MultiMessageContentComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Multi-message display -->\n<span class=\"message-container\">\n  @if (chatMessage?.multiMessages) {\n  <!-- Single message display -->\n  <dc-multi-message-content [messages]=\"chatMessage.multiMessages\" (playAudio)=\"playMessage($event)\"> </dc-multi-message-content>\n  } @else {\n  <dc-message-content [message]=\"chatMessage\" [isLoading]=\"isLoading()\" (playAudio)=\"playMessage($event)\"> </dc-message-content>\n  }\n</span>\n\n@if (chatMessage.translation) {\n<!-- Translation display if available -->\n\n<div class=\"translation\">\n  <hr class=\"divider\" />\n  {{ chatMessage.translation }}\n</div>\n}\n", styles: [":host{display:block}.message-container{display:block;line-height:1.5}::ng-deep .em{color:#0d5878;font-style:italic}::ng-deep .strong{font-weight:700;color:#515151}::ng-deep .em_strong{font-weight:700;font-style:italic;color:#0d5878}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid #ffa77e}\n"] }]
-        }], ctorParameters: () => [{ type: AudioService }, { type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: AudioTextSyncService }], propDecorators: { chatMessage: [{
-                type: Input
-            }], chatUserSettings: [{
-                type: Input
-            }] } });
-
-class MessageProcessingService {
-    constructor() { }
-    // Process message for display
-    processMessage(message, conversationSettings, mutate = false) {
-        const defaultVoice = this.getVoice(conversationSettings.voice);
-        let processedMessage;
-        if (mutate) {
-            // Modify the existing message object
-            message.voice = defaultVoice;
-            processedMessage = message;
-        }
-        else {
-            // Create a new message object
-            processedMessage = {
-                content: message.content,
-                role: message.role,
-                voice: defaultVoice
-            };
-        }
-        // Process based on text engine
-        if (conversationSettings.textEngine === TextEngines.MarkdownMultiMessages) {
-            this.processMultiMessages(processedMessage, conversationSettings);
-        }
-        else if (conversationSettings.textEngine === TextEngines.MarkdownSSML) {
-            if (!conversationSettings.secondaryVoice) {
-                throw new Error('Secondary voice is required for SSML');
-            }
-            const content = this.subsItalicsByTag(processedMessage.content, conversationSettings.secondaryVoice);
-            processedMessage.ssml = '<speak>' + content + '</speak>';
-        }
-        return processedMessage;
-    }
-    // Process multi-messages from markdown
-    processMultiMessages(message, settings) {
-        // Convert markdown to HTML segments
-        const mdToHtml = convertToHTML(message.content);
-        // Map segments to multi-messages
-        message.multiMessages = mdToHtml.map((val) => {
-            // Get the narrator voice from conversation settings
-            const narratorVoice = settings.secondaryVoice || 'en-US-News-L';
-            // Determine if this is italicized text (narrator)
-            const isItalics = val.tag === 'em';
-            const voice = isItalics ? narratorVoice : message.voice;
-            return {
-                voice,
-                content: val.content,
-                audioUrl: null,
-                audioPromise: null,
-                text: val.text,
-                tag: val.tag
-            };
-        });
-    }
-    // Replace italics with voice tags for SSML
-    subsItalicsByTag(text, voiceId = 'it-IT-Neural2-A', tagName = 'voice') {
-        const regex = /\*(.*?)\*/g;
-        return text.replace(regex, (match, p1) => `<${tagName} name="${voiceId}">${p1}</${tagName}>`);
-    }
-    // Get appropriate voice based on settings
-    getVoice(voice_value, targetLang = 'en') {
-        if ([null, '', 'random'].includes(voice_value)) {
-            const voiceCodes = VoiceTTSOptions.map((val) => val.id);
-            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
-        }
-        if (voice_value === 'randomMan') {
-            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender === 'male' && voice.lang.includes(targetLang)).map((val) => val.id);
-            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
-        }
-        else if (voice_value === 'randomWoman') {
-            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender === 'female' && voice.lang.includes(targetLang)).map((val) => val.id);
-            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
-        }
-        else {
-            const voice = VoiceTTSOptions.find((voice) => voice.id === voice_value);
-            if (voice) {
-                return voice.id;
-            }
-            else {
-                console.error('Voice not found getting something random', voice_value);
-                return VoiceTTSOptions.find((voice) => voice.lang.includes(targetLang))?.id || '';
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MessageProcessingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MessageProcessingService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MessageProcessingService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class ConversationService {
-    constructor(agentCardService, messageProcessingService) {
-        this.agentCardService = agentCardService;
-        this.messageProcessingService = messageProcessingService;
-        this.messagesSignal = signal([]);
-        this.isThinkingSignal = signal(false);
-        this.conversationSettingsSignal = signal(null);
-        this.agentCardSignal = signal(null);
-        this.isDestroyedSignal = signal(false);
-    }
-    // Get messages as a signal
-    getMessages() {
-        return this.messagesSignal;
-    }
-    // Get thinking state as a signal
-    isThinking() {
-        return this.isThinkingSignal;
-    }
-    // Get conversation settings as a signal
-    getConversationSettings() {
-        return this.conversationSettingsSignal;
-    }
-    // Get agent card as a signal
-    getAgentCard() {
-        return this.agentCardSignal;
-    }
-    // Set destroyed state
-    setDestroyed(value) {
-        this.isDestroyedSignal.set(value);
-    }
-    // Initialize conversation
-    async initConversation(agentCard, conversationBuilder, parseDict) {
-        if (!agentCard?.conversationSettings) {
-            throw new Error('Conversation settings are required');
-        }
-        this.agentCardSignal.set(agentCard);
-        // Build conversation settings
-        const conversationSettings = conversationBuilder.buildConversationSettings(agentCard, parseDict);
-        this.conversationSettingsSignal.set(conversationSettings);
-        // Update agent card with conversation settings
-        const updatedAgentCard = { ...agentCard, conversationSettings };
-        this.agentCardSignal.set(updatedAgentCard);
-        if (!conversationSettings.messages) {
-            throw new Error('conversationSettings.messages is required in proper format to start conversation');
-        }
-        // Set initial messages
-        this.messagesSignal.set(conversationSettings.messages);
-        // Find first assistant message
-        const firstAssistantMsg = conversationSettings.messages.find((message) => message.role === ChatRole.Assistant);
-        if (firstAssistantMsg) {
-            // Process the first assistant message
-            this.processAssistantMessage(firstAssistantMsg, true);
-        }
-        else if (agentCard.conversationSettings.autoStart) {
-            // Auto-start conversation if configured
-            await this.sendCurrentConversation();
-        }
-    }
-    // Send user message
-    async sendUserMessage(message) {
-        if (this.isThinkingSignal()) {
-            return;
-        }
-        // Add message to conversation
-        this.addMessage(message);
-        // Set thinking state
-        this.isThinkingSignal.set(true);
-        try {
-            if (message.audioUrl && this.getAudioPlaybackSetting()) {
-                // Wait for audio to finish playing before sending response
-                await new Promise((resolve) => {
-                    if (message.audioHtml) {
-                        message.audioHtml.addEventListener('ended', () => {
-                            resolve();
-                        });
+    }
+    */
+    generateAndPlayAllAudios(multiMessages) {
+        if (!multiMessages.length)
+            return;
+        let currentIndex = 0;
+        const playAudioSequentially = async () => {
+            if (currentIndex >= multiMessages.length) {
+                return;
+            }
+            const currentMessage = multiMessages[currentIndex];
+            currentMessage.isLoading = true;
+            try {
+                // Process current message audio if needed
+                if (!currentMessage.audioUrl) {
+                    if (currentMessage.audioPromise) {
+                        await currentMessage.audioPromise;
                     }
                     else {
-                        resolve();
+                        const request = buildObjectTTSRequest(currentMessage, this.conversationChatSettings());
+                        currentMessage.audioPromise = this.agentCardService.getTextAudioFile(request);
+                        const audio = await currentMessage.audioPromise;
+                        extractAudioAndTranscription(currentMessage, audio);
                     }
-                });
+                }
+                // Play the current message
+                const audioElement = this.playMessage(currentMessage);
+                if (audioElement) {
+                    audioElement.addEventListener('ended', () => {
+                        currentIndex++;
+                        playAudioSequentially();
+                    });
+                }
+                else {
+                    // If playback failed, move to next message
+                    currentIndex++;
+                    playAudioSequentially();
+                }
+                // Preload next message audio
+                this.preloadNextMessageAudio(multiMessages, currentIndex);
+            }
+            finally {
+                currentMessage.isLoading = false;
             }
-            // Send to AI service
-            await this.sendCurrentConversation();
-        }
-        finally {
-            this.isThinkingSignal.set(false);
-        }
-    }
-    // Add message to conversation
-    addMessage(message) {
-        this.messagesSignal.update((messages) => [...messages, message]);
-    }
-    // Process assistant message
-    processAssistantMessage(message, mutate = false) {
-        const conversationSettings = this.conversationSettingsSignal();
-        if (!conversationSettings) {
-            throw new Error('Conversation settings not initialized');
-        }
-        return this.messageProcessingService.processMessage(message, conversationSettings, mutate);
-    }
-    // Send current conversation to AI
-    async sendCurrentConversation() {
-        if (this.isDestroyedSignal()) {
-            return;
-        }
-        const messages = this.messagesSignal();
-        const conversationSettings = this.conversationSettingsSignal();
-        const agentCard = this.agentCardSignal();
-        if (!conversationSettings || !agentCard) {
-            throw new Error('Conversation not properly initialized');
-        }
-        if (messages.length > 31) {
-            // Safety limit to prevent infinite conversations
-            return;
-        }
-        let conversationMessages = messages;
-        // Add last prompt if available
-        if (conversationSettings.last_prompt) {
-            conversationMessages = [
-                ...messages,
-                { content: conversationSettings.last_prompt, role: ChatRole.System },
-            ];
-        }
-        // Prepare conversation DTO
-        const conversation = {
-            messages: conversationMessages,
-            conversationType: conversationSettings.conversationType,
-            textEngine: conversationSettings.textEngine,
-            model: agentCard.model,
         };
-        // Call AI service
-        const response = await this.agentCardService.callChatCompletion(conversation);
-        if (!response) {
-            console.error('No message returned from AI, is your service working?');
-            throw new Error('No message returned from AI');
-        }
-        // Process response
-        const newMessage = this.processAssistantMessage(response);
-        // Add to messages
-        this.addMessage(newMessage);
-        this.isThinkingSignal.set(false);
-    }
-    // Helper to get audio playback setting
-    getAudioPlaybackSetting() {
-        const agentCard = this.agentCardSignal();
-        return agentCard?.conversationSettings?.repeatRecording || false;
+        // Start the sequential playback
+        playAudioSequentially();
     }
-    // Reset conversation
-    async resetConversation(agentCard) {
-        if (agentCard) {
-            this.agentCardSignal.set(agentCard);
-        }
-        // Clear messages
-        this.messagesSignal.set([]);
-        // Re-initialize with current agent card
-        const currentAgentCard = agentCard || this.agentCardSignal();
-        if (currentAgentCard) {
-            // Note: This would need the conversationBuilder to be injected or passed
-            // await this.initConversation(currentAgentCard, conversationBuilder);
+    preloadNextMessageAudio(messages, currentIndex) {
+        if (currentIndex + 1 < messages.length) {
+            const nextMessage = messages[currentIndex + 1];
+            if (!nextMessage.audioUrl && !nextMessage.audioPromise) {
+                const request = buildObjectTTSRequest(nextMessage, this.conversationChatSettings());
+                nextMessage.isLoading = true;
+                nextMessage.audioPromise = this.agentCardService.getTextAudioFile(request);
+                nextMessage.audioPromise.then((audio) => {
+                    extractAudioAndTranscription(nextMessage, audio);
+                    nextMessage.isLoading = false;
+                });
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ConversationService, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: MessageProcessingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ConversationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatMessageComponent, isStandalone: true, selector: "dc-chat-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: true, transformFunction: null }, chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar for assistant messages -->\n\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\">\n        <span class=\"avatar-initial\">A</span>\n      </div>\n    </div>\n    }\n\n    <!-- Message content -->\n    <div class=\"message-bubble\">\n      @if (hasMultiMessages()) {\n      <dc-multi-message-content [messages]=\"multiMessages()\" (playAudio)=\"playMessage($event)\"></dc-multi-message-content>\n      } @else {\n      <dc-standalone-audio-text-sync [message]=\"audioMessage()\"></dc-standalone-audio-text-sync>\n      }\n\n      <!-- Translation if available -->\n      @if (messageTranslation()) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n        {{ messageTranslation() }}\n      </div>\n      }\n    </div>\n\n    <!-- Avatar for user messages -->\n    @if (isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar user-avatar\">\n        <span class=\"avatar-initial\">U</span>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:85%;line-height:1.5}.user-message{justify-content:flex-end}.user-message .message-container{flex-direction:row-reverse}.user-message .message-bubble{background-color:#0d5878;color:#fff;border-radius:18px 18px 0;margin-right:8px}.assistant-message{justify-content:flex-start}.assistant-message .message-container{flex-direction:row}.assistant-message .message-bubble{background-color:#f0f0f0;color:#333;border-radius:18px 18px 18px 0;margin-left:8px}.message-bubble{padding:12px 16px;box-shadow:0 1px 2px #0000001a;max-width:calc(100% - 50px);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;hyphens:auto;min-width:0}.avatar-container{display:flex;align-items:flex-end}.avatar{width:36px;height:36px;border-radius:50%;background-color:#0d5878;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}.user-avatar{background-color:#ffa77e}::ng-deep .em{color:inherit;font-style:italic}::ng-deep .strong{font-weight:700;color:inherit}::ng-deep .em_strong{font-weight:700;font-style:italic;color:inherit}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid #ffa77e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MultiMessageContentComponent, selector: "dc-multi-message-content", inputs: ["messages", "isLoading"], outputs: ["playAudio"] }, { kind: "component", type: StandaloneAudioTextSyncComponent, selector: "dc-standalone-audio-text-sync", inputs: ["message"], outputs: ["playAudio", "audioCompleted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ConversationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: MessageProcessingService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, MultiMessageContentComponent, StandaloneAudioTextSyncComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar for assistant messages -->\n\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\">\n        <span class=\"avatar-initial\">A</span>\n      </div>\n    </div>\n    }\n\n    <!-- Message content -->\n    <div class=\"message-bubble\">\n      @if (hasMultiMessages()) {\n      <dc-multi-message-content [messages]=\"multiMessages()\" (playAudio)=\"playMessage($event)\"></dc-multi-message-content>\n      } @else {\n      <dc-standalone-audio-text-sync [message]=\"audioMessage()\"></dc-standalone-audio-text-sync>\n      }\n\n      <!-- Translation if available -->\n      @if (messageTranslation()) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n        {{ messageTranslation() }}\n      </div>\n      }\n    </div>\n\n    <!-- Avatar for user messages -->\n    @if (isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar user-avatar\">\n        <span class=\"avatar-initial\">U</span>\n      </div>\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:85%;line-height:1.5}.user-message{justify-content:flex-end}.user-message .message-container{flex-direction:row-reverse}.user-message .message-bubble{background-color:#0d5878;color:#fff;border-radius:18px 18px 0;margin-right:8px}.assistant-message{justify-content:flex-start}.assistant-message .message-container{flex-direction:row}.assistant-message .message-bubble{background-color:#f0f0f0;color:#333;border-radius:18px 18px 18px 0;margin-left:8px}.message-bubble{padding:12px 16px;box-shadow:0 1px 2px #0000001a;max-width:calc(100% - 50px);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;hyphens:auto;min-width:0}.avatar-container{display:flex;align-items:flex-end}.avatar{width:36px;height:36px;border-radius:50%;background-color:#0d5878;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}.user-avatar{background-color:#ffa77e}::ng-deep .em{color:inherit;font-style:italic}::ng-deep .strong{font-weight:700;color:inherit}::ng-deep .em_strong{font-weight:700;font-style:italic;color:inherit}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid #ffa77e}\n"] }]
+        }], ctorParameters: () => [] });
 
 class ChatMessagesListComponent {
     constructor() {
+        this.chatUserSettings = input.required();
+        this.thinkingImg = input.required();
         this.aiIcon = 'assets/default/ai.png';
         this.conversationService = inject(ConversationService);
+        // Create a signal for the filter text
+        this.filterText = signal('');
         // Get messages and thinking state from the conversation service
-        this.messages = this.conversationService.getMessages();
+        this.messages = computed(() => {
+            // Get the actual array of messages from the signal by calling it as a function
+            const allMessages = this.conversationService.getMessages()();
+            return allMessages.filter((message) => message.role !== 'system');
+        });
         this.isThinking = this.conversationService.isThinking();
     }
+    // Method to update the filter text
+    updateFilter(value) {
+        this.filterText.set(value);
+    }
     // Track messages by their content and role for efficient rendering
     trackByMessage(index, message) {
         return `${message.role}-${index}-${message.content.substring(0, 20)}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatMessagesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: ChatMessagesListComponent, isStandalone: true, selector: "dc-chat-messages-list", inputs: { chatUserSettings: "chatUserSettings", thinkingImg: "thinkingImg" }, ngImport: i0, template: "<div class=\"messages-container\">\n  @for (message of messages(); track trackByMessage($index, message)) {\n    <dc-chat-message \n      [chatMessage]=\"message\" \n      [chatUserSettings]=\"chatUserSettings\">\n    </dc-chat-message>\n  }\n  \n  @if (isThinking()) {\n    <div class=\"thinking-container\">\n      <div class=\"thinking-message\">\n        <div class=\"thinking-avatar\">\n          <img [src]=\"aiIcon\" alt=\"AI thinking\" class=\"avatar-img\">\n        </div>\n        <div class=\"thinking-content\">\n          <p-skeleton width=\"80%\" height=\"2rem\"></p-skeleton>\n          <p-skeleton width=\"60%\" height=\"2rem\"></p-skeleton>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".messages-container{display:flex;flex-direction:column;gap:1rem;padding:1rem;overflow-y:auto;max-height:calc(100vh - 200px)}.thinking-container{padding:.5rem 0}.thinking-message{display:flex;gap:1rem;align-items:flex-start}.thinking-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-img{width:100%;height:100%;object-fit:cover}.thinking-content{flex:1;display:flex;flex-direction:column;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatMessageComponent, selector: "dc-chat-message", inputs: ["chatMessage", "chatUserSettings"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessagesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatMessagesListComponent, isStandalone: true, selector: "dc-chat-messages-list", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: true, isRequired: true, transformFunction: null }, thinkingImg: { classPropertyName: "thinkingImg", publicName: "thinkingImg", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"messages-container\">\n  @for (message of messages(); track trackByMessage($index, message)) {\n  <dc-chat-message [chatMessage]=\"message\" [chatUserSettings]=\"chatUserSettings()\"> </dc-chat-message>\n  } @if (isThinking()) {\n  <div class=\"thinking-container\">\n    <div class=\"thinking-message\">\n      <div class=\"thinking-avatar\">\n        <img [src]=\"aiIcon\" alt=\"AI thinking\" class=\"avatar-img\" />\n      </div>\n      <div class=\"thinking-content\">\n        <p-skeleton width=\"80%\" height=\"2rem\"></p-skeleton>\n        <p-skeleton width=\"60%\" height=\"2rem\"></p-skeleton>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n", styles: [".messages-container{display:flex;flex-direction:column;gap:1rem;padding:1rem;overflow-y:auto;max-height:calc(100vh - 200px)}.thinking-container{padding:.5rem 0}.thinking-message{display:flex;gap:1rem;align-items:flex-start}.thinking-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-img{width:100%;height:100%;object-fit:cover}.thinking-content{flex:1;display:flex;flex-direction:column;gap:.5rem}\n"], dependencies: [{ kind: "component", type: ChatMessageComponent, selector: "dc-chat-message", inputs: ["chatMessage", "chatUserSettings"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatMessagesListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessagesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat-messages-list', standalone: true, imports: [CommonModule, ChatMessageComponent, SkeletonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"messages-container\">\n  @for (message of messages(); track trackByMessage($index, message)) {\n    <dc-chat-message \n      [chatMessage]=\"message\" \n      [chatUserSettings]=\"chatUserSettings\">\n    </dc-chat-message>\n  }\n  \n  @if (isThinking()) {\n    <div class=\"thinking-container\">\n      <div class=\"thinking-message\">\n        <div class=\"thinking-avatar\">\n          <img [src]=\"aiIcon\" alt=\"AI thinking\" class=\"avatar-img\">\n        </div>\n        <div class=\"thinking-content\">\n          <p-skeleton width=\"80%\" height=\"2rem\"></p-skeleton>\n          <p-skeleton width=\"60%\" height=\"2rem\"></p-skeleton>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".messages-container{display:flex;flex-direction:column;gap:1rem;padding:1rem;overflow-y:auto;max-height:calc(100vh - 200px)}.thinking-container{padding:.5rem 0}.thinking-message{display:flex;gap:1rem;align-items:flex-start}.thinking-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-img{width:100%;height:100%;object-fit:cover}.thinking-content{flex:1;display:flex;flex-direction:column;gap:.5rem}\n"] }]
-        }], propDecorators: { chatUserSettings: [{
-                type: Input
-            }], thinkingImg: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'dc-chat-messages-list', standalone: true, imports: [ChatMessageComponent, SkeletonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"messages-container\">\n  @for (message of messages(); track trackByMessage($index, message)) {\n  <dc-chat-message [chatMessage]=\"message\" [chatUserSettings]=\"chatUserSettings()\"> </dc-chat-message>\n  } @if (isThinking()) {\n  <div class=\"thinking-container\">\n    <div class=\"thinking-message\">\n      <div class=\"thinking-avatar\">\n        <img [src]=\"aiIcon\" alt=\"AI thinking\" class=\"avatar-img\" />\n      </div>\n      <div class=\"thinking-content\">\n        <p-skeleton width=\"80%\" height=\"2rem\"></p-skeleton>\n        <p-skeleton width=\"60%\" height=\"2rem\"></p-skeleton>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n", styles: [".messages-container{display:flex;flex-direction:column;gap:1rem;padding:1rem;overflow-y:auto;max-height:calc(100vh - 200px)}.thinking-container{padding:.5rem 0}.thinking-message{display:flex;gap:1rem;align-items:flex-start}.thinking-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-img{width:100%;height:100%;object-fit:cover}.thinking-content{flex:1;display:flex;flex-direction:column;gap:.5rem}\n"] }]
+        }] });
 
 const SpeedDescription = {
     1: 'Muy Lento',
@@ -1967,10 +2164,10 @@ class SpeedDescPipe {
     transform(speed) {
         return SpeedDescription[speed];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: SpeedDescPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.1", ngImport: i0, type: SpeedDescPipe, isStandalone: true, name: "speedDisplay" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SpeedDescPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: SpeedDescPipe, isStandalone: true, name: "speedDisplay" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: SpeedDescPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SpeedDescPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'speedDisplay',
@@ -1987,10 +2184,10 @@ class TruncatePipe {
         }
         return value.substring(0, length) + suffix;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.1", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TruncatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TruncatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'truncate',
@@ -2012,9 +2209,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
  * ```
  */
 class ProviderSelectorComponent {
-    constructor(conversationCardAIService, cdr) {
-        this.conversationCardAIService = conversationCardAIService;
-        this.cdr = cdr;
+    constructor() {
+        this.conversationCardAIService = inject(CONVERSATION_AI_TOKEN);
+        this.cdr = inject(ChangeDetectorRef);
         /** Flag indicating whether the models are currently being loaded */
         this.isLoadingModels = true;
         /** Array of available models for the selected provider */
@@ -2045,26 +2242,23 @@ class ProviderSelectorComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ProviderSelectorComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: ProviderSelectorComponent, isStandalone: true, selector: "dc-provider-selector", inputs: { parentForm: "parentForm" }, ngImport: i0, template: "<div>\n  <hr />\n  <b>Admin Section</b>\n  <br />\n\n  <b>Providers:</b>\n  <div style=\"display: flex; gap: 10px\" [formGroup]=\"parentForm\">\n    <div class=\"space\">\n      <p-radioButton value=\"groq\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Groq</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openai\" formControlName=\"provider\"></p-radioButton>\n      <label>Open AI</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"google\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Google</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openrouter\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Open Router</label>\n    </div>\n  </div>\n\n  <b>Modelo: </b>\n  <span pTooltip=\"Modelo Seleccionado\">{{ parentForm.controls.modelName.value }}</span>\n  @if (parentForm.controls.provider.value) { @if(isLoadingModels) {\n  <p-skeleton height=\"200px\" width=\"100%\"></p-skeleton>\n  } @else {\n  <p-table [value]=\"modelnames\" stripedRows [size]=\"'small'\" [paginator]=\"true\" [rows]=\"12\" [formGroup]=\"parentForm\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th></th>\n        <th>Name</th>\n        <th>$$Prompt M</th>\n        <th>$$Completion M</th>\n        <th>$$Cost 90/10 M</th>\n        <th>Created</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-model>\n      <tr [pTooltip]=\"model.description | truncate : 200\" tooltipPosition=\"top\">\n        <td><p-radioButton [value]=\"model.id\" formControlName=\"modelName\"></p-radioButton></td>\n        <td>{{ model.name }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.completion * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 * 0.9 + +model.pricing?.completion * 1000000 * 0.1 | number : '1.2-2' }}</td>\n        <td>{{ model.created * 1000 | date : 'dd/MM/yyyy' }}</td>\n      </tr>\n    </ng-template>\n  </p-table>\n  } }\n</div>\n", styles: [":host{display:block}.space{display:flex;gap:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i3$1.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProviderSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ProviderSelectorComponent, isStandalone: true, selector: "dc-provider-selector", inputs: { parentForm: "parentForm" }, ngImport: i0, template: "<div>\n  <hr />\n  <b>Admin Section</b>\n  <br />\n\n  <b>Providers:</b>\n  <div style=\"display: flex; gap: 10px\" [formGroup]=\"parentForm\">\n    <div class=\"space\">\n      <p-radioButton value=\"groq\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Groq</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openai\" formControlName=\"provider\"></p-radioButton>\n      <label>Open AI</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"google\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Google</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openrouter\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Open Router</label>\n    </div>\n  </div>\n\n  <b>Modelo: </b>\n  <span pTooltip=\"Modelo Seleccionado\">{{ parentForm.controls.modelName.value }}</span>\n  @if (parentForm.controls.provider.value) { @if(isLoadingModels) {\n  <p-skeleton height=\"200px\" width=\"100%\"></p-skeleton>\n  } @else {\n  <p-table [value]=\"modelnames\" stripedRows [size]=\"'small'\" [paginator]=\"true\" [rows]=\"12\" [formGroup]=\"parentForm\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th></th>\n        <th>Name</th>\n        <th>$$Prompt M</th>\n        <th>$$Completion M</th>\n        <th>$$Cost 90/10 M</th>\n        <th>Created</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-model>\n      <tr [pTooltip]=\"model.description | truncate : 200\" tooltipPosition=\"top\">\n        <td><p-radioButton [value]=\"model.id\" formControlName=\"modelName\"></p-radioButton></td>\n        <td>{{ model.name }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.completion * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 * 0.9 + +model.pricing?.completion * 1000000 * 0.1 | number : '1.2-2' }}</td>\n        <td>{{ model.created * 1000 | date : 'dd/MM/yyyy' }}</td>\n      </tr>\n    </ng-template>\n  </p-table>\n  } }\n</div>\n", styles: [":host{display:block}.space{display:flex;gap:2px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2$2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ProviderSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ProviderSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-provider-selector', standalone: true, imports: [CommonModule, ReactiveFormsModule, RadioButtonModule, TableModule, SkeletonModule, TooltipModule, TruncatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <hr />\n  <b>Admin Section</b>\n  <br />\n\n  <b>Providers:</b>\n  <div style=\"display: flex; gap: 10px\" [formGroup]=\"parentForm\">\n    <div class=\"space\">\n      <p-radioButton value=\"groq\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Groq</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openai\" formControlName=\"provider\"></p-radioButton>\n      <label>Open AI</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"google\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Google</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openrouter\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Open Router</label>\n    </div>\n  </div>\n\n  <b>Modelo: </b>\n  <span pTooltip=\"Modelo Seleccionado\">{{ parentForm.controls.modelName.value }}</span>\n  @if (parentForm.controls.provider.value) { @if(isLoadingModels) {\n  <p-skeleton height=\"200px\" width=\"100%\"></p-skeleton>\n  } @else {\n  <p-table [value]=\"modelnames\" stripedRows [size]=\"'small'\" [paginator]=\"true\" [rows]=\"12\" [formGroup]=\"parentForm\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th></th>\n        <th>Name</th>\n        <th>$$Prompt M</th>\n        <th>$$Completion M</th>\n        <th>$$Cost 90/10 M</th>\n        <th>Created</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-model>\n      <tr [pTooltip]=\"model.description | truncate : 200\" tooltipPosition=\"top\">\n        <td><p-radioButton [value]=\"model.id\" formControlName=\"modelName\"></p-radioButton></td>\n        <td>{{ model.name }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.completion * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 * 0.9 + +model.pricing?.completion * 1000000 * 0.1 | number : '1.2-2' }}</td>\n        <td>{{ model.created * 1000 | date : 'dd/MM/yyyy' }}</td>\n      </tr>\n    </ng-template>\n  </p-table>\n  } }\n</div>\n", styles: [":host{display:block}.space{display:flex;gap:2px}\n"] }]
-        }], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { parentForm: [{
+            args: [{ selector: 'dc-provider-selector', standalone: true, imports: [ReactiveFormsModule, RadioButtonModule, TableModule, SkeletonModule, TooltipModule, TruncatePipe, DatePipe, DecimalPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <hr />\n  <b>Admin Section</b>\n  <br />\n\n  <b>Providers:</b>\n  <div style=\"display: flex; gap: 10px\" [formGroup]=\"parentForm\">\n    <div class=\"space\">\n      <p-radioButton value=\"groq\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Groq</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openai\" formControlName=\"provider\"></p-radioButton>\n      <label>Open AI</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"google\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Google</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openrouter\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Open Router</label>\n    </div>\n  </div>\n\n  <b>Modelo: </b>\n  <span pTooltip=\"Modelo Seleccionado\">{{ parentForm.controls.modelName.value }}</span>\n  @if (parentForm.controls.provider.value) { @if(isLoadingModels) {\n  <p-skeleton height=\"200px\" width=\"100%\"></p-skeleton>\n  } @else {\n  <p-table [value]=\"modelnames\" stripedRows [size]=\"'small'\" [paginator]=\"true\" [rows]=\"12\" [formGroup]=\"parentForm\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th></th>\n        <th>Name</th>\n        <th>$$Prompt M</th>\n        <th>$$Completion M</th>\n        <th>$$Cost 90/10 M</th>\n        <th>Created</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-model>\n      <tr [pTooltip]=\"model.description | truncate : 200\" tooltipPosition=\"top\">\n        <td><p-radioButton [value]=\"model.id\" formControlName=\"modelName\"></p-radioButton></td>\n        <td>{{ model.name }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.completion * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 * 0.9 + +model.pricing?.completion * 1000000 * 0.1 | number : '1.2-2' }}</td>\n        <td>{{ model.created * 1000 | date : 'dd/MM/yyyy' }}</td>\n      </tr>\n    </ng-template>\n  </p-table>\n  } }\n</div>\n", styles: [":host{display:block}.space{display:flex;gap:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { parentForm: [{
                 type: Input
             }] } });
 
 class DCConversationUserChatSettingsComponent {
-    constructor(dialogRef, fb, conversationCardAIService) {
-        this.dialogRef = dialogRef;
-        this.fb = fb;
-        this.conversationCardAIService = conversationCardAIService;
+    constructor() {
+        this.dialogRef = inject(DynamicDialogRef);
+        this.fb = inject(FormBuilder);
+        this.conversationCardAIService = inject(CONVERSATION_AI_TOKEN);
         this.isLoadingModels = true;
-        this.showFeature = {
+        this.showFeature = input({
             synthVoice: true,
             highlightWords: true,
             speed: true,
@@ -2072,8 +2266,8 @@ class DCConversationUserChatSettingsComponent {
             superHearing: true,
             fixGrammar: true,
             autoTranslate: true,
-        };
-        this.onSettingsChange = new EventEmitter();
+        });
+        this.onSettingsChange = output();
         this.textEngines = Object.values(TextEngines);
         this.voiceTTSOptions = Object.values(VoiceTTSOptions);
         this.textEngineOptions = TextEngineOptions;
@@ -2110,157 +2304,61 @@ class DCConversationUserChatSettingsComponent {
         }
     }
     close() {
-        this.dialogRef.close();
-    }
-    async saveSettings() {
-        if (this.form.valid) {
-            await this.conversationCardAIService.saveConversationUserChatSettings(this.form.value);
-            this.dialogRef.close(this.form.value);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCConversationUserChatSettingsComponent, deps: [{ token: i1$3.DynamicDialogRef }, { token: i1.FormBuilder }, { token: CONVERSATION_AI_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCConversationUserChatSettingsComponent, isStandalone: true, selector: "dc-chat-settings-dialog", inputs: { showFeature: "showFeature" }, outputs: { onSettingsChange: "onSettingsChange" }, viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], ngImport: i0, template: "<div class=\"dialog-container\">\n  <form [formGroup]=\"form\">\n    <div class=\"settings-section\" *ngIf=\"showFeature.synthVoice\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"synthVoice\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.synthVoice.disabled\">Escuchar Voz</span>\n        <br />\n        <small>Desmarca si solo quieres leer texto</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.highlightWords\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"highlightWords\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Narraci\u00F3n de texto</span>\n        <br />\n        <small>Remarca las palabras como se van pronuncionando</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.speed\">\n      <p>\n        Velocidad ({{ form.controls.speed.value | speedDisplay }})\n        <br />\n        <p-rating formControlName=\"speed\">\n          <ng-template pTemplate=\"onicon\">\n            <i class=\"pi pi-caret-right\"></i>\n          </ng-template>\n          <ng-template pTemplate=\"officon\">\n            <i class=\"pi pi-circle\"></i>\n          </ng-template>\n        </p-rating>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.realTime\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"realTime\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.realTime.disabled\">Tiempo real</span>\n        <br />\n        <small>No tienes que presionar el microphono, comenzar\u00E1 a grabar en cuanto la AI termine de hablar, cierra el chat para finalizar conversaci\u00F3n.</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.realTime\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"repeatRecording\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Reproducir mi grabaci\u00F3n</span>\n        <br />\n        <small>Escucha tu dialogo, despu\u00E9s de grabar, te ayudar\u00E1 a notar tus errores.</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.superHearing\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"superHearing\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Super O\u00EDdo \uD83E\uDDBE</span>\n        <br />\n        <small>Tu audio se procesa en el servidor para mejor efectividad, si no usa el navegador.</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.fixGrammar\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"fixGrammar\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.fixGrammar.disabled\">Corregir gram\u00E1tica</span>\n        <br />\n        <small>La ai corrige tu forma de hablar/escribir y te retrolimenta de tus errores</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.autoTranslate\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"autoTranslate\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.autoTranslate.disabled\">Mostrar Traducciones</span>\n        <br />\n        <small>Texto adicional con la traducci\u00F3n</small>\n      </p>\n    </div>\n\n    <div class=\"voice-selection\" *ngIf=\"showFeature.autoTranslate\">\n      <span>Voz Preferencial:</span>\n      <br />\n      <p-radioButton value=\"random\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Aleatorio</label>\n\n      <p-radioButton value=\"randomMan\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Hombre</label>\n\n      <p-radioButton value=\"randomWoman\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Mujer</label>\n    </div>\n\n    @if(isAdmin) {\n    <div>\n      <hr />\n      <b>Admin Section</b>\n      <br />\n\n      <b>Modelo:</b>\n\n      <dc-provider-selector [parentForm]=\"form.controls.model\"></dc-provider-selector>\n    </div>\n    }\n\n    <div class=\"button-group\">\n      <p-button (click)=\"saveSettings()\" label=\"Guardar cambios\"></p-button>\n      <p-button (click)=\"close()\" label=\"Cancelar\" styleClass=\"p-button-secondary\"></p-button>\n    </div>\n  </form>\n</div>\n", styles: [".dialog-container{padding:20px;background:#fff;border-radius:8px;min-width:300px;max-width:500px}.dialog-content{margin:20px 0}.dialog-actions{display:flex;justify-content:flex-end}.settings-section{margin-bottom:20px}.settings-section label{display:block;margin-bottom:5px;font-weight:700}.settings-section small{display:block;color:#666;margin-top:2px}.voice-selection{margin:15px 0}.voice-selection label{margin-right:15px}.button-group{margin-top:20px;display:flex;gap:10px;justify-content:flex-end}button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer}button:first-child{background-color:#007bff;color:#fff}button:last-child{background-color:#6c757d;color:#fff}.space{margin-left:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i3$1.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i7.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: "pipe", type: SpeedDescPipe, name: "speedDisplay" }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i8.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: ProviderSelectorComponent, selector: "dc-provider-selector", inputs: ["parentForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCConversationUserChatSettingsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-chat-settings-dialog', standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        CheckboxModule,
-                        SliderModule,
-                        RadioButtonModule,
-                        ButtonModule,
-                        SpeedDescPipe,
-                        RatingModule,
-                        TableModule,
-                        BadgeModule,
-                        SkeletonModule,
-                        TooltipModule,
-                        ProviderSelectorComponent,
-                    ], template: "<div class=\"dialog-container\">\n  <form [formGroup]=\"form\">\n    <div class=\"settings-section\" *ngIf=\"showFeature.synthVoice\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"synthVoice\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.synthVoice.disabled\">Escuchar Voz</span>\n        <br />\n        <small>Desmarca si solo quieres leer texto</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.highlightWords\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"highlightWords\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Narraci\u00F3n de texto</span>\n        <br />\n        <small>Remarca las palabras como se van pronuncionando</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.speed\">\n      <p>\n        Velocidad ({{ form.controls.speed.value | speedDisplay }})\n        <br />\n        <p-rating formControlName=\"speed\">\n          <ng-template pTemplate=\"onicon\">\n            <i class=\"pi pi-caret-right\"></i>\n          </ng-template>\n          <ng-template pTemplate=\"officon\">\n            <i class=\"pi pi-circle\"></i>\n          </ng-template>\n        </p-rating>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.realTime\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"realTime\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.realTime.disabled\">Tiempo real</span>\n        <br />\n        <small>No tienes que presionar el microphono, comenzar\u00E1 a grabar en cuanto la AI termine de hablar, cierra el chat para finalizar conversaci\u00F3n.</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.realTime\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"repeatRecording\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Reproducir mi grabaci\u00F3n</span>\n        <br />\n        <small>Escucha tu dialogo, despu\u00E9s de grabar, te ayudar\u00E1 a notar tus errores.</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.superHearing\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"superHearing\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Super O\u00EDdo \uD83E\uDDBE</span>\n        <br />\n        <small>Tu audio se procesa en el servidor para mejor efectividad, si no usa el navegador.</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.fixGrammar\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"fixGrammar\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.fixGrammar.disabled\">Corregir gram\u00E1tica</span>\n        <br />\n        <small>La ai corrige tu forma de hablar/escribir y te retrolimenta de tus errores</small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\" *ngIf=\"showFeature.autoTranslate\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"autoTranslate\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.autoTranslate.disabled\">Mostrar Traducciones</span>\n        <br />\n        <small>Texto adicional con la traducci\u00F3n</small>\n      </p>\n    </div>\n\n    <div class=\"voice-selection\" *ngIf=\"showFeature.autoTranslate\">\n      <span>Voz Preferencial:</span>\n      <br />\n      <p-radioButton value=\"random\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Aleatorio</label>\n\n      <p-radioButton value=\"randomMan\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Hombre</label>\n\n      <p-radioButton value=\"randomWoman\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Mujer</label>\n    </div>\n\n    @if(isAdmin) {\n    <div>\n      <hr />\n      <b>Admin Section</b>\n      <br />\n\n      <b>Modelo:</b>\n\n      <dc-provider-selector [parentForm]=\"form.controls.model\"></dc-provider-selector>\n    </div>\n    }\n\n    <div class=\"button-group\">\n      <p-button (click)=\"saveSettings()\" label=\"Guardar cambios\"></p-button>\n      <p-button (click)=\"close()\" label=\"Cancelar\" styleClass=\"p-button-secondary\"></p-button>\n    </div>\n  </form>\n</div>\n", styles: [".dialog-container{padding:20px;background:#fff;border-radius:8px;min-width:300px;max-width:500px}.dialog-content{margin:20px 0}.dialog-actions{display:flex;justify-content:flex-end}.settings-section{margin-bottom:20px}.settings-section label{display:block;margin-bottom:5px;font-weight:700}.settings-section small{display:block;color:#666;margin-top:2px}.voice-selection{margin:15px 0}.voice-selection label{margin-right:15px}.button-group{margin-top:20px;display:flex;gap:10px;justify-content:flex-end}button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer}button:first-child{background-color:#007bff;color:#fff}button:last-child{background-color:#6c757d;color:#fff}.space{margin-left:3px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.DynamicDialogRef }, { type: i1.FormBuilder }, { type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }], propDecorators: { showFeature: [{
-                type: Input
-            }], onSettingsChange: [{
-                type: Output
-            }], tooltipRef: [{
-                type: ViewChild,
-                args: ['tooltipRef']
-            }] } });
-
-const EvalResultStringDefinition = `
-interface EvalResult {
-  score: number;                       // Score of the user's response 0 to 3
-  feedback: string;                    // Feedback of the user's understanding of the conversation
-}`;
-const DefaultEvaluatorAgentCard = {
-    task: 'Evaluate the user understanding of the lesson',
-    messages: [],
-    expectedResponseType: EvalResultStringDefinition,
-    model: { id: 'gpt-4o-mini', provider: 'openai' },
-    sources: [],
-};
-
-function extractJsonFromResponse(content) {
-    const jsonMatch = content.match(/\{[\s\S]*?\}/); // Match everything between first { and }
-    if (!jsonMatch)
-        return null;
-    try {
-        return JSON.parse(jsonMatch[0]);
-    }
-    catch (error) {
-        console.error('Error parsing JSON:', error);
-        return null;
-    }
-}
-
-class EvaluationService {
-    constructor(agentCardService) {
-        this.agentCardService = agentCardService;
-        this.scoreSignal = signal(10);
-        this.evaluationResultSignal = signal(null);
-    }
-    // Get score as a signal
-    getScore() {
-        return this.scoreSignal;
-    }
-    // Get evaluation result as a signal
-    getEvaluationResult() {
-        return this.evaluationResultSignal;
-    }
-    // Evaluate conversation
-    async evaluateConversation(messages, evaluator) {
-        // Filter conversation to only include user and assistant messages
-        const conversationMessages = messages.filter((message) => [ChatRole.User, ChatRole.Assistant].includes(message.role));
-        // Check if there are any user messages to evaluate
-        const userMessages = conversationMessages.filter((message) => message.role === ChatRole.User);
-        if (userMessages.length <= 0) {
-            console.log('No messages to evaluate', conversationMessages);
-            return;
-        }
-        // Format conversation for evaluation
-        const conversationMessagesString = conversationMessages
-            .map((message) => `${message.role}: ${message.content}`)
-            .join('\n');
-        // Create evaluation prompt
-        const instructions = `
-Please replay to this task:
-    ${evaluator.task}
-This is the conversation history:
-    ${conversationMessagesString}
-and give the response in next JSON format.
-    ${evaluator.expectedResponseType}
-    `;
-        // Send evaluation request
-        const evaluationMessages = [{ content: instructions, role: ChatRole.User }];
-        const response = await this.agentCardService.callChatCompletion({ messages: evaluationMessages });
-        // Extract JSON from response
-        const jsonData = extractJsonFromResponse(response.content);
-        this.evaluationResultSignal.set(jsonData);
-        // Update score if available
-        if (jsonData.score) {
-            if (jsonData.score <= 3) {
-                this.updateScore(jsonData.score * 10);
-            }
-        }
-    }
-    // Update score with limits
-    updateScore(additionalScore) {
-        this.scoreSignal.update(currentScore => {
-            const newScore = currentScore + additionalScore;
-            return newScore > 100 ? 100 : newScore;
-        });
+        this.dialogRef.close();
     }
-    // Reset score
-    resetScore() {
-        this.scoreSignal.set(10);
+    async saveSettings() {
+        if (this.form.valid) {
+            await this.conversationCardAIService.saveConversationUserChatSettings(this.form.value);
+            this.dialogRef.close(this.form.value);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: EvaluationService, deps: [{ token: CONVERSATION_AI_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: EvaluationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationUserChatSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationUserChatSettingsComponent, isStandalone: true, selector: "dc-chat-settings-dialog", inputs: { showFeature: { classPropertyName: "showFeature", publicName: "showFeature", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSettingsChange: "onSettingsChange" }, viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], ngImport: i0, template: "<div class=\"dialog-container\">\n  <form [formGroup]=\"form\">\n    @if (showFeature().synthVoice) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"synthVoice\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span [class.cross]=\"form.controls.synthVoice.disabled\">Escuchar Voz</span>\n          <br />\n          <small>Desmarca si solo quieres leer texto</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().highlightWords) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"highlightWords\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span>Narraci\u00F3n de texto</span>\n          <br />\n          <small>Remarca las palabras como se van pronuncionando</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().speed) {\n      <div class=\"settings-section\">\n        <p>\n          Velocidad ({{ form.controls.speed.value | speedDisplay }})\n          <br />\n          <p-rating formControlName=\"speed\">\n            <ng-template pTemplate=\"onicon\">\n              <i class=\"pi pi-caret-right\"></i>\n            </ng-template>\n            <ng-template pTemplate=\"officon\">\n              <i class=\"pi pi-circle\"></i>\n            </ng-template>\n          </p-rating>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().realTime) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"realTime\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span [class.cross]=\"form.controls.realTime.disabled\">Tiempo real</span>\n          <br />\n          <small>No tienes que presionar el microphono, comenzar\u00E1 a grabar en cuanto la AI termine de hablar, cierra el chat para finalizar conversaci\u00F3n.</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().realTime) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"repeatRecording\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span>Reproducir mi grabaci\u00F3n</span>\n          <br />\n          <small>Escucha tu dialogo, despu\u00E9s de grabar, te ayudar\u00E1 a notar tus errores.</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().superHearing) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"superHearing\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span>Super O\u00EDdo \uD83E\uDDBE</span>\n          <br />\n          <small>Tu audio se procesa en el servidor para mejor efectividad, si no usa el navegador.</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().fixGrammar) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"fixGrammar\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span [class.cross]=\"form.controls.fixGrammar.disabled\">Corregir gram\u00E1tica</span>\n          <br />\n          <small>La ai corrige tu forma de hablar/escribir y te retrolimenta de tus errores</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().autoTranslate) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"autoTranslate\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span [class.cross]=\"form.controls.autoTranslate.disabled\">Mostrar Traducciones</span>\n          <br />\n          <small>Texto adicional con la traducci\u00F3n</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().autoTranslate) {\n      <div class=\"voice-selection\">\n        <span>Voz Preferencial:</span>\n        <br />\n        <p-radioButton value=\"random\" formControlName=\"voice\"></p-radioButton>\n        <label class=\"space\">Aleatorio</label>\n        <p-radioButton value=\"randomMan\" formControlName=\"voice\"></p-radioButton>\n        <label class=\"space\">Hombre</label>\n        <p-radioButton value=\"randomWoman\" formControlName=\"voice\"></p-radioButton>\n        <label class=\"space\">Mujer</label>\n      </div>\n    }\n\n    @if(isAdmin) {\n      <div>\n        <hr />\n        <b>Admin Section</b>\n        <br />\n\n        <b>Modelo:</b>\n\n        <dc-provider-selector [parentForm]=\"form.controls.model\"></dc-provider-selector>\n      </div>\n    }\n\n    <div class=\"button-group\">\n      <p-button (click)=\"saveSettings()\" label=\"Guardar cambios\"></p-button>\n      <p-button (click)=\"close()\" label=\"Cancelar\" styleClass=\"p-button-secondary\"></p-button>\n    </div>\n  </form>\n</div>\n", styles: [".dialog-container{padding:20px;background:#fff;border-radius:8px;min-width:300px;max-width:500px}.dialog-content{margin:20px 0}.dialog-actions{display:flex;justify-content:flex-end}.settings-section{margin-bottom:20px}.settings-section label{display:block;margin-bottom:5px;font-weight:700}.settings-section small{display:block;color:#666;margin-top:2px}.voice-selection{margin:15px 0}.voice-selection label{margin-right:15px}.button-group{margin-top:20px;display:flex;gap:10px;justify-content:flex-end}button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer}button:first-child{background-color:#007bff;color:#fff}button:last-child{background-color:#6c757d;color:#fff}.space{margin-left:3px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2$2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.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: "pipe", type: SpeedDescPipe, name: "speedDisplay" }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i6$1.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: ProviderSelectorComponent, selector: "dc-provider-selector", inputs: ["parentForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: EvaluationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationUserChatSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-chat-settings-dialog', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        CheckboxModule,
+                        SliderModule,
+                        RadioButtonModule,
+                        ButtonModule,
+                        SpeedDescPipe,
+                        RatingModule,
+                        TableModule,
+                        BadgeModule,
+                        SkeletonModule,
+                        TooltipModule,
+                        ProviderSelectorComponent
+                    ], template: "<div class=\"dialog-container\">\n  <form [formGroup]=\"form\">\n    @if (showFeature().synthVoice) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"synthVoice\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span [class.cross]=\"form.controls.synthVoice.disabled\">Escuchar Voz</span>\n          <br />\n          <small>Desmarca si solo quieres leer texto</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().highlightWords) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"highlightWords\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span>Narraci\u00F3n de texto</span>\n          <br />\n          <small>Remarca las palabras como se van pronuncionando</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().speed) {\n      <div class=\"settings-section\">\n        <p>\n          Velocidad ({{ form.controls.speed.value | speedDisplay }})\n          <br />\n          <p-rating formControlName=\"speed\">\n            <ng-template pTemplate=\"onicon\">\n              <i class=\"pi pi-caret-right\"></i>\n            </ng-template>\n            <ng-template pTemplate=\"officon\">\n              <i class=\"pi pi-circle\"></i>\n            </ng-template>\n          </p-rating>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().realTime) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"realTime\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span [class.cross]=\"form.controls.realTime.disabled\">Tiempo real</span>\n          <br />\n          <small>No tienes que presionar el microphono, comenzar\u00E1 a grabar en cuanto la AI termine de hablar, cierra el chat para finalizar conversaci\u00F3n.</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().realTime) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"repeatRecording\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span>Reproducir mi grabaci\u00F3n</span>\n          <br />\n          <small>Escucha tu dialogo, despu\u00E9s de grabar, te ayudar\u00E1 a notar tus errores.</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().superHearing) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"superHearing\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span>Super O\u00EDdo \uD83E\uDDBE</span>\n          <br />\n          <small>Tu audio se procesa en el servidor para mejor efectividad, si no usa el navegador.</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().fixGrammar) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"fixGrammar\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span [class.cross]=\"form.controls.fixGrammar.disabled\">Corregir gram\u00E1tica</span>\n          <br />\n          <small>La ai corrige tu forma de hablar/escribir y te retrolimenta de tus errores</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().autoTranslate) {\n      <div class=\"settings-section\">\n        <p>\n          <p-checkbox class=\"mr-2\" formControlName=\"autoTranslate\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n          <span [class.cross]=\"form.controls.autoTranslate.disabled\">Mostrar Traducciones</span>\n          <br />\n          <small>Texto adicional con la traducci\u00F3n</small>\n        </p>\n      </div>\n    }\n\n    @if (showFeature().autoTranslate) {\n      <div class=\"voice-selection\">\n        <span>Voz Preferencial:</span>\n        <br />\n        <p-radioButton value=\"random\" formControlName=\"voice\"></p-radioButton>\n        <label class=\"space\">Aleatorio</label>\n        <p-radioButton value=\"randomMan\" formControlName=\"voice\"></p-radioButton>\n        <label class=\"space\">Hombre</label>\n        <p-radioButton value=\"randomWoman\" formControlName=\"voice\"></p-radioButton>\n        <label class=\"space\">Mujer</label>\n      </div>\n    }\n\n    @if(isAdmin) {\n      <div>\n        <hr />\n        <b>Admin Section</b>\n        <br />\n\n        <b>Modelo:</b>\n\n        <dc-provider-selector [parentForm]=\"form.controls.model\"></dc-provider-selector>\n      </div>\n    }\n\n    <div class=\"button-group\">\n      <p-button (click)=\"saveSettings()\" label=\"Guardar cambios\"></p-button>\n      <p-button (click)=\"close()\" label=\"Cancelar\" styleClass=\"p-button-secondary\"></p-button>\n    </div>\n  </form>\n</div>\n", styles: [".dialog-container{padding:20px;background:#fff;border-radius:8px;min-width:300px;max-width:500px}.dialog-content{margin:20px 0}.dialog-actions{display:flex;justify-content:flex-end}.settings-section{margin-bottom:20px}.settings-section label{display:block;margin-bottom:5px;font-weight:700}.settings-section small{display:block;color:#666;margin-top:2px}.voice-selection{margin:15px 0}.voice-selection label{margin-right:15px}.button-group{margin-top:20px;display:flex;gap:10px;justify-content:flex-end}button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer}button:first-child{background-color:#007bff;color:#fff}button:last-child{background-color:#6c757d;color:#fff}.space{margin-left:3px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tooltipRef: [{
+                type: ViewChild,
+                args: ['tooltipRef']
+            }] } });
+
+const EvalResultStringDefinition = `
+interface EvalResult {
+  score: number;                       // Score of the user's response 0 to 3
+  feedback: string;                    // Feedback of the user's understanding of the conversation
+}`;
+const DefaultEvaluatorAgentCard = {
+    task: 'Evaluate the user understanding of the lesson',
+    messages: [],
+    expectedResponseType: EvalResultStringDefinition,
+    model: { id: 'gpt-4o-mini', provider: 'openai' },
+    sources: [],
+};
 
-class ChatContainerComponent {
-    constructor(agentCardService, toastService, conversationBuilder, dialogService, conversationService, evaluationService) {
-        this.agentCardService = agentCardService;
-        this.toastService = toastService;
-        this.conversationBuilder = conversationBuilder;
-        this.dialogService = dialogService;
-        this.conversationService = conversationService;
-        this.evaluationService = evaluationService;
-        this.evaluatorAgentCard = DefaultEvaluatorAgentCard;
-        this.parseDict = {};
-        this.sendMessage = new EventEmitter();
+class DCChatComponent {
+    constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.conversationBuilder = inject(DCConversationPromptBuilderService);
+        this.dialogService = inject(DialogService);
+        this.conversationService = inject(ConversationService);
+        this.evaluationService = inject(EvaluationService);
+        this.evaluatorAgentCard = input(DefaultEvaluatorAgentCard);
+        this.parseDict = input({});
+        this.sendMessage = output();
         this.micSettings = { useWhisper: true, lang: 'en' };
         this.imageUser = `assets/default/user.svg`;
         this.thinkingImg = `assets/default/thinking.svg`;
@@ -2276,29 +2374,18 @@ class ChatContainerComponent {
         this.score = this.evaluationService.getScore();
     }
     async ngOnInit() {
-        debugger;
         // Get user settings if not provided
         if (!this.chatUserSettings) {
             this.chatUserSettings = await this.agentCardService.getConversationUserChatSettings();
         }
         // Initialize conversation
-        await this.conversationService.initConversation(this.agentCard, this.conversationBuilder, this.parseDict);
+        await this.conversationService.initConversation(this.agentCard, this.conversationBuilder, this.parseDict());
     }
     ngOnDestroy() {
         // Mark conversation as destroyed to prevent async operations
         this.conversationService.setDestroyed(true);
     }
-    /**
-     * Handle user message from chat footer
-     */
-    async onUserMessage(message) {
-        if (this.isThinking()) {
-            return;
-        }
-        await this.conversationService.sendUserMessage(message);
-        // Evaluate conversation after sending message
-        this.evaluateConversation();
-    }
+    // onUserMessage method has been moved to the chat-footer component
     /**
      * Handle microphone input finished
      */
@@ -2328,9 +2415,8 @@ class ChatContainerComponent {
             };
             message['audioUrl'] = URL.createObjectURL(eventBlob);
             // Send message to conversation
+            // The evaluation will happen automatically in the conversation service
             await this.conversationService.sendUserMessage(message);
-            // Evaluate conversation
-            this.evaluateConversation();
         }
         finally {
             this.isGettingTranscription = false;
@@ -2367,372 +2453,16 @@ class ChatContainerComponent {
         }
         await this.ngOnInit();
     }
-    /**
-     * Evaluate conversation using evaluator agent
-     */
-    async evaluateConversation() {
-        const messages = this.messages();
-        await this.evaluationService.evaluateConversation(messages, this.evaluatorAgentCard);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatContainerComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: TOAST_ALERTS_TOKEN }, { token: DCConversationPromptBuilderService }, { token: i1$3.DialogService }, { token: ConversationService }, { token: EvaluationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: ChatContainerComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: "chatUserSettings", agentCard: "agentCard", evaluatorAgentCard: "evaluatorAgentCard", parseDict: "parseDict" }, outputs: { sendMessage: "sendMessage" }, providers: [DialogService], ngImport: i0, template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [thinkingImg]=\"thinkingImg\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [isAIThinking]=\"isThinking()\" [micSettings]=\"micSettings\" (sendMessage)=\"onUserMessage($event)\" (micFinishedEvent)=\"onMicFinished($event)\">\n  </dc-chat-footer>\n\n  <!-- Progress Bar for Score -->\n  <div class=\"score-container\" *ngIf=\"score() > 0\">\n    <p-progressBar [value]=\"score()\" [showValue]=\"true\"></p-progressBar>\n  </div>\n\n  <!-- Info Dialog -->\n  <p-dialog [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n    <div class=\"info-content\">\n      <h3>Agent Card</h3>\n      <pre>{{ agentCard | json }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | json }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: [".chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:var(--surface-ground, #f8f9fa)}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["isAdmin", "alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "score", "micSettings"], outputs: ["sendMessage", "textInputChanged", "micFinishedEvent"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings", "thinkingImg"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, ChatHeaderComponent, ChatFooterComponent, ChatMessagesListComponent, DialogModule, ProgressBarModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [thinkingImg]=\"thinkingImg\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [isAIThinking]=\"isThinking()\" [micSettings]=\"micSettings\" (sendMessage)=\"onUserMessage($event)\" (micFinishedEvent)=\"onMicFinished($event)\">\n  </dc-chat-footer>\n\n  <!-- Progress Bar for Score -->\n  <div class=\"score-container\" *ngIf=\"score() > 0\">\n    <p-progressBar [value]=\"score()\" [showValue]=\"true\"></p-progressBar>\n  </div>\n\n  <!-- Info Dialog -->\n  <p-dialog [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n    <div class=\"info-content\">\n      <h3>Agent Card</h3>\n      <pre>{{ agentCard | json }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | json }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: [".chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:var(--surface-ground, #f8f9fa)}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
-        }], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: i6$1.ToastAlertsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [TOAST_ALERTS_TOKEN]
-                }] }, { type: DCConversationPromptBuilderService }, { type: i1$3.DialogService }, { type: ConversationService }, { type: EvaluationService }], propDecorators: { chatUserSettings: [{
-                type: Input
-            }], agentCard: [{
-                type: Input
-            }], evaluatorAgentCard: [{
-                type: Input
-            }], parseDict: [{
-                type: Input
-            }], sendMessage: [{
-                type: Output
-            }] } });
-
-class DCChatComponent {
-    constructor(agentCardService, toastService, conversationBuilder, dialogService, cdr) {
-        this.agentCardService = agentCardService;
-        this.toastService = toastService;
-        this.conversationBuilder = conversationBuilder;
-        this.dialogService = dialogService;
-        this.cdr = cdr;
-        this.sendMessage = new EventEmitter();
-        this.micSettings = { useWhisper: true, lang: 'en' };
-        this.messages = [];
-        this.imageUser = `assets/default/user.svg`;
-        this.thinkingImg = `assets/default/thinking.svg`;
-        this.aiIcon = `assets/default/ai.svg`;
-        this.isDestroyed = false;
-        this.score = 10;
-        this.isAdmin = true;
-        this.isInfoVisible = false;
-        this.isChatSettingsVisible = false;
-        // chatInputControl moved to ChatFooterComponent
-        this.isAIThinking = false;
-        this.isUserTalking = false;
-        this.user = null; // TODO: remove user.
-        this.isGettingTranscription = false;
-    }
-    async ngOnInit() {
-        if (!this.agentCard?.conversationSettings) {
-            throw new Error('Conversation settings are required');
-        }
-        this.defaultVoice = this.getVoice(this.agentCard?.conversationSettings?.voice);
-        // This method overrides the conversationSettings of the agentCard so message will be there.
-        this.conversationSettings = this.conversationBuilder.buildConversationSettings(this.agentCard, this.parseDict);
-        this.agentCard.conversationSettings = this.conversationSettings; // Save a copy here.
-        if (!this.chatUserSettings) {
-            console.log('looking for conversation user chat settings');
-            this.chatUserSettings = await this.agentCardService.getConversationUserChatSettings();
-        }
-        if (!this.conversationSettings.messages) {
-            throw new Error('conversationSettings.messages is required in propert format to start conversation');
-        }
-        console.log(this.conversationSettings.messages);
-        this.messages = this.conversationSettings.messages;
-        const firstAssistantMsn = this.messages.find((message) => message.role == ChatRole.Assistant);
-        if (firstAssistantMsn) {
-            if (this.chatUserSettings?.autoTranslate) {
-            }
-            this.buildChatMessage(firstAssistantMsn, true);
-        }
-        else if (this.agentCard.conversationSettings.autoStart) {
-            this.sendCurrentConversation();
-        }
-    }
-    buildChatMessage(message, mutate = false) {
-        // De la respuesta del backend configura el mensaje para ser rendiriado y procesado en la interfaz
-        if (mutate) {
-            message.voice = this.defaultVoice;
-        }
-        else {
-            message = { content: message.content, role: message.role, voice: this.defaultVoice };
-        }
-        if (this.conversationSettings.textEngine == TextEngines.MarkdownMultiMessages) {
-            this.processMultiMessages(message);
-        }
-        else if (this.conversationSettings.textEngine == TextEngines.MarkdownSSML) {
-            if (!this.conversationSettings.secondaryVoice) {
-                throw new Error('Secondary voice is required for SSML');
-            }
-            const content = this.subsItalicsByTag(message.content, this.conversationSettings.secondaryVoice);
-            message.ssml = '<speak>' + content + '</speak>';
-        }
-        return message;
-    }
-    changeUserChatSettings() {
-        this.dialogService
-            .open(DCConversationUserChatSettingsComponent, {
-            width: '90vw',
-            header: 'Chat Settings',
-            styleClass: 'settings-dialog',
-            closable: true,
-            closeOnEscape: true,
-        })
-            .onClose.subscribe(async () => {
-            this.chatUserSettings = await this.agentCardService.getConversationUserChatSettings();
-            console.log('chatUserSettings', this.chatUserSettings);
-        });
-    }
-    // if (this.useRealTimeMode) {
-    //   // this.chatInputControl.disable();
-    // }
-    ngOnDestroy() {
-        // this.chatboxService.notifyChatComponentDestroyed(this.messages);
-        // this.micServiceService.stopMicrophone();
-        // this.speechRecognizerService.stop();
-        //  Por la interfaz es muy pobable que destruya este elemento, no tengo subscripciones abiertas pero si funciones asyncronas
-        // con esto puedo forzar que las ultimas funcionalides de las funciones asincronas no se ejecuten, otra solucion sería crear todo con observables
-        this.isDestroyed = true;
-    }
-    setAIthinking() {
-        this.isAIThinking = true;
-        this.cdr.detectChanges();
-    }
-    async sendUserMessage(message = null) {
-        if (this.isAIThinking) {
-            return;
-        }
-        if (!message) {
-            return;
-        }
-        this.messages.push(message); // This activates the render of the message
-        this.setAIthinking();
-        try {
-            if (message.audioUrl && this.chatUserSettings.repeatRecording) {
-                // Esto significa que el usuario grabo un audio y tengo que esperar a que termine para seguir con la conversación
-                await new Promise((resolve) => setTimeout(resolve, 500));
-                if (message.audioHtml) {
-                    message.audioHtml.addEventListener('ended', () => {
-                        this.sendCurrentConversation();
-                    });
-                }
-            }
-            else {
-                await this.sendCurrentConversation();
-            }
-        }
-        finally {
-            this.isAIThinking = false;
-        }
-    }
-    async sendCurrentConversation() {
-        if (this.isDestroyed)
-            return; // user can close the chatbox at anytime, and leave this in background. somehow destry component keep process until they finished.
-        if (this.messages.length > 31) {
-            // Seguro para no tener conversaciones infinitas.
-            this.toastService.warn({ title: 'Eso es todo, vuelve a practicar', subtitle: 'Esta conversación llegó a su límite de dialogos' });
-            return;
-        }
-        let messages = this.messages;
-        if (this.conversationSettings.last_prompt) {
-            messages = [...this.messages, { content: this.conversationSettings.last_prompt, role: ChatRole.System }];
-        }
-        console.log('messages', this.chatUserSettings?.model, this.agentCard.model);
-        const conversation = {
-            messages: messages,
-            conversationType: this.conversationSettings.conversationType,
-            textEngine: this.conversationSettings.textEngine,
-            model: this.chatUserSettings?.model || this.agentCard.model,
-        };
-        // if (this.settings.conversationType == ConversationType.LearningExample) {
-        //   // To save count, i created a taks to refactor learning examples include word.
-        //   conversation['word'] = this.chatboxService.item['word'];
-        // }
-        const response = await this.agentCardService.callChatCompletion(conversation);
-        if (!response) {
-            console.error('No message returned from AI, is your service working?');
-            throw new Error('No message returned from AI');
-        }
-        console.log('newMessage', response);
-        const newMessage = this.buildChatMessage(response);
-        // TODO: think on how to include this as pluggin. this.conversationSettings?.autoTranslate
-        this.messages.push(newMessage); // This point ChatMessage will be rendered then ngOnInit will handle everything.
-        // Aqui se debe evaluar si el mensaje es un evaluador, si es así, se debe llamar a la función de evaluación.
-        this.evaluateConversation();
-        this.isAIThinking = false;
-        this.cdr.detectChanges();
-        if (this.chatUserSettings.realTime) {
-            if (this.isDestroyed)
-                return;
-            // this.chatBroker.currentMessagePlayed$.pipe(first()).subscribe(() => {
-            //   this.isUserTalking = true;
-            //   this.micComponent.initStopMicState();
-            // });
-        }
-    }
-    getVoice(voice_value, targetLang = 'en') {
-        if ([null, '', 'random'].includes(voice_value)) {
-            const voiceCodes = VoiceTTSOptions.map((val) => val.id);
-            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
-        }
-        if (voice_value == 'randomMan') {
-            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender == 'male' && voice.lang.includes(targetLang)).map((val) => val.id);
-            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
-        }
-        else if (voice_value == 'randomWoman') {
-            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender == 'female' && voice.lang.includes(targetLang)).map((val) => val.id);
-            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
-        }
-        else {
-            const voice = VoiceTTSOptions.find((voice) => voice.id == voice_value);
-            if (voice) {
-                return voice.id;
-            }
-            else {
-                console.error('Voice not found getting something random', voice_value);
-                return VoiceTTSOptions.find((voice) => voice.lang.includes(targetLang)).id;
-            }
-        }
-    }
-    setInputText(text) {
-        // Method now receives text from the chat-footer component
-        // No need to set the value as it's handled in the child component
-    }
-    async micFinished(eventBlob) {
-        if (eventBlob instanceof Blob) {
-            // Se asume tambien que conversationSettings.superHearing es true es la unica razon para que se grabe un audio
-            if (eventBlob) {
-                if (eventBlob.size < 10000) {
-                    // this.toastService.warn('El audio es muy pequeño', 'graba una respuesta más larga');
-                    return;
-                }
-            }
-            // tODO: Probably rename to userMicState isUserTalking isGettingTranscription
-            this.isUserTalking = false;
-            this.isGettingTranscription = true;
-            const transcription = await this.agentCardService.getAudioTranscriptions(eventBlob, { conversationId: this.agentCard._id });
-            let message = { content: transcription.text, role: ChatRole.User, transcriptionTimestamps: transcription.words };
-            message['audioUrl'] = URL.createObjectURL(eventBlob);
-            this.isGettingTranscription = false;
-            this.sendUserMessage(message);
-        }
-        else {
-            if (!this.chatUserSettings.superHearing) {
-                this.isUserTalking = false;
-                this.sendUserMessage();
-            }
-        }
-    }
-    // // when you click on profile this is activated
-    playMessage(message) {
-        console.log('playMessage', message);
-    }
-    subsItalicsByTag(text, voiceId = 'it-IT-Neural2-A', tagName = 'voice') {
-        const regex = /\*(.*?)\*/g;
-        return text.replace(regex, (match, p1) => `<${tagName} name="${voiceId}">${p1}</${tagName}>`);
-    }
-    processMultiMessages(message) {
-        // TODO! no esta funcionando como quisiera el metodo markdownToHtml
-        let mdToHtml = convertToHTML(message.content);
-        message.multiMessages = mdToHtml.map((val) => {
-            // la voz del narrador viene de las opciones de conversación
-            const narratorVoice = this.agentCard.conversationSettings.secondaryVoice || 'en-US-News-L';
-            // la voz del persoje viene del scenario
-            // const mainVoice = this.getVoice(this.agentCard.conversationSettings.voice) || 'en-US-Journey-F';
-            const isItalics = val.tag == 'em';
-            const voice = isItalics ? narratorVoice : this.defaultVoice;
-            return { voice, content: val.content, audioUrl: null, audioPromise: null, text: val.text, tag: val.tag };
-        });
-        console.log('message', message.multiMessages);
-    }
-    showInfo() {
-        console.log('showInfo', this.conversationSettings);
-        console.log('agentCard', this.agentCard);
-        console.log('parseDict', this.parseDict);
-        console.log('chatUserSettings', this.chatUserSettings);
-        this.isInfoVisible = true;
-    }
-    async restartConversation(conversation = null) {
-        if (conversation) {
-            this.agentCard = conversation;
-        }
-        await this.ngOnInit();
-    }
-    async evaluateConversation() {
-        const evaluator = this.evaluatorAgentCard || DefaultEvaluatorAgentCard;
-        const conversationMessages = this.messages.filter((message) => [ChatRole.User, ChatRole.Assistant].includes(message.role));
-        const userMessages = conversationMessages.filter((message) => message.role == ChatRole.User);
-        if (userMessages.length <= 0) {
-            console.log('No hay mensajes para  evaluar', conversationMessages);
-            return;
-        }
-        const conversationMessagesString = conversationMessages.map((message) => `${message.role}: ${message.content}`).join('\n');
-        const instructions = `
-Please replay to this task:
-    ${evaluator.task}
-This is the conversation history:
-    ${conversationMessagesString}
-and give the response in next JSON format.
-    ${evaluator.expectedResponseType}
-    `;
-        console.log('instructions', instructions);
-        const messages = [{ content: instructions, role: ChatRole.User }];
-        const response = await this.agentCardService.callChatCompletion({ messages });
-        // parse the response to the expected response type
-        const jsonData = extractJsonFromResponse(response.content);
-        if (jsonData.score) {
-            if (jsonData.score <= 3) {
-                console.log('score', this.score);
-                this.score += jsonData.score * 10;
-                if (this.score > 100) {
-                    this.score = 100;
-                }
-                console.log('score', this.score);
-                this.cdr.detectChanges();
-            }
-            this.toastService.success({
-                title: `Tu puntuación es ${jsonData.score} tu puntaje final es ${this.score}`,
-                subtitle: `tu feedback es ${jsonData.feedback}`,
-            });
-        }
-        else {
-            console.log('No se pudo parsear el json', response.content);
-            this.toastService.error({ title: 'No se pudo parsear el json', subtitle: response.content });
-        }
-        console.log('response', response);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCChatComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: TOAST_ALERTS_TOKEN }, { token: DCConversationPromptBuilderService }, { token: i1$3.DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: "chatUserSettings", agentCard: "agentCard", evaluatorAgentCard: "evaluatorAgentCard", parseDict: "parseDict" }, outputs: { sendMessage: "sendMessage" }, providers: [DialogService], ngImport: i0, template: "<dc-chat-header\n  [isAdmin]=\"isAdmin\"\n  [alternativeConversation]=\"alternativeConversation\"\n  (restartConversationEvent)=\"restartConversation($event || null)\"\n  (showInfoEvent)=\"showInfo()\"\n  (settingsClickEvent)=\"changeUserChatSettings()\">\n</dc-chat-header>\n\n<main class=\"chat-container\" (touchmove)=\"$event.stopPropagation()\">\n  <div class=\"chat\" aria-live=\"polite\">\n    @for (message of messages; track message) { @switch (message.role) { @case ('assistant') {\n    <div class=\"message left\">\n      <img class=\"logo fit-top-image\" [src]=\"agentCard?.assets?.image?.url ?? imageUser\" (click)=\"playMessage(message)\" />\n      <dc-chat-message [chatUserSettings]=\"chatUserSettings\" [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } @case ('assistantHelper') {\n    <div class=\"message-helper right\">\n      <dc-chat-message [chatUserSettings]=\"chatUserSettings\" [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } @case ('user') {\n    <div class=\"message right\">\n      <img class=\"logo fit-top-image\" [src]=\"user?.urlPicture || 'assets/defaults/avatar.jpg'\" [alt]=\"'User avatar'\" (click)=\"playMessage(message)\" />\n      <dc-chat-message [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } } }\n\n    <!-- AI thinking indicator -->\n    @if (isAIThinking) {\n    <div class=\"message message--assistant message--thinking\">\n      <span class=\"thinking-emoji\" aria-hidden=\"true\">\uD83E\uDD14</span>\n      <div class=\"thinking-indicator\">\n        <div class=\"skeleton-container\">\n          <p-skeleton width=\"100%\" />\n          <br />\n          <p-skeleton width=\"75%\" />\n        </div>\n      </div>\n    </div>\n    }\n\n    <!-- User typing or transcribing indicator -->\n    @if (isUserTalking || isGettingTranscription) {\n    <div class=\"message message--user message--activity\">\n      <img class=\"avatar avatar--user\" [src]=\"user?.urlPicture || imageUser\" [alt]=\"'User avatar'\" />\n      @if (isUserTalking) {\n      <p class=\"typing-indicator\" aria-label=\"User is speaking\">...</p>\n      } @if (isGettingTranscription) {\n      <i class=\"pi pi-spin pi-spinner-dotted\" aria-label=\"Transcribing speech\"></i>\n      }\n    </div>\n    }\n  </div>\n</main>\n\n<dc-chat-footer\n  [isAIThinking]=\"isAIThinking\"\n  [score]=\"score\"\n  [micSettings]=\"micSettings\"\n  (sendMessage)=\"sendUserMessage($event)\"\n  (textInputChanged)=\"setInputText($event)\"\n  (micFinishedEvent)=\"micFinished($event)\">\n</dc-chat-footer>\n\n<!-- Information dialog -->\n<p-dialog\n  header=\"Informaci\u00F3n de la conversaci\u00F3n\"\n  [(visible)]=\"isInfoVisible\"\n  [modal]=\"true\"\n  [responsive]=\"true\"\n  styleClass=\"conversation-info-dialog\"\n  aria-labelledby=\"conversation-info-title\">\n  <div class=\"dialog-content\">\n    <section class=\"model-info\">\n      <h3 id=\"conversation-info-title\" class=\"sr-only\">Informaci\u00F3n de la conversaci\u00F3n</h3>\n      <dl class=\"info-list\">\n        <dt>Modelo:</dt>\n        <dd>{{ chatUserSettings?.model?.provider }} - {{ chatUserSettings?.model?.modelName }}</dd>\n\n        <dt>Tipo:</dt>\n        <dd>{{ agentCard?.conversationSettings?.conversationType }}</dd>\n\n        <dt>Text Engine:</dt>\n        <dd>{{ agentCard?.conversationSettings?.textEngine }}</dd>\n\n        <dt>Language:</dt>\n        <dd>{{ agentCard?.lang }}</dd>\n\n        <dt>TTS:</dt>\n        <dd>{{ agentCard?.conversationSettings?.tts?.voice }}</dd>\n\n        <dt>Secondary TTS:</dt>\n        <dd>{{ agentCard?.conversationSettings?.tts?.secondaryVoice }}</dd>\n      </dl>\n\n      <div class=\"parameters\">\n        <h4>Par\u00E1metros:</h4>\n        <pre>{{ parseDict | json }}</pre>\n      </div>\n    </section>\n\n    <section class=\"conversation-history\">\n      <h4>Conversaci\u00F3n hasta ahora</h4>\n      <div class=\"message-history-list\">\n        @for (message of conversationSettings.messages; track message) {\n        <div class=\"message-history-item\">\n          <span class=\"message-role\">{{ message.role }}:</span>\n          <span class=\"message-content\">{{ message.content }}</span>\n        </div>\n        }\n      </div>\n    </section>\n  </div>\n</p-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%}*{box-sizing:border-box}.chat-container{border-radius:10px;overflow:hidden;padding:15px;position:relative;max-width:100%;height:100%;display:flex;flex-direction:column}.chat{display:flex;flex-direction:column;list-style-type:none;padding:0;margin:0;overflow-y:auto;flex:1}.logo{width:30px;height:30px}.logo.fit-top-image{object-fit:cover;object-position:top;border-radius:50%}.message{background-color:#f6f6f6f2;border-radius:25px;box-shadow:0 5px 15px #0000001a;position:relative;margin-bottom:20px;transition:all .2s ease}.message .logo{position:absolute;top:50%;transform:translateY(-50%);border-radius:50%;cursor:pointer}.message .logo:hover{transform:translateY(-50%) scale(1.05)}.message.left{padding:12px 15px 12px 45px;margin-right:20%}.message.left .logo{left:5px}.message.right{align-self:flex-end;padding:12px 45px 12px 15px;margin-left:20%;background-color:#e6f0fff2}.message.right .logo{right:5px}.message--thinking,.message--activity{opacity:.7}.message-helper{background-color:#ffffffe6;box-shadow:0 3px 10px #0000001a;position:relative;margin-bottom:20px;border-radius:20px}.message-helper.right{align-self:flex-end;padding:8px 15px;margin-left:20%}.thinking-indicator{padding:5px}.thinking-indicator .skeleton-container{width:200px}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{z-index:1400}::ng-deep .dialog-backdrop{background:#00000080;z-index:1299}::ng-deep .conversation-info-dialog .dialog-content{max-height:70vh;overflow-y:auto}::ng-deep .conversation-info-dialog .info-list{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-bottom:20px}::ng-deep .conversation-info-dialog .info-list dt{font-weight:700}::ng-deep .conversation-info-dialog .message-history-list{max-height:300px;overflow-y:auto;border:1px solid #eee;border-radius:5px;padding:10px}::ng-deep .conversation-info-dialog .message-history-list .message-history-item{padding:5px 0;border-bottom:1px solid #f0f0f0}::ng-deep .conversation-info-dialog .message-history-list .message-history-item:last-child{border-bottom:none}::ng-deep .conversation-info-dialog .message-history-list .message-history-item .message-role{font-weight:700;margin-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ChatMessageComponent, selector: "dc-chat-message", inputs: ["chatMessage", "chatUserSettings"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["isAdmin", "alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "score", "micSettings"], outputs: ["sendMessage", "textInputChanged", "micFinishedEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, evaluatorAgentCard: { classPropertyName: "evaluatorAgentCard", publicName: "evaluatorAgentCard", isSignal: true, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage" }, providers: [DialogService], ngImport: i0, template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [thinkingImg]=\"thinkingImg\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer \n    [isAIThinking]=\"isThinking()\" \n    [micSettings]=\"micSettings\" \n    [evaluatorAgentCard]=\"evaluatorAgentCard()\" \n    (micFinishedEvent)=\"onMicFinished($event)\">\n  </dc-chat-footer>\n\n  <!-- Progress Bar for Score -->\n  <!-- @if (score() > 0) {\n    <div class=\"score-container\">\n      <p-progressBar [value]=\"score()\" [showValue]=\"true\"></p-progressBar>\n    </div>\n  } -->\n\n  <!-- Info Dialog -->\n  <p-dialog [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n    <div class=\"info-content\">\n      <h3>Agent Card</h3>\n      <pre>{{ agentCard | json }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | json }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: [".chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["isAdmin", "alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "evaluatorAgentCard", "micSettings"], outputs: ["sendMessage", "textInputChanged", "micFinishedEvent"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings", "thinkingImg"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ProgressBarModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCChatComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        ChatMessageComponent,
-                        ReactiveFormsModule,
-                        SkeletonModule,
-                        DialogModule,
-                        ProgressBarModule,
-                        ChatHeaderComponent,
-                        ChatFooterComponent,
-                    ], providers: [DialogService], template: "<dc-chat-header\n  [isAdmin]=\"isAdmin\"\n  [alternativeConversation]=\"alternativeConversation\"\n  (restartConversationEvent)=\"restartConversation($event || null)\"\n  (showInfoEvent)=\"showInfo()\"\n  (settingsClickEvent)=\"changeUserChatSettings()\">\n</dc-chat-header>\n\n<main class=\"chat-container\" (touchmove)=\"$event.stopPropagation()\">\n  <div class=\"chat\" aria-live=\"polite\">\n    @for (message of messages; track message) { @switch (message.role) { @case ('assistant') {\n    <div class=\"message left\">\n      <img class=\"logo fit-top-image\" [src]=\"agentCard?.assets?.image?.url ?? imageUser\" (click)=\"playMessage(message)\" />\n      <dc-chat-message [chatUserSettings]=\"chatUserSettings\" [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } @case ('assistantHelper') {\n    <div class=\"message-helper right\">\n      <dc-chat-message [chatUserSettings]=\"chatUserSettings\" [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } @case ('user') {\n    <div class=\"message right\">\n      <img class=\"logo fit-top-image\" [src]=\"user?.urlPicture || 'assets/defaults/avatar.jpg'\" [alt]=\"'User avatar'\" (click)=\"playMessage(message)\" />\n      <dc-chat-message [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } } }\n\n    <!-- AI thinking indicator -->\n    @if (isAIThinking) {\n    <div class=\"message message--assistant message--thinking\">\n      <span class=\"thinking-emoji\" aria-hidden=\"true\">\uD83E\uDD14</span>\n      <div class=\"thinking-indicator\">\n        <div class=\"skeleton-container\">\n          <p-skeleton width=\"100%\" />\n          <br />\n          <p-skeleton width=\"75%\" />\n        </div>\n      </div>\n    </div>\n    }\n\n    <!-- User typing or transcribing indicator -->\n    @if (isUserTalking || isGettingTranscription) {\n    <div class=\"message message--user message--activity\">\n      <img class=\"avatar avatar--user\" [src]=\"user?.urlPicture || imageUser\" [alt]=\"'User avatar'\" />\n      @if (isUserTalking) {\n      <p class=\"typing-indicator\" aria-label=\"User is speaking\">...</p>\n      } @if (isGettingTranscription) {\n      <i class=\"pi pi-spin pi-spinner-dotted\" aria-label=\"Transcribing speech\"></i>\n      }\n    </div>\n    }\n  </div>\n</main>\n\n<dc-chat-footer\n  [isAIThinking]=\"isAIThinking\"\n  [score]=\"score\"\n  [micSettings]=\"micSettings\"\n  (sendMessage)=\"sendUserMessage($event)\"\n  (textInputChanged)=\"setInputText($event)\"\n  (micFinishedEvent)=\"micFinished($event)\">\n</dc-chat-footer>\n\n<!-- Information dialog -->\n<p-dialog\n  header=\"Informaci\u00F3n de la conversaci\u00F3n\"\n  [(visible)]=\"isInfoVisible\"\n  [modal]=\"true\"\n  [responsive]=\"true\"\n  styleClass=\"conversation-info-dialog\"\n  aria-labelledby=\"conversation-info-title\">\n  <div class=\"dialog-content\">\n    <section class=\"model-info\">\n      <h3 id=\"conversation-info-title\" class=\"sr-only\">Informaci\u00F3n de la conversaci\u00F3n</h3>\n      <dl class=\"info-list\">\n        <dt>Modelo:</dt>\n        <dd>{{ chatUserSettings?.model?.provider }} - {{ chatUserSettings?.model?.modelName }}</dd>\n\n        <dt>Tipo:</dt>\n        <dd>{{ agentCard?.conversationSettings?.conversationType }}</dd>\n\n        <dt>Text Engine:</dt>\n        <dd>{{ agentCard?.conversationSettings?.textEngine }}</dd>\n\n        <dt>Language:</dt>\n        <dd>{{ agentCard?.lang }}</dd>\n\n        <dt>TTS:</dt>\n        <dd>{{ agentCard?.conversationSettings?.tts?.voice }}</dd>\n\n        <dt>Secondary TTS:</dt>\n        <dd>{{ agentCard?.conversationSettings?.tts?.secondaryVoice }}</dd>\n      </dl>\n\n      <div class=\"parameters\">\n        <h4>Par\u00E1metros:</h4>\n        <pre>{{ parseDict | json }}</pre>\n      </div>\n    </section>\n\n    <section class=\"conversation-history\">\n      <h4>Conversaci\u00F3n hasta ahora</h4>\n      <div class=\"message-history-list\">\n        @for (message of conversationSettings.messages; track message) {\n        <div class=\"message-history-item\">\n          <span class=\"message-role\">{{ message.role }}:</span>\n          <span class=\"message-content\">{{ message.content }}</span>\n        </div>\n        }\n      </div>\n    </section>\n  </div>\n</p-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%}*{box-sizing:border-box}.chat-container{border-radius:10px;overflow:hidden;padding:15px;position:relative;max-width:100%;height:100%;display:flex;flex-direction:column}.chat{display:flex;flex-direction:column;list-style-type:none;padding:0;margin:0;overflow-y:auto;flex:1}.logo{width:30px;height:30px}.logo.fit-top-image{object-fit:cover;object-position:top;border-radius:50%}.message{background-color:#f6f6f6f2;border-radius:25px;box-shadow:0 5px 15px #0000001a;position:relative;margin-bottom:20px;transition:all .2s ease}.message .logo{position:absolute;top:50%;transform:translateY(-50%);border-radius:50%;cursor:pointer}.message .logo:hover{transform:translateY(-50%) scale(1.05)}.message.left{padding:12px 15px 12px 45px;margin-right:20%}.message.left .logo{left:5px}.message.right{align-self:flex-end;padding:12px 45px 12px 15px;margin-left:20%;background-color:#e6f0fff2}.message.right .logo{right:5px}.message--thinking,.message--activity{opacity:.7}.message-helper{background-color:#ffffffe6;box-shadow:0 3px 10px #0000001a;position:relative;margin-bottom:20px;border-radius:20px}.message-helper.right{align-self:flex-end;padding:8px 15px;margin-left:20%}.thinking-indicator{padding:5px}.thinking-indicator .skeleton-container{width:200px}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{z-index:1400}::ng-deep .dialog-backdrop{background:#00000080;z-index:1299}::ng-deep .conversation-info-dialog .dialog-content{max-height:70vh;overflow-y:auto}::ng-deep .conversation-info-dialog .info-list{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-bottom:20px}::ng-deep .conversation-info-dialog .info-list dt{font-weight:700}::ng-deep .conversation-info-dialog .message-history-list{max-height:300px;overflow-y:auto;border:1px solid #eee;border-radius:5px;padding:10px}::ng-deep .conversation-info-dialog .message-history-list .message-history-item{padding:5px 0;border-bottom:1px solid #f0f0f0}::ng-deep .conversation-info-dialog .message-history-list .message-history-item:last-child{border-bottom:none}::ng-deep .conversation-info-dialog .message-history-list .message-history-item .message-role{font-weight:700;margin-right:5px}\n"] }]
-        }], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: i6$1.ToastAlertsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [TOAST_ALERTS_TOKEN]
-                }] }, { type: DCConversationPromptBuilderService }, { type: i1$3.DialogService }, { type: i0.ChangeDetectorRef }], propDecorators: { chatUserSettings: [{
+            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, ChatHeaderComponent, ChatFooterComponent, ChatMessagesListComponent, DialogModule, ProgressBarModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [thinkingImg]=\"thinkingImg\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer \n    [isAIThinking]=\"isThinking()\" \n    [micSettings]=\"micSettings\" \n    [evaluatorAgentCard]=\"evaluatorAgentCard()\" \n    (micFinishedEvent)=\"onMicFinished($event)\">\n  </dc-chat-footer>\n\n  <!-- Progress Bar for Score -->\n  <!-- @if (score() > 0) {\n    <div class=\"score-container\">\n      <p-progressBar [value]=\"score()\" [showValue]=\"true\"></p-progressBar>\n    </div>\n  } -->\n\n  <!-- Info Dialog -->\n  <p-dialog [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n    <div class=\"info-content\">\n      <h3>Agent Card</h3>\n      <pre>{{ agentCard | json }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | json }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: [".chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { chatUserSettings: [{
                 type: Input
             }], agentCard: [{
                 type: Input
-            }], evaluatorAgentCard: [{
-                type: Input
-            }], parseDict: [{
-                type: Input
-            }], sendMessage: [{
-                type: Output
             }] } });
 
 async function getCharacterData(file) {
@@ -2866,32 +2596,32 @@ function getFileBuffer(file) {
 }
 
 class PromptPreviewDialogComponent {
-    constructor(dynamicDialogConfig, dialogRef) {
-        this.dynamicDialogConfig = dynamicDialogConfig;
-        this.dialogRef = dialogRef;
+    constructor() {
+        this.dynamicDialogConfig = inject(DynamicDialogConfig);
+        this.dialogRef = inject(DynamicDialogRef);
         this.data = this.dynamicDialogConfig.data;
     }
     close() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: PromptPreviewDialogComponent, deps: [{ token: i1$3.DynamicDialogConfig }, { token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: PromptPreviewDialogComponent, isStandalone: true, selector: "dc-prompt-preview-dialog", ngImport: i0, template: ` <div class="prompt-preview-content" [innerHTML]="data.html"></div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PromptPreviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PromptPreviewDialogComponent, isStandalone: true, selector: "dc-prompt-preview-dialog", ngImport: i0, template: ` <div class="prompt-preview-content" [innerHTML]="data.html"></div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: DialogModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: PromptPreviewDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PromptPreviewDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dc-prompt-preview-dialog',
                     standalone: true,
-                    imports: [CommonModule, DialogModule],
+                    imports: [DialogModule],
                     template: ` <div class="prompt-preview-content" [innerHTML]="data.html"></div> `,
                 }]
-        }], ctorParameters: () => [{ type: i1$3.DynamicDialogConfig }, { type: i1$3.DynamicDialogRef }] });
+        }], ctorParameters: () => [] });
 
 class TranslateDialogComponent {
-    constructor(fb, dialogRef, data) {
-        this.fb = fb;
-        this.dialogRef = dialogRef;
-        this.data = data;
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.dialogRef = inject(DialogRef);
+        this.data = inject(DIALOG_DATA);
         this.languages = Object.entries(LangCodeDescriptionEs).map(([code, description]) => ({
             code,
             description,
@@ -2907,17 +2637,19 @@ class TranslateDialogComponent {
     onConfirm() {
         this.dialogRef.close(this.form.value.targetLang);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TranslateDialogComponent, deps: [{ token: i1.FormBuilder }, { token: i2$1.DialogRef }, { token: DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: TranslateDialogComponent, isStandalone: true, selector: "dc-translate-dialog", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TranslateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: TranslateDialogComponent, isStandalone: true, selector: "dc-translate-dialog", ngImport: i0, template: `
     <div class="translate-dialog">
       <h4>Tu idioma actual es: {{ data.currentLang }}</h4>
       <h2>Selecciona el idioma al que quieres traducir</h2>
       <form [formGroup]="form">
         <select formControlName="targetLang">
           <option value="">Select language...</option>
-          <option *ngFor="let lang of languages" [value]="lang.code">
-            {{ lang.description }}
-          </option>
+          @for (lang of languages; track lang) {
+            <option [value]="lang.code">
+              {{ lang.description }}
+            </option>
+          }
         </select>
       </form>
       <div class="actions">
@@ -2925,20 +2657,22 @@ class TranslateDialogComponent {
         <button (click)="onConfirm()" [disabled]="!form.value.targetLang"> Translate </button>
       </div>
     </div>
-  `, isInline: true, styles: [".translate-dialog{padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000026}.actions{margin-top:20px;display:flex;justify-content:flex-end;gap:10px}select{width:100%;padding:8px;margin-top:10px;border:1px solid #ccc;border-radius:4px}button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer}button:first-child{background:#f0f0f0}button:last-child{background:#007bff;color:#fff}button:disabled{background:#ccc;cursor:not-allowed}h2{margin:0 0 16px;color:#333}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    `, isInline: true, styles: [".translate-dialog{padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000026}.actions{margin-top:20px;display:flex;justify-content:flex-end;gap:10px}select{width:100%;padding:8px;margin-top:10px;border:1px solid #ccc;border-radius:4px}button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer}button:first-child{background:#f0f0f0}button:last-child{background:#007bff;color:#fff}button:disabled{background:#ccc;cursor:not-allowed}h2{margin:0 0 16px;color:#333}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TranslateDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TranslateDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-translate-dialog', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: `
+            args: [{ selector: 'dc-translate-dialog', standalone: true, imports: [ReactiveFormsModule], template: `
     <div class="translate-dialog">
       <h4>Tu idioma actual es: {{ data.currentLang }}</h4>
       <h2>Selecciona el idioma al que quieres traducir</h2>
       <form [formGroup]="form">
         <select formControlName="targetLang">
           <option value="">Select language...</option>
-          <option *ngFor="let lang of languages" [value]="lang.code">
-            {{ lang.description }}
-          </option>
+          @for (lang of languages; track lang) {
+            <option [value]="lang.code">
+              {{ lang.description }}
+            </option>
+          }
         </select>
       </form>
       <div class="actions">
@@ -2946,11 +2680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
         <button (click)="onConfirm()" [disabled]="!form.value.targetLang"> Translate </button>
       </div>
     </div>
-  `, styles: [".translate-dialog{padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000026}.actions{margin-top:20px;display:flex;justify-content:flex-end;gap:10px}select{width:100%;padding:8px;margin-top:10px;border:1px solid #ccc;border-radius:4px}button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer}button:first-child{background:#f0f0f0}button:last-child{background:#007bff;color:#fff}button:disabled{background:#ccc;cursor:not-allowed}h2{margin:0 0 16px;color:#333}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.DialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DIALOG_DATA]
-                }] }] });
+    `, styles: [".translate-dialog{padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000026}.actions{margin-top:20px;display:flex;justify-content:flex-end;gap:10px}select{width:100%;padding:8px;margin-top:10px;border:1px solid #ccc;border-radius:4px}button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer}button:first-child{background:#f0f0f0}button:last-child{background:#007bff;color:#fff}button:disabled{background:#ccc;cursor:not-allowed}h2{margin:0 0 16px;color:#333}\n"] }]
+        }], ctorParameters: () => [] });
 
 function markdownToHTML(markdownText) {
     // Convert italics-bold (***text***)
@@ -2967,10 +2698,10 @@ class SimpleMdToHtmlPipe {
     transform(text) {
         return markdownToHTML(text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: SimpleMdToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.1", ngImport: i0, type: SimpleMdToHtmlPipe, isStandalone: true, name: "simpleMdToHtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SimpleMdToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: SimpleMdToHtmlPipe, isStandalone: true, name: "simpleMdToHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: SimpleMdToHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SimpleMdToHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'simpleMdToHtml',
@@ -2984,10 +2715,10 @@ class StartDivToHtmlPipe {
         text = text.replace(/\n/g, '<br>');
         return text;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: StartDivToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.1", ngImport: i0, type: StartDivToHtmlPipe, isStandalone: true, name: "startDividerToHtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StartDivToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: StartDivToHtmlPipe, isStandalone: true, name: "startDividerToHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: StartDivToHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StartDivToHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'startDividerToHtml',
@@ -3000,10 +2731,10 @@ class MdToHtmlArrayPipe {
         const htmlArray = convertToHTML(text);
         return htmlArray.map((val) => val.content).join('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MdToHtmlArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.1", ngImport: i0, type: MdToHtmlArrayPipe, isStandalone: true, name: "mdToHtmlArray" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MdToHtmlArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: MdToHtmlArrayPipe, isStandalone: true, name: "mdToHtmlArray" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MdToHtmlArrayPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MdToHtmlArrayPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mdToHtmlArray',
@@ -3012,11 +2743,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
         }] });
 
 class AccountPlatformForm {
-    constructor(route, fb, router, toastService) {
-        this.route = route;
-        this.fb = fb;
-        this.router = router;
-        this.toastService = toastService;
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.fb = inject(FormBuilder);
+        this.router = inject(Router);
+        this.toastService = inject(TOAST_ALERTS_TOKEN);
         // Format the platform options for dropdown display
         this.platformOptions = Object.values(EAccountsPlatform).map((value) => ({
             label: value.charAt(0).toUpperCase() + value.slice(1), // Capitalize first letter
@@ -3071,16 +2802,13 @@ class AccountPlatformForm {
             this.toastService.warn(infoToast);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AccountPlatformForm, deps: [{ token: i1$4.ActivatedRoute }, { token: i1.FormBuilder }, { token: i1$4.Router }, { token: TOAST_ALERTS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4$3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AccountPlatformForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AccountPlatformForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AccountPlatformForm, decorators: [{
             type: Component,
             args: [{ selector: 'account-platform-form', imports: [ReactiveFormsModule, CardModule, TextareaModule, DropdownModule, ButtonModule, SelectModule, InputTextModule, ChipModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.ActivatedRoute }, { type: i1.FormBuilder }, { type: i1$4.Router }, { type: i6$1.ToastAlertsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [TOAST_ALERTS_TOKEN]
-                }] }], propDecorators: { formArray: [{
+        }], ctorParameters: () => [], propDecorators: { formArray: [{
                 type: Input
             }] } });
 
@@ -3093,16 +2821,16 @@ class DCAgentCardFormComponent {
         };
         return imageSettings;
     }
-    constructor(fb, storageService, agentCardService, cdr, router, activatedRoute, dialogService, promptBuilder, toastService) {
-        this.fb = fb;
-        this.storageService = storageService;
-        this.agentCardService = agentCardService;
-        this.cdr = cdr;
-        this.router = router;
-        this.activatedRoute = activatedRoute;
-        this.dialogService = dialogService;
-        this.promptBuilder = promptBuilder;
-        this.toastService = toastService;
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.storageService = inject(MultiImagesStorageService);
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.cdr = inject(ChangeDetectorRef);
+        this.router = inject(Router);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.dialogService = inject(DialogService);
+        this.promptBuilder = inject(DCConversationPromptBuilderService);
+        this.toastService = inject(TOAST_ALERTS_TOKEN, { optional: true });
         // select options
         this.textEngines = Object.values(TextEngines);
         this.conversationOptions = ConversationTypeOptions;
@@ -3112,26 +2840,26 @@ class DCAgentCardFormComponent {
         this.languageOptions = Object.entries(LangCodeDescriptionEs).map(([value, label]) => ({ value, label }));
         this.agentCardId = this.activatedRoute.snapshot.paramMap.get('id');
         this.audioSpeedOptions = Object.values(AudioSpeed$1).map((speed) => ({ label: speed, value: speed }));
-        this.storageSettings = this.getSettings();
-        this.bannerImgSettings = {
+        this.storageSettings = input(this.getSettings());
+        this.bannerImgSettings = input({
             path: 'conversation-cards/' + this.agentCardId,
             fileName: null,
             cropSettings: { aspectRatio: AspectType.Rectangle, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 700 },
-        };
-        this.imageStorageSettings = {
+        });
+        this.imageStorageSettings = input({
             path: 'conversation-cards/' + this.agentCardId,
             fileName: null,
             cropSettings: { aspectRatio: AspectType.Vertical_9_16, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 500 },
-        };
+        });
         this.stickerStorageSettings = {
             path: `conversation-cards/${this.agentCardId}/stickers`,
             fileName: null,
             cropSettings: { aspectRatio: AspectType.Square, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 400 },
         };
-        this.onImageLoaded = new EventEmitter();
-        this.onSave = new EventEmitter();
-        this.onGoDetails = new EventEmitter();
-        this.onTranslate = new EventEmitter();
+        this.onImageLoaded = output();
+        this.onSave = output();
+        this.onGoDetails = output();
+        this.onTranslate = output();
         this.markdownForm = this.fb.group({ seeMarkdown: [false] });
         // Type is IAgentCard
         this.form = this.fb.group({
@@ -3168,7 +2896,7 @@ class DCAgentCardFormComponent {
     ngOnInit() {
         this.form.controls.conversationSettings.controls.autoStart;
         console.log('form', this.form.value, this.conversationOptions);
-        this.imageSettings = this.storageSettings.cropSettings;
+        this.imageSettings = this.storageSettings().cropSettings;
         this.loadConversationCard();
         this.markdownForm.get('checked')?.valueChanges.subscribe((value) => {
             this.markdownForm.patchValue({ seeMarkdown: value }, { emitEvent: false });
@@ -3183,7 +2911,7 @@ class DCAgentCardFormComponent {
                     this.patchFormWithConversationData();
                     this.handleAlternateGreetings();
                 }
-                this.storageSettings.path = 'conversation-cards/' + this.agentCardId;
+                this.storageSettings().path = 'conversation-cards/' + this.agentCardId;
                 this.cdr.detectChanges();
             }
             catch (err) {
@@ -3501,13 +3229,12 @@ class DCAgentCardFormComponent {
         this.toastService.success({ title: 'Sticker removed', subtitle: 'Sticker was removed' });
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCAgentCardFormComponent, deps: [{ token: i1.FormBuilder }, { token: i2$2.MultiImagesStorageService }, { token: CONVERSATION_AI_TOKEN }, { token: i0.ChangeDetectorRef }, { token: i1$4.Router }, { token: i1$4.ActivatedRoute }, { token: i1$3.DialogService }, { token: DCConversationPromptBuilderService }, { token: TOAST_ALERTS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: "storageSettings", bannerImgSettings: "bannerImgSettings", imageStorageSettings: "imageStorageSettings" }, outputs: { onImageLoaded: "onImageLoaded", onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], ngImport: i0, template: "<div class=\"top-buttons\">\n  <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n  <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n  <button pButton severity=\"primary\" (click)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n</div>\n\n<div class=\"top-buttons\">\n  <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n  <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n  <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n  <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n</div>\n\n<br />\n<br />\n<form [formGroup]=\"form\" class=\"conversation-form\">\n  <div class=\"form-grid\">\n    <div class=\"left-column\">\n      <div style=\"display: flex; gap: 15px\">\n        <div class=\"form-field\">\n          <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"id\"\n            >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n          >\n        </div>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n        <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n        @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n        <div class=\"error\"> Title is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"lang\"\n          [options]=\"languageOptions\"\n          formControlName=\"lang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div formGroupName=\"conversationSettings\" class=\"group\">\n        <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n        <div class=\"form-field\">\n          <label for=\"textEngine\">\n            Text Engine\n            <span\n              class=\"cursor-pointer\"\n              (click)=\"textEngineDialog.toggle($event)\"\n              pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n              >\u2139\uFE0F</span\n            >\n          </label>\n\n          <p-select\n            id=\"textEngine\"\n            [options]=\"textEngineOptions\"\n            formControlName=\"textEngine\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"'Select Text Engine'\"></p-select>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"conversationType\">Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label>\n          <p-select\n            id=\"conversationType\"\n            [options]=\"conversationOptions\"\n            formControlName=\"conversationType\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"'Select Conversation Type'\"></p-select>\n        </div>\n\n        <div class=\"form-field\">\n          <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n          <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n        </div>\n\n        <div formGroupName=\"tts\" class=\"group\">\n          <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"voice\"\n              [options]=\"voiceTTSOptions\"\n              formControlName=\"voice\"\n              optionLabel=\"name\"\n              optionValue=\"id\"\n              [placeholder]=\"'Select Voice'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"secondaryVoice\"\n              [options]=\"voiceTTSOptions\"\n              formControlName=\"secondaryVoice\"\n              optionLabel=\"name\"\n              optionValue=\"id\"\n              [placeholder]=\"'Select Secondary Voice'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"speed\"\n              [options]=\"audioSpeedOptions\"\n              formControlName=\"speed\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Speed'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n          </div>\n        </div>\n      </div>\n\n      <div formGroupName=\"metaApp\" class=\"group\">\n        <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n        <div class=\"form-field\">\n          <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n          <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n          <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n          <div class=\"error\" *ngIf=\"form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched\">\n            Please enter a valid email address\n          </div>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"takenCount\"\n            >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n          >\n          <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n        </div>\n\n        <div class=\"form-field checkbox\">\n          <label>\n            <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n            Public\n          </label>\n        </div>\n\n        <div class=\"form-field checkbox\">\n          <label>\n            <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n            Published\n          </label>\n        </div>\n      </div>\n\n      <div class=\"group\">\n        <h4>Model Settings <span pTooltip=\"AI model configuration\">\u2139\uFE0F</span></h4>\n\n        <dc-provider-selector [parentForm]=\"form.controls.model\"></dc-provider-selector>\n      </div>\n\n      <div class=\"group\">\n        <h4>Gestion de cuentas</h4>\n        @if(form.controls.accounts){\n        <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n\n        }\n      </div>\n    </div>\n\n    <div class=\"right-column\">\n      <div style=\"position: relative; min-height: 60px\">\n        <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n        @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n        <dc-cropper-modal\n          style=\"position: absolute; bottom: 10px; right: 10px\"\n          #cropperBanner\n          id=\"cropperBanner\"\n          [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n          [imgStorageSettings]=\"bannerImgSettings\"\n          [currentStorage]=\"conversation?.assets?.bannerImg\"\n          (onFileSelected)=\"onImageSelected($event)\"\n          (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n\n        }\n      </div>\n      <div style=\"position: relative\">\n        <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n        @if (!agentCardId) {\n        <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n        } @else {\n\n        <dc-cropper-modal\n          style=\"position: absolute; bottom: 10px; left: 50%\"\n          id=\"cropperCardImage\"\n          #cropperCardImage\n          [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n          [imgStorageSettings]=\"imageStorageSettings\"\n          (onFileSelected)=\"onImageSelected($event)\"\n          (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n        }\n      </div>\n\n      <div>\n        <h4>Agregar stickers</h4>\n\n        <dc-cropper-modal\n          id=\"cropperCardImage\"\n          #cropperStickers\n          [buttonLabel]=\"'agregar sticker'\"\n          [imgStorageSettings]=\"stickerStorageSettings\"\n          (onFileSelected)=\"onImageSelected($event)\"\n          (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n      </div>\n\n      <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n        @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n        <div style=\"position: relative\">\n          <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n          <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n        </div>\n        }\n      </div>\n\n      <!-- <input pInputText type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" /> -->\n\n      <div formGroupName=\"characterCard\">\n        <div formGroupName=\"data\" class=\"card-group\">\n          <h3>Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\">\u2139\uFE0F</span></h3>\n          <div class=\"form-field\">\n            <label for=\"cardName\">Name <span pTooltip=\"El nombre del personaje\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"cardName\" type=\"text\" formControlName=\"name\" />\n            <div class=\"error\" *ngIf=\"form.get('characterCard.data.name')?.errors?.['required'] && form.get('characterCard.data.name')?.touched\">\n              Name is required\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardDescription\">Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\">\u2139\uFE0F</span></label>\n            <textarea class=\"textmin\" rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardDescription\" formControlName=\"description\"></textarea>\n            <div class=\"error\" *ngIf=\"form.get('characterCard.data.description')?.errors?.['required'] && form.get('characterCard.data.description')?.touched\">\n              Description is required\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardScenario\">Scenario <span pTooltip=\"Describe the context or setting for the conversation\">\u2139\uFE0F</span></label>\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardScenario\" formControlName=\"scenario\"></textarea>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardFirstMessage\">\n              First Message\n              <span pTooltip=\"Es muy importante que la historia inicie bien, ya que es el patr\u00F3n inicial para la AI, respetar las convenciones de texto\"\n                >\u2139\uFE0F</span\n              >\n\n              <p-togglebutton\n                [formControl]=\"markdownForm.controls.seeMarkdown\"\n                [onLabel]=\"'Editar'\"\n                [offLabel]=\"'Ver Markdown Texto'\"\n                size=\"small\"\n                styleClass=\"min-w-16\"\n                (onChange)=\"checkCdr()\" />\n            </label>\n\n            @if(markdownForm.controls.seeMarkdown.value){\n            <div [innerHTML]=\"form.controls.characterCard.controls.data.controls.first_mes.value | mdToHtmlArray\"></div>\n            }@else{\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardFirstMessage\" formControlName=\"first_mes\"> </textarea>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"mes_example\">Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"mes_example\" formControlName=\"mes_example\"></textarea>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardCreatorNotes\">Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardCreatorNotes\" formControlName=\"creator_notes\"></textarea>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardSystemPrompt\">System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardSystemPrompt\" formControlName=\"system_prompt\"></textarea>\n            <div\n              class=\"error\"\n              *ngIf=\"form.get('characterCard.data.system_prompt')?.errors?.['required'] && form.get('characterCard.data.system_prompt')?.touched\">\n              System prompt is required\n            </div>\n          </div>\n\n          <div style=\"display: flex; flex-direction: column\">\n            <label for=\"cardPostHistoryInstructions\"\n              >Post-History Instructions (Opcional)\n              <span\n                pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n                >\u2139\uFE0F</span\n              ></label\n            >\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" formControlName=\"post_history_instructions\"></textarea>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardAlternateGreetings\">Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\">\u2139\uFE0F</span></label>\n            <div class=\"array-field\">\n              <div\n                *ngFor=\"let greeting of form.controls.characterCard.controls.data.controls.alternate_greetings.controls; let i = index\"\n                class=\"array-item\"\n                style=\"position: relative\">\n                <textarea\n                  pTextarea\n                  rows=\"1\"\n                  [autoResize]=\"true\"\n                  [id]=\"'cardAlternateGreeting' + i\"\n                  [formControl]=\"greeting\"\n                  (input)=\"updateArrayField('alternate_greetings', i, $event)\">\n                </textarea>\n                <button pButton severity=\"danger\" class=\"remove-button\" (click)=\"removeArrayItem('alternate_greetings', i)\">&#x2716;</button>\n              </div>\n              <button pButton severity=\"info\" (click)=\"addArrayItem('alternate_greetings')\">Add Greeting</button>\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label pTooltip=\"Agrega las categorias\" for=\"cardTags\">Tags \u2139\uFE0F</label>\n            <div class=\"array-field\">\n              <div *ngFor=\"let tag of form.controls.characterCard.controls.data.controls.tags.controls; let i = index\" class=\"array-item\">\n                <input [id]=\"'cardTag' + i\" type=\"text\" [formControl]=\"tag\" (input)=\"updateArrayField('tags', i, $event)\" />\n                <button pButton severity=\"danger\" (click)=\"removeArrayItem('tags', i)\">Remove</button>\n              </div>\n              <button pButton severity=\"info\" (click)=\"addArrayItem('tags')\">Add Tag</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n\n<p-popover #textEngineDialog header=\"Text Engine Information\">\n  <div class=\"p-4\">\n    <h3>Text Engine Types</h3>\n    <ul>\n      <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n      <li\n        ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n        puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n        personaje principal</li\n      >\n      <li\n        ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo se\n        presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n      >\n    </ul>\n  </div>\n</p-popover>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n", styles: [".textmin{min-width:36vw}.main-image-card{max-width:280px;display:block;margin:0 auto;border-radius:8px}.main-banner-image-card{border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{background-color:#f8f9fa;padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{background-color:#f8f9fa;padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i7.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: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i11.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i13.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i14.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i15.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ProviderSelectorComponent, selector: "dc-provider-selector", inputs: ["parentForm"] }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCAgentCardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null }, bannerImgSettings: { classPropertyName: "bannerImgSettings", publicName: "bannerImgSettings", isSignal: true, isRequired: false, transformFunction: null }, imageStorageSettings: { classPropertyName: "imageStorageSettings", publicName: "imageStorageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onImageLoaded: "onImageLoaded", onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], ngImport: i0, template: "<div class=\"top-buttons\">\n  <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n  <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n  <button pButton severity=\"primary\" (click)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n</div>\n\n<div class=\"top-buttons\">\n  <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n  <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n  <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n  <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n</div>\n\n<br />\n<br />\n<form [formGroup]=\"form\" class=\"conversation-form\">\n  <div class=\"form-grid\">\n    <div class=\"left-column\">\n      <div style=\"display: flex; gap: 15px\">\n        <div class=\"form-field\">\n          <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"id\"\n            >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n            >\n          </div>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n          <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n          @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n            <div class=\"error\"> Title is required </div>\n          }\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n          <p-select\n            id=\"lang\"\n            [options]=\"languageOptions\"\n            formControlName=\"lang\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n                >\n              </label>\n\n              <p-select\n                id=\"textEngine\"\n                [options]=\"textEngineOptions\"\n                formControlName=\"textEngine\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"conversationType\">Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"conversationType\"\n                [options]=\"conversationOptions\"\n                formControlName=\"conversationType\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n              <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n            </div>\n\n            <div formGroupName=\"tts\" class=\"group\">\n              <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n              <div class=\"form-field\">\n                <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n                <p-select\n                  id=\"voice\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                [placeholder]=\"'Select Voice'\"></p-select>\n              </div>\n\n              <div class=\"form-field\">\n                <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n                <p-select\n                  id=\"secondaryVoice\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </div>\n\n              <div class=\"form-field\">\n                <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n                <p-select\n                  id=\"speed\"\n                  [options]=\"audioSpeedOptions\"\n                  formControlName=\"speed\"\n                  optionLabel=\"label\"\n                  optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n              </div>\n\n              <div class=\"form-field\">\n                <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n                <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n              </div>\n            </div>\n          </div>\n\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n                <div class=\"error\">\n                  Please enter a valid email address\n                </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n                >\n                <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n              </div>\n\n              <div class=\"form-field checkbox\">\n                <label>\n                  <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                  Public\n                </label>\n              </div>\n\n              <div class=\"form-field checkbox\">\n                <label>\n                  <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                  Published\n                </label>\n              </div>\n            </div>\n\n            <div class=\"group\">\n              <h4>Model Settings <span pTooltip=\"AI model configuration\">\u2139\uFE0F</span></h4>\n\n              <dc-provider-selector [parentForm]=\"form.controls.model\"></dc-provider-selector>\n            </div>\n\n            <div class=\"group\">\n              <h4>Gestion de cuentas</h4>\n              @if(form.controls.accounts){\n                <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n\n              }\n            </div>\n          </div>\n\n          <div class=\"right-column\">\n            <div style=\"position: relative; min-height: 60px\">\n              <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n              @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n                <dc-cropper-modal\n                  style=\"position: absolute; bottom: 10px; right: 10px\"\n                  #cropperBanner\n                  id=\"cropperBanner\"\n                  [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n                  [imgStorageSettings]=\"bannerImgSettings()\"\n                  [currentStorage]=\"conversation?.assets?.bannerImg\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n\n              }\n            </div>\n            <div style=\"position: relative\">\n              <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n              @if (!agentCardId) {\n                <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n              } @else {\n\n                <dc-cropper-modal\n                  style=\"position: absolute; bottom: 10px; left: 50%\"\n                  id=\"cropperCardImage\"\n                  #cropperCardImage\n                  [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n                  [imgStorageSettings]=\"imageStorageSettings()\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n              }\n            </div>\n\n            <div>\n              <h4>Agregar stickers</h4>\n\n              <dc-cropper-modal\n                id=\"cropperCardImage\"\n                #cropperStickers\n                [buttonLabel]=\"'agregar sticker'\"\n                [imgStorageSettings]=\"stickerStorageSettings\"\n                (onFileSelected)=\"onImageSelected($event)\"\n              (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n            </div>\n\n            <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n              @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n                <div style=\"position: relative\">\n                  <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n                  <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n                </div>\n              }\n            </div>\n\n            <!-- <input pInputText type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" /> -->\n\n            <div formGroupName=\"characterCard\">\n              <div formGroupName=\"data\" class=\"card-group\">\n                <h3>Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\">\u2139\uFE0F</span></h3>\n                <div class=\"form-field\">\n                  <label for=\"cardName\">Name <span pTooltip=\"El nombre del personaje\">\u2139\uFE0F</span></label>\n                  <input pInputText id=\"cardName\" type=\"text\" formControlName=\"name\" />\n                  @if (form.get('characterCard.data.name')?.errors?.['required'] && form.get('characterCard.data.name')?.touched) {\n                    <div class=\"error\">\n                      Name is required\n                    </div>\n                  }\n                </div>\n\n                <div class=\"form-field\">\n                  <label for=\"cardDescription\">Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\">\u2139\uFE0F</span></label>\n                  <textarea class=\"textmin\" rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardDescription\" formControlName=\"description\"></textarea>\n                  @if (form.get('characterCard.data.description')?.errors?.['required'] && form.get('characterCard.data.description')?.touched) {\n                    <div class=\"error\">\n                      Description is required\n                    </div>\n                  }\n                </div>\n\n                <div class=\"form-field\">\n                  <label for=\"cardScenario\">Scenario <span pTooltip=\"Describe the context or setting for the conversation\">\u2139\uFE0F</span></label>\n                  <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardScenario\" formControlName=\"scenario\"></textarea>\n                </div>\n\n                <div class=\"form-field\">\n                  <label for=\"cardFirstMessage\">\n                    First Message\n                    <span pTooltip=\"Es muy importante que la historia inicie bien, ya que es el patr\u00F3n inicial para la AI, respetar las convenciones de texto\"\n                      >\u2139\uFE0F</span\n                      >\n\n                      <p-togglebutton\n                        [formControl]=\"markdownForm.controls.seeMarkdown\"\n                        [onLabel]=\"'Editar'\"\n                        [offLabel]=\"'Ver Markdown Texto'\"\n                        size=\"small\"\n                        styleClass=\"min-w-16\"\n                        (onChange)=\"checkCdr()\" />\n                    </label>\n\n                    @if(markdownForm.controls.seeMarkdown.value){\n                      <div [innerHTML]=\"form.controls.characterCard.controls.data.controls.first_mes.value | mdToHtmlArray\"></div>\n                      }@else{\n                      <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardFirstMessage\" formControlName=\"first_mes\"> </textarea>\n                    }\n                  </div>\n\n                  <div class=\"form-field\">\n                    <label for=\"mes_example\">Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n                    <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"mes_example\" formControlName=\"mes_example\"></textarea>\n                  </div>\n\n                  <div class=\"form-field\">\n                    <label for=\"cardCreatorNotes\">Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n                    <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardCreatorNotes\" formControlName=\"creator_notes\"></textarea>\n                  </div>\n\n                  <div class=\"form-field\">\n                    <label for=\"cardSystemPrompt\">System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n                    <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardSystemPrompt\" formControlName=\"system_prompt\"></textarea>\n                    @if (form.get('characterCard.data.system_prompt')?.errors?.['required'] && form.get('characterCard.data.system_prompt')?.touched) {\n                      <div\n                        class=\"error\"\n                        >\n                        System prompt is required\n                      </div>\n                    }\n                  </div>\n\n                  <div style=\"display: flex; flex-direction: column\">\n                    <label for=\"cardPostHistoryInstructions\"\n                      >Post-History Instructions (Opcional)\n                      <span\n                        pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n                        >\u2139\uFE0F</span\n                        ></label\n                        >\n                        <textarea rows=\"1\" pTextarea [autoResize]=\"true\" formControlName=\"post_history_instructions\"></textarea>\n                      </div>\n\n                      <div class=\"form-field\">\n                        <label for=\"cardAlternateGreetings\">Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\">\u2139\uFE0F</span></label>\n                        <div class=\"array-field\">\n                          @for (greeting of form.controls.characterCard.controls.data.controls.alternate_greetings.controls; track greeting; let i = $index) {\n                            <div\n                              class=\"array-item\"\n                              style=\"position: relative\">\n                              <textarea\n                                pTextarea\n                                rows=\"1\"\n                                [autoResize]=\"true\"\n                                [id]=\"'cardAlternateGreeting' + i\"\n                                [formControl]=\"greeting\"\n                                (input)=\"updateArrayField('alternate_greetings', i, $event)\">\n                              </textarea>\n                              <button pButton severity=\"danger\" class=\"remove-button\" (click)=\"removeArrayItem('alternate_greetings', i)\">&#x2716;</button>\n                            </div>\n                          }\n                          <button pButton severity=\"info\" (click)=\"addArrayItem('alternate_greetings')\">Add Greeting</button>\n                        </div>\n                      </div>\n\n                      <div class=\"form-field\">\n                        <label pTooltip=\"Agrega las categorias\" for=\"cardTags\">Tags \u2139\uFE0F</label>\n                        <div class=\"array-field\">\n                          @for (tag of form.controls.characterCard.controls.data.controls.tags.controls; track tag; let i = $index) {\n                            <div class=\"array-item\">\n                              <input [id]=\"'cardTag' + i\" type=\"text\" [formControl]=\"tag\" (input)=\"updateArrayField('tags', i, $event)\" />\n                              <button pButton severity=\"danger\" (click)=\"removeArrayItem('tags', i)\">Remove</button>\n                            </div>\n                          }\n                          <button pButton severity=\"info\" (click)=\"addArrayItem('tags')\">Add Tag</button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n            <p-popover #textEngineDialog header=\"Text Engine Information\">\n              <div class=\"p-4\">\n                <h3>Text Engine Types</h3>\n                <ul>\n                  <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n                  <li\n                    ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n                    puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n                    personaje principal</li\n                    >\n                    <li\n                      ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo se\n                      presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n                      >\n                    </ul>\n                  </div>\n                </p-popover>\n\n                <div class=\"float-button\">\n                  <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n                </div>\n", styles: [".textmin{min-width:36vw}.main-image-card{max-width:280px;display:block;margin:0 auto;border-radius:8px}.main-banner-image-card{border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{background-color:#f8f9fa;padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{background-color:#f8f9fa;padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2$1.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: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i6$2.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i8.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i9.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i10.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ProviderSelectorComponent, selector: "dc-provider-selector", inputs: ["parentForm"] }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-agent-form', standalone: true, providers: [DialogService], imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         CropperComponentModal,
                         OverlayModule,
@@ -3526,31 +3253,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         DynamicDialogModule,
                         PopoverModule,
                         ProviderSelectorComponent,
-                        AccountPlatformForm,
-                    ], template: "<div class=\"top-buttons\">\n  <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n  <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n  <button pButton severity=\"primary\" (click)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n</div>\n\n<div class=\"top-buttons\">\n  <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n  <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n  <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n  <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n</div>\n\n<br />\n<br />\n<form [formGroup]=\"form\" class=\"conversation-form\">\n  <div class=\"form-grid\">\n    <div class=\"left-column\">\n      <div style=\"display: flex; gap: 15px\">\n        <div class=\"form-field\">\n          <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"id\"\n            >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n          >\n        </div>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n        <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n        @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n        <div class=\"error\"> Title is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"lang\"\n          [options]=\"languageOptions\"\n          formControlName=\"lang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div formGroupName=\"conversationSettings\" class=\"group\">\n        <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n        <div class=\"form-field\">\n          <label for=\"textEngine\">\n            Text Engine\n            <span\n              class=\"cursor-pointer\"\n              (click)=\"textEngineDialog.toggle($event)\"\n              pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n              >\u2139\uFE0F</span\n            >\n          </label>\n\n          <p-select\n            id=\"textEngine\"\n            [options]=\"textEngineOptions\"\n            formControlName=\"textEngine\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"'Select Text Engine'\"></p-select>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"conversationType\">Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label>\n          <p-select\n            id=\"conversationType\"\n            [options]=\"conversationOptions\"\n            formControlName=\"conversationType\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"'Select Conversation Type'\"></p-select>\n        </div>\n\n        <div class=\"form-field\">\n          <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n          <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n        </div>\n\n        <div formGroupName=\"tts\" class=\"group\">\n          <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"voice\"\n              [options]=\"voiceTTSOptions\"\n              formControlName=\"voice\"\n              optionLabel=\"name\"\n              optionValue=\"id\"\n              [placeholder]=\"'Select Voice'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"secondaryVoice\"\n              [options]=\"voiceTTSOptions\"\n              formControlName=\"secondaryVoice\"\n              optionLabel=\"name\"\n              optionValue=\"id\"\n              [placeholder]=\"'Select Secondary Voice'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"speed\"\n              [options]=\"audioSpeedOptions\"\n              formControlName=\"speed\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Speed'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n          </div>\n        </div>\n      </div>\n\n      <div formGroupName=\"metaApp\" class=\"group\">\n        <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n        <div class=\"form-field\">\n          <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n          <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n          <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n          <div class=\"error\" *ngIf=\"form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched\">\n            Please enter a valid email address\n          </div>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"takenCount\"\n            >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n          >\n          <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n        </div>\n\n        <div class=\"form-field checkbox\">\n          <label>\n            <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n            Public\n          </label>\n        </div>\n\n        <div class=\"form-field checkbox\">\n          <label>\n            <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n            Published\n          </label>\n        </div>\n      </div>\n\n      <div class=\"group\">\n        <h4>Model Settings <span pTooltip=\"AI model configuration\">\u2139\uFE0F</span></h4>\n\n        <dc-provider-selector [parentForm]=\"form.controls.model\"></dc-provider-selector>\n      </div>\n\n      <div class=\"group\">\n        <h4>Gestion de cuentas</h4>\n        @if(form.controls.accounts){\n        <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n\n        }\n      </div>\n    </div>\n\n    <div class=\"right-column\">\n      <div style=\"position: relative; min-height: 60px\">\n        <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n        @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n        <dc-cropper-modal\n          style=\"position: absolute; bottom: 10px; right: 10px\"\n          #cropperBanner\n          id=\"cropperBanner\"\n          [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n          [imgStorageSettings]=\"bannerImgSettings\"\n          [currentStorage]=\"conversation?.assets?.bannerImg\"\n          (onFileSelected)=\"onImageSelected($event)\"\n          (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n\n        }\n      </div>\n      <div style=\"position: relative\">\n        <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n        @if (!agentCardId) {\n        <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n        } @else {\n\n        <dc-cropper-modal\n          style=\"position: absolute; bottom: 10px; left: 50%\"\n          id=\"cropperCardImage\"\n          #cropperCardImage\n          [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n          [imgStorageSettings]=\"imageStorageSettings\"\n          (onFileSelected)=\"onImageSelected($event)\"\n          (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n        }\n      </div>\n\n      <div>\n        <h4>Agregar stickers</h4>\n\n        <dc-cropper-modal\n          id=\"cropperCardImage\"\n          #cropperStickers\n          [buttonLabel]=\"'agregar sticker'\"\n          [imgStorageSettings]=\"stickerStorageSettings\"\n          (onFileSelected)=\"onImageSelected($event)\"\n          (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n      </div>\n\n      <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n        @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n        <div style=\"position: relative\">\n          <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n          <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n        </div>\n        }\n      </div>\n\n      <!-- <input pInputText type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" /> -->\n\n      <div formGroupName=\"characterCard\">\n        <div formGroupName=\"data\" class=\"card-group\">\n          <h3>Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\">\u2139\uFE0F</span></h3>\n          <div class=\"form-field\">\n            <label for=\"cardName\">Name <span pTooltip=\"El nombre del personaje\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"cardName\" type=\"text\" formControlName=\"name\" />\n            <div class=\"error\" *ngIf=\"form.get('characterCard.data.name')?.errors?.['required'] && form.get('characterCard.data.name')?.touched\">\n              Name is required\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardDescription\">Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\">\u2139\uFE0F</span></label>\n            <textarea class=\"textmin\" rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardDescription\" formControlName=\"description\"></textarea>\n            <div class=\"error\" *ngIf=\"form.get('characterCard.data.description')?.errors?.['required'] && form.get('characterCard.data.description')?.touched\">\n              Description is required\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardScenario\">Scenario <span pTooltip=\"Describe the context or setting for the conversation\">\u2139\uFE0F</span></label>\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardScenario\" formControlName=\"scenario\"></textarea>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardFirstMessage\">\n              First Message\n              <span pTooltip=\"Es muy importante que la historia inicie bien, ya que es el patr\u00F3n inicial para la AI, respetar las convenciones de texto\"\n                >\u2139\uFE0F</span\n              >\n\n              <p-togglebutton\n                [formControl]=\"markdownForm.controls.seeMarkdown\"\n                [onLabel]=\"'Editar'\"\n                [offLabel]=\"'Ver Markdown Texto'\"\n                size=\"small\"\n                styleClass=\"min-w-16\"\n                (onChange)=\"checkCdr()\" />\n            </label>\n\n            @if(markdownForm.controls.seeMarkdown.value){\n            <div [innerHTML]=\"form.controls.characterCard.controls.data.controls.first_mes.value | mdToHtmlArray\"></div>\n            }@else{\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardFirstMessage\" formControlName=\"first_mes\"> </textarea>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"mes_example\">Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"mes_example\" formControlName=\"mes_example\"></textarea>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardCreatorNotes\">Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardCreatorNotes\" formControlName=\"creator_notes\"></textarea>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardSystemPrompt\">System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardSystemPrompt\" formControlName=\"system_prompt\"></textarea>\n            <div\n              class=\"error\"\n              *ngIf=\"form.get('characterCard.data.system_prompt')?.errors?.['required'] && form.get('characterCard.data.system_prompt')?.touched\">\n              System prompt is required\n            </div>\n          </div>\n\n          <div style=\"display: flex; flex-direction: column\">\n            <label for=\"cardPostHistoryInstructions\"\n              >Post-History Instructions (Opcional)\n              <span\n                pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n                >\u2139\uFE0F</span\n              ></label\n            >\n            <textarea rows=\"1\" pTextarea [autoResize]=\"true\" formControlName=\"post_history_instructions\"></textarea>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"cardAlternateGreetings\">Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\">\u2139\uFE0F</span></label>\n            <div class=\"array-field\">\n              <div\n                *ngFor=\"let greeting of form.controls.characterCard.controls.data.controls.alternate_greetings.controls; let i = index\"\n                class=\"array-item\"\n                style=\"position: relative\">\n                <textarea\n                  pTextarea\n                  rows=\"1\"\n                  [autoResize]=\"true\"\n                  [id]=\"'cardAlternateGreeting' + i\"\n                  [formControl]=\"greeting\"\n                  (input)=\"updateArrayField('alternate_greetings', i, $event)\">\n                </textarea>\n                <button pButton severity=\"danger\" class=\"remove-button\" (click)=\"removeArrayItem('alternate_greetings', i)\">&#x2716;</button>\n              </div>\n              <button pButton severity=\"info\" (click)=\"addArrayItem('alternate_greetings')\">Add Greeting</button>\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label pTooltip=\"Agrega las categorias\" for=\"cardTags\">Tags \u2139\uFE0F</label>\n            <div class=\"array-field\">\n              <div *ngFor=\"let tag of form.controls.characterCard.controls.data.controls.tags.controls; let i = index\" class=\"array-item\">\n                <input [id]=\"'cardTag' + i\" type=\"text\" [formControl]=\"tag\" (input)=\"updateArrayField('tags', i, $event)\" />\n                <button pButton severity=\"danger\" (click)=\"removeArrayItem('tags', i)\">Remove</button>\n              </div>\n              <button pButton severity=\"info\" (click)=\"addArrayItem('tags')\">Add Tag</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n\n<p-popover #textEngineDialog header=\"Text Engine Information\">\n  <div class=\"p-4\">\n    <h3>Text Engine Types</h3>\n    <ul>\n      <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n      <li\n        ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n        puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n        personaje principal</li\n      >\n      <li\n        ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo se\n        presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n      >\n    </ul>\n  </div>\n</p-popover>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n", styles: [".textmin{min-width:36vw}.main-image-card{max-width:280px;display:block;margin:0 auto;border-radius:8px}.main-banner-image-card{border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{background-color:#f8f9fa;padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{background-color:#f8f9fa;padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$2.MultiImagesStorageService }, { type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i1$4.Router }, { type: i1$4.ActivatedRoute }, { type: i1$3.DialogService }, { type: DCConversationPromptBuilderService }, { type: i6$1.ToastAlertsAbstractService, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [TOAST_ALERTS_TOKEN]
-                }] }], propDecorators: { storageSettings: [{
-                type: Input
-            }], bannerImgSettings: [{
-                type: Input
-            }], imageStorageSettings: [{
-                type: Input
-            }], onImageLoaded: [{
-                type: Output
-            }], onSave: [{
-                type: Output
-            }], onGoDetails: [{
-                type: Output
-            }], onTranslate: [{
-                type: Output
-            }] } });
+                        AccountPlatformForm
+                    ], template: "<div class=\"top-buttons\">\n  <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n  <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n  <button pButton severity=\"primary\" (click)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n</div>\n\n<div class=\"top-buttons\">\n  <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n  <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n  <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n  <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n</div>\n\n<br />\n<br />\n<form [formGroup]=\"form\" class=\"conversation-form\">\n  <div class=\"form-grid\">\n    <div class=\"left-column\">\n      <div style=\"display: flex; gap: 15px\">\n        <div class=\"form-field\">\n          <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"id\"\n            >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n            >\n          </div>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n          <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n          @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n            <div class=\"error\"> Title is required </div>\n          }\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n          <p-select\n            id=\"lang\"\n            [options]=\"languageOptions\"\n            formControlName=\"lang\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n                >\n              </label>\n\n              <p-select\n                id=\"textEngine\"\n                [options]=\"textEngineOptions\"\n                formControlName=\"textEngine\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"conversationType\">Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"conversationType\"\n                [options]=\"conversationOptions\"\n                formControlName=\"conversationType\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n              <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n            </div>\n\n            <div formGroupName=\"tts\" class=\"group\">\n              <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n              <div class=\"form-field\">\n                <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n                <p-select\n                  id=\"voice\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                [placeholder]=\"'Select Voice'\"></p-select>\n              </div>\n\n              <div class=\"form-field\">\n                <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n                <p-select\n                  id=\"secondaryVoice\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </div>\n\n              <div class=\"form-field\">\n                <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n                <p-select\n                  id=\"speed\"\n                  [options]=\"audioSpeedOptions\"\n                  formControlName=\"speed\"\n                  optionLabel=\"label\"\n                  optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n              </div>\n\n              <div class=\"form-field\">\n                <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n                <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n              </div>\n            </div>\n          </div>\n\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n                <div class=\"error\">\n                  Please enter a valid email address\n                </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n                >\n                <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n              </div>\n\n              <div class=\"form-field checkbox\">\n                <label>\n                  <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                  Public\n                </label>\n              </div>\n\n              <div class=\"form-field checkbox\">\n                <label>\n                  <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                  Published\n                </label>\n              </div>\n            </div>\n\n            <div class=\"group\">\n              <h4>Model Settings <span pTooltip=\"AI model configuration\">\u2139\uFE0F</span></h4>\n\n              <dc-provider-selector [parentForm]=\"form.controls.model\"></dc-provider-selector>\n            </div>\n\n            <div class=\"group\">\n              <h4>Gestion de cuentas</h4>\n              @if(form.controls.accounts){\n                <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n\n              }\n            </div>\n          </div>\n\n          <div class=\"right-column\">\n            <div style=\"position: relative; min-height: 60px\">\n              <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n              @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n                <dc-cropper-modal\n                  style=\"position: absolute; bottom: 10px; right: 10px\"\n                  #cropperBanner\n                  id=\"cropperBanner\"\n                  [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n                  [imgStorageSettings]=\"bannerImgSettings()\"\n                  [currentStorage]=\"conversation?.assets?.bannerImg\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n\n              }\n            </div>\n            <div style=\"position: relative\">\n              <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n              @if (!agentCardId) {\n                <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n              } @else {\n\n                <dc-cropper-modal\n                  style=\"position: absolute; bottom: 10px; left: 50%\"\n                  id=\"cropperCardImage\"\n                  #cropperCardImage\n                  [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n                  [imgStorageSettings]=\"imageStorageSettings()\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n              }\n            </div>\n\n            <div>\n              <h4>Agregar stickers</h4>\n\n              <dc-cropper-modal\n                id=\"cropperCardImage\"\n                #cropperStickers\n                [buttonLabel]=\"'agregar sticker'\"\n                [imgStorageSettings]=\"stickerStorageSettings\"\n                (onFileSelected)=\"onImageSelected($event)\"\n              (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n            </div>\n\n            <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n              @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n                <div style=\"position: relative\">\n                  <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n                  <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n                </div>\n              }\n            </div>\n\n            <!-- <input pInputText type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" /> -->\n\n            <div formGroupName=\"characterCard\">\n              <div formGroupName=\"data\" class=\"card-group\">\n                <h3>Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\">\u2139\uFE0F</span></h3>\n                <div class=\"form-field\">\n                  <label for=\"cardName\">Name <span pTooltip=\"El nombre del personaje\">\u2139\uFE0F</span></label>\n                  <input pInputText id=\"cardName\" type=\"text\" formControlName=\"name\" />\n                  @if (form.get('characterCard.data.name')?.errors?.['required'] && form.get('characterCard.data.name')?.touched) {\n                    <div class=\"error\">\n                      Name is required\n                    </div>\n                  }\n                </div>\n\n                <div class=\"form-field\">\n                  <label for=\"cardDescription\">Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\">\u2139\uFE0F</span></label>\n                  <textarea class=\"textmin\" rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardDescription\" formControlName=\"description\"></textarea>\n                  @if (form.get('characterCard.data.description')?.errors?.['required'] && form.get('characterCard.data.description')?.touched) {\n                    <div class=\"error\">\n                      Description is required\n                    </div>\n                  }\n                </div>\n\n                <div class=\"form-field\">\n                  <label for=\"cardScenario\">Scenario <span pTooltip=\"Describe the context or setting for the conversation\">\u2139\uFE0F</span></label>\n                  <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardScenario\" formControlName=\"scenario\"></textarea>\n                </div>\n\n                <div class=\"form-field\">\n                  <label for=\"cardFirstMessage\">\n                    First Message\n                    <span pTooltip=\"Es muy importante que la historia inicie bien, ya que es el patr\u00F3n inicial para la AI, respetar las convenciones de texto\"\n                      >\u2139\uFE0F</span\n                      >\n\n                      <p-togglebutton\n                        [formControl]=\"markdownForm.controls.seeMarkdown\"\n                        [onLabel]=\"'Editar'\"\n                        [offLabel]=\"'Ver Markdown Texto'\"\n                        size=\"small\"\n                        styleClass=\"min-w-16\"\n                        (onChange)=\"checkCdr()\" />\n                    </label>\n\n                    @if(markdownForm.controls.seeMarkdown.value){\n                      <div [innerHTML]=\"form.controls.characterCard.controls.data.controls.first_mes.value | mdToHtmlArray\"></div>\n                      }@else{\n                      <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardFirstMessage\" formControlName=\"first_mes\"> </textarea>\n                    }\n                  </div>\n\n                  <div class=\"form-field\">\n                    <label for=\"mes_example\">Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n                    <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"mes_example\" formControlName=\"mes_example\"></textarea>\n                  </div>\n\n                  <div class=\"form-field\">\n                    <label for=\"cardCreatorNotes\">Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n                    <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardCreatorNotes\" formControlName=\"creator_notes\"></textarea>\n                  </div>\n\n                  <div class=\"form-field\">\n                    <label for=\"cardSystemPrompt\">System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n                    <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardSystemPrompt\" formControlName=\"system_prompt\"></textarea>\n                    @if (form.get('characterCard.data.system_prompt')?.errors?.['required'] && form.get('characterCard.data.system_prompt')?.touched) {\n                      <div\n                        class=\"error\"\n                        >\n                        System prompt is required\n                      </div>\n                    }\n                  </div>\n\n                  <div style=\"display: flex; flex-direction: column\">\n                    <label for=\"cardPostHistoryInstructions\"\n                      >Post-History Instructions (Opcional)\n                      <span\n                        pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n                        >\u2139\uFE0F</span\n                        ></label\n                        >\n                        <textarea rows=\"1\" pTextarea [autoResize]=\"true\" formControlName=\"post_history_instructions\"></textarea>\n                      </div>\n\n                      <div class=\"form-field\">\n                        <label for=\"cardAlternateGreetings\">Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\">\u2139\uFE0F</span></label>\n                        <div class=\"array-field\">\n                          @for (greeting of form.controls.characterCard.controls.data.controls.alternate_greetings.controls; track greeting; let i = $index) {\n                            <div\n                              class=\"array-item\"\n                              style=\"position: relative\">\n                              <textarea\n                                pTextarea\n                                rows=\"1\"\n                                [autoResize]=\"true\"\n                                [id]=\"'cardAlternateGreeting' + i\"\n                                [formControl]=\"greeting\"\n                                (input)=\"updateArrayField('alternate_greetings', i, $event)\">\n                              </textarea>\n                              <button pButton severity=\"danger\" class=\"remove-button\" (click)=\"removeArrayItem('alternate_greetings', i)\">&#x2716;</button>\n                            </div>\n                          }\n                          <button pButton severity=\"info\" (click)=\"addArrayItem('alternate_greetings')\">Add Greeting</button>\n                        </div>\n                      </div>\n\n                      <div class=\"form-field\">\n                        <label pTooltip=\"Agrega las categorias\" for=\"cardTags\">Tags \u2139\uFE0F</label>\n                        <div class=\"array-field\">\n                          @for (tag of form.controls.characterCard.controls.data.controls.tags.controls; track tag; let i = $index) {\n                            <div class=\"array-item\">\n                              <input [id]=\"'cardTag' + i\" type=\"text\" [formControl]=\"tag\" (input)=\"updateArrayField('tags', i, $event)\" />\n                              <button pButton severity=\"danger\" (click)=\"removeArrayItem('tags', i)\">Remove</button>\n                            </div>\n                          }\n                          <button pButton severity=\"info\" (click)=\"addArrayItem('tags')\">Add Tag</button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n            <p-popover #textEngineDialog header=\"Text Engine Information\">\n              <div class=\"p-4\">\n                <h3>Text Engine Types</h3>\n                <ul>\n                  <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n                  <li\n                    ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n                    puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n                    personaje principal</li\n                    >\n                    <li\n                      ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo se\n                      presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n                      >\n                    </ul>\n                  </div>\n                </p-popover>\n\n                <div class=\"float-button\">\n                  <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n                </div>\n", styles: [".textmin{min-width:36vw}.main-image-card{max-width:280px;display:block;margin:0 auto;border-radius:8px}.main-banner-image-card{border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{background-color:#f8f9fa;padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{background-color:#f8f9fa;padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
+        }], ctorParameters: () => [] });
 
 class DCConversationCardUIComponent {
     constructor() {
@@ -3559,36 +3264,31 @@ class DCConversationCardUIComponent {
             { label: 'Delete', icon: 'pi pi-trash', title: 'delete', severity: 'danger', command: () => this.onDelete() },
             { label: 'Select', icon: 'pi pi-check', title: 'select', severity: 'success', command: () => this.onDetails() },
         ];
-        this.showOptions = true;
-        this.onCardAction = new EventEmitter();
+        this.card = input(undefined);
+        this.showOptions = input(true);
+        this.onCardAction = output();
     }
     ngOnInit() {
-        const name = this.card.characterCard.data.name;
-        const description = this.card.characterCard.data.description;
-        this.card.characterCard.data.description = description.replace(/{{char}}/g, name);
+        const name = this.card().characterCard.data.name;
+        const description = this.card().characterCard.data.description;
+        this.card().characterCard.data.description = description.replace(/{{char}}/g, name);
     }
     onDetails() {
-        this.onCardAction.emit({ event: 'details', card: this.card });
+        this.onCardAction.emit({ event: 'details', card: this.card() });
     }
     onEdit() {
-        this.onCardAction.emit({ event: 'edit', card: this.card });
+        this.onCardAction.emit({ event: 'edit', card: this.card() });
     }
     onDelete() {
-        this.onCardAction.emit({ event: 'delete', card: this.card });
+        this.onCardAction.emit({ event: 'delete', card: this.card() });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCConversationCardUIComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: "card", showOptions: "showOptions" }, outputs: { onCardAction: "onCardAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(showOptions) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <h2 class=\"title-text\">{{ card.title }}</h2>\n\n    <h5 class=\"title\">\n      <span [innerHTML]=\"card.characterCard?.data.description | truncate : 100\"></span>\n    </h5>\n\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i7.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: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$3.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationCardUIComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardAction: "onCardAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <h2 class=\"title-text\">{{ card().title }}</h2>\n\n    <h5 class=\"title\">\n      <span [innerHTML]=\"card().characterCard?.data.description | truncate : 100\"></span>\n    </h5>\n\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.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: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$6.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCConversationCardUIComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationCardUIComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-default-ui', imports: [PopoverModule, TruncatePipe, ButtonModule, SpeedDialModule, CardModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-card class=\"card-image\">\n  @if(showOptions) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <h2 class=\"title-text\">{{ card.title }}</h2>\n\n    <h5 class=\"title\">\n      <span [innerHTML]=\"card.characterCard?.data.description | truncate : 100\"></span>\n    </h5>\n\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"] }]
-        }], propDecorators: { card: [{
-                type: Input
-            }], showOptions: [{
-                type: Input
-            }], onCardAction: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'dc-agent-card-default-ui', imports: [PopoverModule, TruncatePipe, ButtonModule, SpeedDialModule, CardModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <h2 class=\"title-text\">{{ card().title }}</h2>\n\n    <h5 class=\"title\">\n      <span [innerHTML]=\"card().characterCard?.data.description | truncate : 100\"></span>\n    </h5>\n\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"] }]
+        }] });
 
 // This component contains a really avanced strategy to dinamically render Conversation Cards Details so every app can implement it with their own Style and Behavior
 // The trick is use NGFOR with ngComponentOutlet and pass input, problem is, is not possible to get Outpus events, Option one is use injector with ngComponentOutlet and pass context function to handle , but somehow it inject html and due to sanity im not able to see popups
@@ -3599,14 +3299,18 @@ const DefaultColumns = [
     { field: 'title', header: 'Title', type: 'text' },
 ];
 class AgentCardListComponent extends PaginationBase {
-    constructor(agentCardService, toastService, route, router, cdr) {
+    constructor() {
+        const route = inject(ActivatedRoute);
+        const router = inject(Router);
         super(route, router);
-        this.agentCardService = agentCardService;
-        this.toastService = toastService;
-        this.cdr = cdr;
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.toastService = inject(TOAST_ALERTS_TOKEN);
+        this.cdr = inject(ChangeDetectorRef);
         this.viewMode = 'cards';
-        this.showOptions = true;
-        this.gridLayout = true;
+        this.customCardComponent = input(undefined);
+        this.showOptions = input(true);
+        this.gridLayout = input(true);
+        this.getCustomButtons = input();
         this.agentCards = [];
         this.cardEventSubs = [];
         this.cardComponent = null;
@@ -3616,7 +3320,7 @@ class AgentCardListComponent extends PaginationBase {
         // this.buttonActions = DefaultActions;
         this.filterConfig.returnProps = { _id: 1, title: 1, assets: 1, description: 1, 'characterCard.data.description': 1, 'characterCard.data.name': 1 };
         this.loadConversationCards();
-        this.cardComponent = this.customCardComponent || DCConversationCardUIComponent;
+        this.cardComponent = this.customCardComponent() || DCConversationCardUIComponent;
     }
     subscribeDinamicInstantToEvents() {
         // Clear previous cardEventSubs
@@ -3626,9 +3330,12 @@ class AgentCardListComponent extends PaginationBase {
     subscribeToCardEvents() {
         this.outlets.forEach((outlet) => {
             const instance = outlet.componentInstance;
-            this.cardEventSubs.push(instance.onCardAction.subscribe((action) => {
-                this.onCardAction({ action: action.event, item: action.card });
-            }));
+            if (instance && instance.onCardAction) {
+                const subscription = instance.onCardAction.subscribe((action) => {
+                    this.onCardAction({ action: action.event, item: action.card });
+                });
+                this.cardEventSubs.push(subscription);
+            }
         });
     }
     clearcardEventSubs() {
@@ -3722,13 +3429,12 @@ class AgentCardListComponent extends PaginationBase {
             this.doAction(actionEvent); // handle by father.
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AgentCardListComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: TOAST_ALERTS_TOKEN }, { token: i1$4.ActivatedRoute }, { token: i1$4.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { viewMode: "viewMode", customCardComponent: "customCardComponent", showOptions: "showOptions", gridLayout: "gridLayout", getCustomButtons: "getCustomButtons" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [isAdmin]=\"true\" (onFilterAction)=\"doFilterBarAction($event)\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions\" (onAction)=\"onCardAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n  @if(!isLoading) {\n  <div [ngClass]=\"{ 'cards-container': gridLayout }\">\n    @for (card of agentCards; track card) {\n    <div style=\"position: relative\">\n      <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card, showOptions: showOptions }\">\n      </ng-container>\n    </div>\n    }\n  </div>\n  }\n</div>\n\n@if(isLoading) {\n<div>\n  <p-skeleton styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n  <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(agentCards.length === 0) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;height:100%;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i3$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "customFilters", "items"], outputs: ["onFilterAction", "onChangeSort"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["onlyView", "columns", "tableData", "actions"], outputs: ["onAction"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: false, isRequired: false, transformFunction: null }, customCardComponent: { classPropertyName: "customCardComponent", publicName: "customCardComponent", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null }, gridLayout: { classPropertyName: "gridLayout", publicName: "gridLayout", isSignal: true, isRequired: false, transformFunction: null }, getCustomButtons: { classPropertyName: "getCustomButtons", publicName: "getCustomButtons", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [isAdmin]=\"true\" (onFilterAction)=\"doFilterBarAction($event)\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions()\" (onAction)=\"onCardAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n  @if(!isLoading) {\n  <div [ngClass]=\"{ 'cards-container': gridLayout() }\">\n    @for (card of agentCards; track card) {\n    <div style=\"position: relative\">\n      <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card, showOptions: showOptions() }\">\n      </ng-container>\n    </div>\n    }\n  </div>\n  }\n</div>\n\n@if(isLoading) {\n<div>\n  <p-skeleton styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n  <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(agentCards.length === 0) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;height:100%;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "customFilters", "items"], outputs: ["onFilterAction", "onChangeSort"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["onlyView", "columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AgentCardListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentCardListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-agent-card-lists', imports: [
-                        CommonModule,
                         NgComponentOutlet,
                         PopoverModule,
                         ButtonModule,
@@ -3737,22 +3443,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         SkeletonModule,
                         SpeedDialModule,
                         QuickTableComponent,
-                    ], standalone: true, template: "<dc-filter-bar [isAdmin]=\"true\" (onFilterAction)=\"doFilterBarAction($event)\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions\" (onAction)=\"onCardAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n  @if(!isLoading) {\n  <div [ngClass]=\"{ 'cards-container': gridLayout }\">\n    @for (card of agentCards; track card) {\n    <div style=\"position: relative\">\n      <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card, showOptions: showOptions }\">\n      </ng-container>\n    </div>\n    }\n  </div>\n  }\n</div>\n\n@if(isLoading) {\n<div>\n  <p-skeleton styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n  <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(agentCards.length === 0) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;height:100%;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"] }]
-        }], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: i6$1.ToastAlertsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [TOAST_ALERTS_TOKEN]
-                }] }, { type: i1$4.ActivatedRoute }, { type: i1$4.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { viewMode: [{
-                type: Input
-            }], customCardComponent: [{
-                type: Input
-            }], showOptions: [{
-                type: Input
-            }], gridLayout: [{
-                type: Input
-            }], getCustomButtons: [{
+                        CommonModule,
+                    ], standalone: true, template: "<dc-filter-bar [isAdmin]=\"true\" (onFilterAction)=\"doFilterBarAction($event)\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions()\" (onAction)=\"onCardAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n  @if(!isLoading) {\n  <div [ngClass]=\"{ 'cards-container': gridLayout() }\">\n    @for (card of agentCards; track card) {\n    <div style=\"position: relative\">\n      <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card, showOptions: showOptions() }\">\n      </ng-container>\n    </div>\n    }\n  </div>\n  }\n</div>\n\n@if(isLoading) {\n<div>\n  <p-skeleton styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n  <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(agentCards.length === 0) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;height:100%;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { viewMode: [{
                 type: Input
             }], outlets: [{
                 type: ViewChildren,
@@ -3773,10 +3466,10 @@ class ParseCardPipe {
         const result = this.builderConversation.applyReplacements(text, parseDict);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ParseCardPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.1", ngImport: i0, type: ParseCardPipe, isStandalone: true, name: "parseCard" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ParseCardPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: ParseCardPipe, isStandalone: true, name: "parseCard" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ParseCardPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ParseCardPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'parseCard',
@@ -3785,13 +3478,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
         }] });
 
 class DcAgentCardDetailsComponent {
-    constructor(agentCardService, route, cdr, userDataExchange) {
-        this.agentCardService = agentCardService;
-        this.route = route;
-        this.cdr = cdr;
-        this.userDataExchange = userDataExchange;
+    constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.route = inject(ActivatedRoute);
+        this.cdr = inject(ChangeDetectorRef);
+        this.userDataExchange = inject(USER_DATA_EXCHANGE);
         this.agentCardId = '';
-        this.onStartConversation = new EventEmitter();
+        this.onStartConversation = output();
         this.showInfoLayer = false;
     }
     async ngOnInit() {
@@ -3817,22 +3510,14 @@ class DcAgentCardDetailsComponent {
         this.showInfoLayer = !this.showInfoLayer;
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: i1$4.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: USER_DATA_EXCHANGE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          <div class=\"scenario\" *ngIf=\"agentCard?.characterCard.data?.scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n\n<!-- <div class=\"dc-conversation-card-details\">\n  <div class=\"header\">\n    <h2>{{ agentCard?.title }}</h2>\n    <span class=\"version\">v{{ agentCard?.version }}</span>\n  </div>\n\n  <div class=\"character-card\" *ngIf=\"agentCard?.characterCard\">\n    <div class=\"character-header\">\n      <h3>{{ agentCard?.characterCard.data.name }}</h3>\n      <div class=\"tags\">\n        <span class=\"tag\" *ngFor=\"let tag of agentCard?.characterCard.data?.tags\">{{ tag }}</span>\n      </div>\n    </div>\n\n    <div class=\"image-wrapper\">\n      <div class=\"image\">\n        <img [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n        <div class=\"actions\">\n          <p-button label=\"Start Conversation\" (click)=\"startConversation()\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"description\">\n      <p>{{ agentCard?.characterCard.data?.description | parseCard : agentCard }}</p>\n    </div>\n\n    <div class=\"scenario\" *ngIf=\"agentCard?.characterCard.data?.scenario\">\n      <h4>Scenario</h4>\n      <p>{{ agentCard?.characterCard.data.scenario }}</p>\n    </div>\n\n    <div class=\"first-message\" *ngIf=\"agentCard?.characterCard.data?.first_mes\">\n      <h4>First Message</h4>\n      <p>{{ agentCard?.characterCard.data.first_mes }}</p>\n    </div>\n\n    <div class=\"alternate-greetings\" *ngIf=\"agentCard?.characterCard.data?.alternate_greetings?.length\">\n      <h4>Alternate Greetings</h4>\n      <ul>\n        <li *ngFor=\"let greeting of agentCard?.characterCard.data.alternate_greetings\">{{ greeting }}</li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"settings\">\n    <div class=\"conversation-settings\">\n      <h3>Conversation Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Type:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.conversationType }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Language:</span>\n        <span class=\"value\">{{ agentCard?.lang }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Text Engine:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.textEngine }}</span>\n      </div>\n    </div>\n\n    <div class=\"tts-settings\" *ngIf=\"agentCard?.tts\">\n      <h3>TTS Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Primary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.voice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Secondary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.secondaryVoice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Speed:</span>\n        <span class=\"value\">{{ agentCard?.tts.speed }} ({{ agentCard?.tts.speedRate }}x)</span>\n      </div>\n    </div>\n  </div>\n</div> -->\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i7.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: "ngmodule", type: CardModule }, { kind: "component", type: i3$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n            >\n            <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n            @if (agentCard?.characterCard.data?.scenario) {\n              <div class=\"scenario\">\n                <h4>Scenario</h4>\n                <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </p-card>\n  </div>\n\n  <!-- <div class=\"dc-conversation-card-details\">\n  <div class=\"header\">\n    <h2>{{ agentCard?.title }}</h2>\n    <span class=\"version\">v{{ agentCard?.version }}</span>\n  </div>\n\n  <div class=\"character-card\" *ngIf=\"agentCard?.characterCard\">\n    <div class=\"character-header\">\n      <h3>{{ agentCard?.characterCard.data.name }}</h3>\n      <div class=\"tags\">\n        <span class=\"tag\" *ngFor=\"let tag of agentCard?.characterCard.data?.tags\">{{ tag }}</span>\n      </div>\n    </div>\n\n    <div class=\"image-wrapper\">\n      <div class=\"image\">\n        <img [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n        <div class=\"actions\">\n          <p-button label=\"Start Conversation\" (click)=\"startConversation()\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"description\">\n      <p>{{ agentCard?.characterCard.data?.description | parseCard : agentCard }}</p>\n    </div>\n\n    <div class=\"scenario\" *ngIf=\"agentCard?.characterCard.data?.scenario\">\n      <h4>Scenario</h4>\n      <p>{{ agentCard?.characterCard.data.scenario }}</p>\n    </div>\n\n    <div class=\"first-message\" *ngIf=\"agentCard?.characterCard.data?.first_mes\">\n      <h4>First Message</h4>\n      <p>{{ agentCard?.characterCard.data.first_mes }}</p>\n    </div>\n\n    <div class=\"alternate-greetings\" *ngIf=\"agentCard?.characterCard.data?.alternate_greetings?.length\">\n      <h4>Alternate Greetings</h4>\n      <ul>\n        <li *ngFor=\"let greeting of agentCard?.characterCard.data.alternate_greetings\">{{ greeting }}</li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"settings\">\n    <div class=\"conversation-settings\">\n      <h3>Conversation Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Type:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.conversationType }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Language:</span>\n        <span class=\"value\">{{ agentCard?.lang }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Text Engine:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.textEngine }}</span>\n      </div>\n    </div>\n\n    <div class=\"tts-settings\" *ngIf=\"agentCard?.tts\">\n      <h3>TTS Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Primary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.voice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Secondary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.secondaryVoice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Speed:</span>\n        <span class=\"value\">{{ agentCard?.tts.speed }} ({{ agentCard?.tts.speedRate }}x)</span>\n      </div>\n    </div>\n  </div>\n</div> -->\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.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: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [CommonModule, ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          <div class=\"scenario\" *ngIf=\"agentCard?.characterCard.data?.scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n\n<!-- <div class=\"dc-conversation-card-details\">\n  <div class=\"header\">\n    <h2>{{ agentCard?.title }}</h2>\n    <span class=\"version\">v{{ agentCard?.version }}</span>\n  </div>\n\n  <div class=\"character-card\" *ngIf=\"agentCard?.characterCard\">\n    <div class=\"character-header\">\n      <h3>{{ agentCard?.characterCard.data.name }}</h3>\n      <div class=\"tags\">\n        <span class=\"tag\" *ngFor=\"let tag of agentCard?.characterCard.data?.tags\">{{ tag }}</span>\n      </div>\n    </div>\n\n    <div class=\"image-wrapper\">\n      <div class=\"image\">\n        <img [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n        <div class=\"actions\">\n          <p-button label=\"Start Conversation\" (click)=\"startConversation()\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"description\">\n      <p>{{ agentCard?.characterCard.data?.description | parseCard : agentCard }}</p>\n    </div>\n\n    <div class=\"scenario\" *ngIf=\"agentCard?.characterCard.data?.scenario\">\n      <h4>Scenario</h4>\n      <p>{{ agentCard?.characterCard.data.scenario }}</p>\n    </div>\n\n    <div class=\"first-message\" *ngIf=\"agentCard?.characterCard.data?.first_mes\">\n      <h4>First Message</h4>\n      <p>{{ agentCard?.characterCard.data.first_mes }}</p>\n    </div>\n\n    <div class=\"alternate-greetings\" *ngIf=\"agentCard?.characterCard.data?.alternate_greetings?.length\">\n      <h4>Alternate Greetings</h4>\n      <ul>\n        <li *ngFor=\"let greeting of agentCard?.characterCard.data.alternate_greetings\">{{ greeting }}</li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"settings\">\n    <div class=\"conversation-settings\">\n      <h3>Conversation Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Type:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.conversationType }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Language:</span>\n        <span class=\"value\">{{ agentCard?.lang }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Text Engine:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.textEngine }}</span>\n      </div>\n    </div>\n\n    <div class=\"tts-settings\" *ngIf=\"agentCard?.tts\">\n      <h3>TTS Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Primary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.voice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Secondary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.secondaryVoice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Speed:</span>\n        <span class=\"value\">{{ agentCard?.tts.speed }} ({{ agentCard?.tts.speedRate }}x)</span>\n      </div>\n    </div>\n  </div>\n</div> -->\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: i1$4.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: UserDataExchangeAbstractService, decorators: [{
-                    type: Inject,
-                    args: [USER_DATA_EXCHANGE]
-                }] }], propDecorators: { agentCardId: [{
+            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n            >\n            <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n            @if (agentCard?.characterCard.data?.scenario) {\n              <div class=\"scenario\">\n                <h4>Scenario</h4>\n                <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </p-card>\n  </div>\n\n  <!-- <div class=\"dc-conversation-card-details\">\n  <div class=\"header\">\n    <h2>{{ agentCard?.title }}</h2>\n    <span class=\"version\">v{{ agentCard?.version }}</span>\n  </div>\n\n  <div class=\"character-card\" *ngIf=\"agentCard?.characterCard\">\n    <div class=\"character-header\">\n      <h3>{{ agentCard?.characterCard.data.name }}</h3>\n      <div class=\"tags\">\n        <span class=\"tag\" *ngFor=\"let tag of agentCard?.characterCard.data?.tags\">{{ tag }}</span>\n      </div>\n    </div>\n\n    <div class=\"image-wrapper\">\n      <div class=\"image\">\n        <img [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n        <div class=\"actions\">\n          <p-button label=\"Start Conversation\" (click)=\"startConversation()\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"description\">\n      <p>{{ agentCard?.characterCard.data?.description | parseCard : agentCard }}</p>\n    </div>\n\n    <div class=\"scenario\" *ngIf=\"agentCard?.characterCard.data?.scenario\">\n      <h4>Scenario</h4>\n      <p>{{ agentCard?.characterCard.data.scenario }}</p>\n    </div>\n\n    <div class=\"first-message\" *ngIf=\"agentCard?.characterCard.data?.first_mes\">\n      <h4>First Message</h4>\n      <p>{{ agentCard?.characterCard.data.first_mes }}</p>\n    </div>\n\n    <div class=\"alternate-greetings\" *ngIf=\"agentCard?.characterCard.data?.alternate_greetings?.length\">\n      <h4>Alternate Greetings</h4>\n      <ul>\n        <li *ngFor=\"let greeting of agentCard?.characterCard.data.alternate_greetings\">{{ greeting }}</li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"settings\">\n    <div class=\"conversation-settings\">\n      <h3>Conversation Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Type:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.conversationType }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Language:</span>\n        <span class=\"value\">{{ agentCard?.lang }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Text Engine:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.textEngine }}</span>\n      </div>\n    </div>\n\n    <div class=\"tts-settings\" *ngIf=\"agentCard?.tts\">\n      <h3>TTS Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Primary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.voice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Secondary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.secondaryVoice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Speed:</span>\n        <span class=\"value\">{{ agentCard?.tts.speed }} ({{ agentCard?.tts.speedRate }}x)</span>\n      </div>\n    </div>\n  </div>\n</div> -->\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { agentCardId: [{
                 type: Input
-            }], onStartConversation: [{
-                type: Output
             }] } });
 
 /*
@@ -3844,5 +3529,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AgentCardListComponent, AgentCardsAbstractService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, ChatContainerComponent, ChatMessage, ChatMultiMessage, ChatRole, ChatUserSettings, ConversationDTO, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, EAccountsPlatform, LangCodeDescriptionEs, MessageAudio, ProviderSelectorComponent, TextEngineOptions, TextEngines, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, characterCardStringDataDefinition, defaultconvUserSettings, extractJsonFromResponse, provideChatAIService, provideUserDataExchange };
+export { AgentCardListComponent, AgentCardsAbstractService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, ChatMessage, ChatMultiMessage, ChatRole, ChatUserSettings, ConversationDTO, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, DefaultEvaluatorAgentCard, EAccountsPlatform, LangCodeDescriptionEs, MessageAudio, ProviderSelectorComponent, StandaloneAudioTextSyncComponent, TextEngineOptions, TextEngines, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, matchTranscription, provideChatAIService, provideUserDataExchange };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map