@dataclouder/ngx-agent-cards 0.0.87 → 0.0.89

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, Pipe, input, output, Input, Component, signal, computed, ChangeDetectorRef, DestroyRef, effect, ChangeDetectionStrategy, 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 i1$3 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 { AudioSpeed as AudioSpeed$1, TOAST_ALERTS_TOKEN, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { BehaviorSubject, Subject, fromEvent, filter } from 'rxjs';
+import { 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 * 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$4 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$4 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i2$3 from 'primeng/speeddial';
+import * as i2$5 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
 
 const characterCardStringDataDefinition = `
@@ -87,8 +83,6 @@ class WordTimestamps {
 }
 class MessageAudio {
 }
-class ChatMultiMessage extends MessageAudio {
-}
 var ChatRole;
 (function (ChatRole) {
     ChatRole["System"] = "system";
@@ -512,10 +506,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 +529,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 +672,76 @@ 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]
-                }] }] });
+        }] });
+
+/**
+ * SafeJsonPipe - A pipe that safely stringifies objects with circular references
+ * This pipe handles circular references and DOM objects that can't be serialized
+ */
+class SafeJsonPipe {
+    transform(value) {
+        // Create a new object with only serializable properties
+        return this.stringifySafely(value);
+    }
+    /**
+     * Safely stringify an object, handling circular references
+     */
+    stringifySafely(obj) {
+        const seen = new WeakSet();
+        return JSON.stringify(obj, (key, value) => {
+            // Skip properties that start with underscore (often internal properties)
+            if (key.startsWith('_')) {
+                return undefined;
+            }
+            // Handle DOM elements and other non-serializable objects
+            if (value instanceof HTMLElement || value instanceof Node) {
+                return '[DOM Element]';
+            }
+            // Handle audio elements specifically
+            if (key === 'audioHtml' || key === 'audioElement') {
+                return '[Audio Element]';
+            }
+            // Handle functions
+            if (typeof value === 'function') {
+                return '[Function]';
+            }
+            // Handle circular references
+            if (typeof value === 'object' && value !== null) {
+                if (seen.has(value)) {
+                    return '[Circular Reference]';
+                }
+                seen.add(value);
+            }
+            return value;
+        }, 2);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SafeJsonPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: SafeJsonPipe, isStandalone: true, name: "safeJson" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SafeJsonPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeJson',
+                    standalone: true
+                }]
+        }] });
 
 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 +766,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,451 +979,104 @@ 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';
-    }
-    ngOnChanges(changes) {
-        if (changes['name']) {
-            const svg = ICONS[this.name] || '';
-            this.sanitizedIcon = this.sanitizer.bypassSecurityTrustHtml(svg);
+class MessageProcessingService {
+    constructor() { }
+    // Process message for display
+    processMessage(message, conversationSettings) {
+        const defaultVoice = this.getVoice(conversationSettings.voice);
+        let processedMessage;
+        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>';
         }
+        console.log(processedMessage);
+        return { ...message, ...processedMessage };
     }
-    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"] }); }
-}
-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
-            }] } });
-
-class AudioTextSyncService {
-    constructor() {
-        // Maps to store message-specific signals and observables
-        this.highlightedWordsSignalMap = new Map();
-        this.highlightedWords$Map = new Map();
-        // Maps for cleanup and active audio elements
-        this.cleanup$Map = new Map();
-        this.activeAudioMap = new Map();
-        this.destroyRef = inject(DestroyRef);
-        // Ensure cleanup when service is destroyed
-        this.destroyRef.onDestroy(() => {
-            this.stopAllSyncs();
+    // 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,
+            };
         });
     }
-    /**
-     * Synchronizes audio playback with text transcription
-     * @param audioElement The audio element to sync with
-     * @param transcriptionTimestamps Array of word timestamps
-     * @param messageId Unique identifier for the message
-     */
-    syncAudioWithText(audioElement, transcriptionTimestamps, messageId) {
-        // Stop any existing sync for this message
-        this.stopSync(messageId);
-        // Create new signal and subject for this message if they don't exist
-        if (!this.highlightedWordsSignalMap.has(messageId)) {
-            this.highlightedWordsSignalMap.set(messageId, signal([]));
-        }
-        if (!this.highlightedWords$Map.has(messageId)) {
-            this.highlightedWords$Map.set(messageId, new BehaviorSubject([]));
-        }
-        // Create cleanup subject
-        const cleanup$ = new Subject();
-        this.cleanup$Map.set(messageId, cleanup$);
-        // Store the active audio element
-        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);
-        });
+    // 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}>`);
     }
