@dataclouder/ngx-agent-cards 0.0.87 → 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$4 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 i1$3 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$1 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 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$2 from 'primeng/dropdown';
+import * as i3$2 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import { ChipModule } from 'primeng/chip';
-import * as i1$5 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,954 +929,1229 @@ 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');
+        }
+        // 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();
         }
-        // Create cleanup subject
-        const cleanup$ = new Subject();
-        this.cleanup$Map.set(messageId, cleanup$);
-        // Store the active audio element
-        this.activeAudioMap.set(messageId, audioElement);
-        // Get the signal and subject for this message
-        const messageSignal = this.highlightedWordsSignalMap.get(messageId);
-        const messageSubject = this.highlightedWords$Map.get(messageId);
-        // Initialize the highlighted words state
-        const initialWords = transcriptionTimestamps.map((word, index) => ({
-            word: word.word,
-            index,
-            isHighlighted: false,
-        }));
-        // Update both signal and observable
-        messageSignal.set(initialWords);
-        messageSubject.next(initialWords);
-        // Listen to timeupdate events
-        fromEvent(audioElement, 'timeupdate')
-            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(cleanup$), map(() => audioElement.currentTime))
-            .subscribe((currentTime) => {
-            const updatedWords = transcriptionTimestamps.map((word, index) => {
-                const isHighlighted = currentTime >= word.start - 0.15 && currentTime < word.end + 0.15;
-                return {
-                    word: word.word,
-                    index,
-                    isHighlighted,
-                };
-            });
-            // Update both signal and observable for this message
-            messageSignal.set(updatedWords);
-            messageSubject.next(updatedWords);
-        });
-        // Listen to ended event for cleanup
-        fromEvent(audioElement, 'ended')
-            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(cleanup$))
-            .subscribe(() => {
-            // Reset highlighting when audio ends
-            const resetWords = initialWords.map((word) => ({
-                ...word,
-                isHighlighted: false,
-            }));
-            messageSignal.set(resetWords);
-            messageSubject.next(resetWords);
-        });
     }
