@dataclouder/ngx-agent-cards 0.0.83 → 0.0.85

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

@@ -1,42 +1,44 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Component, Input, Pipe, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, Optional, ViewChildren } from '@angular/core';
-import * as i2 from '@angular/common';
+import { InjectionToken, Injectable, Inject, Component, Input, signal, inject, DestroyRef, EventEmitter, effect, ChangeDetectionStrategy, Output, Pipe, ViewChild, Optional, ViewChildren } from '@angular/core';
+import * as i1$1 from '@angular/common';
 import { CommonModule, NgComponentOutlet } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
-import * as i1$1 from '@angular/forms';
-import { ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
-import * as i1$2 from 'primeng/dynamicdialog';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, Subject, fromEvent, filter } from 'rxjs';
+import { takeUntil, map } from 'rxjs/operators';
+import * as i1$2 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i1$3 from 'primeng/dynamicdialog';
 import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
-import * as i6 from 'primeng/skeleton';
+import * as i4$1 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i6$1 from 'primeng/dialog';
+import * as i5$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i9 from '@dataclouder/ngx-core';
-import { TOAST_ALERTS_TOKEN, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
-import { DCMicComponent } from '@dataclouder/ngx-mic';
-import * as i7$2 from 'primeng/progressbar';
+import * as i2 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
-import * as i4$1 from 'primeng/checkbox';
+import { DCMicComponent } from '@dataclouder/ngx-mic';
+import * as i3 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
+import * as i7 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i6 from '@dataclouder/ngx-core';
+import { TOAST_ALERTS_TOKEN, AudioSpeed as AudioSpeed$1, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
+import * as i4$2 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import { SliderModule } from 'primeng/slider';
-import * as i3 from 'primeng/radiobutton';
+import * as i3$1 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i7$1 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
 import * as i8 from 'primeng/rating';
 import { RatingModule } from 'primeng/rating';
 import * as i5 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { BadgeModule } from 'primeng/badge';
-import * as i7 from 'primeng/tooltip';
+import * as i7$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { filter } from 'rxjs';
 import * as i4 from 'primeng/api';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { PortalModule } from '@angular/cdk/portal';
-import * as i8$1 from 'primeng/textarea';
-import { TextareaModule } from 'primeng/textarea';
-import * as i5$1 from 'primeng/inputtext';
+import * as i5$2 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i11 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
@@ -50,15 +52,15 @@ import * as i14 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i15 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
-import * as i3$1 from 'primeng/card';
+import * as i3$2 from 'primeng/card';
 import { CardModule } from 'primeng/card';
-import * as i4$2 from 'primeng/dropdown';
+import * as i4$3 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import { ChipModule } from 'primeng/chip';
-import * as i1$3 from '@angular/router';
-import * as i3$2 from 'primeng/paginator';
+import * as i1$4 from '@angular/router';
+import * as i3$3 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i5$2 from 'primeng/speeddial';
+import * as i2$3 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
 
 const characterCardStringDataDefinition = `
@@ -79,6 +81,9 @@ var EAccountsPlatform;
     EAccountsPlatform["Youtube"] = "youtube";
 })(EAccountsPlatform || (EAccountsPlatform = {}));
 class WordTimestamps {
+    constructor() {
+        this.highlighted = false; // Initialize with false and use proper boolean type
+    }
 }
 class ChatMultiMessage {
 }
@@ -119,6 +124,20 @@ const LangCodeDescriptionEs = {
     pt: 'Portugués',
     fr: 'Frances',
 };
+// TODO: use the default settings when the user is not set
+const defaultconvUserSettings = {
+    realTime: false,
+    repeatRecording: false,
+    fixGrammar: false,
+    superHearing: false,
+    voice: '',
+    autoTranslate: false,
+    highlightWords: true,
+    synthVoice: true,
+    model: { modelName: null, provider: 'google' },
+    speed: null,
+    speedRate: null, // temporal
+};
 class VoiceTTSOption {
 }
 const VoiceTTSOptions = [
@@ -519,7 +538,7 @@ class DCConversationPromptBuilderService {
     }
     // For chat conversation i need inital settings.
     buildConversationSettings(agentCard, parseDict = null) {
-        const converstionSettings = agentCard.conversationSettings;
+        const converstionSettings = agentCard?.conversationSettings;
         converstionSettings.messages = this.buildConversationMessages(agentCard, parseDict);
         converstionSettings.last_prompt = this.getJailBrakePrompt(agentCard);
         return converstionSettings;
@@ -531,17 +550,25 @@ class DCConversationPromptBuilderService {
         this.parseConversation(initialConversation, parseDict);
         return initialConversation;
     }
-    getDefaultParseDict(parseDict, conversation) {
+    getDefaultParseDict(parseDict, card) {
+        // Example of return { char: 'AI Bot', user: 'jordan', ... custom params, base: 'spanish' };
+        // conversation will parse values with curren value in parseDcit:
+        // Hello  {{user}} im {{char}} your are talking {{base}} -> hello jordan im AI bot your are talking spanish
+        // important you have to implement userDataExchange to return what you want in parseDict that have sense for your app.
         if (parseDict) {
             return parseDict;
         }
-        if (!parseDict) {
+        else {
             parseDict = this.userDataExchange.getParseDict();
-            if (!parseDict) {
-                parseDict = { char: conversation.characterCard.data.name || 'Bot' };
-            }
+            const cardParseDict = this.getDefaultCardParseDict(card);
+            parseDict = { ...parseDict, ...cardParseDict };
+            return parseDict;
         }
-        return parseDict;
+    }
+    getDefaultCardParseDict(card) {
+        // bot so far i don't use more than the character name.
+        // this is what silly tavern call macros https://docs.sillytavern.app/usage/core-concepts/macros/#general-macros
+        return { char: card.characterCard.data.name || 'Bot' };
     }
     convertConversationToHtml(messages, jailBrake = '') {
         let finalPrompt = '';
@@ -643,8 +670,8 @@ class DCConversationPromptBuilderService {
             last_prompt: jailBrakePrompt,
             textEngine: agent.conversationSettings.textEngine,
             conversationType: ConversationType.Scenario,
-            voice: agent.tts.voice,
-            secondaryVoice: agent.tts.secondaryVoice,
+            voice: agent.conversationSettings.tts.voice,
+            secondaryVoice: agent.conversationSettings.tts.secondaryVoice,
             // overrideConversationSettings: { autoTranslate: false, highlightWords: false, realTime: false, provider: 'google' },
         };
         return settings;
@@ -662,129 +689,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                     args: [USER_DATA_EXCHANGE]
                 }] }] });
 
-const ICONS = {
-    gear: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-     <path d="M12 1.75a1.25 1.25 0 0 1 1.25 1.25v.917a8.456 8.456 0 0 1 2.334.98l.645-.647a1.25 1.25 0 1 1 1.768 1.768l-.646.645c.389.69.729 1.437.98 2.334h.917a1.25 1.25 0 0 1 0 2.5h-.917a8.456 8.456 0 0 1-.98 2.334l.646.645a1.25 1.25 0 1 1-1.768 1.768l-.645-.646a8.456 8.456 0 0 1-2.334.98v.917a1.25 1.25 0 0 1-2.5 0v-.917a8.456 8.456 0 0 1-2.334-.98l-.645.646a1.25 1.25 0 1 1-1.768-1.768l.646-.645a8.456 8.456 0 0 1-.98-2.334H1.75a1.25 1.25 0 0 1 0-2.5h.917a8.456 8.456 0 0 1 .98-2.334l-.646-.645a1.25 1.25 0 1 1 1.768-1.768l.645.647c.69-.389 1.437-.729 2.334-.98V3a1.25 1.25 0 0 1 1.25-1.25h.083ZM12 7.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"/>
-    </svg>
-    `,
-    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>`,
-    user: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <!-- Head circle -->
-  <circle cx="12" cy="8" r="4" fill="currentColor"/>
-  
-  <!-- Body shape -->
-  <path d="M20 19v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1c0-3.87 3.13-7 7-7h2c3.87 0 7 3.13 7 7z" fill="currentColor"/>
-</svg>`,
-    ai: `<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  viewBox="0 0 100 100" 
-  width="100" 
-  height="100" 
-  fill="none" 
-  stroke="black" 
-  stroke-width="2"
->
-  <!-- Brain outline -->
-  <path 
-    d="M50 10
-       C60 10, 70 20, 70 30
-       S60 50, 50 50
-       S30 40, 30 30
-       S40 10, 50 10Z"
-    fill="#B3E5FC"
-  />
-  
-  <!-- Circuit lines -->
-  <line x1="50" y1="50" x2="50" y2="70" stroke="#0288D1" stroke-width="2" />
-  <line x1="50" y1="70" x2="40" y2="80" stroke="#0288D1" stroke-width="2" />
-  <line x1="50" y1="70" x2="60" y2="80" stroke="#0288D1" stroke-width="2" />
-  
-  <!-- Nodes -->
-  <circle cx="50" cy="70" r="2" fill="#0288D1" />
-  <circle cx="40" cy="80" r="3" fill="#0288D1" />
-  <circle cx="60" cy="80" r="3" fill="#0288D1" />
-</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);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: IconsComponent, deps: [{ token: i1.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.DomSanitizer }], propDecorators: { name: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-
 function markdownToHtml(markdown) {
     const htmlArray = [];
     const lines = markdown.split('\n');
@@ -968,23 +872,307 @@ function markdownToHTML2(markdown) {
             result.push({ content: `<q>${quoteText}</q>`, tag: 'q', text: quoteText });
         }
     }
-    return result;
-}
-function removeEmojis(text) {
-    // This regex pattern matches emoji characters
-    return text.replace(/[\u{1F000}-\u{1F6FF}|\u{1F900}-\u{1F9FF}|\u{2600}-\u{26FF}|\u{2700}-\u{27BF}|\u{1F300}-\u{1F5FF}|\u{1F680}-\u{1F6FF}|\u{1F1E0}-\u{1F1FF}|\u{1F900}-\u{1F9FF}|\u{1F100}-\u{1F1FF}|\u{1F200}-\u{1F2FF}|\u{2100}-\u{26FF}]/gu, '');
-}
-function removeAllEmojis(text) {
-    // More comprehensive regex that catches:
-    // 1. Standard emojis
-    // 2. Emoji variations and modifiers
-    // 3. Symbol characters
-    // 4. Pictographs
-    // 5. Emoticons
-    // 6. Regional indicators
-    // 7. Flags
-    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, '');
+    return result;
+}
+function removeEmojis(text) {
+    // This regex pattern matches emoji characters
+    return text.replace(/[\u{1F000}-\u{1F6FF}|\u{1F900}-\u{1F9FF}|\u{2600}-\u{26FF}|\u{2700}-\u{27BF}|\u{1F300}-\u{1F5FF}|\u{1F680}-\u{1F6FF}|\u{1F1E0}-\u{1F1FF}|\u{1F900}-\u{1F9FF}|\u{1F100}-\u{1F1FF}|\u{1F200}-\u{1F2FF}|\u{2100}-\u{26FF}]/gu, '');
+}
+function removeAllEmojis(text) {
+    // More comprehensive regex that catches:
+    // 1. Standard emojis
+    // 2. Emoji variations and modifiers
+    // 3. Symbol characters
+    // 4. Pictographs
+    // 5. Emoticons
+    // 6. Regional indicators
+    // 7. Flags
+    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 = {
+    gear: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+     <path d="M12 1.75a1.25 1.25 0 0 1 1.25 1.25v.917a8.456 8.456 0 0 1 2.334.98l.645-.647a1.25 1.25 0 1 1 1.768 1.768l-.646.645c.389.69.729 1.437.98 2.334h.917a1.25 1.25 0 0 1 0 2.5h-.917a8.456 8.456 0 0 1-.98 2.334l.646.645a1.25 1.25 0 1 1-1.768 1.768l-.645-.646a8.456 8.456 0 0 1-2.334.98v.917a1.25 1.25 0 0 1-2.5 0v-.917a8.456 8.456 0 0 1-2.334-.98l-.645.646a1.25 1.25 0 1 1-1.768-1.768l.646-.645a8.456 8.456 0 0 1-.98-2.334H1.75a1.25 1.25 0 0 1 0-2.5h.917a8.456 8.456 0 0 1 .98-2.334l-.646-.645a1.25 1.25 0 1 1 1.768-1.768l.645.647c.69-.389 1.437-.729 2.334-.98V3a1.25 1.25 0 0 1 1.25-1.25h.083ZM12 7.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"/>
+    </svg>
+    `,
+    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>`,
+    user: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <!-- Head circle -->
+  <circle cx="12" cy="8" r="4" fill="currentColor"/>
+  
+  <!-- Body shape -->
+  <path d="M20 19v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1c0-3.87 3.13-7 7-7h2c3.87 0 7 3.13 7 7z" fill="currentColor"/>
+</svg>`,
+    ai: `<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  viewBox="0 0 100 100" 
+  width="100" 
+  height="100" 
+  fill="none" 
+  stroke="black" 
+  stroke-width="2"
+>
+  <!-- Brain outline -->
+  <path 
+    d="M50 10
+       C60 10, 70 20, 70 30
+       S60 50, 50 50
+       S30 40, 30 30
+       S40 10, 50 10Z"
+    fill="#B3E5FC"
+  />
+  
+  <!-- Circuit lines -->
+  <line x1="50" y1="50" x2="50" y2="70" stroke="#0288D1" stroke-width="2" />
+  <line x1="50" y1="70" x2="40" y2="80" stroke="#0288D1" stroke-width="2" />
+  <line x1="50" y1="70" x2="60" y2="80" stroke="#0288D1" stroke-width="2" />
+  
+  <!-- Nodes -->
+  <circle cx="50" cy="70" r="2" fill="#0288D1" />
+  <circle cx="40" cy="80" r="3" fill="#0288D1" />
+  <circle cx="60" cy="80" r="3" fill="#0288D1" />
+</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);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: IconsComponent, deps: [{ token: i1.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.DomSanitizer }], propDecorators: { name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class AudioTextSyncService {
+    constructor() {
+        // Signal-based API
+        this.highlightedWordsSignal = signal([]);
+        // Observable-based API
+        this.highlightedWords$ = new BehaviorSubject([]);
+        this.cleanup$ = new Subject();
+        this.activeAudio = null;
+        this.destroyRef = inject(DestroyRef);
+        // Ensure cleanup when service is destroyed
+        this.destroyRef.onDestroy(() => {
+            this.stopSync();
+        });
+    }
+    /**
+     * Synchronizes audio playback with text transcription
+     * @param audioElement The audio element to sync with
+     * @param transcriptionTimestamps Array of word timestamps
+     */
+    syncAudioWithText(audioElement, transcriptionTimestamps) {
+        // Stop any existing sync
+        this.stopSync();
+        this.activeAudio = audioElement;
+        // Initialize the highlighted words state
+        const initialWords = transcriptionTimestamps.map((word, index) => ({
+            word: word.word,
+            index,
+            isHighlighted: false,
+        }));
+        this.highlightedWordsSignal.set(initialWords);
+        this.highlightedWords$.next(initialWords);
+        // Listen to timeupdate events
+        fromEvent(audioElement, 'timeupdate')
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.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
+            this.highlightedWordsSignal.set(updatedWords);
+            this.highlightedWords$.next(updatedWords);
+        });
+        // Listen to ended event for cleanup
+        fromEvent(audioElement, 'ended')
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.cleanup$))
+            .subscribe(() => {
+            // Reset highlighting when audio ends
+            const resetWords = initialWords.map((word) => ({
+                ...word,
+                isHighlighted: false,
+            }));
+            this.highlightedWordsSignal.set(resetWords);
+            this.highlightedWords$.next(resetWords);
+        });
+    }
+    /**
+     * Stops the current sync and cleans up resources
+     */
+    stopSync() {
+        if (this.activeAudio) {
+            this.cleanup$.next();
+            this.activeAudio = null;
+            // Reset state
+            this.highlightedWordsSignal.set([]);
+            this.highlightedWords$.next([]);
+        }
+    }
+    /**
+     * Returns the current highlighted words as a signal
+     */
+    getHighlightedWordsSignal() {
+        return this.highlightedWordsSignal;
+    }
+    /**
+     * Returns the current highlighted words as an observable
+     */
+    getHighlightedWords$() {
+        return this.highlightedWords$.asObservable();
+    }
+    /**
+     * Checks if a word at a specific index is currently highlighted
+     * @param index The index of the word to check
+     */
+    isWordHighlighted(index) {
+        return this.highlightedWordsSignal().some((word) => word.index === index && word.isHighlighted);
+    }
+    /**
+     * Returns an observable that emits true when a word at a specific index is highlighted
+     * @param index The index of the word to observe
+     */
+    isWordHighlighted$(index) {
+        return this.highlightedWords$.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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AudioTextSyncService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class MessageContentComponent {
+    constructor(cdr, audioTextSyncService) {
+        this.cdr = cdr;
+        this.audioTextSyncService = audioTextSyncService;
+        this.isLoading = false;
+        this.playAudio = new EventEmitter();
+        // Get the highlighted words signal from the service
+        this.highlightedWords = this.audioTextSyncService.getHighlightedWordsSignal();
+        // 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();
+        });
+    }
+    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: [{ token: i0.ChangeDetectorRef }, { token: AudioTextSyncService }], 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<div style=\"display: flex\">\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading, message: message }\"></ng-container>\n  @for (wordState of highlightedWords(); track trackByIndex($index, wordState)) {\n  <span [class.highlight]=\"wordState.isHighlighted\">{{ wordState.word }}&nbsp;</span>\n  }\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]=\"messageTag\" [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()\">\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: MessageContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-message-content', standalone: true, imports: [CommonModule, IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Message with transcription -->\n@if (hasTranscription) {\n<div style=\"display: flex\">\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading, message: message }\"></ng-container>\n  @for (wordState of highlightedWords(); track trackByIndex($index, wordState)) {\n  <span [class.highlight]=\"wordState.isHighlighted\">{{ wordState.word }}&nbsp;</span>\n  }\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]=\"messageTag\" [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()\">\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: () => [{ type: i0.ChangeDetectorRef }, { type: AudioTextSyncService }], propDecorators: { message: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], playAudio: [{
+                type: Output
+            }] } });
 
 function markdownToHTML(markdownText) {
     // Convert italics-bold (***text***)
@@ -1045,44 +1233,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                 }]
         }] });
 
+class MultiMessageContentComponent {
+    constructor() {
+        this.isLoading = false;
+        this.playAudio = new EventEmitter();
+    }
+    onPlayMessage(message) {
+        this.playAudio.emit(message);
+    }
+    ngOnInit() {
+        console.log(this.messages);
+        debugger;
+    }
+    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 (!!message.transcriptionTimestamps) {\n<div style=\"display: flex\">\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading, message: message }\"></ng-container>\n  <span *ngFor=\"let word of message.transcriptionTimestamps\" [class.highlight]=\"word.highlighted\">{{ word.word }}</span>\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: MultiMessageContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-multi-message-content', standalone: true, imports: [CommonModule, IconsComponent, SimpleMdToHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (message of messages; track message) {\n<!-- Message with transcription -->\n@if (!!message.transcriptionTimestamps) {\n<div style=\"display: flex\">\n  <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading, message: message }\"></ng-container>\n  <span *ngFor=\"let word of message.transcriptionTimestamps\" [class.highlight]=\"word.highlighted\">{{ word.word }}</span>\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"] }]
+        }], 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]);
+        }
+    }
+    // Split the original text into an array of words
+    const words = originalText.split(' ');
+    let currentTime = 0;
+    for (const word of words) {
+        const lowercaseWord = word.toLowerCase();
+        const matchedObjs = transcriptionMap.get(lowercaseWord);
+        if (matchedObjs && matchedObjs.length > 0) {
+            const matchedObj = matchedObjs.shift();
+            result.push({
+                word: word,
+                start: Number(matchedObj.start.toFixed(3)),
+                end: Number(matchedObj.end.toFixed(3)),
+            });
+            currentTime = matchedObj.end;
+        }
+        else {
+            result.push({
+                word: word,
+                start: Number(currentTime.toFixed(3)),
+                end: Number(currentTime.toFixed(3)),
+            });
+        }
+    }
+    return result;
+}
+function extractAudioAndTranscription(message, audio) {
+    message.audioUrl = audio.blobUrl;
+    message.transcription = audio.transcription;
+    if (message.transcription) {
+        message.transcriptionTimestamps = matchTranscription(message.text || message.content, message.transcription.words);
+    }
+}
+
 class ChatMessageComponent {
-    constructor(audioService, agentCardService, cdr) {
+    constructor(audioService, agentCardService, audioTextSyncService) {
         this.audioService = audioService;
         this.agentCardService = agentCardService;
-        this.cdr = cdr;
-        this.isDestroyed = false;
-        // TODO: use the default settings when the user is not set
-        this.defaultconvUserSettings = {
-            realTime: false,
-            repeatRecording: false,
-            fixGrammar: false,
-            superHearing: false,
-            voice: '',
-            autoTranslate: false,
-            highlightWords: true,
-            synthVoice: true,
-            model: { modelName: null, provider: 'google' },
-            speed: null,
-            speedRate: null, // temporal
-        };
+        this.audioTextSyncService = audioTextSyncService;
+        this.destroyRef = inject(DestroyRef);
+        this.conversationChatSettings = signal(null);
+        this.isLoading = signal(false);
     }
     async ngOnInit() {
-        // this.conversationSettings = { ...this.conversationSettings, ...settings };
-        this.conversationChatSettings = await this.agentCardService.getConversationUserChatSettings();
-        if (this.chatMessage.role == ChatRole.AssistantHelper) {
+        const settings = await this.agentCardService.getConversationUserChatSettings();
+        this.conversationChatSettings.set(settings);
+        if (this.chatMessage.role === ChatRole.AssistantHelper) {
             return;
         }
-        if (this.chatMessage.role == ChatRole.User) {
-            if (this.conversationChatSettings?.repeatRecording && this.conversationChatSettings?.synthVoice) {
+        const settings$ = this.conversationChatSettings();
+        if (this.chatMessage.role === ChatRole.User) {
+            if (settings$?.repeatRecording && settings$?.synthVoice) {
                 this.playMessage(this.chatMessage);
             }
         }
-        else {
-            if (!this.conversationChatSettings?.synthVoice) {
-                return;
-            }
-            console.log(this.chatMessage.multiMessages);
-            // this is an assistant message
+        else if (settings$?.synthVoice) {
             if (this.chatMessage.multiMessages) {
                 this.generateAndPlayAllAudios(this.chatMessage.multiMessages);
             }
@@ -1091,173 +1335,244 @@ class ChatMessageComponent {
             }
         }
     }
-    ngOnDestroy() {
-        this.isDestroyed = true;
-    }
-    async generateAndPlayAudio(message, overwritetext = null) {
-        const text = overwritetext || message.content;
-        const ttsObject = this.getTTSRequest({ ...this.chatMessage, text });
-        if (message.ssml) {
-            ttsObject.ssml = message.ssml;
-        }
-        const speechAudio = await this.agentCardService.getTextAudioFile(ttsObject);
-        this.extractAudioAndTranscription(message, speechAudio);
-        this.playMessage(message);
-        //  TODO: cuando no sirve el server utilizar esta voz del navegador
-        //  else if (this.selectedAudioType === 'default') {
-        //   await this.speechService.speach(message.content, { speed: 1, tone: 0.9 });
-        // }
-    }
-    extractAudioAndTranscription(message, audio) {
-        message.audioUrl = audio.blobUrl;
-        message.transcription = audio.transcription;
-        if (message.transcription) {
-            message.transcriptionTimestamps = this.matchTranscription(message.text || message.content, message.transcription.words);
+    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) {
-        console.log('playMessage', message);
-        if (message.audioUrl) {
-            const audioHtml = this.audioService.playAudio(message.audioUrl);
-            message['audioHtml'] = audioHtml;
-            this.subscribeToTimeUpdate(audioHtml, message.transcriptionTimestamps);
-            return audioHtml;
+        if (!message.audioUrl) {
+            return null;
         }
-        else {
-            // this.speechService.speach(message.content);
+        const audioElement = this.audioService.playAudio(message.audioUrl);
+        message['audioHtml'] = audioElement;
+        if (message.transcriptionTimestamps) {
+            // Use the audio-text sync service instead of direct manipulation
+            this.audioTextSyncService.syncAudioWithText(audioElement, message.transcriptionTimestamps);
         }
-        return null;
+        return audioElement;
     }
-    subscribeToTimeUpdate(audioHtml, transcriptionTimestamps = null) {
-        console.log('subscribing to time updates', audioHtml, transcriptionTimestamps);
-        if (transcriptionTimestamps) {
-            audioHtml.ontimeupdate = (time) => {
-                transcriptionTimestamps.forEach((word) => {
-                    word.highlighted = audioHtml.currentTime >= word.start - 0.15 && audioHtml.currentTime < word.end + 0.15;
-                    console.log('highliting word', word, 'enable detecting');
-                    this.cdr.detectChanges();
-                });
-            };
-        }
-        audioHtml.onended = () => {
-            audioHtml.ontimeupdate = null;
-            audioHtml = null;
-            // this.chatBroker.currentMessagePlayed$.next(true);
-        };
+    // 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 (this.isDestroyed)
-                return;
             if (currentIndex >= multiMessages.length) {
-                console.log('All audio files have been played.');
                 return;
             }
-            const msn = multiMessages[currentIndex];
-            // Audio is processed in ahead at last, first time will wait for audio,  the rest is only wait,
-            if (!msn.audioUrl) {
-                if (msn.audioPromise) {
-                    await msn.audioPromise;
+            const currentMessage = multiMessages[currentIndex];
+            currentMessage.isLoading = true;
+            try {
+                debugger;
+                // 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 {
-                    const request = this.getTTSRequest(msn);
-                    msn.isLoading = true;
-                    this.cdr.detectChanges();
-                    msn.audioPromise = this.agentCardService.getTextAudioFile(request);
-                    const audio = await msn.audioPromise;
-                    this.extractAudioAndTranscription(msn, audio);
-                    msn.isLoading = false;
-                    this.cdr.detectChanges();
+                    // If playback failed, move to next message
+                    currentIndex++;
+                    playAudioSequentially();
                 }
+                // Preload next message audio
+                this.preloadNextMessageAudio(multiMessages, currentIndex);
             }
-            const audioHtml = this.playMessage(msn);
-            audioHtml.onended = () => {
-                currentIndex++;
-                playAudioSequentially();
-            };
-            // Load the next audio file in advance
-            if (currentIndex + 1 < multiMessages.length) {
-                const nextMessage = multiMessages[currentIndex + 1];
-                const request = this.getTTSRequest(nextMessage);
+            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) => {
-                    this.extractAudioAndTranscription(nextMessage, audio);
+                    extractAudioAndTranscription(nextMessage, audio);
                     nextMessage.isLoading = false;
                 });
             }
-        };
-        playAudioSequentially();
+        }
     }
-    getTTSRequest(nextMessage) {
-        // const settingsConv = this.userService.getUserSnapshot().settings.conversation;
-        const generateTranscription = this.conversationChatSettings?.highlightWords ?? false;
-        const speedRate = this.conversationChatSettings?.speedRate || 0;
-        const speed = typeof this.conversationChatSettings?.speed === 'string' ? this.conversationChatSettings.speed : AudioSpeed.Regular;
-        const text = removeEmojis(nextMessage.text);
-        const data = {
-            text: text,
-            voice: nextMessage.voice || this.chatMessage.voice,
+    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,
         };
-        return data;
-    }
-    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(' ');
-        let currentTime = 0;
-        for (const word of words) {
-            const lowercaseWord = word.toLowerCase();
-            const matchedObjs = transcriptionMap.get(lowercaseWord);
-            if (matchedObjs && matchedObjs.length > 0) {
-                const matchedObj = matchedObjs.shift();
-                result.push({
-                    word: word,
-                    start: matchedObj.start,
-                    end: matchedObj.end,
-                });
-                currentTime = matchedObj.end;
-            }
-            else {
-                result.push({
-                    word: word,
-                    start: currentTime,
-                    end: currentTime,
-                });
-            }
-        }
-        return result;
     }
-    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: i0.ChangeDetectorRef }], 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: "<span *ngIf=\"chatMessage?.multiMessages\">\n  <span style=\"line-height: 1.5\" *ngFor=\"let message of chatMessage.multiMessages\">\n    <div [ngClass]=\"message.tag\" *ngIf=\"message.transcriptionTimestamps\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: message.isLoading, message: message }\"></ng-container>\n      <span *ngFor=\"let word of message.transcriptionTimestamps\" [class.highlight]=\"word.highlighted\">\n        {{ word.word }}\n      </span>\n    </div>\n\n    <div *ngIf=\"!message.transcriptionTimestamps\">\n      <div (click)=\"playMessage(message)\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: message.isLoading, message: message }\"></ng-container>\n        <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text\"> </span>\n      </div>\n    </div>\n  </span>\n</span>\n\n@if (!chatMessage?.multiMessages) {\n<span>\n  @if (chatMessage.transcriptionTimestamps) {\n  <div>\n    <span *ngFor=\"let word of chatMessage.transcriptionTimestamps\" [class.highlight]=\"word.highlighted\">\n      {{ word.word }}\n    </span>\n  </div>\n\n  @if (!chatMessage.transcriptionTimestamps) {\n  <div>\n    <span (click)=\"playMessage(chatMessage)\" [innerHTML]=\"chatMessage.content | simpleMdToHtml\"></span>\n  </div>\n  }}\n</span>\n}\n\n<div class=\"small\" *ngIf=\"chatMessage.translation\">\n  <hr class=\"divider\" />\n  {{ chatMessage.translation }}\n</div>\n\n<ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n  <i *ngIf=\"isLoading\" (click)=\"playMessage(message)\">\n    <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon>\n  </i>\n\n  <i *ngIf=\"!isLoading\" (click)=\"playMessage(message)\">\n    <dc-icon name=\"play\"></dc-icon>\n  </i>\n</ng-template>\n", styles: [":host{display:block}.highlight{background-color:#fff8a7;color:#011630;text-decoration:underline #59a4ff solid 3px}::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}.small{margin-top:8x;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid #ffa77e}.spin-animation{display:inline-block;animation:spin 2s linear infinite;transform-origin:center center;transform-box:fill-box;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }, { kind: "pipe", type: SimpleMdToHtmlPipe, name: "simpleMdToHtml" }] }); }
+    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, IconsComponent, SimpleMdToHtmlPipe], template: "<span *ngIf=\"chatMessage?.multiMessages\">\n  <span style=\"line-height: 1.5\" *ngFor=\"let message of chatMessage.multiMessages\">\n    <div [ngClass]=\"message.tag\" *ngIf=\"message.transcriptionTimestamps\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: message.isLoading, message: message }\"></ng-container>\n      <span *ngFor=\"let word of message.transcriptionTimestamps\" [class.highlight]=\"word.highlighted\">\n        {{ word.word }}\n      </span>\n    </div>\n\n    <div *ngIf=\"!message.transcriptionTimestamps\">\n      <div (click)=\"playMessage(message)\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: message.isLoading, message: message }\"></ng-container>\n        <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text\"> </span>\n      </div>\n    </div>\n  </span>\n</span>\n\n@if (!chatMessage?.multiMessages) {\n<span>\n  @if (chatMessage.transcriptionTimestamps) {\n  <div>\n    <span *ngFor=\"let word of chatMessage.transcriptionTimestamps\" [class.highlight]=\"word.highlighted\">\n      {{ word.word }}\n    </span>\n  </div>\n\n  @if (!chatMessage.transcriptionTimestamps) {\n  <div>\n    <span (click)=\"playMessage(chatMessage)\" [innerHTML]=\"chatMessage.content | simpleMdToHtml\"></span>\n  </div>\n  }}\n</span>\n}\n\n<div class=\"small\" *ngIf=\"chatMessage.translation\">\n  <hr class=\"divider\" />\n  {{ chatMessage.translation }}\n</div>\n\n<ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n  <i *ngIf=\"isLoading\" (click)=\"playMessage(message)\">\n    <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon>\n  </i>\n\n  <i *ngIf=\"!isLoading\" (click)=\"playMessage(message)\">\n    <dc-icon name=\"play\"></dc-icon>\n  </i>\n</ng-template>\n", styles: [":host{display:block}.highlight{background-color:#fff8a7;color:#011630;text-decoration:underline #59a4ff solid 3px}::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}.small{margin-top:8x;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid #ffa77e}.spin-animation{display:inline-block;animation:spin 2s linear infinite;transform-origin:center center;transform-box:fill-box;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            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: i0.ChangeDetectorRef }], propDecorators: { chatMessage: [{
+                }] }, { type: AudioTextSyncService }], propDecorators: { chatMessage: [{
                 type: Input
             }], chatUserSettings: [{
                 type: Input
             }] } });
 
+class ChatHeaderComponent {
+    constructor(agentCardService) {
+        this.agentCardService = agentCardService;
+        this.isAdmin = false;
+        this.alternativeConversation = [];
+        this.restartConversationEvent = new EventEmitter();
+        this.showInfoEvent = new EventEmitter();
+        this.settingsClickEvent = new EventEmitter();
+    }
+    restartConversation(conversation = null) {
+        this.restartConversationEvent.emit(conversation);
+    }
+    showInfo() {
+        this.showInfoEvent.emit();
+    }
+    settingsClick() {
+        this.settingsClickEvent.emit();
+    }
+    async changeConversationCard() {
+        const response = prompt('¿Qué conversación quieres usar? Escribe el titulo ejemplo: word_reflection_level_1_base_es');
+        if (response) {
+            const filters = {
+                filters: {
+                    title: { $regex: response },
+                },
+            };
+            console.log('filters', filters);
+            const conversationCards = await this.agentCardService.filterConversationCards(filters);
+            console.log('conversationCards', conversationCards);
+            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" }, outputs: { restartConversationEvent: "restartConversationEvent", showInfoEvent: "showInfoEvent", settingsClickEvent: "settingsClickEvent" }, ngImport: i0, template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">Reiniciar conversaci\u00F3n</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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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()\">Reiniciar conversaci\u00F3n</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: [{
+                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$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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
+            }] } });
+
 const SpeedDescription = {
     1: 'Muy Lento',
     2: 'Lento',
@@ -1348,7 +1663,7 @@ 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: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i3.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: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.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.ɵ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$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.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: i4$1.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ProviderSelectorComponent, decorators: [{
             type: Component,
@@ -1420,8 +1735,8 @@ 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$2.DynamicDialogRef }, { token: i1$1.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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.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$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: 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.1.1", ngImport: i0, type: DCConversationUserChatSettingsComponent, deps: [{ token: i1$3.DynamicDialogRef }, { token: i1$2.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i3$1.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: SpeedDescPipe, name: "speedDisplay" }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i8.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: ProviderSelectorComponent, selector: "dc-provider-selector", inputs: ["parentForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCConversationUserChatSettingsComponent, decorators: [{
             type: Component,
@@ -1440,7 +1755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         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$2.DynamicDialogRef }, { type: i1$1.FormBuilder }, { type: AgentCardsAbstractService, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.DynamicDialogRef }, { type: i1$2.FormBuilder }, { type: AgentCardsAbstractService, decorators: [{
                     type: Inject,
                     args: [CONVERSATION_AI_TOKEN]
                 }] }], propDecorators: { showFeature: [{
@@ -1477,6 +1792,7 @@ const DefaultEvaluatorAgentCard = {
     model: { id: 'gpt-4o-mini', provider: 'openai' },
     sources: [],
 };
+
 class DCChatComponent {
     constructor(agentCardService, toastService, conversationBuilder, dialogService, cdr) {
         this.agentCardService = agentCardService;
@@ -1491,11 +1807,9 @@ class DCChatComponent {
         this.thinkingImg = `data:image/svg+xml;base64,${btoa(decodeURIComponent(ICONS.gear))}`;
         this.isDestroyed = false;
         this.score = 10;
-        // @ViewChild('textSelectedDiv') textSelectedDiv!: ElementRef;
-        // get viewChild to the app-mic
-        // @ViewChild(MicComponent) micComponent: MicComponent;
+        this.isAdmin = true;
         this.isChatSettingsVisible = false;
-        this.chatInputControl = new FormControl();
+        // chatInputControl moved to ChatFooterComponent
         this.isAIThinking = false;
         this.isUserTalking = false;
         this.aiIcon = `data:image/svg+xml;base64,${btoa(decodeURIComponent(ICONS.ai))}`;
@@ -1523,7 +1837,10 @@ class DCChatComponent {
         this.isInfoVisible = false;
     }
     async ngOnInit() {
-        this.defaultVoice = this.getVoice(this.agentCard.conversationSettings.voice);
+        if (!this.agentCard?.conversationSettings) {
+            throw new Error('Conversation settings are required');
+        }
+        this.defaultVoice = this.getVoice(this.agentCard?.conversationSettings?.voice);
         // This method overrides the conversationSettings of the agentCard so message will be there.
         this.conversationSettings = this.conversationBuilder.buildConversationSettings(this.agentCard, this.parseDict);
         this.agentCard.conversationSettings = this.conversationSettings; // Save a copy here.
@@ -1575,7 +1892,7 @@ class DCChatComponent {
         }
         return message;
     }
-    settingsClick() {
+    changeUserChatSettings() {
         this.dialogService
             .open(DCConversationUserChatSettingsComponent, {
             width: '90vw',
@@ -1608,12 +1925,8 @@ class DCChatComponent {
         if (this.isAIThinking) {
             return;
         }
-        if (!message || !message.content) {
-            const text = this.chatInputControl.value;
-            if (!text) {
-                return;
-            }
-            message = { content: text, role: ChatRole.User };
+        if (!message) {
+            return;
         }
         this.messages.push(message); // This activates the render of the message
         // ESTO debe ser una especie de plugin.
@@ -1623,7 +1936,7 @@ class DCChatComponent {
         //     this.messages.push({ content: res.text, role: ChatRole.AssistantHelper });
         //   });
         // }
-        this.chatInputControl.setValue('');
+        // Input clearing is now handled by the chat-footer component
         this.setAIthinking();
         try {
             // if (this.chatboxService.fakeConversations.length > 0) {
@@ -1725,7 +2038,8 @@ class DCChatComponent {
         }
     }
     setInputText(text) {
-        this.chatInputControl.setValue(text);
+        // Method now receives text from the chat-footer component
+        // No need to set the value as it's handled in the child component
     }
     async micFinished(eventBlob) {
         if (eventBlob instanceof Blob) {
@@ -1761,10 +2075,6 @@ class DCChatComponent {
         //   this.speechService.speach(message.content);
         // }
     }
-    // public restartConversation() {
-    //   this.messages = [];
-    //   this.messages.length;
-    // }
     // public someTextSelected(event) {
     //   console.log('someTextSelected', event);
     //   this.wordMenuService.showMenu(event.position, event.text);
@@ -1799,24 +2109,9 @@ class DCChatComponent {
         console.log('chatUserSettings', this.chatUserSettings);
         this.isInfoVisible = true;
     }
-    async changeConversationCard() {
-        const response = prompt('¿Qué conversación quieres usar? Escribe el titulo ejemplo: word_reflection_level_1_base_es');
-        if (response) {
-            const filters = {
-                filters: {
-                    title: { $regex: response },
-                },
-            };
-            console.log('filters', filters);
-            const conversationCards = await this.agentCardService.filterConversationCards(filters);
-            console.log('conversationCards', conversationCards);
-            this.alternativeConversation = conversationCards.rows;
-        }
-    }
     async restartConversation(conversation = null) {
         if (conversation) {
             this.agentCard = conversation;
-            // this.conversationSettings = this.promptBuilder.buildConversationSettings(this.conversationCard, this.parseDict);
         }
         await this.ngOnInit();
     }
@@ -1863,19 +2158,29 @@ and give the response in next JSON format.
         }
         console.log('response', response);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCChatComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: TOAST_ALERTS_TOKEN }, { token: DCConversationPromptBuilderService }, { token: i1$2.DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: "chatUserSettings", agentCard: "agentCard", evaluatorAgentCard: "evaluatorAgentCard", parseDict: "parseDict" }, outputs: { sendMessage: "sendMessage" }, providers: [DialogService], ngImport: i0, template: "<div style=\"display: flex; justify-content: space-between\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">Reiniciar conversaci\u00F3n</span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div style=\"font-size: large\">\n    <span class=\"pointer\" (click)=\"changeConversationCard()\"> \uD83D\uDD04 </span>\n\n    <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span>\n\n    <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n  </div>\n</div>\n<div class=\"chat-container\" (touchmove)=\"$event.stopPropagation()\">\n  <ul class=\"chat\">\n    <ng-container *ngFor=\"let msn of messages\">\n      <li *ngIf=\"msn.role == 'assistant'\" class=\"message left\">\n        <img (click)=\"playMessage(msn)\" class=\"logo fit-top-image\" [src]=\"agentCard?.assets?.image?.url ?? imageUser\" />\n\n        <dc-chat-message [chatUserSettings]=\"chatUserSettings\" appTextSelectable [chatMessage]=\"msn\"></dc-chat-message>\n      </li>\n\n      <li *ngIf=\"msn.role == 'assistantHelper'\" class=\"message-helper right\">\n        <dc-chat-message [chatUserSettings]=\"chatUserSettings\" appTextSelectable [chatMessage]=\"msn\"></dc-chat-message>\n      </li>\n\n      <li *ngIf=\"msn.role == 'user'\" class=\"message right\">\n        <img (click)=\"playMessage(msn)\" class=\"logo\" [src]=\"user?.urlPicture || imageUser\" alt=\"\" style=\"object-fit: cover; object-position: top\" />\n        <dc-chat-message appTextSelectable [chatMessage]=\"msn\"></dc-chat-message>\n      </li>\n    </ng-container>\n\n    @if (isAIThinking) {\n    <li class=\"message left\">\n      <img class=\"logo fit-top-image\" [src]=\"agentCard?.assets?.image?.url ?? aiIcon\" />\n\n      <span style=\"font-size: 1.5em; position: absolute; left: 20px; bottom: -5px\">\uD83E\uDD14</span>\n\n      <div class=\"flex\">\n        <!-- <p-skeleton shape=\"circle\" size=\"4rem\" styleClass=\"mr-2\" /> -->\n        <div class=\"self-center\" style=\"flex: 1\">\n          <p-skeleton width=\"100%\" styleClass=\"mb-2\" />\n          <p-skeleton width=\"75%\" />\n        </div>\n      </div>\n    </li>\n    }\n\n    <li *ngIf=\"isUserTalking || isGettingTranscription\" class=\"message right\">\n      <img class=\"logo fit-top-image\" [src]=\"user?.urlPicture || imageUser\" alt=\"\" />\n      @if (isUserTalking) {\n      <p> ... </p>\n      } @if (isGettingTranscription) {\n      <i class=\"pi pi-spin pi-spinner-dotted\"></i>\n      }\n    </li>\n  </ul>\n\n  <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      <textarea class=\"text-fix white-background\" [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n      <button [disabled]=\"isAIThinking || !chatInputControl.value\" (click)=\"sendUserMessage()\" class=\"send-button\"> Enviar </button>\n    </div>\n\n    <div>\n      <p-progressbar showValue=\"false\" [value]=\"score\" [style]=\"{ height: '6px' }\" />\n    </div>\n  </div>\n</div>\n\n<p-dialog header=\"Informaci\u00F3n de la conversaci\u00F3n\" [(visible)]=\"isInfoVisible\" [modal]=\"true\">\n  <p> <strong> Modelo: </strong> {{ this.chatUserSettings?.model?.provider }} - {{ this.chatUserSettings?.model?.modelName }} </p>\n\n  <p>\n    <strong> Tipo : </strong> {{ agentCard?.conversationSettings?.conversationType }} <strong> Text Engine: </strong>\n    {{ agentCard?.conversationSettings?.textEngine }}\n  </p>\n\n  <p>\n    <strong> Language: </strong> {{ agentCard?.lang }} <strong> TTS: </strong> {{ agentCard?.tts?.voice }} <strong> Secondary TTS: </strong>\n    {{ agentCard?.tts?.secondaryVoice }}\n  </p>\n\n  <p> <strong> Parametros: </strong> {{ parseDict | json }} </p>\n  <hr />\n  <h5>Conversaci\u00F3n hasta ahora</h5>\n\n  <div *ngFor=\"let message of conversationSettings.messages\">\n    <p\n      ><strong>{{ message.role }}: </strong> {{ message.content }}</p\n    >\n  </div>\n</p-dialog>\n", styles: [".top-5{margin-top:10px}.logo{width:30px;height:30px}.white-background{background-color:#fff}.selectable{z-index:1;position:fixed;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:transparent;border-radius:20px;display:block;padding:3px}*{box-sizing:border-box}.background1{background:url(/assets/background/default-background.webp);background-size:cover;background-position:center center;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:0px;overflow:auto;max-height:500px}h2{text-shadow:1px 1px 2px rgb(0,0,0);color:#fff;letter-spacing:1px;text-transform:uppercase;text-align:center}.chat-container{border-radius:10px;overflow:hidden;padding:15px;position:relative;max-width:100%;height:100%;display:flex;flex-direction:column}.chat{display:flex;flex-direction:column;list-style-type:none;padding:0;margin:0;overflow-y:auto;flex:1}.message-helper{background-color:#ffffffe6;box-shadow:0 7px 5px #00000080;position:relative;margin-bottom:30px}.message-helper.right{align-self:flex-end;padding:4px 45px 4px 15px}.message{background-color:#f6f6f6e6;border-radius:50px;box-shadow:7px 11px 14px #00000080;position:relative;margin-bottom:30px}.message .logo{position:absolute;top:50%;transform:translateY(-50%);border-radius:50%}.message .fit-top-image{object-fit:cover;object-position:top}.message.left{padding:10px 15px 10px 45px}.message.left .logo{left:5px}.message.right{align-self:flex-end;padding:10px 45px 10px 15px}.message.right .logo{right:5px}.input-container{margin-top:auto;display:flex;gap:10px;padding-top:15px;background:inherit}.input-container textarea{flex:1;padding:8px;border-radius:20px;border:1px solid #ccc;resize:none}.input-container .send-button{padding:8px 15px;border-radius:20px;border:none;background:#007bff;color:#fff;cursor:pointer}.input-container .send-button:disabled{background:#ccc;cursor:not-allowed}::ng-deep .cdk-overlay-container{z-index:1400}::ng-deep .cdk-global-overlay-wrapper{z-index:1400}::ng-deep .dialog-backdrop{background:#00000080;z-index:1299}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: ChatMessageComponent, selector: "dc-chat-message", inputs: ["chatMessage", "chatUserSettings"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["isDone", "useWhisper", "targetOrBase", "micSettings"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6$1.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: i7$2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCChatComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: TOAST_ALERTS_TOKEN }, { token: DCConversationPromptBuilderService }, { token: i1$3.DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: "chatUserSettings", agentCard: "agentCard", evaluatorAgentCard: "evaluatorAgentCard", parseDict: "parseDict" }, outputs: { sendMessage: "sendMessage" }, providers: [DialogService], ngImport: i0, template: "<dc-chat-header\n  [isAdmin]=\"isAdmin\"\n  [alternativeConversation]=\"alternativeConversation\"\n  (restartConversationEvent)=\"restartConversation($event || null)\"\n  (showInfoEvent)=\"showInfo()\"\n  (settingsClickEvent)=\"changeUserChatSettings()\">\n</dc-chat-header>\n\n<main class=\"chat-container\" (touchmove)=\"$event.stopPropagation()\">\n  <div class=\"chat\" aria-live=\"polite\">\n    @for (message of messages; track message) { @switch (message.role) { @case ('assistant') {\n    <div class=\"message left\">\n      <img class=\"logo fit-top-image\" [src]=\"agentCard?.assets?.image?.url ?? imageUser\" (click)=\"playMessage(message)\" />\n      <dc-chat-message [chatUserSettings]=\"chatUserSettings\" [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } @case ('assistantHelper') {\n    <div class=\"message-helper right\">\n      <dc-chat-message [chatUserSettings]=\"chatUserSettings\" [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } @case ('user') {\n    <div class=\"message right\">\n      <img class=\"logo fit-top-image\" [src]=\"user?.urlPicture || 'assets/defaults/avatar.jpg'\" [alt]=\"'User avatar'\" (click)=\"playMessage(message)\" />\n      <dc-chat-message [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } } }\n\n    <!-- AI thinking indicator -->\n    @if (isAIThinking) {\n    <div class=\"message message--assistant message--thinking\">\n      <span class=\"thinking-emoji\" aria-hidden=\"true\">\uD83E\uDD14</span>\n      <div class=\"thinking-indicator\">\n        <div class=\"skeleton-container\">\n          <p-skeleton width=\"100%\" />\n          <br />\n          <p-skeleton width=\"75%\" />\n        </div>\n      </div>\n    </div>\n    }\n\n    <!-- User typing or transcribing indicator -->\n    @if (isUserTalking || isGettingTranscription) {\n    <div class=\"message message--user message--activity\">\n      <img class=\"avatar avatar--user\" [src]=\"user?.urlPicture || imageUser\" [alt]=\"'User avatar'\" />\n      @if (isUserTalking) {\n      <p class=\"typing-indicator\" aria-label=\"User is speaking\">...</p>\n      } @if (isGettingTranscription) {\n      <i class=\"pi pi-spin pi-spinner-dotted\" aria-label=\"Transcribing speech\"></i>\n      }\n    </div>\n    }\n  </div>\n</main>\n\n<dc-chat-footer\n  [isAIThinking]=\"isAIThinking\"\n  [score]=\"score\"\n  [micSettings]=\"micSettings\"\n  (sendMessage)=\"sendUserMessage($event)\"\n  (textInputChanged)=\"setInputText($event)\"\n  (micFinishedEvent)=\"micFinished($event)\">\n</dc-chat-footer>\n\n<!-- Information dialog -->\n<p-dialog\n  header=\"Informaci\u00F3n de la conversaci\u00F3n\"\n  [(visible)]=\"isInfoVisible\"\n  [modal]=\"true\"\n  [responsive]=\"true\"\n  styleClass=\"conversation-info-dialog\"\n  aria-labelledby=\"conversation-info-title\">\n  <div class=\"dialog-content\">\n    <section class=\"model-info\">\n      <h3 id=\"conversation-info-title\" class=\"sr-only\">Informaci\u00F3n de la conversaci\u00F3n</h3>\n      <dl class=\"info-list\">\n        <dt>Modelo:</dt>\n        <dd>{{ chatUserSettings?.model?.provider }} - {{ chatUserSettings?.model?.modelName }}</dd>\n\n        <dt>Tipo:</dt>\n        <dd>{{ agentCard?.conversationSettings?.conversationType }}</dd>\n\n        <dt>Text Engine:</dt>\n        <dd>{{ agentCard?.conversationSettings?.textEngine }}</dd>\n\n        <dt>Language:</dt>\n        <dd>{{ agentCard?.lang }}</dd>\n\n        <dt>TTS:</dt>\n        <dd>{{ agentCard?.conversationSettings?.tts?.voice }}</dd>\n\n        <dt>Secondary TTS:</dt>\n        <dd>{{ agentCard?.conversationSettings?.tts?.secondaryVoice }}</dd>\n      </dl>\n\n      <div class=\"parameters\">\n        <h4>Par\u00E1metros:</h4>\n        <pre>{{ parseDict | json }}</pre>\n      </div>\n    </section>\n\n    <section class=\"conversation-history\">\n      <h4>Conversaci\u00F3n hasta ahora</h4>\n      <div class=\"message-history-list\">\n        @for (message of conversationSettings.messages; track message) {\n        <div class=\"message-history-item\">\n          <span class=\"message-role\">{{ message.role }}:</span>\n          <span class=\"message-content\">{{ message.content }}</span>\n        </div>\n        }\n      </div>\n    </section>\n  </div>\n</p-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%}*{box-sizing:border-box}.chat-container{border-radius:10px;overflow:hidden;padding:15px;position:relative;max-width:100%;height:100%;display:flex;flex-direction:column}.chat{display:flex;flex-direction:column;list-style-type:none;padding:0;margin:0;overflow-y:auto;flex:1}.logo{width:30px;height:30px}.logo.fit-top-image{object-fit:cover;object-position:top;border-radius:50%}.message{background-color:#f6f6f6f2;border-radius:25px;box-shadow:0 5px 15px #0000001a;position:relative;margin-bottom:20px;transition:all .2s ease}.message .logo{position:absolute;top:50%;transform:translateY(-50%);border-radius:50%;cursor:pointer}.message .logo:hover{transform:translateY(-50%) scale(1.05)}.message.left{padding:12px 15px 12px 45px;margin-right:20%}.message.left .logo{left:5px}.message.right{align-self:flex-end;padding:12px 45px 12px 15px;margin-left:20%;background-color:#e6f0fff2}.message.right .logo{right:5px}.message--thinking,.message--activity{opacity:.7}.message-helper{background-color:#ffffffe6;box-shadow:0 3px 10px #0000001a;position:relative;margin-bottom:20px;border-radius:20px}.message-helper.right{align-self:flex-end;padding:8px 15px;margin-left:20%}.thinking-indicator{padding:5px}.thinking-indicator .skeleton-container{width:200px}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{z-index:1400}::ng-deep .dialog-backdrop{background:#00000080;z-index:1299}::ng-deep .conversation-info-dialog .dialog-content{max-height:70vh;overflow-y:auto}::ng-deep .conversation-info-dialog .info-list{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-bottom:20px}::ng-deep .conversation-info-dialog .info-list dt{font-weight:700}::ng-deep .conversation-info-dialog .message-history-list{max-height:300px;overflow-y:auto;border:1px solid #eee;border-radius:5px;padding:10px}::ng-deep .conversation-info-dialog .message-history-list .message-history-item{padding:5px 0;border-bottom:1px solid #f0f0f0}::ng-deep .conversation-info-dialog .message-history-list .message-history-item:last-child{border-bottom:none}::ng-deep .conversation-info-dialog .message-history-list .message-history-item .message-role{font-weight:700;margin-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ChatMessageComponent, selector: "dc-chat-message", inputs: ["chatMessage", "chatUserSettings"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["isAdmin", "alternativeConversation"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "score", "micSettings"], outputs: ["sendMessage", "textInputChanged", "micFinishedEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, FormsModule, ChatMessageComponent, ReactiveFormsModule, SkeletonModule, DCMicComponent, DialogModule, ProgressBarModule], providers: [DialogService], template: "<div style=\"display: flex; justify-content: space-between\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">Reiniciar conversaci\u00F3n</span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div style=\"font-size: large\">\n    <span class=\"pointer\" (click)=\"changeConversationCard()\"> \uD83D\uDD04 </span>\n\n    <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span>\n\n    <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n  </div>\n</div>\n<div class=\"chat-container\" (touchmove)=\"$event.stopPropagation()\">\n  <ul class=\"chat\">\n    <ng-container *ngFor=\"let msn of messages\">\n      <li *ngIf=\"msn.role == 'assistant'\" class=\"message left\">\n        <img (click)=\"playMessage(msn)\" class=\"logo fit-top-image\" [src]=\"agentCard?.assets?.image?.url ?? imageUser\" />\n\n        <dc-chat-message [chatUserSettings]=\"chatUserSettings\" appTextSelectable [chatMessage]=\"msn\"></dc-chat-message>\n      </li>\n\n      <li *ngIf=\"msn.role == 'assistantHelper'\" class=\"message-helper right\">\n        <dc-chat-message [chatUserSettings]=\"chatUserSettings\" appTextSelectable [chatMessage]=\"msn\"></dc-chat-message>\n      </li>\n\n      <li *ngIf=\"msn.role == 'user'\" class=\"message right\">\n        <img (click)=\"playMessage(msn)\" class=\"logo\" [src]=\"user?.urlPicture || imageUser\" alt=\"\" style=\"object-fit: cover; object-position: top\" />\n        <dc-chat-message appTextSelectable [chatMessage]=\"msn\"></dc-chat-message>\n      </li>\n    </ng-container>\n\n    @if (isAIThinking) {\n    <li class=\"message left\">\n      <img class=\"logo fit-top-image\" [src]=\"agentCard?.assets?.image?.url ?? aiIcon\" />\n\n      <span style=\"font-size: 1.5em; position: absolute; left: 20px; bottom: -5px\">\uD83E\uDD14</span>\n\n      <div class=\"flex\">\n        <!-- <p-skeleton shape=\"circle\" size=\"4rem\" styleClass=\"mr-2\" /> -->\n        <div class=\"self-center\" style=\"flex: 1\">\n          <p-skeleton width=\"100%\" styleClass=\"mb-2\" />\n          <p-skeleton width=\"75%\" />\n        </div>\n      </div>\n    </li>\n    }\n\n    <li *ngIf=\"isUserTalking || isGettingTranscription\" class=\"message right\">\n      <img class=\"logo fit-top-image\" [src]=\"user?.urlPicture || imageUser\" alt=\"\" />\n      @if (isUserTalking) {\n      <p> ... </p>\n      } @if (isGettingTranscription) {\n      <i class=\"pi pi-spin pi-spinner-dotted\"></i>\n      }\n    </li>\n  </ul>\n\n  <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      <textarea class=\"text-fix white-background\" [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n      <button [disabled]=\"isAIThinking || !chatInputControl.value\" (click)=\"sendUserMessage()\" class=\"send-button\"> Enviar </button>\n    </div>\n\n    <div>\n      <p-progressbar showValue=\"false\" [value]=\"score\" [style]=\"{ height: '6px' }\" />\n    </div>\n  </div>\n</div>\n\n<p-dialog header=\"Informaci\u00F3n de la conversaci\u00F3n\" [(visible)]=\"isInfoVisible\" [modal]=\"true\">\n  <p> <strong> Modelo: </strong> {{ this.chatUserSettings?.model?.provider }} - {{ this.chatUserSettings?.model?.modelName }} </p>\n\n  <p>\n    <strong> Tipo : </strong> {{ agentCard?.conversationSettings?.conversationType }} <strong> Text Engine: </strong>\n    {{ agentCard?.conversationSettings?.textEngine }}\n  </p>\n\n  <p>\n    <strong> Language: </strong> {{ agentCard?.lang }} <strong> TTS: </strong> {{ agentCard?.tts?.voice }} <strong> Secondary TTS: </strong>\n    {{ agentCard?.tts?.secondaryVoice }}\n  </p>\n\n  <p> <strong> Parametros: </strong> {{ parseDict | json }} </p>\n  <hr />\n  <h5>Conversaci\u00F3n hasta ahora</h5>\n\n  <div *ngFor=\"let message of conversationSettings.messages\">\n    <p\n      ><strong>{{ message.role }}: </strong> {{ message.content }}</p\n    >\n  </div>\n</p-dialog>\n", styles: [".top-5{margin-top:10px}.logo{width:30px;height:30px}.white-background{background-color:#fff}.selectable{z-index:1;position:fixed;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:transparent;border-radius:20px;display:block;padding:3px}*{box-sizing:border-box}.background1{background:url(/assets/background/default-background.webp);background-size:cover;background-position:center center;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:0px;overflow:auto;max-height:500px}h2{text-shadow:1px 1px 2px rgb(0,0,0);color:#fff;letter-spacing:1px;text-transform:uppercase;text-align:center}.chat-container{border-radius:10px;overflow:hidden;padding:15px;position:relative;max-width:100%;height:100%;display:flex;flex-direction:column}.chat{display:flex;flex-direction:column;list-style-type:none;padding:0;margin:0;overflow-y:auto;flex:1}.message-helper{background-color:#ffffffe6;box-shadow:0 7px 5px #00000080;position:relative;margin-bottom:30px}.message-helper.right{align-self:flex-end;padding:4px 45px 4px 15px}.message{background-color:#f6f6f6e6;border-radius:50px;box-shadow:7px 11px 14px #00000080;position:relative;margin-bottom:30px}.message .logo{position:absolute;top:50%;transform:translateY(-50%);border-radius:50%}.message .fit-top-image{object-fit:cover;object-position:top}.message.left{padding:10px 15px 10px 45px}.message.left .logo{left:5px}.message.right{align-self:flex-end;padding:10px 45px 10px 15px}.message.right .logo{right:5px}.input-container{margin-top:auto;display:flex;gap:10px;padding-top:15px;background:inherit}.input-container textarea{flex:1;padding:8px;border-radius:20px;border:1px solid #ccc;resize:none}.input-container .send-button{padding:8px 15px;border-radius:20px;border:none;background:#007bff;color:#fff;cursor:pointer}.input-container .send-button:disabled{background:#ccc;cursor:not-allowed}::ng-deep .cdk-overlay-container{z-index:1400}::ng-deep .cdk-global-overlay-wrapper{z-index:1400}::ng-deep .dialog-backdrop{background:#00000080;z-index:1299}\n"] }]
+            args: [{ selector: 'dc-chat', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ChatMessageComponent,
+                        ReactiveFormsModule,
+                        SkeletonModule,
+                        DialogModule,
+                        ProgressBarModule,
+                        ChatHeaderComponent,
+                        ChatFooterComponent,
+                    ], providers: [DialogService], template: "<dc-chat-header\n  [isAdmin]=\"isAdmin\"\n  [alternativeConversation]=\"alternativeConversation\"\n  (restartConversationEvent)=\"restartConversation($event || null)\"\n  (showInfoEvent)=\"showInfo()\"\n  (settingsClickEvent)=\"changeUserChatSettings()\">\n</dc-chat-header>\n\n<main class=\"chat-container\" (touchmove)=\"$event.stopPropagation()\">\n  <div class=\"chat\" aria-live=\"polite\">\n    @for (message of messages; track message) { @switch (message.role) { @case ('assistant') {\n    <div class=\"message left\">\n      <img class=\"logo fit-top-image\" [src]=\"agentCard?.assets?.image?.url ?? imageUser\" (click)=\"playMessage(message)\" />\n      <dc-chat-message [chatUserSettings]=\"chatUserSettings\" [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } @case ('assistantHelper') {\n    <div class=\"message-helper right\">\n      <dc-chat-message [chatUserSettings]=\"chatUserSettings\" [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } @case ('user') {\n    <div class=\"message right\">\n      <img class=\"logo fit-top-image\" [src]=\"user?.urlPicture || 'assets/defaults/avatar.jpg'\" [alt]=\"'User avatar'\" (click)=\"playMessage(message)\" />\n      <dc-chat-message [chatMessage]=\"message\" appTextSelectable> </dc-chat-message>\n    </div>\n    } } }\n\n    <!-- AI thinking indicator -->\n    @if (isAIThinking) {\n    <div class=\"message message--assistant message--thinking\">\n      <span class=\"thinking-emoji\" aria-hidden=\"true\">\uD83E\uDD14</span>\n      <div class=\"thinking-indicator\">\n        <div class=\"skeleton-container\">\n          <p-skeleton width=\"100%\" />\n          <br />\n          <p-skeleton width=\"75%\" />\n        </div>\n      </div>\n    </div>\n    }\n\n    <!-- User typing or transcribing indicator -->\n    @if (isUserTalking || isGettingTranscription) {\n    <div class=\"message message--user message--activity\">\n      <img class=\"avatar avatar--user\" [src]=\"user?.urlPicture || imageUser\" [alt]=\"'User avatar'\" />\n      @if (isUserTalking) {\n      <p class=\"typing-indicator\" aria-label=\"User is speaking\">...</p>\n      } @if (isGettingTranscription) {\n      <i class=\"pi pi-spin pi-spinner-dotted\" aria-label=\"Transcribing speech\"></i>\n      }\n    </div>\n    }\n  </div>\n</main>\n\n<dc-chat-footer\n  [isAIThinking]=\"isAIThinking\"\n  [score]=\"score\"\n  [micSettings]=\"micSettings\"\n  (sendMessage)=\"sendUserMessage($event)\"\n  (textInputChanged)=\"setInputText($event)\"\n  (micFinishedEvent)=\"micFinished($event)\">\n</dc-chat-footer>\n\n<!-- Information dialog -->\n<p-dialog\n  header=\"Informaci\u00F3n de la conversaci\u00F3n\"\n  [(visible)]=\"isInfoVisible\"\n  [modal]=\"true\"\n  [responsive]=\"true\"\n  styleClass=\"conversation-info-dialog\"\n  aria-labelledby=\"conversation-info-title\">\n  <div class=\"dialog-content\">\n    <section class=\"model-info\">\n      <h3 id=\"conversation-info-title\" class=\"sr-only\">Informaci\u00F3n de la conversaci\u00F3n</h3>\n      <dl class=\"info-list\">\n        <dt>Modelo:</dt>\n        <dd>{{ chatUserSettings?.model?.provider }} - {{ chatUserSettings?.model?.modelName }}</dd>\n\n        <dt>Tipo:</dt>\n        <dd>{{ agentCard?.conversationSettings?.conversationType }}</dd>\n\n        <dt>Text Engine:</dt>\n        <dd>{{ agentCard?.conversationSettings?.textEngine }}</dd>\n\n        <dt>Language:</dt>\n        <dd>{{ agentCard?.lang }}</dd>\n\n        <dt>TTS:</dt>\n        <dd>{{ agentCard?.conversationSettings?.tts?.voice }}</dd>\n\n        <dt>Secondary TTS:</dt>\n        <dd>{{ agentCard?.conversationSettings?.tts?.secondaryVoice }}</dd>\n      </dl>\n\n      <div class=\"parameters\">\n        <h4>Par\u00E1metros:</h4>\n        <pre>{{ parseDict | json }}</pre>\n      </div>\n    </section>\n\n    <section class=\"conversation-history\">\n      <h4>Conversaci\u00F3n hasta ahora</h4>\n      <div class=\"message-history-list\">\n        @for (message of conversationSettings.messages; track message) {\n        <div class=\"message-history-item\">\n          <span class=\"message-role\">{{ message.role }}:</span>\n          <span class=\"message-content\">{{ message.content }}</span>\n        </div>\n        }\n      </div>\n    </section>\n  </div>\n</p-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%}*{box-sizing:border-box}.chat-container{border-radius:10px;overflow:hidden;padding:15px;position:relative;max-width:100%;height:100%;display:flex;flex-direction:column}.chat{display:flex;flex-direction:column;list-style-type:none;padding:0;margin:0;overflow-y:auto;flex:1}.logo{width:30px;height:30px}.logo.fit-top-image{object-fit:cover;object-position:top;border-radius:50%}.message{background-color:#f6f6f6f2;border-radius:25px;box-shadow:0 5px 15px #0000001a;position:relative;margin-bottom:20px;transition:all .2s ease}.message .logo{position:absolute;top:50%;transform:translateY(-50%);border-radius:50%;cursor:pointer}.message .logo:hover{transform:translateY(-50%) scale(1.05)}.message.left{padding:12px 15px 12px 45px;margin-right:20%}.message.left .logo{left:5px}.message.right{align-self:flex-end;padding:12px 45px 12px 15px;margin-left:20%;background-color:#e6f0fff2}.message.right .logo{right:5px}.message--thinking,.message--activity{opacity:.7}.message-helper{background-color:#ffffffe6;box-shadow:0 3px 10px #0000001a;position:relative;margin-bottom:20px;border-radius:20px}.message-helper.right{align-self:flex-end;padding:8px 15px;margin-left:20%}.thinking-indicator{padding:5px}.thinking-indicator .skeleton-container{width:200px}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{z-index:1400}::ng-deep .dialog-backdrop{background:#00000080;z-index:1299}::ng-deep .conversation-info-dialog .dialog-content{max-height:70vh;overflow-y:auto}::ng-deep .conversation-info-dialog .info-list{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-bottom:20px}::ng-deep .conversation-info-dialog .info-list dt{font-weight:700}::ng-deep .conversation-info-dialog .message-history-list{max-height:300px;overflow-y:auto;border:1px solid #eee;border-radius:5px;padding:10px}::ng-deep .conversation-info-dialog .message-history-list .message-history-item{padding:5px 0;border-bottom:1px solid #f0f0f0}::ng-deep .conversation-info-dialog .message-history-list .message-history-item:last-child{border-bottom:none}::ng-deep .conversation-info-dialog .message-history-list .message-history-item .message-role{font-weight:700;margin-right:5px}\n"] }]
         }], ctorParameters: () => [{ type: AgentCardsAbstractService, decorators: [{
                     type: Inject,
                     args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: i9.ToastAlertsAbstractService, decorators: [{
+                }] }, { type: i6.ToastAlertsAbstractService, decorators: [{
                     type: Inject,
                     args: [TOAST_ALERTS_TOKEN]
-                }] }, { type: DCConversationPromptBuilderService }, { type: i1$2.DialogService }, { type: i0.ChangeDetectorRef }], propDecorators: { chatUserSettings: [{
+                }] }, { type: DCConversationPromptBuilderService }, { type: i1$3.DialogService }, { type: i0.ChangeDetectorRef }], propDecorators: { chatUserSettings: [{
                 type: Input
             }], agentCard: [{
                 type: Input
@@ -2026,7 +2331,7 @@ class PromptPreviewDialogComponent {
     close() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: PromptPreviewDialogComponent, deps: [{ token: i1$2.DynamicDialogConfig }, { token: i1$2.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: PromptPreviewDialogComponent, deps: [{ token: i1$3.DynamicDialogConfig }, { token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: PromptPreviewDialogComponent, isStandalone: true, selector: "dc-prompt-preview-dialog", ngImport: i0, template: ` <div class="prompt-preview-content" [innerHTML]="data.html"></div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: PromptPreviewDialogComponent, decorators: [{
@@ -2037,7 +2342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                     imports: [CommonModule, DialogModule],
                     template: ` <div class="prompt-preview-content" [innerHTML]="data.html"></div> `,
                 }]
-        }], ctorParameters: () => [{ type: i1$2.DynamicDialogConfig }, { type: i1$2.DynamicDialogRef }] });
+        }], ctorParameters: () => [{ type: i1$3.DynamicDialogConfig }, { type: i1$3.DynamicDialogRef }] });
 
 class TranslateDialogComponent {
     constructor(fb, dialogRef, data) {
@@ -2059,7 +2364,7 @@ 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$1.FormBuilder }, { token: i2$1.DialogRef }, { token: DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TranslateDialogComponent, deps: [{ token: i1$2.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: `
     <div class="translate-dialog">
       <h4>Tu idioma actual es: {{ data.currentLang }}</h4>
@@ -2077,7 +2382,7 @@ 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+  `, 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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TranslateDialogComponent, decorators: [{
             type: Component,
@@ -2099,7 +2404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
       </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$1.FormBuilder }, { type: i2$1.DialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.DialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DIALOG_DATA]
                 }] }] });