-    /**
-     * 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([]);
-            }
+    // 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)];
         }
-    }
-    /**
-     * 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);
+        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)];
         }
-        // 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([]));
+        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)];
         }
-        return this.highlightedWordsSignalMap.get(messageId);
-    }
-    /**
-     * 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([]));
+        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 || '';
+            }
         }
-        return this.highlightedWords$Map.get(messageId).asObservable();
-    }
-    /**
-     * 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.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: 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: AudioTextSyncService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageProcessingService, 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;
-    }
-    /**
-     * Get the message text content
-     */
-    get messageText() {
-        return this.message.content || this.message.text;
-    }
-    /**
-     * Track function for ngFor to improve performance
-     * @param index The current item's index
-     * @param item The current item
-     */
-    trackByIndex(index, item) {
-        return index;
-    }
-    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);
-        }
-    }
-    /**
-     * 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}`;
-    }
-    /**
-     * Emit event to play the audio message
-     */
-    onPlayMessage() {
-        this.playAudio.emit(this.message);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioTextSyncComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AudioTextSyncService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AudioTextSyncComponent, isStandalone: true, selector: "dc-audio-text-sync", inputs: { message: "message", isLoading: "isLoading" }, outputs: { playAudio: "playAudio" }, ngImport: i0, template: "<div style=\"display: flex\">\n  <!-- Icon for play/loading status -->\n  <i (click)=\"onPlayMessage()\">\n    <dc-icon *ngIf=\"isLoading\" class=\"spin-animation\" name=\"loading\"></dc-icon>\n    <dc-icon *ngIf=\"!isLoading\" name=\"play\"></dc-icon>\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div>\n    @if (hasTranscription) { @for (wordState of highlightedWords(); track trackByIndex($index, wordState)) {\n    <span [class.highlight]=\"wordState.isHighlighted\">{{ wordState.word }}&nbsp;</span>\n\n    } }@else {\n    <!-- Display regular text content when no transcription is available -->\n    <span [innerHtml]=\"messageText\"></span>\n    }\n  </div>\n</div>\n", styles: [".highlight{background-color:#ff0;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioTextSyncComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-audio-text-sync', standalone: true, imports: [CommonModule, IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div style=\"display: flex\">\n  <!-- Icon for play/loading status -->\n  <i (click)=\"onPlayMessage()\">\n    <dc-icon *ngIf=\"isLoading\" class=\"spin-animation\" name=\"loading\"></dc-icon>\n    <dc-icon *ngIf=\"!isLoading\" name=\"play\"></dc-icon>\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div>\n    @if (hasTranscription) { @for (wordState of highlightedWords(); track trackByIndex($index, wordState)) {\n    <span [class.highlight]=\"wordState.isHighlighted\">{{ wordState.word }}&nbsp;</span>\n\n    } }@else {\n    <!-- Display regular text content when no transcription is available -->\n    <span [innerHtml]=\"messageText\"></span>\n    }\n  </div>\n</div>\n", styles: [".highlight{background-color:#ff0;border-radius:3px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AudioTextSyncService }], propDecorators: { message: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], playAudio: [{
-                type: Output
-            }] } });
-
-class MessageContentComponent {
-    constructor() {
-        this.isLoading = false;
-        this.playAudio = new EventEmitter();
-    }
-    get hasTranscription() {
-        return !!this.message.transcriptionTimestamps;
-    }
-    get messageText() {
-        return this.message.content || this.message.text;
-    }
-    get messageTag() {
-        return this.message.tag || null;
-    }
-    onPlayMessage() {
-        this.playAudio.emit(this.message);
-    }
-    /**
-     * Track function for ngFor to improve performance
-     * @param index The current item's index
-     * @param item The current item
-     */
-    trackByIndex(index, item) {
-        return index;
-    }
-    ngOnInit() {
-        console.log(this.message);
-    }
-    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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MessageContentComponent, 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
-            }] } });
-
-class MultiMessageContentComponent {
-    constructor() {
-        this.isLoading = false;
-        this.playAudio = new EventEmitter();
-    }
-    /**
-     * Checks if a message has transcription timestamps
-     * @param message The message to check
-     */
-    hasTranscription(message) {
-        // debugger;
-        return !!message.transcriptionTimestamps;
-    }
-    /**
-     * Emits the playAudio event with the selected message
-     * @param message The message to play
-     */
-    onPlayMessage(message) {
-        this.playAudio.emit(message);
-    }
-    ngOnInit() {
-        console.log(this.messages);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MultiMessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: MultiMessageContentComponent, isStandalone: true, selector: "dc-multi-message-content", inputs: { messages: "messages", isLoading: "isLoading" }, outputs: { playAudio: "playAudio" }, ngImport: i0, template: "@for (message of messages; track message) {\n<!-- Message with transcription -->\n@if (hasTranscription(message)) {\n<div style=\"display: flex\">\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading, message: message }\"></ng-container>\n  <dc-audio-text-sync [message]=\"message\"></dc-audio-text-sync>\n</div>\n}@else {\n<!-- Message without transcription -->\n\n<div style=\"display: flex\">\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading, message: message }\"></ng-container>\n  <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text || message.content\"></span>\n</div>\n} }\n\n<!-- Icon template for play/loading status -->\n<ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n  <i (click)=\"onPlayMessage(message)\">\n    <dc-icon *ngIf=\"isLoading\" class=\"spin-animation\" name=\"loading\"></dc-icon>\n    <dc-icon *ngIf=\"!isLoading\" name=\"play\"></dc-icon>\n  </i>\n</ng-template>\n", styles: [".highlight{background-color:#ffff004d}i{cursor:pointer;display:inline-flex;align-items:center;margin-right:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: AudioTextSyncComponent, selector: "dc-audio-text-sync", inputs: ["message", "isLoading"], outputs: ["playAudio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-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);
-        }
-        else {
-            transcriptionMap.set(lowercaseWord, [obj]);
-        }
+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);
+        }
+        else {
+            transcriptionMap.set(lowercaseWord, [obj]);
+        }
     }
     // Split the original text into an array of words
     const words = originalText.split(' ');
@@ -1484,334 +1109,78 @@ function extractAudioAndTranscription(message, audio) {
     if (message.transcription) {
         message.transcriptionTimestamps = matchTranscription(message.text || message.content, message.transcription.words);
     }
+    return message;
 }