-    /**
-     * Stops the sync for a specific message and cleans up resources
-     * @param messageId The ID of the message to stop syncing
-     */
-    stopSync(messageId) {
-        if (this.activeAudioMap.has(messageId)) {
-            // Get the cleanup subject for this message
-            const cleanup$ = this.cleanup$Map.get(messageId);
-            if (cleanup$) {
-                cleanup$.next();
-                cleanup$.complete();
-                this.cleanup$Map.delete(messageId);
-            }
-            this.activeAudioMap.delete(messageId);
-            // Reset state for this message
-            const messageSignal = this.highlightedWordsSignalMap.get(messageId);
-            const messageSubject = this.highlightedWords$Map.get(messageId);
-            if (messageSignal) {
-                messageSignal.set([]);
-            }
-            if (messageSubject) {
-                messageSubject.next([]);
+    // 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();
         }
-    }
-    /**
-     * Stops all syncs and cleans up all resources
-     */
-    stopAllSyncs() {
-        // Get all message IDs and stop each sync
-        for (const messageId of this.activeAudioMap.keys()) {
-            this.stopSync(messageId);
+        finally {
+            this.isThinkingSignal.set(false);
         }
-        // Clear all maps
-        this.highlightedWordsSignalMap.clear();
-        this.highlightedWords$Map.clear();
-        this.cleanup$Map.clear();
-        this.activeAudioMap.clear();
     }
-    /**
-     * Returns the highlighted words signal for a specific message
-     * @param messageId The ID of the message
-     */
-    getHighlightedWordsSignal(messageId) {
-        // Create a new signal for this message if it doesn't exist
-        if (!this.highlightedWordsSignalMap.has(messageId)) {
-            this.highlightedWordsSignalMap.set(messageId, signal([]));
+    // 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.highlightedWordsSignalMap.get(messageId);
+        return this.messageProcessingService.processMessage(message, conversationSettings, mutate);
     }
-    /**
-     * Returns the highlighted words observable for a specific message
-     * @param messageId The ID of the message
-     */
-    getHighlightedWords$(messageId) {
-        // Create a new subject for this message if it doesn't exist
-        if (!this.highlightedWords$Map.has(messageId)) {
-            this.highlightedWords$Map.set(messageId, new BehaviorSubject([]));
+    // Send current conversation to AI
+    async sendCurrentConversation() {
+        if (this.isDestroyedSignal()) {
+            return;
         }
-        return this.highlightedWords$Map.get(messageId).asObservable();
+        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);
     }
-    /**
-     * Checks if a word at a specific index is currently highlighted for a specific message
-     * @param messageId The ID of the message
-     * @param index The index of the word to check
-     */
-    isWordHighlighted(messageId, index) {
-        const messageSignal = this.getHighlightedWordsSignal(messageId);
-        return messageSignal().some((word) => word.index === index && word.isHighlighted);
+    // Helper to get audio playback setting
+    getAudioPlaybackSetting() {
+        const agentCard = this.agentCardSignal();
+        return agentCard?.conversationSettings?.repeatRecording || false;
     }
-    /**
-     * Returns an observable that emits true when a word at a specific index is highlighted for a specific message
-     * @param messageId The ID of the message
-     * @param index The index of the word to observe
-     */
-    isWordHighlighted$(messageId, index) {
-        return this.getHighlightedWords$(messageId).pipe(map((words) => words.some((word) => word.index === index && word.isHighlighted)));
+    // 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.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: 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.1.1", ngImport: i0, type: AudioTextSyncService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, 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
-        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();
-        });
-    }
-    /**
-     * Check if the message has transcription timestamps
-     */
-    get hasTranscription() {
-        const hasTranscription = !!this.message.transcriptionTimestamps;
-        console.log('hasTranscription check:', {
-            hasTranscription,
-            transcriptionTimestamps: this.message.transcriptionTimestamps,
-            messageId: this.messageId,
-        });
-        return hasTranscription;
+function extractJsonFromResponse(content) {
+    const jsonMatch = content.match(/\{[\s\S]*?\}/); // Match everything between first { and }
+    if (!jsonMatch)
+        return null;
+    try {
+        return JSON.parse(jsonMatch[0]);
     }
-    /**
-     * Get the message text content
-     */
-    get messageText() {
-        return this.message.content || this.message.text;
+    catch (error) {
+        console.error('Error parsing JSON:', error);
+        return null;
     }
-    /**
-     * Track function for ngFor to improve performance
-     * @param index The current item's index
-     * @param item The current item
-     */
-    trackByIndex(index, item) {
-        return index;
+}
+
+class EvaluationService {
+    constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.scoreSignal = signal(10);
+        this.evaluationResultSignal = signal(null);
     }
-    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);
-            });
-        });
-        // 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,
-            }));
-            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);
-        }
+    // Get score as a signal
+    getScore() {
+        return this.scoreSignal;
     }