@@ -2164,13 +2469,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$3.ActivatedRoute }, { token: i1$1.FormBuilder }, { token: i1$3.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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3$1.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.1.1", ngImport: i0, type: AccountPlatformForm, deps: [{ token: i1$4.ActivatedRoute }, { token: i1$2.FormBuilder }, { token: i1$4.Router }, { token: TOAST_ALERTS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4$3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$2.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: [{
             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$3.ActivatedRoute }, { type: i1$1.FormBuilder }, { type: i1$3.Router }, { type: i9.ToastAlertsAbstractService, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.ActivatedRoute }, { type: i1$2.FormBuilder }, { type: i1$4.Router }, { type: i6.ToastAlertsAbstractService, decorators: [{
                     type: Inject,
                     args: [TOAST_ALERTS_TOKEN]
                 }] }], propDecorators: { formArray: [{
@@ -2204,6 +2509,7 @@ class DCAgentCardFormComponent {
         this.accountsOptions = Object.values(EAccountsPlatform);
         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 = {
             path: 'conversation-cards/' + this.agentCardId,
@@ -2248,9 +2554,9 @@ class DCAgentCardFormComponent {
                 textEngine: [TextEngines.SimpleText],
                 conversationType: [ConversationType.General],
                 autoStart: [true],
+                tts: this.fb.group({ voice: [''], secondaryVoice: [''], speed: ['1.0'], speedRate: [1.0] }),
             }),
             lang: [''],
-            tts: this.fb.group({ voice: [''], secondaryVoice: [''], speed: ['1.0'], speedRate: [1.0] }),
             metaApp: this.fb.group({ isPublished: [false], isPublic: [false], authorId: [''], authorEmail: [''], takenCount: [0] }),
             model: this.fb.group({ id: [''], modelName: [''], provider: [''] }),
             accounts: this.fb.array([]),
@@ -2593,8 +2899,8 @@ 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$1.FormBuilder }, { token: i2$2.MultiImagesStorageService }, { token: CONVERSATION_AI_TOKEN }, { token: i0.ChangeDetectorRef }, { token: i1$3.Router }, { token: i1$3.ActivatedRoute }, { token: i1$2.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-conversation-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      </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          <input pInputText id=\"speed\" type=\"text\" formControlName=\"speed\" />\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\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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.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$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i7$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: i8$1.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.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.1.1", ngImport: i0, type: DCAgentCardFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$2.MultiImagesStorageService }, { token: CONVERSATION_AI_TOKEN }, { token: i0.ChangeDetectorRef }, { token: i1$4.Router }, { token: i1$4.ActivatedRoute }, { token: i1$3.DialogService }, { token: DCConversationPromptBuilderService }, { token: TOAST_ALERTS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-conversation-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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.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$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i11.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i13.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i14.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i15.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ProviderSelectorComponent, selector: "dc-provider-selector", inputs: ["parentForm"] }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
             type: Component,
@@ -2619,11 +2925,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         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      </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          <input pInputText id=\"speed\" type=\"text\" formControlName=\"speed\" />\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\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$1.FormBuilder }, { type: i2$2.MultiImagesStorageService }, { type: AgentCardsAbstractService, decorators: [{
+                    ], 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$2.FormBuilder }, { type: i2$2.MultiImagesStorageService }, { type: AgentCardsAbstractService, decorators: [{
                     type: Inject,
                     args: [CONVERSATION_AI_TOKEN]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i1$3.Router }, { type: i1$3.ActivatedRoute }, { type: i1$2.DialogService }, { type: DCConversationPromptBuilderService }, { type: i9.ToastAlertsAbstractService, decorators: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i1$4.Router }, { type: i1$4.ActivatedRoute }, { type: i1$3.DialogService }, { type: DCConversationPromptBuilderService }, { type: i6.ToastAlertsAbstractService, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -2646,9 +2952,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
 
 class DCConversationCardUIComponent {
     constructor() {
-        this.onDetailsCard = new EventEmitter();
-        this.onEditCard = new EventEmitter();
-        this.onDeleteCard = new EventEmitter();
+        this.speedDialModel = [
+            { label: 'Edit', icon: 'pi pi-pencil', title: 'edit', severity: 'primary', command: () => this.onEdit() },
+            { 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();
     }
     ngOnInit() {
         const name = this.card.characterCard.data.name;
@@ -2656,27 +2966,25 @@ class DCConversationCardUIComponent {
         this.card.characterCard.data.description = description.replace(/{{char}}/g, name);
     }
     onDetails() {
-        this.onDetailsCard.emit(this.card._id);
+        this.onCardAction.emit({ event: 'details', card: this.card });
     }
     onEdit() {
-        this.onEditCard.emit(this.card._id);
+        this.onCardAction.emit({ event: 'edit', card: this.card });
     }
     onDelete() {
-        this.onDeleteCard.emit(this.card._id);
+        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: "14.0.0", version: "19.1.1", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: "card" }, outputs: { onDetailsCard: "onDetailsCard", onEditCard: "onEditCard", onDeleteCard: "onDeleteCard" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div 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\n<!-- <div class=\"card\">\n  \n\n  <span class=\"title-text\">{{ card.title }}</span>\n\n  <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n</div> -->\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;border-radius:15px}.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$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: "ngmodule", type: CardModule }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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  <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div 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\n<!-- <div class=\"card\">\n  \n\n  <span class=\"title-text\">{{ card.title }}</span>\n\n  <img [src]=\"card?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n</div> -->\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;border-radius:15px}.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"] }]
+            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
-            }], onDetailsCard: [{
-                type: Output
-            }], onEditCard: [{
-                type: Output
-            }], onDeleteCard: [{
+            }], showOptions: [{
+                type: Input
+            }], onCardAction: [{
                 type: Output
             }] } });
 
@@ -2688,11 +2996,6 @@ const DefaultColumns = [
     { field: 'characterCard.data.name', header: 'Character Name', type: 'text' },
     { field: 'title', header: 'Title', type: 'text' },
 ];
-const DefaultActions = [
-    { label: 'Edit', icon: 'pi pi-pencil', title: 'edit', severity: 'primary' },
-    { label: 'Delete', icon: 'pi pi-trash', title: 'delete', severity: 'danger' },
-    { label: 'Select', icon: 'pi pi-check', title: 'select', severity: 'success' },
-];
 class AgentCardListComponent extends PaginationBase {
     constructor(agentCardService, toastService, route, router, cdr) {
         super(route, router);
@@ -2700,16 +3003,8 @@ class AgentCardListComponent extends PaginationBase {
         this.toastService = toastService;
         this.cdr = cdr;
         this.viewMode = 'cards';
+        this.showOptions = true;
         this.gridLayout = true;
-        // @deprecated use onAction
-        this.goToDetailsEvent = new EventEmitter();
-        // @deprecated use onAction
-        this.goToEditEvent = new EventEmitter();
-        // @deprecated use onAction
-        this.deleteEvent = new EventEmitter();
-        // @deprecated use onAction
-        this.onSelect = new EventEmitter();
-        this.actions = DefaultActions;
         this.agentCards = [];
         this.cardEventSubs = [];
         this.cardComponent = null;
@@ -2729,12 +3024,8 @@ class AgentCardListComponent extends PaginationBase {
     subscribeToCardEvents() {
         this.outlets.forEach((outlet) => {
             const instance = outlet.componentInstance;
-            this.cardEventSubs.push(instance.onDetailsCard.subscribe((id) => {
-                this.goToDetails(id);
-            }), instance.onEditCard.subscribe((id) => {
-                this.goToEdit(id);
-            }), instance.onDeleteCard.subscribe((id) => {
-                this.deleteCard(id);
+            this.cardEventSubs.push(instance.onCardAction.subscribe((action) => {
+                this.onCardAction({ action: action.event, item: action.card });
             }));
         });
     }
@@ -2768,23 +3059,34 @@ class AgentCardListComponent extends PaginationBase {
     async getAllConversationCards() {
         return this.agentCardService.getAllConversationCards();
     }
-    async goToDetails(id) {
-        this.goToDetailsEvent.emit(id);
-    }
-    async goToEdit(id = null) {
-        console.log('goToEdit', id);
-        this.goToEditEvent.emit(id);
+    async goToDetails(action) {
+        this.onAction.emit({ action: 'details', item: action.item });
     }
     async deleteCard(id) {
         await this.agentCardService.deleteConversationCard(id);
         this.agentCards = this.agentCards.filter((card) => card._id !== id);
-        this.deleteEvent.emit(id);
         this.toastService.success({ title: 'Conversation card deleted', subtitle: 'The conversation card has been deleted' });
+        this.cdr.detectChanges();
     }
     // Implement the abstract method from PaginationBase
     async loadData() {
         return this.loadConversationCards();
     }
+    doFilterBarAction({ action, item }) {
+        // console.log('doAction', { action, item });
+        if (action === 'new') {
+            this.onAction.emit({ action: 'new' });
+        }
+        else if (action === 'edit') {
+            this.onAction.emit({ action: 'edit', item: item?.['id'] });
+        }
+        else if (action === 'delete') {
+            this.onAction.emit({ action: 'delete', item: item?.['id'] });
+        }
+        else if (action === 'changeView') {
+            this.viewMode = this.viewMode === 'cards' ? 'table' : 'cards';
+        }
+    }
     async search(text) {
         console.log('search', text);
         const filters = {
@@ -2807,24 +3109,19 @@ class AgentCardListComponent extends PaginationBase {
         this.cdr.detectChanges();
         this.subscribeDinamicInstantToEvents();
     }
-    doBarAction({ action, item }) {
-        debugger;
-        // console.log('doAction', { action, item });
-        if (action === 'new') {
-            this.goToEdit();
+    onCardAction(actionEvent) {
+        if (actionEvent.action == 'delete') {
+            this.deleteCard(actionEvent.item._id);
         }
-        else if (action === 'edit') {
-            this.goToEdit(item?.['id']);
-        }
-        else if (action === 'delete') {
-            this.deleteCard(item?.['id']);
+        else if (actionEvent.action == 'edit') {
+            this.doAction(actionEvent); // handle by father
         }
-        else if (action === 'changeView') {
-            this.viewMode = this.viewMode === 'cards' ? 'table' : 'cards';
+        else if (actionEvent.action == 'details') {
+            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$3.ActivatedRoute }, { token: i1$3.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", gridLayout: "gridLayout", getCustomButtons: "getCustomButtons", actions: "actions" }, outputs: { goToDetailsEvent: "goToDetailsEvent", goToEditEvent: "goToEditEvent", deleteEvent: "deleteEvent", onSelect: "onSelect" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [isAdmin]=\"true\" (onAction)=\"doBarAction($event)\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChange($event)\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions\" (onAction)=\"doAction($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 }\"> </ng-container>\n\n      @if(getCustomButtons) {\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(card)\"\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    </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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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$2.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: ["onAction", "onChangeSort", "onNew", "onSearch", "onFilterChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i5$2.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: "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.1.1", ngImport: i0, type: AgentCardListComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: TOAST_ALERTS_TOKEN }, { token: i1$4.ActivatedRoute }, { token: i1$4.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { viewMode: "viewMode", customCardComponent: "customCardComponent", showOptions: "showOptions", gridLayout: "gridLayout", getCustomButtons: "getCustomButtons" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [isAdmin]=\"true\" (onFilterAction)=\"doFilterBarAction($event)\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions\" (onAction)=\"onCardAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n  @if(!isLoading) {\n  <div [ngClass]=\"{ 'cards-container': gridLayout }\">\n    @for (card of agentCards; track card) {\n    <div style=\"position: relative\">\n      <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card, showOptions: showOptions }\">\n      </ng-container>\n    </div>\n    }\n  </div>\n  }\n</div>\n\n@if(isLoading) {\n<div>\n  <p-skeleton styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n  <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(agentCards.length === 0) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;height:100%;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i3$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "customFilters", "items"], outputs: ["onFilterAction", "onChangeSort"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AgentCardListComponent, decorators: [{
             type: Component,
@@ -2838,69 +3135,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         SkeletonModule,
                         SpeedDialModule,
                         QuickTableComponent,
-                    ], standalone: true, template: "<dc-filter-bar [isAdmin]=\"true\" (onAction)=\"doBarAction($event)\" (onSearch)=\"search($event)\" (onFilterChange)=\"filterChange($event)\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions\" (onAction)=\"doAction($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 }\"> </ng-container>\n\n      @if(getCustomButtons) {\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(card)\"\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    </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"] }]
+                    ], 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: i9.ToastAlertsAbstractService, decorators: [{
+                }] }, { type: i6.ToastAlertsAbstractService, decorators: [{
                     type: Inject,
                     args: [TOAST_ALERTS_TOKEN]
-                }] }, { type: i1$3.ActivatedRoute }, { type: i1$3.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { viewMode: [{
+                }] }, { type: i1$4.ActivatedRoute }, { type: i1$4.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { viewMode: [{
                 type: Input
             }], customCardComponent: [{
                 type: Input
+            }], showOptions: [{
+                type: Input
             }], gridLayout: [{
                 type: Input
             }], getCustomButtons: [{
                 type: Input
-            }], goToDetailsEvent: [{
-                type: Output
-            }], goToEditEvent: [{
-                type: Output
-            }], deleteEvent: [{
-                type: Output
-            }], onSelect: [{
-                type: Output
             }], outlets: [{
                 type: ViewChildren,
                 args: ['outlet']
-            }], actions: [{
-                type: Input
             }] } });
 
+class ParseCardPipe {
+    constructor() {
+        this.userDataExchange = inject(USER_DATA_EXCHANGE);
+        this.builderConversation = inject(DCConversationPromptBuilderService);
+    }
+    transform(text, card = null) {
+        let parseDict = this.userDataExchange.getParseDict();
+        if (card) {
+            const cardMacros = { char: card?.characterCard?.data?.name };
+            parseDict = { ...parseDict, ...cardMacros };
+        }
+        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" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ParseCardPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'parseCard',
+                    standalone: true,
+                }]
+        }] });
+
 class DcAgentCardDetailsComponent {
-    constructor(agentCardService, route, cdr) {
+    constructor(agentCardService, route, cdr, userDataExchange) {
         this.agentCardService = agentCardService;
         this.route = route;
         this.cdr = cdr;
-        this.conversationCardId = '';
+        this.userDataExchange = userDataExchange;
+        this.agentCardId = '';
         this.onStartConversation = new EventEmitter();
+        this.showInfoLayer = false;
     }
     async ngOnInit() {
-        console.log('DcAgentCardDetailsComponent', this.conversationCardId);
+        console.log('DcAgentCardDetailsComponent', this.agentCardId);
         const id = this.route.snapshot.paramMap.get('id');
         if (id) {
-            this.conversationCardId = id;
-            console.log(this.conversationCardId);
+            this.agentCardId = id;
+            console.log(this.agentCardId);
         }
-        this.conversation = await this.agentCardService.findConversationCardByID(this.conversationCardId);
-        console.log(this.conversation);
+        this.agentCard = await this.agentCardService.findConversationCardByID(this.agentCardId);
+        if (!this.agentCard.conversationSettings) {
+            console.warn('⚠️ Conversation settings not found ⚠️ probably is an old version of the card.');
+            this.agentCard.conversationSettings = {};
+        }
+        console.log(this.agentCard);
         this.cdr.detectChanges();
     }
     startConversation() {
-        console.log('last version startConversation', this.conversation);
-        this.onStartConversation.emit(this.conversation);
+        console.log('⚠️ last version startConversation', this.agentCard);
+        this.onStartConversation.emit(this.agentCard);
+    }
+    toggleInfoLayer() {
+        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$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], 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: { conversationCardId: "conversationCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div class=\"dc-conversation-card-details\">\n  <div class=\"header\">\n    <h2>{{ conversation?.title }}</h2>\n    <span class=\"version\">v{{ conversation?.version }}</span>\n  </div>\n\n  <div class=\"character-card\" *ngIf=\"conversation?.characterCard\">\n    <div class=\"character-header\">\n      <h3>{{ conversation?.characterCard.data.name }}</h3>\n      <div class=\"tags\">\n        <span class=\"tag\" *ngFor=\"let tag of conversation?.characterCard.data?.tags\">{{ tag }}</span>\n      </div>\n    </div>\n\n    <div class=\"image-wrapper\">\n      <div class=\"image\">\n        <img [src]=\"conversation?.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>{{ conversation?.characterCard.data?.description }}</p>\n    </div>\n\n    <div class=\"scenario\" *ngIf=\"conversation?.characterCard.data?.scenario\">\n      <h4>Scenario</h4>\n      <p>{{ conversation?.characterCard.data.scenario }}</p>\n    </div>\n\n    <div class=\"first-message\" *ngIf=\"conversation?.characterCard.data?.first_mes\">\n      <h4>First Message</h4>\n      <p>{{ conversation?.characterCard.data.first_mes }}</p>\n    </div>\n\n    <div class=\"alternate-greetings\" *ngIf=\"conversation?.characterCard.data?.alternate_greetings?.length\">\n      <h4>Alternate Greetings</h4>\n      <ul>\n        <li *ngFor=\"let greeting of conversation?.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\">{{ conversation?.conversationSettings?.conversationType }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Language:</span>\n        <span class=\"value\">{{ conversation?.lang }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Text Engine:</span>\n        <span class=\"value\">{{ conversation?.conversationSettings?.textEngine }}</span>\n      </div>\n    </div>\n\n    <div class=\"tts-settings\" *ngIf=\"conversation?.tts\">\n      <h3>TTS Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Primary Voice:</span>\n        <span class=\"value\">{{ conversation?.tts.voice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Secondary Voice:</span>\n        <span class=\"value\">{{ conversation?.tts.secondaryVoice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Speed:</span>\n        <span class=\"value\">{{ conversation?.tts.speed }} ({{ conversation?.tts.speedRate }}x)</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dc-conversation-card-details{padding:1.5rem;max-width:800px;margin:0 auto}.dc-conversation-card-details .header{display:flex;align-items:center;margin-bottom:2rem;gap:1rem}.dc-conversation-card-details .header h2{margin:0;font-size:1.8rem;color:#333}.dc-conversation-card-details .header .version{color:#666;font-size:.9rem;padding:.2rem .5rem;background:#f5f5f5;border-radius:4px}.dc-conversation-card-details .character-card{background:#fff;border-radius:8px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a}.dc-conversation-card-details .character-card .character-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.dc-conversation-card-details .character-card .character-header h3{margin:0;color:#2c3e50;font-size:1.4rem}.dc-conversation-card-details .character-card .character-header .tags{display:flex;gap:.5rem;flex-wrap:wrap}.dc-conversation-card-details .character-card .character-header .tags .tag{background:#e9ecef;color:#495057;padding:.2rem .6rem;border-radius:4px;font-size:.8rem}.dc-conversation-card-details .character-card .description{color:#555;line-height:1.6;margin-bottom:1.5rem}.dc-conversation-card-details .character-card h4{color:#2c3e50;margin:1rem 0 .5rem;font-size:1.1rem}.dc-conversation-card-details .character-card .scenario,.dc-conversation-card-details .character-card .first-message{background:#f8f9fa;padding:1rem;border-radius:6px;margin-bottom:1rem}.dc-conversation-card-details .character-card .scenario p,.dc-conversation-card-details .character-card .first-message p{margin:0;color:#666}.dc-conversation-card-details .character-card .alternate-greetings ul{list-style:none;padding:0;margin:0}.dc-conversation-card-details .character-card .alternate-greetings ul li{padding:.5rem;border-bottom:1px solid #eee;color:#666}.dc-conversation-card-details .character-card .alternate-greetings ul li:last-child{border-bottom:none}.dc-conversation-card-details .settings{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media (max-width: 768px){.dc-conversation-card-details .settings{grid-template-columns:1fr}}.dc-conversation-card-details .settings .conversation-settings,.dc-conversation-card-details .settings .tts-settings{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px #0000001a}.dc-conversation-card-details .settings .conversation-settings h3,.dc-conversation-card-details .settings .tts-settings h3{margin:0 0 1rem;color:#2c3e50;font-size:1.2rem}.dc-conversation-card-details .settings .conversation-settings .setting-item,.dc-conversation-card-details .settings .tts-settings .setting-item{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #eee}.dc-conversation-card-details .settings .conversation-settings .setting-item:last-child,.dc-conversation-card-details .settings .tts-settings .setting-item:last-child{border-bottom:none}.dc-conversation-card-details .settings .conversation-settings .setting-item .label,.dc-conversation-card-details .settings .tts-settings .setting-item .label{color:#666;font-weight:500}.dc-conversation-card-details .settings .conversation-settings .setting-item .value,.dc-conversation-card-details .settings .tts-settings .setting-item .value{color:#333}.btn{padding:.5rem 1rem;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease-in-out}.btn:hover{background:#0056b3}.image-wrapper{display:flex;justify-content:center;width:100%}.image-wrapper .image{position:relative;max-width:400px;width:100%}.image-wrapper .image img{width:100%;height:auto;object-fit:cover;border-radius:8px}.image-wrapper .image .actions{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:2}.image-wrapper .image .actions .btn{min-width:200px;background:#007bffe6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.image-wrapper .image .actions .btn:hover{background:#0056b3f2}.actions-wrapper{display:flex;justify-content:center;width:100%;margin:1rem 0}.actions-wrapper .actions .btn{min-width:200px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i7$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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [{ token: CONVERSATION_AI_TOKEN }, { token: i1$4.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: USER_DATA_EXCHANGE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          <div class=\"scenario\" *ngIf=\"agentCard?.characterCard.data?.scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n\n<!-- <div class=\"dc-conversation-card-details\">\n  <div class=\"header\">\n    <h2>{{ agentCard?.title }}</h2>\n    <span class=\"version\">v{{ agentCard?.version }}</span>\n  </div>\n\n  <div class=\"character-card\" *ngIf=\"agentCard?.characterCard\">\n    <div class=\"character-header\">\n      <h3>{{ agentCard?.characterCard.data.name }}</h3>\n      <div class=\"tags\">\n        <span class=\"tag\" *ngFor=\"let tag of agentCard?.characterCard.data?.tags\">{{ tag }}</span>\n      </div>\n    </div>\n\n    <div class=\"image-wrapper\">\n      <div class=\"image\">\n        <img [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n        <div class=\"actions\">\n          <p-button label=\"Start Conversation\" (click)=\"startConversation()\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"description\">\n      <p>{{ agentCard?.characterCard.data?.description | parseCard : agentCard }}</p>\n    </div>\n\n    <div class=\"scenario\" *ngIf=\"agentCard?.characterCard.data?.scenario\">\n      <h4>Scenario</h4>\n      <p>{{ agentCard?.characterCard.data.scenario }}</p>\n    </div>\n\n    <div class=\"first-message\" *ngIf=\"agentCard?.characterCard.data?.first_mes\">\n      <h4>First Message</h4>\n      <p>{{ agentCard?.characterCard.data.first_mes }}</p>\n    </div>\n\n    <div class=\"alternate-greetings\" *ngIf=\"agentCard?.characterCard.data?.alternate_greetings?.length\">\n      <h4>Alternate Greetings</h4>\n      <ul>\n        <li *ngFor=\"let greeting of agentCard?.characterCard.data.alternate_greetings\">{{ greeting }}</li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"settings\">\n    <div class=\"conversation-settings\">\n      <h3>Conversation Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Type:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.conversationType }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Language:</span>\n        <span class=\"value\">{{ agentCard?.lang }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Text Engine:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.textEngine }}</span>\n      </div>\n    </div>\n\n    <div class=\"tts-settings\" *ngIf=\"agentCard?.tts\">\n      <h3>TTS Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Primary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.voice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Secondary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.secondaryVoice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Speed:</span>\n        <span class=\"value\">{{ agentCard?.tts.speed }} ({{ agentCard?.tts.speedRate }}x)</span>\n      </div>\n    </div>\n  </div>\n</div> -->\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [CommonModule, ButtonModule], template: "<div class=\"dc-conversation-card-details\">\n  <div class=\"header\">\n    <h2>{{ conversation?.title }}</h2>\n    <span class=\"version\">v{{ conversation?.version }}</span>\n  </div>\n\n  <div class=\"character-card\" *ngIf=\"conversation?.characterCard\">\n    <div class=\"character-header\">\n      <h3>{{ conversation?.characterCard.data.name }}</h3>\n      <div class=\"tags\">\n        <span class=\"tag\" *ngFor=\"let tag of conversation?.characterCard.data?.tags\">{{ tag }}</span>\n      </div>\n    </div>\n\n    <div class=\"image-wrapper\">\n      <div class=\"image\">\n        <img [src]=\"conversation?.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>{{ conversation?.characterCard.data?.description }}</p>\n    </div>\n\n    <div class=\"scenario\" *ngIf=\"conversation?.characterCard.data?.scenario\">\n      <h4>Scenario</h4>\n      <p>{{ conversation?.characterCard.data.scenario }}</p>\n    </div>\n\n    <div class=\"first-message\" *ngIf=\"conversation?.characterCard.data?.first_mes\">\n      <h4>First Message</h4>\n      <p>{{ conversation?.characterCard.data.first_mes }}</p>\n    </div>\n\n    <div class=\"alternate-greetings\" *ngIf=\"conversation?.characterCard.data?.alternate_greetings?.length\">\n      <h4>Alternate Greetings</h4>\n      <ul>\n        <li *ngFor=\"let greeting of conversation?.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\">{{ conversation?.conversationSettings?.conversationType }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Language:</span>\n        <span class=\"value\">{{ conversation?.lang }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Text Engine:</span>\n        <span class=\"value\">{{ conversation?.conversationSettings?.textEngine }}</span>\n      </div>\n    </div>\n\n    <div class=\"tts-settings\" *ngIf=\"conversation?.tts\">\n      <h3>TTS Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Primary Voice:</span>\n        <span class=\"value\">{{ conversation?.tts.voice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Secondary Voice:</span>\n        <span class=\"value\">{{ conversation?.tts.secondaryVoice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Speed:</span>\n        <span class=\"value\">{{ conversation?.tts.speed }} ({{ conversation?.tts.speedRate }}x)</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dc-conversation-card-details{padding:1.5rem;max-width:800px;margin:0 auto}.dc-conversation-card-details .header{display:flex;align-items:center;margin-bottom:2rem;gap:1rem}.dc-conversation-card-details .header h2{margin:0;font-size:1.8rem;color:#333}.dc-conversation-card-details .header .version{color:#666;font-size:.9rem;padding:.2rem .5rem;background:#f5f5f5;border-radius:4px}.dc-conversation-card-details .character-card{background:#fff;border-radius:8px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a}.dc-conversation-card-details .character-card .character-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.dc-conversation-card-details .character-card .character-header h3{margin:0;color:#2c3e50;font-size:1.4rem}.dc-conversation-card-details .character-card .character-header .tags{display:flex;gap:.5rem;flex-wrap:wrap}.dc-conversation-card-details .character-card .character-header .tags .tag{background:#e9ecef;color:#495057;padding:.2rem .6rem;border-radius:4px;font-size:.8rem}.dc-conversation-card-details .character-card .description{color:#555;line-height:1.6;margin-bottom:1.5rem}.dc-conversation-card-details .character-card h4{color:#2c3e50;margin:1rem 0 .5rem;font-size:1.1rem}.dc-conversation-card-details .character-card .scenario,.dc-conversation-card-details .character-card .first-message{background:#f8f9fa;padding:1rem;border-radius:6px;margin-bottom:1rem}.dc-conversation-card-details .character-card .scenario p,.dc-conversation-card-details .character-card .first-message p{margin:0;color:#666}.dc-conversation-card-details .character-card .alternate-greetings ul{list-style:none;padding:0;margin:0}.dc-conversation-card-details .character-card .alternate-greetings ul li{padding:.5rem;border-bottom:1px solid #eee;color:#666}.dc-conversation-card-details .character-card .alternate-greetings ul li:last-child{border-bottom:none}.dc-conversation-card-details .settings{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media (max-width: 768px){.dc-conversation-card-details .settings{grid-template-columns:1fr}}.dc-conversation-card-details .settings .conversation-settings,.dc-conversation-card-details .settings .tts-settings{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px #0000001a}.dc-conversation-card-details .settings .conversation-settings h3,.dc-conversation-card-details .settings .tts-settings h3{margin:0 0 1rem;color:#2c3e50;font-size:1.2rem}.dc-conversation-card-details .settings .conversation-settings .setting-item,.dc-conversation-card-details .settings .tts-settings .setting-item{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #eee}.dc-conversation-card-details .settings .conversation-settings .setting-item:last-child,.dc-conversation-card-details .settings .tts-settings .setting-item:last-child{border-bottom:none}.dc-conversation-card-details .settings .conversation-settings .setting-item .label,.dc-conversation-card-details .settings .tts-settings .setting-item .label{color:#666;font-weight:500}.dc-conversation-card-details .settings .conversation-settings .setting-item .value,.dc-conversation-card-details .settings .tts-settings .setting-item .value{color:#333}.btn{padding:.5rem 1rem;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease-in-out}.btn:hover{background:#0056b3}.image-wrapper{display:flex;justify-content:center;width:100%}.image-wrapper .image{position:relative;max-width:400px;width:100%}.image-wrapper .image img{width:100%;height:auto;object-fit:cover;border-radius:8px}.image-wrapper .image .actions{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:2}.image-wrapper .image .actions .btn{min-width:200px;background:#007bffe6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.image-wrapper .image .actions .btn:hover{background:#0056b3f2}.actions-wrapper{display:flex;justify-content:center;width:100%;margin:1rem 0}.actions-wrapper .actions .btn{min-width:200px}\n"] }]
+            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$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { conversationCardId: [{
+                }] }, { type: i1$4.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: UserDataExchangeAbstractService, decorators: [{
+                    type: Inject,
+                    args: [USER_DATA_EXCHANGE]
+                }] }], propDecorators: { agentCardId: [{
                 type: Input
             }], onStartConversation: [{
                 type: Output
@@ -2915,5 +3242,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, ChatMessageComponent, ChatMultiMessage, ChatRole, ChatUserSettings, ConversationDTO, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, EAccountsPlatform, LangCodeDescriptionEs, ProviderSelectorComponent, TextEngineOptions, TextEngines, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, characterCardStringDataDefinition, extractJsonFromResponse, provideChatAIService, provideUserDataExchange };
+export { AgentCardListComponent, AgentCardsAbstractService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, ChatMessage, ChatMessageComponent, ChatMultiMessage, ChatRole, ChatUserSettings, ConversationDTO, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, EAccountsPlatform, LangCodeDescriptionEs, ProviderSelectorComponent, TextEngineOptions, TextEngines, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, characterCardStringDataDefinition, defaultconvUserSettings, extractJsonFromResponse, provideChatAIService, provideUserDataExchange };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map