-
-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);
-    }
-    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);
-            }
-        }
-        else if (settings$?.synthVoice) {
-            if (this.chatMessage.multiMessages) {
-                this.generateAndPlayAllAudios(this.chatMessage.multiMessages);
-            }
-            else {
-                this.generateAndPlayAudio(this.chatMessage);
-            }
-        }
-    }
-    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,
-        });
-        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
-     */
-    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();
-    }
-    preloadNextMessageAudio(messages, currentIndex) {
-        if (currentIndex + 1 < messages.length) {
-            const nextMessage = messages[currentIndex + 1];
-            if (!nextMessage.audioUrl && !nextMessage.audioPromise) {
-                const request = this.buildObjectTTSRequest(nextMessage);
-                nextMessage.isLoading = true;
-                nextMessage.audioPromise = this.agentCardService.getTextAudioFile(request);
-                nextMessage.audioPromise.then((audio) => {
-                    extractAudioAndTranscription(nextMessage, audio);
-                    nextMessage.isLoading = false;
-                });
-            }
-        }
-    }
-    buildObjectTTSRequest(message) {
-        const settings = this.conversationChatSettings();
-        const generateTranscription = settings?.highlightWords ?? false;
-        const speedRate = settings?.speedRate || 0;
-        const speed = typeof settings?.speed === 'string' ? settings.speed : AudioSpeed.Regular;
-        const text = removeEmojis(message.text || message.content);
-        return {
-            text,
-            voice: message.voice || this.chatMessage.voice,
-            generateTranscription,
-            speedRate,
-            speed,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatMessageComponent, deps: [{ token: AudioService }, { token: CONVERSATION_AI_TOKEN }, { token: AudioTextSyncService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: ChatMessageComponent, isStandalone: true, selector: "dc-chat-message", inputs: { chatMessage: "chatMessage", chatUserSettings: "chatUserSettings" }, ngImport: i0, template: "<!-- Multi-message display -->\n<span class=\"message-container\">\n  @if (chatMessage?.multiMessages) {\n  <!-- Single message display -->\n  <dc-multi-message-content [messages]=\"chatMessage.multiMessages\" (playAudio)=\"playMessage($event)\"> </dc-multi-message-content>\n  } @else {\n  <dc-message-content [message]=\"chatMessage\" [isLoading]=\"isLoading()\" (playAudio)=\"playMessage($event)\"> </dc-message-content>\n  }\n</span>\n\n@if (chatMessage.translation) {\n<!-- Translation display if available -->\n\n<div class=\"translation\">\n  <hr class=\"divider\" />\n  {{ chatMessage.translation }}\n</div>\n}\n", styles: [":host{display:block}.message-container{display:block;line-height:1.5}::ng-deep .em{color:#0d5878;font-style:italic}::ng-deep .strong{font-weight:700;color:#515151}::ng-deep .em_strong{font-weight:700;font-style:italic;color:#0d5878}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid #ffa77e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MessageContentComponent, selector: "dc-message-content", inputs: ["message", "isLoading"], outputs: ["playAudio"] }, { kind: "component", type: MultiMessageContentComponent, selector: "dc-multi-message-content", inputs: ["messages", "isLoading"], outputs: ["playAudio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ChatMessageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, MessageContentComponent, MultiMessageContentComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Multi-message display -->\n<span class=\"message-container\">\n  @if (chatMessage?.multiMessages) {\n  <!-- Single message display -->\n  <dc-multi-message-content [messages]=\"chatMessage.multiMessages\" (playAudio)=\"playMessage($event)\"> </dc-multi-message-content>\n  } @else {\n  <dc-message-content [message]=\"chatMessage\" [isLoading]=\"isLoading()\" (playAudio)=\"playMessage($event)\"> </dc-message-content>\n  }\n</span>\n\n@if (chatMessage.translation) {\n<!-- Translation display if available -->\n\n<div class=\"translation\">\n  <hr class=\"divider\" />\n  {{ chatMessage.translation }}\n</div>\n}\n", styles: [":host{display:block}.message-container{display:block;line-height:1.5}::ng-deep .em{color:#0d5878;font-style:italic}::ng-deep .strong{font-weight:700;color:#515151}::ng-deep .em_strong{font-weight:700;font-style:italic;color:#0d5878}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid #ffa77e}\n"] }]
-        }], ctorParameters: () => [{ type: AudioService }, { type: AgentCardsAbstractService, decorators: [{
-                    type: Inject,
-                    args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: AudioTextSyncService }], propDecorators: { chatMessage: [{
-                type: Input
-            }], chatUserSettings: [{
-                type: Input
-            }] } });
-
-class MessageProcessingService {
-    constructor() { }
-    // Process message for display
-    processMessage(message, conversationSettings, mutate = false) {
-        const defaultVoice = this.getVoice(conversationSettings.voice);
-        let processedMessage;
-        if (mutate) {
-            // Modify the existing message object
-            message.voice = defaultVoice;
-            processedMessage = message;
-        }
-        else {
-            // Create a new message object
-            processedMessage = {
-                content: message.content,
-                role: message.role,
-                voice: defaultVoice
-            };
-        }
-        // Process based on text engine
-        if (conversationSettings.textEngine === TextEngines.MarkdownMultiMessages) {
-            this.processMultiMessages(processedMessage, conversationSettings);
-        }
-        else if (conversationSettings.textEngine === TextEngines.MarkdownSSML) {
-            if (!conversationSettings.secondaryVoice) {
-                throw new Error('Secondary voice is required for SSML');
-            }
-            const content = this.subsItalicsByTag(processedMessage.content, conversationSettings.secondaryVoice);
-            processedMessage.ssml = '<speak>' + content + '</speak>';
-        }
-        return processedMessage;
-    }
-    // Process multi-messages from markdown
-    processMultiMessages(message, settings) {
-        // Convert markdown to HTML segments
-        const mdToHtml = convertToHTML(message.content);
-        // Map segments to multi-messages
-        message.multiMessages = mdToHtml.map((val) => {
-            // Get the narrator voice from conversation settings
-            const narratorVoice = settings.secondaryVoice || 'en-US-News-L';
-            // Determine if this is italicized text (narrator)
-            const isItalics = val.tag === 'em';
-            const voice = isItalics ? narratorVoice : message.voice;
-            return {
-                voice,
-                content: val.content,
-                audioUrl: null,
-                audioPromise: null,
-                text: val.text,
-                tag: val.tag
-            };
-        });
-    }
-    // Replace italics with voice tags for SSML
-    subsItalicsByTag(text, voiceId = 'it-IT-Neural2-A', tagName = 'voice') {
-        const regex = /\*(.*?)\*/g;
-        return text.replace(regex, (match, p1) => `<${tagName} name="${voiceId}">${p1}</${tagName}>`);
-    }
-    // Get appropriate voice based on settings
-    getVoice(voice_value, targetLang = 'en') {
-        if ([null, '', 'random'].includes(voice_value)) {
-            const voiceCodes = VoiceTTSOptions.map((val) => val.id);
-            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
-        }
-        if (voice_value === 'randomMan') {
-            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender === 'male' && voice.lang.includes(targetLang)).map((val) => val.id);
-            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
-        }
-        else if (voice_value === 'randomWoman') {
-            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender === 'female' && voice.lang.includes(targetLang)).map((val) => val.id);
-            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
-        }
-        else {
-            const voice = VoiceTTSOptions.find((voice) => voice.id === voice_value);
-            if (voice) {
-                return voice.id;
-            }
-            else {
-                console.error('Voice not found getting something random', voice_value);
-                return VoiceTTSOptions.find((voice) => voice.lang.includes(targetLang))?.id || '';
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MessageProcessingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MessageProcessingService, providedIn: 'root' }); }
+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,
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MessageProcessingService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
 
 class ConversationService {
-    constructor(agentCardService, messageProcessingService) {
-        this.agentCardService = agentCardService;
-        this.messageProcessingService = messageProcessingService;
+    constructor() {
+        // Services
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.messageProcessingService = inject(MessageProcessingService);
+        this.conversationBuilder = inject(DCConversationPromptBuilderService);
+        this.userDataExchange = inject(USER_DATA_EXCHANGE);
+        // Signals
         this.messagesSignal = signal([]);
         this.isThinkingSignal = signal(false);
         this.conversationSettingsSignal = signal(null);
-        this.agentCardSignal = signal(null);
         this.isDestroyedSignal = signal(false);
     }
     // Get messages as a signal
-    getMessages() {
+    getMessagesSignal() {
         return this.messagesSignal;
     }
+    // Add message to conversation
+    addMessage(message) {
+        this.messagesSignal.update((messages) => [...messages, message]);
+    }
     // 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');
+    setupConversationWithAgentCard(agentCard) {
+        const conversationSettings = this.conversationBuilder.buildConversationSettings(agentCard);
+        // set initial ids
+        for (const i in conversationSettings.messages) {
+            conversationSettings.messages[i].messageId = 'msg_' + i;
         }
-        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);
+    }
+    // Initialize conversation
+    async initConversation(agentCard) {
+        this.setupConversationWithAgentCard(agentCard);
+        const conversationSettings = this.conversationSettingsSignal();
         // 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);
+            const processedMessage = this.messageProcessingService.processMessage(firstAssistantMsg, this.conversationSettingsSignal());
+            // Find the index of the message with the matching ID
+            const messageIndex = conversationSettings.messages.findIndex((message) => message.messageId === firstAssistantMsg.messageId);
+            // If found, replace the message at that index
+            if (messageIndex !== -1) {
+                conversationSettings.messages[messageIndex] = processedMessage;
+            }
+            this.messagesSignal.set(conversationSettings.messages);
+            // this.addMessage(processedMessage);
         }
-        else if (agentCard.conversationSettings.autoStart) {
+        else if (conversationSettings.autoStart) {
             // Auto-start conversation if configured
             await this.sendCurrentConversation();
         }
@@ -1826,135 +1195,771 @@ class ConversationService {
         // Set thinking state
         this.isThinkingSignal.set(true);
         try {
-            if (message.audioUrl && this.getAudioPlaybackSetting()) {
-                // Wait for audio to finish playing before sending response
-                await new Promise((resolve) => {
-                    if (message.audioHtml) {
-                        message.audioHtml.addEventListener('ended', () => {
-                            resolve();
-                        });
-                    }
-                    else {
-                        resolve();
-                    }
-                });
-            }
             // Send to AI service
             await this.sendCurrentConversation();
         }
-        finally {
-            this.isThinkingSignal.set(false);
+        finally {
+            this.isThinkingSignal.set(false);
+        }
+    }
+    // Process assistant message
+    // Send current conversation to AI
+    async sendCurrentConversation() {
+        if (this.isDestroyedSignal()) {
+            return;
+        }
+        const messages = this.messagesSignal();
+        const conversationSettings = this.conversationSettingsSignal();
+        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: { modelName: '', provider: '' },
+        };
+        console.warn('fix model name modelName take from user settings');
+        // 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.messageProcessingService.processMessage(response, conversationSettings);
+        // Add to messages
+        this.addMessage(newMessage);
+        this.isThinkingSignal.set(false);
+    }
+    // Reset conversation
+    async resetConversation(agentCard) {
+        // Clear messages
+        this.messagesSignal.set([]);
+    }
+    async getTTSFile(message) {
+        const userChatSettings = await this.userDataExchange.getUserChatSettings();
+        const ttsRequest = buildObjectTTSRequest(message, userChatSettings);
+        return this.agentCardService.getTextAudioFile(ttsRequest);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+function extractJsonFromResponse(content) {
+    const jsonMatch = content.match(/\{[\s\S]*?\}/); // Match everything between first { and }
+    if (!jsonMatch)
+        return null;
+    try {
+        return JSON.parse(jsonMatch[0]);
+    }
+    catch (error) {
+        console.error('Error parsing JSON:', error);
+        return null;
+    }
+}
+
+class EvaluationService {
+    constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.scoreSignal = signal(10);
+        this.evaluationResultSignal = signal(null);
+    }
+    // Get score as a signal
+    getScore() {
+        return this.scoreSignal;
+    }
+    // Get evaluation result as a signal
+    getEvaluationResult() {
+        return this.evaluationResultSignal;
+    }
+    // Evaluate conversation
+    async evaluateConversation(messages, evaluator) {
+        // Filter conversation to only include user and assistant messages
+        const conversationMessages = messages.filter((message) => [ChatRole.User, ChatRole.Assistant].includes(message.role));
+        // Check if there are any user messages to evaluate
+        const userMessages = conversationMessages.filter((message) => message.role === ChatRole.User);
+        if (userMessages.length <= 0) {
+            console.log('No messages to evaluate', conversationMessages);
+            return;
+        }
+        // Format conversation for evaluation
+        const conversationMessagesString = conversationMessages
+            .map((message) => `${message.role}: ${message.content}`)
+            .join('\n');
+        // Create evaluation prompt
+        const instructions = `
+Please replay to this task:
+    ${evaluator.task}
+This is the conversation history:
+    ${conversationMessagesString}
+and give the response in next JSON format.
+    ${evaluator.expectedResponseType}
+    `;
+        // Send evaluation request
+        const evaluationMessages = [{ content: instructions, role: ChatRole.User }];
+        const response = await this.agentCardService.callChatCompletion({ messages: evaluationMessages });
+        // Extract JSON from response
+        const jsonData = extractJsonFromResponse(response.content);
+        this.evaluationResultSignal.set(jsonData);
+        // Update score if available
+        if (jsonData.score) {
+            if (jsonData.score <= 3) {
+                this.updateScore(jsonData.score * 10);
+            }
+        }
+    }
+    // Update score with limits
+    updateScore(additionalScore) {
+        this.scoreSignal.update(currentScore => {
+            const newScore = currentScore + additionalScore;
+            return newScore > 100 ? 100 : newScore;
+        });
+    }
+    // Reset score
+    resetScore() {
+        this.scoreSignal.set(10);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class ChatFooterComponent {
+    constructor() {
+        this.conversationService = inject(ConversationService);
+        this.evaluationService = inject(EvaluationService);
+        this.isAIThinking = input(false);
+        this.evaluatorAgentCard = input();
+        this.micSettings = input({ useWhisper: true, lang: 'en' });
+        this.sendMessage = output();
+        this.textInputChanged = output();
+        // readonly micFinishedEvent = output<any>();
+        this.isGettingTranscription = false;
+        this.isUserTalking = false;
+        this.chatInputControl = new FormControl();
+        // Get score from evaluation service
+        this.score = this.evaluationService.getScore();
+    }
+    /**
+     * Sets the input text in the textarea
+     * @param text The text to set
+     */
+    setInputText(text) {
+        this.chatInputControl.setValue(text);
+        this.textInputChanged.emit(text);
+    }
+    /**
+     * Handles the mic finished event
+     * @param eventBlob The blob event from the mic component
+     */
+    micFinished(eventBlob) {
+        // this.micFinishedEvent.emit(eventBlob);
+    }
+    /**
+     * Sends the user message
+     */
+    async sendUserMessage() {
+        if (this.isAIThinking() || !this.chatInputControl.value) {
+            return;
+        }
+        const text = this.chatInputControl.value;
+        const message = {
+            content: text,
+            role: ChatRole.User,
+        };
+        // Emit the message for parent components that need it
+        this.sendMessage.emit(message);
+        // Clear the input field
+        this.chatInputControl.setValue('');
+        // Send the user message to the conversation service
+        await this.conversationService.sendUserMessage(message);
+        // Evaluate conversation after sending message
+        this.evaluateConversation();
+    }
+    /**
+     * Evaluate conversation using evaluator agent
+     */
+    async evaluateConversation() {
+        const messages = this.conversationService.getMessagesSignal()();
+        if (this.evaluatorAgentCard()) {
+            await this.evaluationService.evaluateConversation(messages, this.evaluatorAgentCard());
+        }
+    }
+    async onMicFinished(eventBlob) {
+        if (!(eventBlob instanceof Blob)) {
+            return;
+        }
+        // Check if audio is too small
+        if (eventBlob.size < 10000) {
+            return;
+        }
+        this.isUserTalking = false;
+        this.isGettingTranscription = true;
+        try {
+            // Get transcription from audio
+            // const transcription = await this.agentCardService.getAudioTranscriptions(eventBlob, {
+            //   conversationId: this.agentCard._id,
+            // });
+            // Create message with transcription
+            // const message: ChatMessage = {
+            //   content: transcription.text,
+            //   role: ChatRole.User,
+            //   transcriptionTimestamps: transcription.words,
+            // };
+            const message = {
+                content: '',
+                role: ChatRole.User,
+                audioUrl: URL.createObjectURL(eventBlob),
+            };
+            // Send message to conversation
+            // The evaluation will happen automatically in the conversation service
+            await this.conversationService.sendUserMessage(message);
+        }
+        finally {
+            this.isGettingTranscription = false;
+        }
+    }
+    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" }, ngImport: i0, template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <dc-mic\n      style=\"display: flex; align-items: center\"\n      (onInterpretedText)=\"setInputText($event)\"\n      (onFinished)=\"micFinished($event)\"\n      [micSettings]=\"micSettings()\"></dc-mic>\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"sendUserMessage()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  <div>\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["isDone", "useWhisper", "targetOrBase", "micSettings"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-chat-footer', standalone: true, imports: [ReactiveFormsModule, ProgressBarModule, DCMicComponent, TextareaModule, ButtonModule], template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <dc-mic\n      style=\"display: flex; align-items: center\"\n      (onInterpretedText)=\"setInputText($event)\"\n      (onFinished)=\"micFinished($event)\"\n      [micSettings]=\"micSettings()\"></dc-mic>\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"sendUserMessage()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  <div>\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"] }]
+        }] });
+
+const ICONS = {
+    chat: `<svg viewBox="0 0 24 24" fill="currentColor">
+    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c..." />
+  </svg>`,
+    play: `<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="#263042"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10"></circle>
+      <polygon points="10 8 16 12 10 16 10 8"></polygon>
+    </svg>`,
+    loading: `<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="#263042"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round">
+      <line x1="12" y1="2" x2="12" y2="6"></line>
+      <line x1="12" y1="18" x2="12" y2="22"></line>
+      <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
+      <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
+      <line x1="2" y1="12" x2="6" y2="12"></line>
+      <line x1="18" y1="12" x2="22" y2="12"></line>
+      <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
+      <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
+    </svg>`,
+};
+
+class IconsComponent {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+        this.name = input.required();
+        this.size = input(14);
+        this.color = input('currentColor');
+    }
+    ngOnChanges(changes) {
+        if (changes['name']) {
+            const svg = ICONS[this.name()] || '';
+            this.sanitizedIcon = this.sanitizer.bypassSecurityTrustHtml(svg);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: IconsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", type: IconsComponent, isStandalone: true, selector: "dc-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: `
+    <span
+      [innerHTML]="sanitizedIcon"
+      [style.display]="'inline-flex'"
+      [style.alignItems]="'center'"
+      [style.justifyContent]="'center'"
+      [style.width.px]="size()"
+      [style.height.px]="size()"
+      [style.color]="color()"></span>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;line-height:0}span{line-height:0}:host ::ng-deep svg{width:100%;height:100%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: IconsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-icon', template: `
+    <span
+      [innerHTML]="sanitizedIcon"
+      [style.display]="'inline-flex'"
+      [style.alignItems]="'center'"
+      [style.justifyContent]="'center'"
+      [style.width.px]="size()"
+      [style.height.px]="size()"
+      [style.color]="color()"></span>
+  `, standalone: true, styles: [":host{display:inline-flex;align-items:center;line-height:0}span{line-height:0}:host ::ng-deep svg{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+class TextHighlighterComponent {
+    constructor() {
+        this.message = input.required(); // Or input.required<MessageAudio>() if always expected
+        this.highlightedWords = signal([]); // Signal for highlighted words
+        this.isPlaying = signal(false); // Signal for play state
+        // Signals State computed from the input message
+        this.iconState = computed(() => {
+            if (this.isLoading()) {
+                return 'isLoading';
+            }
+            else if (this.isPlaying()) {
+                return 'isPlaying';
+            }
+            else if (this.message()?.audioUrl) {
+                return 'playable';
+            }
+            else {
+                return 'idle';
+            }
+        });
+        this.isLoading = computed(() => this.message()?.isLoading);
+        this.shouldPlayAudio = computed(() => !!this.message() && this.message()?.shouldPlayAudio);
+        // Computed signal for message text
+        this.messageText = computed(() => {
+            console.log('Message text computed', this.message());
+            const msg = this.message(); // Read the input signal
+            return msg?.text || msg?.content || 'N/A';
+        });
+        this.classTag = computed(() => this.message()?.tag);
+        // Computed signal for transcription availability
+        this.hasTranscription = computed(() => {
+            const hasTranscription = !!this.message()?.transcriptionTimestamps && this.message()?.transcriptionTimestamps.length > 0;
+            return hasTranscription;
+        });
+        this.playAudio = output();
+        this.audioCompleted = output();
+        this.audioElement = null; // Audio element for playback
+        this.destroy$ = new Subject(); // Cleanup localsubject
+        // Inject services
+        this.cdr = inject(ChangeDetectorRef); // Keep for now, might remove if template fully signal-driven
+        this.destroyRef = inject(DestroyRef);
+        // Effect to react to message changes and re-initialize
+        effect(() => {
+            const currentMsg = this.message(); // Read the input signal
+            console.log('Input message signal changed:', currentMsg);
+            if (currentMsg) {
+                // Re-run initialization logic whenever the message signal changes
+                this.initializeBasedOnMessage(currentMsg);
+                // Check if shouldPlayAudio flag is set
+                if (currentMsg.shouldPlayAudio) {
+                    this.startAudioPlayback();
+                }
+            }
+            else {
+                // Handle case where message becomes undefined (cleanup?)
+                this.cleanupAudio();
+                this.highlightedWords.set([]);
+            }
+            // No cdr.markForCheck() needed here usually if template bindings use signals/computed
+        });
+        // Keep the effect for highlightedWords for now, might be redundant if template binds directly
+        effect(() => {
+            this.highlightedWords();
+            this.cdr.markForCheck(); // Keep if template uses non-signal bindings for highlighted words
+        });
+    }
+    /**
+     * Track function for ngFor to improve performance
+     */
+    trackByIndex(index, item) {
+        return index;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.cleanupAudio();
+    }
+    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) {
+            this.cleanupAudio();
+        }
+        else if (!msg.audioUrl) {
+            // No audio URL and no audio element - just log a warning instead of throwing an error
+            console.warn('No audioUrl provided in the message. Audio playback will not be available.');
+        }
+        // Initialize words and sync based on transcription presence
+        if (this.hasTranscription()) {
+            // Use computed signal
+            const timestamps = msg.transcriptionTimestamps || [];
+            this.initializeHighlightedWords(timestamps); // Pass timestamps
+            this.subcribeToAudioSync(timestamps); // Pass timestamps
+        }
+        else {
+            this.subscribeToEndAudio();
+        }
+    }
+    /**
+     * 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
+    }
+    /**
+     * Initialize highlighted words from transcription timestamps
+     */
+    initializeHighlightedWords(timestamps) {
+        const initialWords = timestamps.map((word, index) => ({
+            word: word.word,
+            index,
+            isHighlighted: false,
+        }));
+        this.highlightedWords.set(initialWords);
+    }
+    /**
+     * Set up audio synchronization with text
+     */
+    subcribeToAudioSync(timestamps) {
+        // Accept timestamps
+        if (!this.audioElement) {
+            // Guard against missing audio element
+            return;
+        }
+        // Important: Clean up previous listeners before setting up new ones
+        this.destroy$.next(); // Signal previous subscriptions to complete
+        // Listen to timeupdate events
+        fromEvent(this.audioElement, 'timeupdate')
+            .pipe(takeUntilDestroyed(this.destroyRef), // Use DestroyRef for component lifecycle
+        takeUntil(this.destroy$), // Use manual subject for re-initialization cleanup
+        map(() => this.audioElement?.currentTime || 0))
+            .subscribe((currentTime) => {
+            // Use the passed timestamps array
+            const updatedWords = timestamps.map((word, index) => {
+                const isHighlighted = currentTime >= word.start - 0.15 && currentTime < word.end + 0.15;
+                return { word: word.word, index, isHighlighted };
+            });
+            this.highlightedWords.set(updatedWords);
+        });
+        // 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);
+            // Set isPlaying to false when audio finishes
+            this.isPlaying.set(false);
+            // 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);
+            }
+        });
+    }
+    subscribeToEndAudio() {
+        if (!this.audioElement) {
+            return;
+        }
+        fromEvent(this.audioElement, 'ended')
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.destroy$))
+            .subscribe(() => {
+            // Set isPlaying to false when audio finishes
+            this.isPlaying.set(false);
+            // Emit audio completed event with the current message
+            const currentMsg = this.message();
+            if (currentMsg) {
+                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);
+        }
+    }
+    /**
+     * Play or pause the audio
+     */
+    onPlayMessage() {
+        console.log('Playing message audio', this.message().messageId);
+        const currentMsg = this.message(); // Read signal
+        if (this.audioElement) {
+            if (this.audioElement.paused) {
+                this.startAudioPlayback();
+            }
+            else {
+                this.audioElement.pause();
+            }
+        }
+        else if (currentMsg?.audioUrl) {
+            // Initialization now happens via effect. If element doesn't exist yet,
+            // the effect should create it. Clicking play might need to ensure init runs.
+            // For simplicity, let's re-call initializeAudio here if needed,
+            // though ideally the effect handles it.
+            this.initializeAudio(currentMsg.audioUrl); // Ensure it's created if somehow missed
+            // this.initializeBasedOnMessage(currentMsg);
+            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);
+        });
+        this.isPlaying.set(true); // Set play state to true
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextHighlighterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: TextHighlighterComponent, isStandalone: true, selector: "dc-text-highlighter", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted" }, ngImport: i0, template: "<div class=\"audio-text-sync-container\">\n  <div> </div>\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @if (iconState() === 'isLoading') {\n    <!-- <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon> -->\n    <i class=\"spin-animation pi pi-spinner-dotted\"></i>\n    } @else if (iconState() === 'isPlaying') {\n    <i class=\"pi pi-volume-up\"></i>\n    } @else if (iconState() === 'playable') {\n    <!-- Display play icon when not playing -->\n    <dc-icon name=\"play\"></dc-icon>\n    } @else {\n    <!-- Nothing-->\n    <!-- <dc-icon name=\"play\"></dc-icon> -->\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div [class]=\"'text-content ' + classTag()\">\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> {{ messageText() }}</span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.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)}}.em{font-style:italic;color:#6495ed}.strong{font-weight:700;color:inherit}.em_strong{font-weight:700;font-style:italic;color:inherit}\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.2.4", ngImport: i0, type: TextHighlighterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-text-highlighter', standalone: true, imports: [IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\">\n  <div> </div>\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @if (iconState() === 'isLoading') {\n    <!-- <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon> -->\n    <i class=\"spin-animation pi pi-spinner-dotted\"></i>\n    } @else if (iconState() === 'isPlaying') {\n    <i class=\"pi pi-volume-up\"></i>\n    } @else if (iconState() === 'playable') {\n    <!-- Display play icon when not playing -->\n    <dc-icon name=\"play\"></dc-icon>\n    } @else {\n    <!-- Nothing-->\n    <!-- <dc-icon name=\"play\"></dc-icon> -->\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div [class]=\"'text-content ' + classTag()\">\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> {{ messageText() }}</span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.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)}}.em{font-style:italic;color:#6495ed}.strong{font-weight:700;color:inherit}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"] }]
+        }], ctorParameters: () => [] });
+
+class MessageOrchestratorComponent {
+    constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.conversationService = inject(ConversationService);
+        this.messages = input.required();
+        this.messageRole = input.required();
+        this.messagesSignal = signal([]);
+        this.playAudio = output();
+        this.audioCompleted = output();
+        // Audio queue management
+        this.audioQueue = [];
+        this.isGenerating = false;
+        this.currentPlayingIndex = null;
+        this.preGenerationInProgress = false;
+    }
+    ngOnInit() {
+        if (this.messageRole() === ChatRole.Assistant) {
+            console.log('MessageOrchestratorComponent initialized', this.messages());
+            // Initialize the queue with all message indices
+            this.initializeAudioQueue();
+            // Start processing the queue - generate the first audio
+            this.processNextInQueue();
+        }
+        else {
+            // since user only have one message, just activate signal
+            this.changeStates(0, this.messages()[0]);
         }
     }
-    // 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');
+    // Initialize the queue with all message indices
+    initializeAudioQueue() {
+        const messages = this.messages();
+        if (messages && messages.length > 0) {
+            this.audioQueue = messages.map((_, index) => index);
         }
-        return this.messageProcessingService.processMessage(message, conversationSettings, mutate);
     }
-    // Send current conversation to AI
-    async sendCurrentConversation() {
-        if (this.isDestroyedSignal()) {
+    // Process the next message in the queue
+    async processNextInQueue() {
+        console.log('Processing next message in queue', this.audioQueue);
+        if (this.audioQueue.length === 0 || this.isGenerating) {
             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
+        // Get the next index from the queue
+        const nextIndex = this.audioQueue.shift();
+        // Start generating
+        this.isGenerating = true;
+        // Generate audio for the current message
+        await this.generateAudioForIndex(nextIndex);
+        // After generation, mark as not generating
+        this.isGenerating = false;
+        // If there's another message in the queue, pre-generate it
+        this.preGenerateNextIfNeeded();
+    }
+    // Pre-generate the next audio if available
+    async preGenerateNextIfNeeded() {
+        if (this.audioQueue.length > 0 && !this.preGenerationInProgress) {
+            const nextIndex = this.audioQueue[0]; // Peek at next index but don't remove
+            // Mark pre-generation as in progress
+            this.preGenerationInProgress = true;
+            // Mark as loading but don't set shouldPlayAudio yet
+            const messages = this.messages();
+            const message = { ...messages[nextIndex], isLoading: true };
+            this.changeStates(nextIndex, message);
+            // Generate in background
+            const messageAudio = await this.generateAudio(messages[nextIndex], null);
+            messageAudio.isLoading = false;
+            messageAudio.shouldPlayAudio = false; // Don't auto-play yet
+            this.changeStates(nextIndex, messageAudio);
+            // Reset pre-generation flag
+            this.preGenerationInProgress = false;
+        }
+    }
+    // Generate audio for a specific index
+    async generateAudioForIndex(index) {
+        const messages = this.messages();
+        // Check if this message was already pre-generated (has audioUrl)
+        if (messages[index].audioUrl) {
+            // If it was pre-generated, just set it to play
+            const messageAudio = { ...messages[index], shouldPlayAudio: true };
+            this.changeStates(index, messageAudio);
+            this.currentPlayingIndex = index;
             return;
         }
-        let conversationMessages = messages;
-        // Add last prompt if available
-        if (conversationSettings.last_prompt) {
-            conversationMessages = [
-                ...messages,
-                { content: conversationSettings.last_prompt, role: ChatRole.System },
-            ];
-        }
-        // Prepare conversation DTO
-        const conversation = {
-            messages: conversationMessages,
-            conversationType: conversationSettings.conversationType,
-            textEngine: conversationSettings.textEngine,
-            model: agentCard.model,
-        };
-        // Call AI service
-        const response = await this.agentCardService.callChatCompletion(conversation);
-        if (!response) {
-            console.error('No message returned from AI, is your service working?');
-            throw new Error('No message returned from AI');
-        }
-        // Process response
-        const newMessage = this.processAssistantMessage(response);
-        // Add to messages
-        this.addMessage(newMessage);
-        this.isThinkingSignal.set(false);
-    }
-    // Helper to get audio playback setting
-    getAudioPlaybackSetting() {
-        const agentCard = this.agentCardSignal();
-        return agentCard?.conversationSettings?.repeatRecording || false;
+        // Otherwise generate it now
+        const message = { ...messages[index], isLoading: true };
+        this.changeStates(index, message);
+        const messageAudio = await this.generateAudio(messages[index], null);
+        messageAudio.isLoading = false;
+        messageAudio.shouldPlayAudio = true;
+        this.changeStates(index, messageAudio);
+        this.currentPlayingIndex = index;
+    }
+    // Handle audio completion event from text-highlighter
+    onAudioCompleted(message) {
+        // Forward the event
+        this.audioCompleted.emit(message);
+        // Reset current playing index
+        this.currentPlayingIndex = null;
+        // If there are more messages in the queue, process the next one
+        if (this.audioQueue.length > 0) {
+            this.processNextInQueue();
+        }
+    }
+    changeStates(index, messageAudio) {
+        const messages = this.messages();
+        messages[index] = { ...messages[index], ...messageAudio };
+        this.messagesSignal.set([...messages]);
     }
-    // Reset conversation
-    async resetConversation(agentCard) {
-        if (agentCard) {
-            this.agentCardSignal.set(agentCard);
+    async generateAudio(message, overwriteText = null) {
+        try {
+            const text = overwriteText || message.text || message.content;
+            const ttsObject = buildObjectTTSRequest({ ...message, text }, { highlightWords: true });
+            const speechAudio = await this.conversationService.getTTSFile(ttsObject);
+            message = extractAudioAndTranscription(message, speechAudio);
+            return message;
         }
-        // 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);
+        finally {
+            // No longer emitting audioCompleted here as it's handled by the text-highlighter
         }
     }
-    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: MessageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: MessageOrchestratorComponent, isStandalone: true, selector: "dc-message-orchestrator", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, messageRole: { classPropertyName: "messageRole", publicName: "messageRole", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted" }, ngImport: i0, template: "@for (message of messagesSignal(); track message.messageId) {\n<dc-text-highlighter [message]=\"message\" (playAudio)=\"playAudio.emit($event)\" (audioCompleted)=\"onAudioCompleted($event)\" />\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TextHighlighterComponent, selector: "dc-text-highlighter", 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: MessageOrchestratorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-message-orchestrator', imports: [TextHighlighterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (message of messagesSignal(); track message.messageId) {\n<dc-text-highlighter [message]=\"message\" (playAudio)=\"playAudio.emit($event)\" (audioCompleted)=\"onAudioCompleted($event)\" />\n}\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class ChatMessageComponent {
+    constructor() {
+        this.chatMessage = input.required();
+        this.chatUserSettings = input(null);
+        this.audioMessage = signal(null);
+        // Computed properties for easier access to signal values
+        this.hasMultiMessages = computed(() => !!this.chatMessage()?.multiMessages);
+        this.multiMessages = computed(() => this.chatMessage()?.multiMessages || []);
+        this.messageTranslation = computed(() => this.chatMessage()?.translation);
+        this.isUserMessage = computed(() => this.chatMessage()?.role === ChatRole.User);
+        // Field initializer for the effect - runs during component creation
+        this.messageEffect = effect(() => {
+            const message = this.chatMessage();
+            if (!message)
+                return;
+            if (message.role === ChatRole.AssistantHelper) {
+                return;
+            }
+            if (message.role === ChatRole.User) {
+                this.audioMessage.set({ ...message });
+            }
+            else if (message.role === ChatRole.Assistant) {
+                if (this.multiMessages().length > 0) {
+                }
+                else {
+                    this.audioMessage.set({ ...message });
+                }
+            }
+        });
+    }
+    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        <img src=\"assets/defaults/avatar.jpg\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message content -->\n    <div class=\"message-bubble\">\n      @if (hasMultiMessages()) {\n      <dc-message-orchestrator [messages]=\"multiMessages()\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      } @else {\n      <dc-message-orchestrator [messages]=\"[audioMessage()]\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\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        <img src=\"assets/defaults/avatar.jpg\" alt=\"User\" class=\"avatar-image\" />\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}.user-message .message-bubble{background-color:#0d5878;color:#fff;border-radius:18px 18px 0;margin-left: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;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.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: MessageOrchestratorComponent, selector: "dc-message-orchestrator", inputs: ["messages", "messageRole"], outputs: ["playAudio", "audioCompleted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+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, MessageOrchestratorComponent], 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        <img src=\"assets/defaults/avatar.jpg\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message content -->\n    <div class=\"message-bubble\">\n      @if (hasMultiMessages()) {\n      <dc-message-orchestrator [messages]=\"multiMessages()\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      } @else {\n      <dc-message-orchestrator [messages]=\"[audioMessage()]\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\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        <img src=\"assets/defaults/avatar.jpg\" alt=\"User\" class=\"avatar-image\" />\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}.user-message .message-bubble{background-color:#0d5878;color:#fff;border-radius:18px 18px 0;margin-left: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;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.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"] }]
+        }] });
 
 class ChatMessagesListComponent {
     constructor() {
+        this.chatUserSettings = input.required();
         this.aiIcon = 'assets/default/ai.png';
         this.conversationService = inject(ConversationService);
+        this.inputMessages = input.required();
         // 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.getMessagesSignal()();
+            return allMessages.filter((message) => message.role !== ChatRole.System);
+        });
         this.isThinking = this.conversationService.isThinking();
     }
     // 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 }, inputMessages: { classPropertyName: "inputMessages", publicName: "inputMessages", 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 +1972,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 +1992,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 +2017,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 +2050,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 +2074,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 +2120,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 +2137,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,179 +2157,31 @@ 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.conversationBuilder = inject(DCConversationPromptBuilderService);
+        this.dialogService = inject(DialogService);
+        this.conversationService = inject(ConversationService);
+        this.userDataExchange = inject(USER_DATA_EXCHANGE);
+        this.chatUserSettings = this.userDataExchange.getUserChatSettings(); // Default to user data exchange
+        // TODO: those are optional think if i need them,
+        this.evaluatorAgentCard = input(DefaultEvaluatorAgentCard);
+        this.parseDict = input({});
+        this.sendMessage = output(); // notifies whatever happened inside the chat
         this.micSettings = { useWhisper: true, lang: 'en' };
-        this.imageUser = `assets/default/user.svg`;
-        this.thinkingImg = `assets/default/thinking.svg`;
-        this.aiIcon = `assets/default/ai.svg`;
         this.isInfoVisible = false;
-        this.isChatSettingsVisible = false;
-        this.isUserTalking = false;
-        this.isGettingTranscription = false;
         this.isAdmin = true;
         // Get reactive state from services
-        this.messages = this.conversationService.getMessages();
-        this.isThinking = this.conversationService.isThinking();
-        this.score = this.evaluationService.getScore();
+        // public messages = this.conversationService.getMessages();
+        this.messages = signal([]);
     }
     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);
+        this.conversationService.initConversation(this.agentCard);
     }
     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();
-    }
-    /**
-     * Handle microphone input finished
-     */
-    async onMicFinished(eventBlob) {
-        if (!(eventBlob instanceof Blob)) {
-            if (!this.chatUserSettings.superHearing) {
-                this.isUserTalking = false;
-            }
-            return;
-        }
-        // Check if audio is too small
-        if (eventBlob.size < 10000) {
-            return;
-        }
-        this.isUserTalking = false;
-        this.isGettingTranscription = true;
-        try {
-            // Get transcription from audio
-            const transcription = await this.agentCardService.getAudioTranscriptions(eventBlob, {
-                conversationId: this.agentCard._id,
-            });
-            // Create message with transcription
-            const message = {
-                content: transcription.text,
-                role: ChatRole.User,
-                transcriptionTimestamps: transcription.words,
-            };
-            message['audioUrl'] = URL.createObjectURL(eventBlob);
-            // Send message to conversation
-            await this.conversationService.sendUserMessage(message);
-            // Evaluate conversation
-            this.evaluateConversation();
-        }
-        finally {
-            this.isGettingTranscription = false;
-        }
-    }
     /**
      * Open chat settings dialog
      */
@@ -2349,7 +2195,7 @@ class DCChatComponent {
             closeOnEscape: true,
         })
             .onClose.subscribe(async () => {
-            this.chatUserSettings = await this.agentCardService.getConversationUserChatSettings();
+            // TODO: Que hacer cuando cambie las configuraciones del usario?, creo que si existe en exchange no necesito guardarlo y leer desde el servicio.
         });
     }
     /**
@@ -2367,35 +2213,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\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [evaluatorAgentCard]=\"evaluatorAgentCard()\"> </dc-chat-footer>\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 | safeJson }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | safeJson }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}.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: "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"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings", "inputMessages"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$3.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: "pipe", type: SafeJsonPipe, name: "safeJson" }], 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, SafeJsonPipe], 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\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [evaluatorAgentCard]=\"evaluatorAgentCard()\"> </dc-chat-footer>\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 | safeJson }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | safeJson }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}.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"] }]
+        }], propDecorators: { chatUserSettings: [{
                 type: Input
             }], agentCard: [{
                 type: Input
-            }], evaluatorAgentCard: [{
-                type: Input
-            }], parseDict: [{
-                type: Input
-            }], sendMessage: [{
-                type: Output
             }] } });
 
 async function getCharacterData(file) {
@@ -2529,32 +2356,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 +2397,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 +2417,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 +2440,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 +2458,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 +2475,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 +2491,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 +2503,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 +2562,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$4.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 +2581,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 +2600,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 +2656,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 +2671,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 +2989,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 +3013,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 +3024,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$5.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$4.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 +3059,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 +3080,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 +3090,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 +3189,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$4.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 +3203,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 +3226,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 +3238,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 +3270,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$4.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 +3289,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, ChatRole, ChatUserSettings, ConversationDTO, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, DefaultEvaluatorAgentCard, EAccountsPlatform, LangCodeDescriptionEs, MessageAudio, MessageOrchestratorComponent, ProviderSelectorComponent, TextEngineOptions, TextEngines, TextHighlighterComponent, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, markdownBasicToHTML, markdownToHTML$1 as markdownToHTML, markdownToHTML2, markdownToHtml, matchTranscription, provideChatAIService, provideUserDataExchange, removeAllEmojis, removeEmojis };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map