-    /**
-     * Generate a unique ID for this message instance
-     * Uses message content/text and a timestamp to ensure uniqueness
-     */
-    generateMessageId() {
-        const messageContent = this.message.content || this.message.text || '';
-        const timestamp = new Date().getTime();
-        return `msg_${messageContent.substring(0, 20).replace(/\s+/g, '_')}_${timestamp}`;
+    // Get evaluation result as a signal
+    getEvaluationResult() {
+        return this.evaluationResultSignal;
     }
-    /**
-     * Emit event to play the audio message
-     */
-    onPlayMessage() {
-        this.playAudio.emit(this.message);
+    // 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.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 }); }
+    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.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
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
-class MessageContentComponent {
+class ChatFooterComponent {
     constructor() {
-        this.isLoading = false;
-        this.playAudio = new EventEmitter();
-    }
-    get hasTranscription() {
-        return !!this.message.transcriptionTimestamps;
-    }
-    get messageText() {
-        return this.message.content || this.message.text;
+        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();
     }
-    get messageTag() {
-        return this.message.tag || null;
+    /**
+     * Sets the input text in the textarea
+     * @param text The text to set
+     */
+    setInputText(text) {
+        this.chatInputControl.setValue(text);
+        this.textInputChanged.emit(text);
     }
-    onPlayMessage() {
-        this.playAudio.emit(this.message);
+    /**
+     * Handles the mic finished event
+     * @param eventBlob The blob event from the mic component
+     */
+    micFinished(eventBlob) {
+        this.micFinishedEvent.emit(eventBlob);
     }
     /**
-     * Track function for ngFor to improve performance
-     * @param index The current item's index
-     * @param item The current item
+     * Sends the user message
      */
-    trackByIndex(index, item) {
-        return index;
+    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();
     }
-    ngOnInit() {
-        console.log(this.message);
+    /**
+     * 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.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: 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.1.1", ngImport: i0, type: MessageContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatFooterComponent, 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-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 MultiMessageContentComponent {
+class AudioTextSyncService {
     constructor() {
-        this.isLoading = false;
-        this.playAudio = new EventEmitter();
+        // 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();
+        });
     }
     /**
-     * Checks if a message has transcription timestamps
-     * @param message The message to check
+     * 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
      */
-    hasTranscription(message) {
-        // debugger;
-        return !!message.transcriptionTimestamps;
+    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
+        this.activeAudioMap.set(messageId, audioElement);
+        // Get the signal and subject for this message
+        const messageSignal = this.highlightedWordsSignalMap.get(messageId);
+        const messageSubject = this.highlightedWords$Map.get(messageId);
+        // Initialize the highlighted words state
+        const initialWords = transcriptionTimestamps.map((word, index) => ({
+            word: word.word,
+            index,
+            isHighlighted: false,
+        }));
+        // Update both signal and observable
+        messageSignal.set(initialWords);
+        messageSubject.next(initialWords);
+        // Listen to timeupdate events
+        fromEvent(audioElement, 'timeupdate')
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(cleanup$), map(() => audioElement.currentTime))
+            .subscribe((currentTime) => {
+            const updatedWords = transcriptionTimestamps.map((word, index) => {
+                const isHighlighted = currentTime >= word.start - 0.15 && currentTime < word.end + 0.15;
+                return {
+                    word: word.word,
+                    index,
+                    isHighlighted,
+                };
+            });
+            // Update both signal and observable for this message
+            messageSignal.set(updatedWords);
+            messageSubject.next(updatedWords);
+        });
+        // Listen to ended event for cleanup
+        fromEvent(audioElement, 'ended')
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(cleanup$))
+            .subscribe(() => {
+            // Reset highlighting when audio ends
+            const resetWords = initialWords.map((word) => ({
+                ...word,
+                isHighlighted: false,
+            }));
+            messageSignal.set(resetWords);
+            messageSubject.next(resetWords);
+        });
     }
     /**
-     * Emits the playAudio event with the selected message
-     * @param message The message to play
+     * Stops the sync for a specific message and cleans up resources
+     * @param messageId The ID of the message to stop syncing
      */
-    onPlayMessage(message) {
-        this.playAudio.emit(message);
-    }
-    ngOnInit() {
-        console.log(this.messages);
+    stopSync(messageId) {
+        if (this.activeAudioMap.has(messageId)) {
+            // Get the cleanup subject for this message
+            const cleanup$ = this.cleanup$Map.get(messageId);
+            if (cleanup$) {
+                cleanup$.next();
+                cleanup$.complete();
+                this.cleanup$Map.delete(messageId);
+            }
+            this.activeAudioMap.delete(messageId);
+            // Reset state for this message
+            const messageSignal = this.highlightedWordsSignalMap.get(messageId);
+            const messageSubject = this.highlightedWords$Map.get(messageId);
+            if (messageSignal) {
+                messageSignal.set([]);
+            }
+            if (messageSubject) {
+                messageSubject.next([]);
+            }
+        }
     }
-    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 }); }
-}
-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
-            }] } });
-
-function matchTranscription(originalText, transcription) {
-    const result = [];
-    const transcriptionMap = new Map();
-    // Create a map of lowercase words to an array of their corresponding objects in transcription
-    for (const obj of transcription) {
-        const lowercaseWord = obj.word.trim().toLowerCase();
-        if (transcriptionMap.has(lowercaseWord)) {
-            transcriptionMap.get(lowercaseWord).push(obj);
+    /**
+     * Stops all syncs and cleans up all resources
+     */
+    stopAllSyncs() {
+        // Get all message IDs and stop each sync
+        for (const messageId of this.activeAudioMap.keys()) {
+            this.stopSync(messageId);
         }
-        else {
-            transcriptionMap.set(lowercaseWord, [obj]);
+        // Clear all maps
+        this.highlightedWordsSignalMap.clear();
+        this.highlightedWords$Map.clear();
+        this.cleanup$Map.clear();
+        this.activeAudioMap.clear();
+    }
+    /**
+     * Returns the highlighted words signal for a specific message
+     * @param messageId The ID of the message
+     */
+    getHighlightedWordsSignal(messageId) {
+        // Create a new signal for this message if it doesn't exist
+        if (!this.highlightedWordsSignalMap.has(messageId)) {
+            this.highlightedWordsSignalMap.set(messageId, signal([]));
         }
+        return this.highlightedWordsSignalMap.get(messageId);
     }
-    // Split the original text into an array of words
-    const words = originalText.split(' ');
-    let currentTime = 0;
-    for (const word of words) {
-        const lowercaseWord = word.toLowerCase();
-        const matchedObjs = transcriptionMap.get(lowercaseWord);
-        if (matchedObjs && matchedObjs.length > 0) {
-            const matchedObj = matchedObjs.shift();
-            result.push({
-                word: word,
-                start: Number(matchedObj.start.toFixed(3)),
-                end: Number(matchedObj.end.toFixed(3)),
-            });
-            currentTime = matchedObj.end;
-        }
-        else {
-            result.push({
-                word: word,
-                start: Number(currentTime.toFixed(3)),
-                end: Number(currentTime.toFixed(3)),
-            });
+    /**
+     * Returns the highlighted words observable for a specific message
+     * @param messageId The ID of the message
+     */
+    getHighlightedWords$(messageId) {
+        // Create a new subject for this message if it doesn't exist
+        if (!this.highlightedWords$Map.has(messageId)) {
+            this.highlightedWords$Map.set(messageId, new BehaviorSubject([]));
         }
+        return this.highlightedWords$Map.get(messageId).asObservable();
     }
-    return result;
-}
-function extractAudioAndTranscription(message, audio) {
-    message.audioUrl = audio.blobUrl;
-    message.transcription = audio.transcription;
-    if (message.transcription) {
-        message.transcriptionTimestamps = matchTranscription(message.text || message.content, message.transcription.words);
+    /**
+     * Checks if a word at a specific index is currently highlighted for a specific message
+     * @param messageId The ID of the message
+     * @param index The index of the word to check
+     */
+    isWordHighlighted(messageId, index) {
+        const messageSignal = this.getHighlightedWordsSignal(messageId);
+        return messageSignal().some((word) => word.index === index && word.isHighlighted);
     }
+    /**
+     * Returns an observable that emits true when a word at a specific index is highlighted for a specific message
+     * @param messageId The ID of the message
+     * @param index The index of the word to observe
+     */
+    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.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.2.4", ngImport: i0, type: AudioTextSyncService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
-class ChatMessageComponent {
-    constructor(audioService, agentCardService, audioTextSyncService) {
-        this.audioService = audioService;
-        this.agentCardService = agentCardService;
-        this.audioTextSyncService = audioTextSyncService;
-        this.destroyRef = inject(DestroyRef);
-        this.conversationChatSettings = signal(null);
-        this.isLoading = signal(false);
+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');
     }
-    async ngOnInit() {
-        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);
-            }
+    ngOnChanges(changes) {
+        if (changes['name']) {
+            const svg = ICONS[this.name()] || '';
+            this.sanitizedIcon = this.sanitizer.bypassSecurityTrustHtml(svg);
         }
-        else if (settings$?.synthVoice) {
-            if (this.chatMessage.multiMessages) {
-                this.generateAndPlayAllAudios(this.chatMessage.multiMessages);
+    }
+    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 {
-                this.generateAndPlayAudio(this.chatMessage);
+                // Handle case where message becomes undefined (cleanup?)
+                this.cleanupAudio();
+                this.highlightedWords.set([]);
             }
-        }
-    }
-    async generateAndPlayAudio(message, overwriteText = null) {
-        this.isLoading.set(true);
-        try {
-            const text = overwriteText || message.content;
-            const ttsObject = this.buildObjectTTSRequest({ ...this.chatMessage, text });
-            if (message.ssml) {
-                ttsObject.ssml = message.ssml;
-            }
-            const speechAudio = await this.agentCardService.getTextAudioFile(ttsObject);
-            extractAudioAndTranscription(message, speechAudio);
-            this.playMessage(message);
-        }
-        finally {
-            this.isLoading.set(false);
-        }
-    }
-    playMessage(message) {
-        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,
+            // 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(() => {
+            this.highlightedWords();
+            this.cdr.markForCheck(); // Keep if template uses non-signal bindings for highlighted words
         });
-        if (message.transcriptionTimestamps) {
-            // Generate a unique ID for this message
-            const messageId = this.generateMessageId(message);
-            console.log('Syncing audio with text:', {
-                messageId,
-                transcriptionTimestamps: message.transcriptionTimestamps,
-                wordCount: message.transcriptionTimestamps.length,
-            });
-            // 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);
-        }
-        return audioElement;
     }
     /**
-     * Generate a unique ID for a message
-     * Uses message content/text and a timestamp to ensure uniqueness
+     * Track function for ngFor to improve performance
      */
-    generateMessageId(message) {
-        const messageContent = message.content || message.text || '';
-        // Use a safe approach to get an ID-like value since 'id' isn't guaranteed on these types
-        const messageId = message._id || message.id || '';
-        const timestamp = new Date().getTime();
-        return `msg_${messageId}_${messageContent.substring(0, 10).replace(/\s+/g, '_')}_${timestamp}`;
-    }
-    // This method is no longer needed as we're using the AudioTextSyncService
-    // It's kept here as a reference but can be removed
-    /*
-    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();
+    trackByIndex(index, item) {
+        return index;
     }
-    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;
-                });
+    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
             }
         }
-    }
-    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);
+            // No transcription, clear words and potentially stop sync listeners
+            this.highlightedWords.set([]);
+            this.destroy$.next(); // Signal existing listeners to stop
         }
-        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
-            };
-        });
+    /**
+     * Initialize the audio element and set up event listeners
+     */
+    initializeAudio(audioUrl) {
+        // Clean up any existing audio element and listeners first
+        this.cleanupAudio();
+        this.audioElement = new Audio(audioUrl); // Use passed URL
     }
-    // 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}>`);
+    /**
+     * Initialize highlighted words from transcription timestamps
+     */
+    initializeHighlightedWords(timestamps) {
+        const initialWords = timestamps.map((word, index) => ({
+            word: word.word,
+            index,
+            isHighlighted: false,
+        }));
+        this.highlightedWords.set(initialWords);
     }
-    // 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)];
+    /**
+     * Set up audio synchronization with text
+     */
+    setupAudioSync(timestamps) {
+        // Accept timestamps
+        if (!this.audioElement) {
+            // Guard against missing audio element
+            return;
         }
-        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)];
+        // 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);
+        });
+        // 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(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);
+            }
+        });
+    }
+    /**
+     * Clean up audio element and event listeners
+     */
+    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);
         }
-        else {
-            const voice = VoiceTTSOptions.find((voice) => voice.id === voice_value);
-            if (voice) {
-                return voice.id;
+    }
+    /**
+     * Play or pause the audio
+     */
+    onPlayMessage() {
+        const currentMsg = this.message(); // Read signal
+        if (this.audioElement) {
+            if (this.audioElement.paused) {
+                this.startAudioPlayback();
             }
             else {
-                console.error('Voice not found getting something random', voice_value);
-                return VoiceTTSOptions.find((voice) => voice.lang.includes(targetLang))?.id || '';
+                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
+        }
+    }
+    /**
+     * Start audio playback and handle any setup needed
+     */
+    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: 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' }); }
+    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: MessageProcessingService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StandaloneAudioTextSyncComponent, decorators: [{
+            type: Component,
+            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 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);
+class MultiMessageContentComponent {
+    constructor() {
+        this.messages = input.required();
+        this.isLoading = input(false);
+        this.playAudio = output();
+        // Track current playing message index
+        this.currentPlayingIndex = -1;
     }
-    // Get messages as a signal
-    getMessages() {
-        return this.messagesSignal;
+    /**
+     * Checks if a message has transcription timestamps
+     * @param message The message to check
+     */
+    hasTranscription(message) {
+        //
+        return !!message.transcriptionTimestamps;
     }
-    // Get thinking state as a signal
-    isThinking() {
-        return this.isThinkingSignal;
+    /**
+     * 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);
     }
-    // Get conversation settings as a signal
-    getConversationSettings() {
-        return this.conversationSettingsSignal;
+    /**
+     * 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;
+        }
     }
-    // Get agent card as a signal
-    getAgentCard() {
-        return this.agentCardSignal;
+    /**
+     * 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;
+        }
     }
-    // Set destroyed state
-    setDestroyed(value) {
-        this.isDestroyedSignal.set(value);
+    ngOnInit() {
+        console.log(this.messages());
     }
-    // Initialize conversation
-    async initConversation(agentCard, conversationBuilder, parseDict) {
-        if (!agentCard?.conversationSettings) {
-            throw new Error('Conversation settings are required');
+    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.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 = [];
+    const transcriptionMap = new Map();
+    // Create a map of lowercase words to an array of their corresponding objects in transcription
+    for (const obj of transcription) {
+        const lowercaseWord = obj.word.trim().toLowerCase();
+        if (transcriptionMap.has(lowercaseWord)) {
+            transcriptionMap.get(lowercaseWord).push(obj);
         }
-        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');
+        else {
+            transcriptionMap.set(lowercaseWord, [obj]);
         }
-        // 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);
+    }
+    // Split the original text into an array of words
+    const words = originalText.split(' ');
+    let currentTime = 0;
+    for (const word of words) {
+        const lowercaseWord = word.toLowerCase();
+        const matchedObjs = transcriptionMap.get(lowercaseWord);
+        if (matchedObjs && matchedObjs.length > 0) {
+            const matchedObj = matchedObjs.shift();
+            result.push({
+                word: word,
+                start: Number(matchedObj.start.toFixed(3)),
+                end: Number(matchedObj.end.toFixed(3)),
+            });
+            currentTime = matchedObj.end;
         }
-        else if (agentCard.conversationSettings.autoStart) {
-            // Auto-start conversation if configured
-            await this.sendCurrentConversation();
+        else {
+            result.push({
+                word: word,
+                start: Number(currentTime.toFixed(3)),
+                end: Number(currentTime.toFixed(3)),
+            });
         }
     }
-    // Send user message
-    async sendUserMessage(message) {
-        if (this.isThinkingSignal()) {
-            return;
-        }
-        // Add message to conversation
-        this.addMessage(message);
-        // Set thinking state
-        this.isThinkingSignal.set(true);
+    return result;
+}
+function extractAudioAndTranscription(message, audio) {
+    message.audioUrl = audio.blobUrl;
+    message.transcription = audio.transcription;
+    if (message.transcription) {
+        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() {
+        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);
+        // No need for effect here as it's now a field initializer
+    }
+    async generateAndPlayAudio(message, overwriteText = null) {
+        // this.isLoading.set(true);
+        this.audioMessage.set({ ...message, isLoading: 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();
-                    }
-                });
+            const text = overwriteText || message.content;
+            const ttsObject = buildObjectTTSRequest({ ...message, text }, this.conversationChatSettings());
+            if (message.ssml) {
+                ttsObject.ssml = message.ssml;
             }
-            // Send to AI service
-            await this.sendCurrentConversation();
+            const speechAudio = await this.agentCardService.getTextAudioFile(ttsObject);
+            extractAudioAndTranscription(message, speechAudio);
+            this.audioMessage.set({ ...message, isLoading: false, shouldPlayAudio: true });
+            // this.playMessage(message);
         }
         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');
+            this.isLoading.set(false);
         }
-        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 },
-            ];
+    playMessage(message) {
+        debugger;
+        if (!message.audioUrl) {
+            return null;
         }
-        // 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');
+        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,
+        // });
+        if (message.transcriptionTimestamps) {
+            // Generate a unique ID for this message
+            const messageId = this.generateMessageId(message);
+            console.log('Syncing audio with text:', {
+                messageId,
+                transcriptionTimestamps: message.transcriptionTimestamps,
+                wordCount: message.transcriptionTimestamps.length,
+            });
+            // 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);
         }
-        // Process response
-        const newMessage = this.processAssistantMessage(response);
-        // Add to messages
-        this.addMessage(newMessage);
-        this.isThinkingSignal.set(false);
+        return audioElement;
     }
-    // Helper to get audio playback setting
-    getAudioPlaybackSetting() {
-        const agentCard = this.agentCardSignal();
-        return agentCard?.conversationSettings?.repeatRecording || false;
+    /**
+     * Generate a unique ID for a message
+     * Uses message content/text and a timestamp to ensure uniqueness
+     */
+    generateMessageId(message) {
+        const messageContent = message.content || message.text || '';
+        // Use a safe approach to get an ID-like value since 'id' isn't guaranteed on these types
+        const messageId = message._id || message.id || '';
+        const timestamp = new Date().getTime();
+        return `msg_${messageId}_${messageContent.substring(0, 10).replace(/\s+/g, '_')}_${timestamp}`;
     }
-    // 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);
+    // This method is no longer needed as we're using the AudioTextSyncService
+    // It's kept here as a reference but can be removed
+    /*
+    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 = 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;
+            }
+        };
+        // 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 = 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: i1$3.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.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: i1$3.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;
@@ -2118,13 +2312,12 @@ class DCConversationUserChatSettingsComponent {
             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$4.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$1.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.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"] }] }); }
+    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: DCConversationUserChatSettingsComponent, decorators: [{
+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: [
-                        CommonModule,
                         ReactiveFormsModule,
                         CheckboxModule,
                         SliderModule,
@@ -2136,16 +2329,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         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$4.DynamicDialogRef }, { type: i1.FormBuilder }, { type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }], propDecorators: { showFeature: [{
-                type: Input
-            }], onSettingsChange: [{
-                type: Output
-            }], tooltipRef: [{
+                        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']
             }] } });
@@ -2163,104 +2349,16 @@ const DefaultEvaluatorAgentCard = {
     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;
-        });
-    }
-    // Reset score
-    resetScore() {
-        this.scoreSignal.set(10);
-    }
-    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' }); }
-}
-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]
-                }] }] });
-
 class DCChatComponent {
-    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();
+    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 DCChatComponent {
         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 DCChatComponent {
             };
             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,35 +2453,16 @@ class DCChatComponent {
         }
         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: DCChatComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: TOAST_ALERTS_TOKEN }, { token: DCConversationPromptBuilderService }, { token: i1$4.DialogService }, { token: ConversationService }, { token: EvaluationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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: "<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 }); }
+    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, 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$4.DialogService }, { type: ConversationService }, { type: EvaluationService }], 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) {
@@ -2529,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$4.DynamicDialogConfig }, { token: i1$4.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$4.DynamicDialogConfig }, { type: i1$4.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,
@@ -2570,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">
@@ -2588,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">
@@ -2609,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***)
@@ -2630,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',
@@ -2647,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',
@@ -2663,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',
@@ -2675,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
@@ -2734,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$5.ActivatedRoute }, { token: i1.FormBuilder }, { token: i1$5.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$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: 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$5.ActivatedRoute }, { type: i1.FormBuilder }, { type: i1$5.Router }, { type: i6$1.ToastAlertsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [TOAST_ALERTS_TOKEN]
-                }] }], propDecorators: { formArray: [{
+        }], ctorParameters: () => [], propDecorators: { formArray: [{
                 type: Input
             }] } });
 
@@ -2756,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;
@@ -2775,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({
@@ -2831,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 });
@@ -2846,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) {
@@ -3164,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$5.Router }, { token: i1$5.ActivatedRoute }, { token: i1$4.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$1.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,
@@ -3189,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$5.Router }, { type: i1$5.ActivatedRoute }, { type: i1$4.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() {
@@ -3222,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
@@ -3262,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;
@@ -3279,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
@@ -3289,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() {
@@ -3385,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$5.ActivatedRoute }, { token: i1$5.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: i1$3.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,
@@ -3400,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$5.ActivatedRoute }, { type: i1$5.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,
@@ -3436,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',
@@ -3448,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() {
@@ -3480,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$5.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$5.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
             }] } });
 
 /*
@@ -3507,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, ChatMessage, ChatMultiMessage, ChatRole, ChatUserSettings, ConversationDTO, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, DefaultEvaluatorAgentCard, 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