@dataclouder/ngx-agent-cards 0.1.53 → 0.1.55

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, inject, signal, computed, RendererFactory2, ApplicationRef, Injector, EnvironmentInjector, createComponent, ChangeDetectionStrategy, Component, output, Input, input, effect, ViewChild, DestroyRef, ElementRef, Pipe, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
 import * as i1 from '@dataclouder/ngx-core';
-import { MoodStateOptions, LANGUAGES, EntityCommunicationService, TOAST_ALERTS_TOKEN, AudioSpeed as AudioSpeed$1, LoadingBarService, EModelQuality, getLangDesc, AudioSpeedReverse, formatCamelCaseString, getSupportedLanguageOptions, AudioNotificationService, MoodState, SUPPORTED_LANGUAGES, FormUtilsService, EntityBaseFormComponent, DcManageableFormComponent, DcLearnableFormComponent, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, EmptyStateComponent } from '@dataclouder/ngx-core';
+import { MoodStateOptions, LANGUAGES, EntityCommunicationService, TOAST_ALERTS_TOKEN, APP_CONFIG, AudioSpeed as AudioSpeed$1, LoadingBarService, EModelQuality, getLangDesc, AudioSpeedReverse, formatCamelCaseString, getSupportedLanguageOptions, AudioNotificationService, MoodState, SUPPORTED_LANGUAGES, FormUtilsService, EntityBaseFormComponent, DcManageableFormComponent, DcLearnableFormComponent, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, EmptyStateComponent } from '@dataclouder/ngx-core';
 import { UserService } from '@dataclouder/ngx-users';
 import * as i2$1 from '@angular/common';
 import { DOCUMENT, CommonModule, DecimalPipe, KeyValuePipe } from '@angular/common';
@@ -1361,6 +1361,7 @@ class DefaultAgentCardsService extends EntityCommunicationService {
         this.conversationCostService = inject(ConversationCostService);
         this.userService = inject(UserService);
         this.toastService = inject(TOAST_ALERTS_TOKEN);
+        this.appConfig = inject(APP_CONFIG);
         this.randomSeed = Math.floor(Math.random() * 100000);
     }
     partialUpdateAgentCard(agentCard) {
@@ -1377,9 +1378,12 @@ class DefaultAgentCardsService extends EntityCommunicationService {
         let messages = conversation.messages.map((m) => ({ content: m.content, role: m.role }));
         messages = messages.filter((m) => m.role != ChatRole.AssistantHelper);
         const conversationFiltered = { ...conversation, messages };
-        const response = conversation.returnJson
-            ? await this.httpService.post(`${Endpoints$1.AgentChat}?returnJson=true`, conversationFiltered, 'primary')
-            : await this.httpService.post(`${Endpoints$1.AgentChat}`, conversationFiltered, 'primary');
+        // const response = conversation.returnJson
+        //   ? await this.httpService.postHttp<IAgentResponseDTO>({ service: `${Endpoints.AgentChat}?returnJson=true`, data: conversationFiltered, host: 'primary' })
+        const host = this.appConfig?.aiServicesUrl || this.appConfig?.backendNodeUrl;
+        // const service = `${Endpoints.AgentChat}`;
+        const service = `api/ai-services/gemini/chat`;
+        const response = await this.httpService.postHttp({ service, data: conversationFiltered, host });
         if (response?.metadata?.tokens) {
             this.conversationCostService.updateTokenUsage(response.metadata.tokens, tag ?? 'uncategorized');
         }
@@ -1831,6 +1835,11 @@ class ChatMonitorService {
     logCurrentMood(mood) {
         this.currentMood.set(mood);
     }
+    cleanMonitorVars() {
+        this.currentMood.set(null);
+        this.messageAudioWillPlay.set(null);
+        this.isConversationActive.set(false);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatMonitorService, providedIn: 'root' }); }
 }
@@ -2424,8 +2433,8 @@ ${task.task}
             type: metaType,
         });
         // Extract JSON from response
-        const jsonData = response.content;
-        jsonData.score = jsonData.score;
+        const jsonData = response.content || {};
+        jsonData.score = jsonData?.score || 0;
         this.evaluationResultSignal.set(jsonData);
         return jsonData;
     }
@@ -2903,6 +2912,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1.HttpCoreService }] });
 
+const VIDEO_PLAYER_SERVICE_TOKEN = new InjectionToken('VIDEO_PLAYER_SERVICE_TOKEN');
+const BACKGROUND_SERVICE_TOKEN = new InjectionToken('BACKGROUND_SERVICE_TOKEN');
+
 class CostDetailsComponent {
     constructor() {
         this.conversationCostService = inject(ConversationCostService);
@@ -3455,11 +3467,11 @@ class MessageContentDisplayer {
         console.log('debug', this.wordWithMeta());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MessageContentDisplayer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: MessageContentDisplayer, isStandalone: true, selector: "message-content-displayer", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, markWord: { classPropertyName: "markWord", publicName: "markWord", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted", wordClicked: "wordClicked" }, ngImport: i0, template: "<div class=\"audio-text-sync-container\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n    @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } @case ('playable') { <dc-icon name=\"play\"></dc-icon> } }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#2e68d4}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:#0d5cf0}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"], dependencies: [{ kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: MessageContentDisplayer, isStandalone: true, selector: "message-content-displayer", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, markWord: { classPropertyName: "markWord", publicName: "markWord", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted", wordClicked: "wordClicked" }, ngImport: i0, template: "<div class=\"audio-text-sync-container\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n    @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } @case ('playable') { <dc-icon name=\"play\"></dc-icon> } }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#b8d0fc}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:#0d5cf0}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"], dependencies: [{ kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MessageContentDisplayer, decorators: [{
             type: Component,
-            args: [{ selector: 'message-content-displayer', standalone: true, imports: [IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n    @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } @case ('playable') { <dc-icon name=\"play\"></dc-icon> } }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#2e68d4}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:#0d5cf0}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"] }]
+            args: [{ selector: 'message-content-displayer', standalone: true, imports: [IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n    @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } @case ('playable') { <dc-icon name=\"play\"></dc-icon> } }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#b8d0fc}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:#0d5cf0}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"] }]
         }], ctorParameters: () => [] });
 
 class MessageOrchestrationService {
@@ -3672,11 +3684,11 @@ class ChatMessageComponent {
         console.log(res);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ChatMessageComponent, isStandalone: true, selector: "dc-chat-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: true, transformFunction: null }, chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar -->\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\" (click)=\"printData()\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"AI\" class=\"avatar-image\" />\n      </div>\n    </div>\n    } @if (isUserMessage()) {\n    <div class=\"avatar-container-right\" (click)=\"printData()\">\n      <div class=\"avatar user-avatar\">\n        <img [src]=\"chatMessage()?.imgUrl || '/assets/defaults/avatar_user.jpg'\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message Bubble -->\n    <div class=\"message-bubble\">\n      @if (chatMessage().generatedImg) {\n      <img class=\"generated-img\" [src]=\"chatMessage().generatedImg\" alt=\"Generated Image\" />\n      } @if (hasMultiMessages()) {\n      <dc-message-orchestrator [messages]=\"multiMessages()\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      } @else {\n      <dc-message-orchestrator [messages]=\"[messageContent()]\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      }\n\n      <!-- Translation -->\n      @if (isAssistantMessage() && chatMessage().evaluation?.['text']) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      } @if (isUserMessage() && chatMessage().evaluation) {\n      <div class=\"translation\" style=\"color: white\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      <div class=\"evaluation-footer\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n      } @if (userService.isAdmin()) {\n      <div class=\"options-footer\">\n        <i #popoverTarget class=\"pi pi-ellipsis-h\" style=\"font-size: 1rem\" (click)=\"op.toggle($event)\"></i>\n        <p-popover #op>\n          <ul class=\"list-none p-0 m-0 flex flex-col\">\n            <li class=\"flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border\" (click)=\"generateImage()\">\n              <span>Generate image</span>\n            </li>\n          </ul>\n        </p-popover>\n      </div>\n      }\n    </div>\n\n    <!-- Tags -->\n    @if (chatMessage().tags?.length) {\n    <div class=\"tags\">\n      @for (tag of chatMessage().tags; track tag) {\n      <span class=\"tag\">{{ tag }}</span>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{--user-message-bg: rgba(13, 88, 120, .5);--assistant-message-bg: rgba(240, 240, 240, .5);--user-text-color: white;--assistant-text-color: #333;--avatar-user-bg: #ffa77e;--divider-color: #ffa77e;--border-radius: 18px;--avatar-size: 36px;--shadow: 0 2px 8px rgba(0, 0, 0, .15);display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:98%;line-height:1.5;position:relative}.user-message{justify-content:flex-end}.user-message .message-bubble{background-color:var(--user-message-bg);color:var(--user-text-color);border-radius:var(--border-radius) var(--border-radius) 0 var(--border-radius);margin-left:8px;min-width:150px}.user-message dc-message-orchestrator{margin-right:19px}.assistant-message{justify-content:flex-start}.assistant-message .message-bubble{background-color:var(--assistant-message-bg);color:var(--assistant-text-color);border-radius:var(--border-radius) var(--border-radius) var(--border-radius) 0;margin-left:8px}.message-bubble{padding:9px;box-shadow:var(--shadow);max-width:98%;min-width:0;position:relative;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.avatar-container,.avatar-container-right{position:absolute;bottom:-20px}.avatar-container{left:-7px;z-index:1}.avatar-container-right{right:-5px;z-index:1}.avatar{width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;background-color:var(--user-message-bg);display:flex;align-items:center;justify-content:center;color:var(--user-text-color);font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:var(--avatar-user-bg)}::ng-deep .em{color:inherit;font-style:italic}::ng-deep .strong{font-weight:700;color:inherit}::ng-deep .em_strong{font-weight:700;font-style:italic;color:inherit}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid var(--divider-color)}.evaluation-footer{position:absolute;bottom:-10px;left:20px;display:flex;align-items:center;gap:8px}.options-footer{position:absolute;bottom:5px;right:20px;display:flex;align-items:center;gap:8px}.pointer{cursor:pointer}.tags{position:absolute;top:-10px;right:15px;display:flex;gap:5px;z-index:1}.tag{font-size:16px;transition:transform .3s ease-in-out;animation:float 6s ease-in-out infinite;cursor:default}.tag:hover{transform:scale(1.2)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-2px)}to{transform:translateY(0)}}.generated-img{width:100%;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatMessageOrchestratorComponent, selector: "dc-message-orchestrator", inputs: ["messages", "messageRole"], outputs: ["audioCompleted"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ChatMessageComponent, isStandalone: true, selector: "dc-chat-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: true, transformFunction: null }, chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar -->\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\" (click)=\"printData()\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"AI\" class=\"avatar-image\" />\n      </div>\n    </div>\n    } @if (isUserMessage()) {\n    <div class=\"avatar-container-right\" (click)=\"printData()\">\n      <div class=\"avatar user-avatar\">\n        <img [src]=\"chatMessage()?.imgUrl || '/assets/defaults/avatar_user.jpg'\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message Bubble -->\n    <div class=\"message-bubble\">\n      @if (chatMessage().generatedImg) {\n      <img class=\"generated-img\" [src]=\"chatMessage().generatedImg\" alt=\"Generated Image\" />\n      } @if (hasMultiMessages()) {\n      <dc-message-orchestrator [messages]=\"multiMessages()\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      } @else {\n      <dc-message-orchestrator [messages]=\"[messageContent()]\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      }\n\n      <!-- Translation -->\n      @if (isAssistantMessage() && chatMessage().evaluation?.['text']) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      } @if (isUserMessage() && chatMessage().evaluation) {\n      <div class=\"translation\" style=\"color: white\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      <div class=\"evaluation-footer\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n      } @if (userService.isAdmin()) {\n      <div class=\"options-footer\">\n        <i #popoverTarget class=\"pi pi-ellipsis-h\" style=\"font-size: 1rem\" (click)=\"op.toggle($event)\"></i>\n        <p-popover #op>\n          <ul class=\"list-none p-0 m-0 flex flex-col\">\n            <li class=\"flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border\" (click)=\"generateImage()\">\n              <span>Generate image</span>\n            </li>\n          </ul>\n        </p-popover>\n      </div>\n      }\n    </div>\n\n    <!-- Tags -->\n    @if (chatMessage().tags?.length) {\n    <div class=\"tags\">\n      @for (tag of chatMessage().tags; track tag) {\n      <span class=\"tag\">{{ tag }}</span>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{--user-message-bg: rgba(244, 100, 81, .5);--assistant-message-bg: rgba(13, 88, 120, .5);--user-text-color: white;--assistant-text-color: #ffffff;--avatar-user-bg: #ffa77e;--divider-color: #ffa77e;--border-radius: 18px;--avatar-size: 36px;--shadow: 0 2px 8px rgba(0, 0, 0, .15);display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:98%;line-height:1.5;position:relative}.user-message{justify-content:flex-end}.user-message .message-bubble{background-color:var(--user-message-bg);color:var(--user-text-color);border-radius:var(--border-radius) var(--border-radius) 0 var(--border-radius);margin-left:8px;min-width:150px}.user-message dc-message-orchestrator{margin-right:19px}.assistant-message{justify-content:flex-start}.assistant-message .message-bubble{background-color:var(--assistant-message-bg);color:var(--assistant-text-color);border-radius:var(--border-radius) var(--border-radius) var(--border-radius) 0;margin-left:8px}.message-bubble{padding:9px;box-shadow:var(--shadow);max-width:98%;min-width:0;position:relative;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.avatar-container,.avatar-container-right{position:absolute;bottom:-20px}.avatar-container{left:-7px;z-index:1}.avatar-container-right{right:-5px;z-index:1}.avatar{width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;background-color:var(--user-message-bg);display:flex;align-items:center;justify-content:center;color:var(--user-text-color);font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:var(--avatar-user-bg)}::ng-deep .em{color:inherit;font-style:italic}::ng-deep .strong{font-weight:700;color:inherit}::ng-deep .em_strong{font-weight:700;font-style:italic;color:inherit}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#d8d8d8;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid var(--divider-color)}.evaluation-footer{position:absolute;bottom:-10px;left:20px;display:flex;align-items:center;gap:8px}.options-footer{position:absolute;bottom:5px;right:20px;display:flex;align-items:center;gap:8px}.pointer{cursor:pointer}.tags{position:absolute;top:-10px;right:15px;display:flex;gap:5px;z-index:1}.tag{font-size:16px;transition:transform .3s ease-in-out;animation:float 6s ease-in-out infinite;cursor:default}.tag:hover{transform:scale(1.2)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-2px)}to{transform:translateY(0)}}.generated-img{width:100%;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatMessageOrchestratorComponent, selector: "dc-message-orchestrator", inputs: ["messages", "messageRole"], outputs: ["audioCompleted"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, ChatMessageOrchestratorComponent, PopoverModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar -->\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\" (click)=\"printData()\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"AI\" class=\"avatar-image\" />\n      </div>\n    </div>\n    } @if (isUserMessage()) {\n    <div class=\"avatar-container-right\" (click)=\"printData()\">\n      <div class=\"avatar user-avatar\">\n        <img [src]=\"chatMessage()?.imgUrl || '/assets/defaults/avatar_user.jpg'\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message Bubble -->\n    <div class=\"message-bubble\">\n      @if (chatMessage().generatedImg) {\n      <img class=\"generated-img\" [src]=\"chatMessage().generatedImg\" alt=\"Generated Image\" />\n      } @if (hasMultiMessages()) {\n      <dc-message-orchestrator [messages]=\"multiMessages()\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      } @else {\n      <dc-message-orchestrator [messages]=\"[messageContent()]\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      }\n\n      <!-- Translation -->\n      @if (isAssistantMessage() && chatMessage().evaluation?.['text']) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      } @if (isUserMessage() && chatMessage().evaluation) {\n      <div class=\"translation\" style=\"color: white\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      <div class=\"evaluation-footer\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n      } @if (userService.isAdmin()) {\n      <div class=\"options-footer\">\n        <i #popoverTarget class=\"pi pi-ellipsis-h\" style=\"font-size: 1rem\" (click)=\"op.toggle($event)\"></i>\n        <p-popover #op>\n          <ul class=\"list-none p-0 m-0 flex flex-col\">\n            <li class=\"flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border\" (click)=\"generateImage()\">\n              <span>Generate image</span>\n            </li>\n          </ul>\n        </p-popover>\n      </div>\n      }\n    </div>\n\n    <!-- Tags -->\n    @if (chatMessage().tags?.length) {\n    <div class=\"tags\">\n      @for (tag of chatMessage().tags; track tag) {\n      <span class=\"tag\">{{ tag }}</span>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{--user-message-bg: rgba(13, 88, 120, .5);--assistant-message-bg: rgba(240, 240, 240, .5);--user-text-color: white;--assistant-text-color: #333;--avatar-user-bg: #ffa77e;--divider-color: #ffa77e;--border-radius: 18px;--avatar-size: 36px;--shadow: 0 2px 8px rgba(0, 0, 0, .15);display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:98%;line-height:1.5;position:relative}.user-message{justify-content:flex-end}.user-message .message-bubble{background-color:var(--user-message-bg);color:var(--user-text-color);border-radius:var(--border-radius) var(--border-radius) 0 var(--border-radius);margin-left:8px;min-width:150px}.user-message dc-message-orchestrator{margin-right:19px}.assistant-message{justify-content:flex-start}.assistant-message .message-bubble{background-color:var(--assistant-message-bg);color:var(--assistant-text-color);border-radius:var(--border-radius) var(--border-radius) var(--border-radius) 0;margin-left:8px}.message-bubble{padding:9px;box-shadow:var(--shadow);max-width:98%;min-width:0;position:relative;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.avatar-container,.avatar-container-right{position:absolute;bottom:-20px}.avatar-container{left:-7px;z-index:1}.avatar-container-right{right:-5px;z-index:1}.avatar{width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;background-color:var(--user-message-bg);display:flex;align-items:center;justify-content:center;color:var(--user-text-color);font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:var(--avatar-user-bg)}::ng-deep .em{color:inherit;font-style:italic}::ng-deep .strong{font-weight:700;color:inherit}::ng-deep .em_strong{font-weight:700;font-style:italic;color:inherit}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid var(--divider-color)}.evaluation-footer{position:absolute;bottom:-10px;left:20px;display:flex;align-items:center;gap:8px}.options-footer{position:absolute;bottom:5px;right:20px;display:flex;align-items:center;gap:8px}.pointer{cursor:pointer}.tags{position:absolute;top:-10px;right:15px;display:flex;gap:5px;z-index:1}.tag{font-size:16px;transition:transform .3s ease-in-out;animation:float 6s ease-in-out infinite;cursor:default}.tag:hover{transform:scale(1.2)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-2px)}to{transform:translateY(0)}}.generated-img{width:100%;border-radius:var(--border-radius)}\n"] }]
+            args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, ChatMessageOrchestratorComponent, PopoverModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar -->\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\" (click)=\"printData()\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"AI\" class=\"avatar-image\" />\n      </div>\n    </div>\n    } @if (isUserMessage()) {\n    <div class=\"avatar-container-right\" (click)=\"printData()\">\n      <div class=\"avatar user-avatar\">\n        <img [src]=\"chatMessage()?.imgUrl || '/assets/defaults/avatar_user.jpg'\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message Bubble -->\n    <div class=\"message-bubble\">\n      @if (chatMessage().generatedImg) {\n      <img class=\"generated-img\" [src]=\"chatMessage().generatedImg\" alt=\"Generated Image\" />\n      } @if (hasMultiMessages()) {\n      <dc-message-orchestrator [messages]=\"multiMessages()\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      } @else {\n      <dc-message-orchestrator [messages]=\"[messageContent()]\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      }\n\n      <!-- Translation -->\n      @if (isAssistantMessage() && chatMessage().evaluation?.['text']) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      } @if (isUserMessage() && chatMessage().evaluation) {\n      <div class=\"translation\" style=\"color: white\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      <div class=\"evaluation-footer\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n      } @if (userService.isAdmin()) {\n      <div class=\"options-footer\">\n        <i #popoverTarget class=\"pi pi-ellipsis-h\" style=\"font-size: 1rem\" (click)=\"op.toggle($event)\"></i>\n        <p-popover #op>\n          <ul class=\"list-none p-0 m-0 flex flex-col\">\n            <li class=\"flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border\" (click)=\"generateImage()\">\n              <span>Generate image</span>\n            </li>\n          </ul>\n        </p-popover>\n      </div>\n      }\n    </div>\n\n    <!-- Tags -->\n    @if (chatMessage().tags?.length) {\n    <div class=\"tags\">\n      @for (tag of chatMessage().tags; track tag) {\n      <span class=\"tag\">{{ tag }}</span>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{--user-message-bg: rgba(244, 100, 81, .5);--assistant-message-bg: rgba(13, 88, 120, .5);--user-text-color: white;--assistant-text-color: #ffffff;--avatar-user-bg: #ffa77e;--divider-color: #ffa77e;--border-radius: 18px;--avatar-size: 36px;--shadow: 0 2px 8px rgba(0, 0, 0, .15);display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:98%;line-height:1.5;position:relative}.user-message{justify-content:flex-end}.user-message .message-bubble{background-color:var(--user-message-bg);color:var(--user-text-color);border-radius:var(--border-radius) var(--border-radius) 0 var(--border-radius);margin-left:8px;min-width:150px}.user-message dc-message-orchestrator{margin-right:19px}.assistant-message{justify-content:flex-start}.assistant-message .message-bubble{background-color:var(--assistant-message-bg);color:var(--assistant-text-color);border-radius:var(--border-radius) var(--border-radius) var(--border-radius) 0;margin-left:8px}.message-bubble{padding:9px;box-shadow:var(--shadow);max-width:98%;min-width:0;position:relative;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.avatar-container,.avatar-container-right{position:absolute;bottom:-20px}.avatar-container{left:-7px;z-index:1}.avatar-container-right{right:-5px;z-index:1}.avatar{width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;background-color:var(--user-message-bg);display:flex;align-items:center;justify-content:center;color:var(--user-text-color);font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:var(--avatar-user-bg)}::ng-deep .em{color:inherit;font-style:italic}::ng-deep .strong{font-weight:700;color:inherit}::ng-deep .em_strong{font-weight:700;font-style:italic;color:inherit}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#d8d8d8;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid var(--divider-color)}.evaluation-footer{position:absolute;bottom:-10px;left:20px;display:flex;align-items:center;gap:8px}.options-footer{position:absolute;bottom:5px;right:20px;display:flex;align-items:center;gap:8px}.pointer{cursor:pointer}.tags{position:absolute;top:-10px;right:15px;display:flex;gap:5px;z-index:1}.tag{font-size:16px;transition:transform .3s ease-in-out;animation:float 6s ease-in-out infinite;cursor:default}.tag:hover{transform:scale(1.2)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-2px)}to{transform:translateY(0)}}.generated-img{width:100%;border-radius:var(--border-radius)}\n"] }]
         }], ctorParameters: () => [] });
 
 class ChatMessagesListComponent {
@@ -3793,6 +3805,9 @@ class ModelSelectorComponent {
      */
     ngOnInit() {
         const providerControl = this.modelForm.get('provider');
+        console.log('providerControl', providerControl);
+        // TODO: Not sure if i still need to do this call with provider, i know what providers i have...
+        return;
         if (providerControl) {
             providerControl.valueChanges.pipe(filter((value) => !!value)).subscribe(async (value) => {
                 try {
@@ -4123,7 +4138,7 @@ class DCChatComponent {
     ngOnDestroy() {
         // Mark conversation as destroyed to prevent async operations
         this.conversationService.setDestroyed(true);
-        this.chatMonitorService.isConversationActive.set(false);
+        this.chatMonitorService.cleanMonitorVars();
         // Ensure the microphone is stopped when the chat component is destroyed
         this.chatFooterComponent?.stopMic();
         this.evaluationService.analylizePerformance();
@@ -4593,7 +4608,15 @@ class ACCMotionGenerationComponent {
         this.audioNotificationService.playFinishNotification();
     }
     ngOnInit() {
-        console.log(this.agentCard);
+        const defaultRatio = this.aspectRatioOptions.find((option) => option.label === 'vertical_9_16');
+        if (defaultRatio) {
+            this.changeRatio(defaultRatio);
+            const defaultResolution = this.resolutionOptions.find((res) => res.key.startsWith('sd'));
+            if (defaultResolution) {
+                this.resolutionSelected = defaultResolution;
+                this.onResolutionChange(this.resolutionSelected);
+            }
+        }
     }
     addEmotion(emotion) {
         if (emotion) {
@@ -4614,10 +4637,18 @@ class ACCMotionGenerationComponent {
             w: value.w,
             h: value.h,
         }));
-        this.resolutionSelected = null;
+        const defaultResolution = this.resolutionOptions.find((res) => res.key.startsWith('sd'));
+        if (defaultResolution) {
+            this.resolutionSelected = defaultResolution;
+            this.onResolutionChange(this.resolutionSelected);
+        }
+        else {
+            this.resolutionSelected = null;
+        }
     }
     onResolutionChange(resolution) {
         if (resolution) {
+            this.resolutionSelected = resolution;
             this.width = resolution.w;
             this.height = resolution.h;
         }
@@ -6067,7 +6098,6 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
                 card.characterCard.data.langTranslation = result.langTranslation;
                 this.entity.update((card) => ({ ...card }));
                 console.log('new chard', this.entity());
-                debugger;
                 if (card && card.characterCard?.data?.langTranslation) {
                     this.characterFormGroupService.handleTranslationForm(this.form, card);
                 }
@@ -6103,8 +6133,17 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         console.log('File uploaded', event);
         this.form.controls.voiceCloning.patchValue({ sample: event });
     }
+    async deleteCard() {
+        const isOk = confirm('PELIGRO! Are you sure you want to delete this card?');
+        if (!isOk) {
+            return;
+        }
+        const data = await this.entityCommunicationService.remove(this.entityId());
+        console.log(data);
+        this.router.navigate(['../../cards-creator'], { relativeTo: this.route });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCAgentCardFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<p-card>\n  <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)=\"save()\" 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    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></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 title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('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.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description 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              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\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          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{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:flex;flex-wrap:wrap;gap:2rem;width:100%}.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.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;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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.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: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled", "metadata"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<p-card>\n  <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)=\"save()\" 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    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></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    <p-button severity=\"danger\" (click)=\"deleteCard()\" icon=\"pi pi-trash\"></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 title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('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.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description 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              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\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          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{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:flex;flex-wrap:wrap;gap:2rem;width:100%}.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.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;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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.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: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled", "metadata"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
             type: Component,
@@ -6133,7 +6172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         DcLearnableFormComponent,
                         SimpleUploaderComponent,
                         TextareaModule,
-                    ], template: "<p-card>\n  <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)=\"save()\" 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    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></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 title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('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.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description 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              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\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          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{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:flex;flex-wrap:wrap;gap:2rem;width:100%}.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.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;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;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"] }]
+                    ], template: "<p-card>\n  <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)=\"save()\" 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    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></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    <p-button severity=\"danger\" (click)=\"deleteCard()\" icon=\"pi pi-trash\"></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 title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('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.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description 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              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\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          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{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:flex;flex-wrap:wrap;gap:2rem;width:100%}.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.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;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;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"] }]
         }] });
 
 class TruncatePipe {
@@ -6310,7 +6349,7 @@ class AgentCardListComponent extends EntityBaseListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AgentCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { extraFilters: { classPropertyName: "extraFilters", publicName: "extraFilters", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null }, gridLayout: { classPropertyName: "gridLayout", publicName: "gridLayout", isSignal: true, isRequired: false, transformFunction: null }, customGetButtons: { classPropertyName: "customGetButtons", publicName: "customGetButtons", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n\n@if(viewType() === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"items()\" [actions]=\"actions()\" (onAction)=\"handleTableAction($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 items(); track card._id) {\n    <dc-agent-card-ui [card]=\"card\" [showOptions]=\"showOptions()\" (onAction)=\"handleAction($event)\"></dc-agent-card-ui>\n    } @if(items().length === 0 && !isLoading) {\n    <div>\n      <dc-empty-state\n        headingText=\"No hay conversaciones para este idioma\"\n        subHeadingText=\"Estamos trabajando en ello...\"\n        mainIconSrcString=\"assets/img/empty-states/empty-box.png\">\n      </dc-empty-state>\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} }\n\n<!-- Desktop Paginator -->\n<!-- <p-paginator\n  class=\"hidden md:block\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  currentPageReportTemplate=\"{first}-{last} de {totalRecords} \"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator> -->\n\n<!-- Mobile Paginator -->\n<p-paginator\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;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%;flex:1;min-height:0;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)}::ng-deep p-paginator .p-paginator{padding:0!important;background:transparent!important}\n"], dependencies: [{ kind: "component", type: AgentCardUI, selector: "dc-agent-card-ui", inputs: ["card", "showOptions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "isAdmin"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EmptyStateComponent, selector: "dc-empty-state", inputs: ["headingText", "subHeadingText", "mainIconSrcString"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { extraFilters: { classPropertyName: "extraFilters", publicName: "extraFilters", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null }, gridLayout: { classPropertyName: "gridLayout", publicName: "gridLayout", isSignal: true, isRequired: false, transformFunction: null }, customGetButtons: { classPropertyName: "customGetButtons", publicName: "customGetButtons", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n\n@if(viewType() === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"items()\" [actions]=\"actions()\" (onAction)=\"handleTableAction($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 items(); track card._id) {\n    <dc-agent-card-ui [card]=\"card\" [showOptions]=\"showOptions()\" (onAction)=\"handleAction($event)\"></dc-agent-card-ui>\n    } @if(items().length === 0 && !isLoading) {\n    <div>\n      <dc-empty-state\n        headingText=\"No hay conversaciones para este idioma\"\n        subHeadingText=\"Estamos trabajando en ello...\"\n        mainIconSrcString=\"assets/img/empty-states/empty-box.png\">\n      </dc-empty-state>\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} }\n\n<!-- Desktop Paginator -->\n<!-- <p-paginator\n  class=\"hidden md:block\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  currentPageReportTemplate=\"{first}-{last} de {totalRecords} \"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator> -->\n\n<!-- Mobile Paginator -->\n<p-paginator\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;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:.7rem 0 0;width:100%;flex:1;min-height:0;display:flex;flex-direction:column}@media (min-width: 900px){.conversation-card-lists{padding:1.5rem}}.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)}::ng-deep p-paginator .p-paginator{padding:0!important;background:transparent!important}\n"], dependencies: [{ kind: "component", type: AgentCardUI, selector: "dc-agent-card-ui", inputs: ["card", "showOptions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "isAdmin"], outputs: ["onFilterAction", "onNew"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EmptyStateComponent, selector: "dc-empty-state", inputs: ["headingText", "subHeadingText", "mainIconSrcString"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AgentCardListComponent, decorators: [{
             type: Component,
@@ -6325,7 +6364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         QuickTableComponent,
                         CommonModule,
                         EmptyStateComponent,
-                    ], standalone: true, template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n\n@if(viewType() === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"items()\" [actions]=\"actions()\" (onAction)=\"handleTableAction($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 items(); track card._id) {\n    <dc-agent-card-ui [card]=\"card\" [showOptions]=\"showOptions()\" (onAction)=\"handleAction($event)\"></dc-agent-card-ui>\n    } @if(items().length === 0 && !isLoading) {\n    <div>\n      <dc-empty-state\n        headingText=\"No hay conversaciones para este idioma\"\n        subHeadingText=\"Estamos trabajando en ello...\"\n        mainIconSrcString=\"assets/img/empty-states/empty-box.png\">\n      </dc-empty-state>\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} }\n\n<!-- Desktop Paginator -->\n<!-- <p-paginator\n  class=\"hidden md:block\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  currentPageReportTemplate=\"{first}-{last} de {totalRecords} \"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator> -->\n\n<!-- Mobile Paginator -->\n<p-paginator\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;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%;flex:1;min-height:0;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)}::ng-deep p-paginator .p-paginator{padding:0!important;background:transparent!important}\n"] }]
+                    ], standalone: true, template: "<dc-filter-bar\n  [isAdmin]=\"userService.isAdmin()\"\n  [options]=\"filterBarOptions\"\n  [customFilters]=\"customFilters\"\n  (onFilterAction)=\"applyFilterBarEvent($event)\"\n  (onNew)=\"onNew()\"></dc-filter-bar>\n\n@if(viewType() === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"items()\" [actions]=\"actions()\" (onAction)=\"handleTableAction($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 items(); track card._id) {\n    <dc-agent-card-ui [card]=\"card\" [showOptions]=\"showOptions()\" (onAction)=\"handleAction($event)\"></dc-agent-card-ui>\n    } @if(items().length === 0 && !isLoading) {\n    <div>\n      <dc-empty-state\n        headingText=\"No hay conversaciones para este idioma\"\n        subHeadingText=\"Estamos trabajando en ello...\"\n        mainIconSrcString=\"assets/img/empty-states/empty-box.png\">\n      </dc-empty-state>\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} }\n\n<!-- Desktop Paginator -->\n<!-- <p-paginator\n  class=\"hidden md:block\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  currentPageReportTemplate=\"{first}-{last} de {totalRecords} \"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator> -->\n\n<!-- Mobile Paginator -->\n<p-paginator\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;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:.7rem 0 0;width:100%;flex:1;min-height:0;display:flex;flex-direction:column}@media (min-width: 900px){.conversation-card-lists{padding:1.5rem}}.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)}::ng-deep p-paginator .p-paginator{padding:0!important;background:transparent!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { extraFilters: [{
                 type: Input
             }] } });
@@ -6355,6 +6394,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
+// I used to import like this, but was outside the library.
+// import { VideoPlayerService } from 'src/app/services/video-player/video-player.service';
 class DcAgentCardDetailsComponent {
     constructor() {
         this.agentCardService = inject(CONVERSATION_AI_TOKEN);
@@ -6362,24 +6403,22 @@ class DcAgentCardDetailsComponent {
         this.toastService = inject(TOAST_ALERTS_TOKEN);
         this.chatMonitorService = inject(ChatMonitorService);
         this.userService = inject(UserService);
+        this.videoPlayerService = inject(VIDEO_PLAYER_SERVICE_TOKEN);
+        this.backgroundService = inject(BACKGROUND_SERVICE_TOKEN);
         this.agentCardId = '';
         this.onStartConversation = output();
         this.agentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "agentCard" }] : []));
-        this.currentMotionUrl = signal(undefined, ...(ngDevMode ? [{ debugName: "currentMotionUrl" }] : []));
         this.showInfoLayer = signal(false, ...(ngDevMode ? [{ debugName: "showInfoLayer" }] : []));
-        this.isVideoReady = signal(false, ...(ngDevMode ? [{ debugName: "isVideoReady" }] : []));
-        this.isIntroPlaying = signal(false, ...(ngDevMode ? [{ debugName: "isIntroPlaying" }] : []));
         effect(() => {
-            if (this.isIntroPlaying())
-                return;
             const mood = this.chatMonitorService.currentMood();
             const card = this.agentCard();
             if (mood && card?.assets?.motions) {
-                const currentMood = mood[0];
-                const motion = card.assets.motions.find((m) => m.metadata?.moodState === currentMood);
-                if (motion?.url !== this.currentMotionUrl()) {
-                    this.isVideoReady.set(false);
-                    this.currentMotionUrl.set(motion.url);
+                const motions = mood
+                    .map((currentMood) => card.assets.motions.find((m) => m.metadata?.moodState === currentMood)?.url)
+                    .filter((url) => !!url);
+                if (motions.length > 0) {
+                    this.videoPlayerService.addVideosToQueue(motions);
+                    this.videoPlayerService.playAndRewind();
                 }
             }
         });
@@ -6390,6 +6429,15 @@ class DcAgentCardDetailsComponent {
             }
         });
     }
+    ngOnDestroy() {
+        this.videoPlayerService.cleanUp();
+        this.backgroundService.setBackground(undefined);
+    }
+    ngAfterViewInit() {
+        if (this.videoPlayer) {
+            this.videoPlayerService.initializePlayer(this.videoPlayer);
+        }
+    }
     async ngOnInit() {
         const id = this.route.snapshot.paramMap.get('id');
         if (id) {
@@ -6409,17 +6457,18 @@ class DcAgentCardDetailsComponent {
         }
         this.agentCard.set(card);
         if (card.assets?.motion?.url) {
-            this.isVideoReady.set(false);
-            this.currentMotionUrl.set(card.assets.motion.url);
+            this.videoPlayerService.setVideoSource(card.assets.motion.url);
         }
-        else {
-            this.currentMotionUrl.set(undefined);
+        if (card.assets.banner?.url) {
+            this.backgroundService.setBackground(card.assets.banner.url);
         }
     }
     transformToLanguage(agentCard, targetLang) {
         const translation = agentCard.characterCard?.data?.langTranslation?.[targetLang];
         const cardTranslated = { ...agentCard };
-        cardTranslated.characterCard.data = { ...agentCard.characterCard?.data, ...translation };
+        // Set Greetings Communication and Language.
+        cardTranslated.characterCard.data.greetings = translation?.greetings;
+        cardTranslated.characterCard.data.persona.communication = translation?.communication;
         cardTranslated.lang = targetLang;
         console.log('cambiando idioma', agentCard.lang);
         const locale = LANGUAGES[targetLang].defaultLocale;
@@ -6443,17 +6492,12 @@ class DcAgentCardDetailsComponent {
         return [locale.replace('_', '-'), ...newVoiceParts].join('-');
     }
     startConversation() {
+        const defaultVideoUrl = this.agentCard()?.assets?.motion?.url;
+        this.videoPlayerService.startConversation(defaultVideoUrl);
         const introMotion = this.agentCard()?.assets?.motions?.find((m) => m.metadata?.event === 'intro');
         if (introMotion?.url) {
-            this.isIntroPlaying.set(true);
-            this.isVideoReady.set(false);
-            this.currentMotionUrl.set(introMotion.url);
-            if (this.videoPlayer?.nativeElement) {
-                this.videoPlayer.nativeElement.loop = false;
-            }
-        }
-        else {
-            this.currentMotionUrl.set(this.agentCard()?.assets?.motion?.url);
+            this.videoPlayerService.addVideosToQueue([introMotion.url]);
+            this.videoPlayerService.playAndRewind();
         }
         const targetLang = this.userService.getTargetLanguage();
         const translation = this.agentCard()?.characterCard?.data?.langTranslation?.[targetLang];
@@ -6471,30 +6515,12 @@ class DcAgentCardDetailsComponent {
     toggleInfoLayer() {
         this.showInfoLayer.update((value) => !value);
     }
-    onVideoReady() {
-        this.isVideoReady.set(true);
-    }
-    onIntroVideoEnd() {
-        if (this.isIntroPlaying()) {
-            this.isIntroPlaying.set(false);
-            this.isVideoReady.set(false);
-            this.currentMotionUrl.set(this.agentCard()?.assets?.motion?.url);
-            if (this.videoPlayer?.nativeElement) {
-                this.videoPlayer.nativeElement.loop = true;
-            }
-        }
-        else {
-            if (this.videoPlayer?.nativeElement) {
-                this.videoPlayer.nativeElement.play();
-            }
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], 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\" alt=\"\" [hidden]=\"isVideoReady()\" />\n      @if(currentMotionUrl()) {\n      <video\n        #videoPlayer\n        class=\"card-image\"\n        [src]=\"currentMotionUrl()\"\n        autoplay\n        muted\n        playsinline\n        (loadeddata)=\"onVideoReady()\"\n        [hidden]=\"!isVideoReady()\"\n        (ended)=\"onIntroVideoEnd()\"></video>\n      }\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      @if(!chatMonitorService.isConversationActive()) {\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\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.title }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", 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}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], 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\" alt=\"\" />\n      <!-- This video is affected by Plyr i set by default background transparent -->\n      <video #videoPlayer class=\"card-image\"></video>\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      @if(!chatMonitorService.isConversationActive()) {\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\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.title }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", 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}::ng-deep .plyr--full-ui{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}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" [hidden]=\"isVideoReady()\" />\n      @if(currentMotionUrl()) {\n      <video\n        #videoPlayer\n        class=\"card-image\"\n        [src]=\"currentMotionUrl()\"\n        autoplay\n        muted\n        playsinline\n        (loadeddata)=\"onVideoReady()\"\n        [hidden]=\"!isVideoReady()\"\n        (ended)=\"onIntroVideoEnd()\"></video>\n      }\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      @if(!chatMonitorService.isConversationActive()) {\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\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.title }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", 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}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
+            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      <!-- This video is affected by Plyr i set by default background transparent -->\n      <video #videoPlayer class=\"card-image\"></video>\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      @if(!chatMonitorService.isConversationActive()) {\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\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.title }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", 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}::ng-deep .plyr--full-ui{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}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
         }], ctorParameters: () => [], propDecorators: { agentCardId: [{
                 type: Input
             }], videoPlayer: [{
@@ -6515,11 +6541,13 @@ var GenerationType;
 class CardsCreatorComponent {
     constructor() {
         this.agentCardsGenerationService = inject(AgentCardsGenerationService);
+        this.agentCardsService = inject(DefaultAgentCardsService);
         this.formBuilder = inject(FormBuilder);
         this.userService = inject(UserService);
         this.languageOptions = SUPPORTED_LANGUAGES.map((lang) => ({ label: getLangDesc(lang, 'en'), value: lang }));
         this.cardId = signal('', ...(ngDevMode ? [{ debugName: "cardId" }] : []));
         this.result = signal(null, ...(ngDevMode ? [{ debugName: "result" }] : []));
+        this.notPublishedResults = signal(null, ...(ngDevMode ? [{ debugName: "notPublishedResults" }] : []));
         this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
         this.cardsForm = this.formBuilder.group({
             idea: ['', Validators.required],
@@ -6613,12 +6641,43 @@ class CardsCreatorComponent {
             this.generateConversationCard();
         }
     }
+    async searchNotPublic() {
+        const filter = {
+            filters: {
+                'manageable.isPublic': false,
+            },
+            returnProps: {
+                id: 1,
+                name: 1,
+                lang: 1,
+                manageable: 1,
+            },
+        };
+        const res = await this.agentCardsService.query(filter);
+        this.notPublishedResults.set(res);
+    }
+    async searchNotpublished() {
+        const filter = {
+            filters: {
+                'manageable.status': { $ne: 'published' },
+            },
+            returnProps: {
+                id: 1,
+                name: 1,
+                lang: 1,
+                manageable: 1,
+                'characterCard.data.name': 1,
+            },
+        };
+        const res = await this.agentCardsService.query(filter);
+        this.notPublishedResults.set(res);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CardsCreatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CardsCreatorComponent, isStandalone: true, selector: "app-cards-creator", ngImport: i0, template: "<div>\n  <h2 class=\"text-2xl font-bold mb-4\">Card Generation</h2>\n  <p-message severity=\"secondary\"\n    >Paso 1: Genearar una o varias tarjetas vacias con solo la idea, estas tiene estatus de pending. no lo cambies ser\u00E1 necesario en el paso 2.\n  </p-message>\n\n  <div class=\"grid\">\n    <div class=\"col-12\">\n      <form [formGroup]=\"cardsForm\" (ngSubmit)=\"generateCards()\">\n        <div class=\"p-panel p-4\">\n          <h3 class=\"text-xl font-semibold mb-3\">Generate Cards</h3>\n          <p-message severity=\"info\">Generate one or more cards with an idea. Cards will be created with a 'pending' status.</p-message>\n\n          <div class=\"field mt-4\">\n            <label for=\"idea\">Idea</label>\n            <input id=\"idea\" type=\"text\" pInputText formControlName=\"idea\" placeholder=\"e.g., 'Ordering food at a restaurant'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"form-field mt-4\">\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              [filter]=\"true\"\n              formControlName=\"langCode\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"\n              styleClass=\"w-full\"></p-select>\n          </div>\n\n          <div class=\"field mt-4\">\n            <label for=\"num-cards\">Number of Cards</label>\n            <input id=\"num-cards\" type=\"number\" pInputText formControlName=\"numCards\" placeholder=\"e.g., '10'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"flex flex-wrap gap-4 mt-4\">\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"autosave\" inputId=\"autosave-switch\"></p-toggleSwitch>\n              <label for=\"autosave-switch\" class=\"ml-2\"> Auto-save?</label>\n            </div>\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"doNotRepeat\" inputId=\"repeat-switch\"></p-toggleSwitch>\n              <label for=\"repeat-switch\" class=\"ml-2\"> Do not repeat topics?</label>\n            </div>\n          </div>\n\n          <div class=\"mt-4\">\n            <p-button label=\"Generate Cards\" icon=\"pi pi-bolt\" type=\"submit\" [loading]=\"loading()\" [disabled]=\"cardsForm.invalid\"></p-button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <p-divider align=\"center\" styleClass=\"my-5\">\n    <span class=\"p-tag\">Maintenance</span>\n  </p-divider>\n\n  <!-- Maintenance Section -->\n  <div class=\"grid\">\n    <!-- Card Specific Maintenance -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Card Specific Maintenance</h3>\n        <div class=\"field\">\n          <label for=\"cardId\">Card ID</label>\n          <input\n            id=\"cardId\"\n            type=\"text\"\n            pInputText\n            [value]=\"cardId()\"\n            (input)=\"cardId.set($any($event.target).value)\"\n            placeholder=\"Enter Card ID\"\n            class=\"w-full\" />\n        </div>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Generate Image\" icon=\"pi pi-image\" (onClick)=\"generateImageForCard()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Missing Data\"\n            icon=\"pi pi-database\"\n            (onClick)=\"generateMissingData()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Batch Operations -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Batch Operations</h3>\n        <p>Run maintenance tasks on all pending cards.</p>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Complete Pending Cards\" icon=\"pi pi-check-square\" (onClick)=\"completePendingCards()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Pending Images\"\n            icon=\"pi pi-images\"\n            (onClick)=\"generatePendingImages()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Result Section -->\n  @if (result()) {\n  <div class=\"col-12 mt-4\">\n    <div class=\"p-panel p-4\">\n      <h3 class=\"text-xl font-semibold mb-3\">Result</h3>\n      <pre>{{ result() | json }}</pre>\n    </div>\n  </div>\n  }\n</div>\n", styles: [""], 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.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.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: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$1.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CardsCreatorComponent, isStandalone: true, selector: "app-cards-creator", ngImport: i0, template: "<div>\n  <h2 class=\"text-2xl font-bold mb-4\">Card Generation</h2>\n  <p-message severity=\"secondary\"\n    >Paso 1: Genearar una o varias tarjetas vacias con solo la idea, estas tiene estatus de pending. no lo cambies ser\u00E1 necesario en el paso 2.\n  </p-message>\n\n  <div class=\"grid\">\n    <div class=\"col-12\">\n      <form [formGroup]=\"cardsForm\" (ngSubmit)=\"generateCards()\">\n        <div class=\"p-panel p-4\">\n          <h3 class=\"text-xl font-semibold mb-3\">Generate Cards</h3>\n          <p-message severity=\"info\">Generate one or more cards with an idea. Cards will be created with a 'pending' status.</p-message>\n\n          <div class=\"field mt-4\">\n            <label for=\"idea\">Idea</label>\n            <input id=\"idea\" type=\"text\" pInputText formControlName=\"idea\" placeholder=\"e.g., 'Ordering food at a restaurant'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"form-field mt-4\">\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              [filter]=\"true\"\n              formControlName=\"langCode\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"\n              styleClass=\"w-full\"></p-select>\n          </div>\n\n          <div class=\"field mt-4\">\n            <label for=\"num-cards\">Number of Cards</label>\n            <input id=\"num-cards\" type=\"number\" pInputText formControlName=\"numCards\" placeholder=\"e.g., '10'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"flex flex-wrap gap-4 mt-4\">\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"autosave\" inputId=\"autosave-switch\"></p-toggleSwitch>\n              <label for=\"autosave-switch\" class=\"ml-2\"> Auto-save?</label>\n            </div>\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"doNotRepeat\" inputId=\"repeat-switch\"></p-toggleSwitch>\n              <label for=\"repeat-switch\" class=\"ml-2\"> Do not repeat topics?</label>\n            </div>\n          </div>\n\n          <div class=\"mt-4\">\n            <p-button label=\"Generate Cards\" icon=\"pi pi-bolt\" type=\"submit\" [loading]=\"loading()\" [disabled]=\"cardsForm.invalid\"></p-button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <p-divider align=\"center\" styleClass=\"my-5\">\n    <span class=\"p-tag\">Maintenance</span>\n  </p-divider>\n\n  <!-- Maintenance Section -->\n  <div class=\"grid\">\n    <!-- Card Specific Maintenance -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Card Specific Maintenance</h3>\n        <div class=\"field\">\n          <label for=\"cardId\">Card ID</label>\n          <input\n            id=\"cardId\"\n            type=\"text\"\n            pInputText\n            [value]=\"cardId()\"\n            (input)=\"cardId.set($any($event.target).value)\"\n            placeholder=\"Enter Card ID\"\n            class=\"w-full\" />\n        </div>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Generate Image\" icon=\"pi pi-image\" (onClick)=\"generateImageForCard()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Missing Data\"\n            icon=\"pi pi-database\"\n            (onClick)=\"generateMissingData()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Batch Operations -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Batch Operations</h3>\n        <p>Run maintenance tasks on all pending cards.</p>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Complete Pending Cards\" icon=\"pi pi-check-square\" (onClick)=\"completePendingCards()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Pending Images\"\n            icon=\"pi pi-images\"\n            (onClick)=\"generatePendingImages()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Result Section -->\n  @if (result()) {\n  <div class=\"col-12 mt-4\">\n    <div class=\"p-panel p-4\">\n      <h3 class=\"text-xl font-semibold mb-3\">Result</h3>\n      <pre>{{ result() | json }}</pre>\n    </div>\n  </div>\n  }\n\n  <p-divider align=\"center\" styleClass=\"my-5\"> Busquedas pendientes </p-divider>\n\n  <p-button label=\"Buscar No publicadas\" icon=\"pi pi-database\" (onClick)=\"searchNotPublic()\" [loading]=\"loading()\" severity=\"secondary\"></p-button>\n  <p-button label=\"Buscar no publicadas (new)\" icon=\"pi pi-database\" (onClick)=\"searchNotpublished()\" [loading]=\"loading()\" severity=\"secondary\"></p-button>\n  <br />\n\n  <br />\n\n  @if (notPublishedResults()) {\n  <div class=\"mt-4\">\n    <p-table [value]=\"notPublishedResults().rows\" [tableStyle]=\"{ 'min-width': '50rem' }\">\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th>ID</th>\n          <th>Name</th>\n          <th>Language</th>\n          <th>Status</th>\n          <th>Character Name</th>\n          <th>Actions</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row>\n        <tr>\n          <td>{{ row?._id }}</td>\n          <td>{{ row?.name }}</td>\n          <td>{{ row?.lang }}</td>\n          <td>{{ row?.manageable?.status }}</td>\n          <td>{{ row?.characterCard?.data?.name }}</td>\n          <td>\n            <a [href]=\"'/app/conversations/edit/' + row._id\" target=\"_blank\">\n              <p-button icon=\"pi pi-pencil\" styleClass=\"p-button-rounded p-button-text\"></p-button>\n            </a>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n\n    <br />\n    <br />\n  </div>\n  }\n</div>\n", styles: [""], 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.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.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: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$1.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "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: "pipe", type: i2$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CardsCreatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cards-creator', standalone: true, imports: [ReactiveFormsModule, CommonModule, ButtonModule, InputTextModule, DividerModule, MessageModule, SelectModule, ToggleSwitchModule], template: "<div>\n  <h2 class=\"text-2xl font-bold mb-4\">Card Generation</h2>\n  <p-message severity=\"secondary\"\n    >Paso 1: Genearar una o varias tarjetas vacias con solo la idea, estas tiene estatus de pending. no lo cambies ser\u00E1 necesario en el paso 2.\n  </p-message>\n\n  <div class=\"grid\">\n    <div class=\"col-12\">\n      <form [formGroup]=\"cardsForm\" (ngSubmit)=\"generateCards()\">\n        <div class=\"p-panel p-4\">\n          <h3 class=\"text-xl font-semibold mb-3\">Generate Cards</h3>\n          <p-message severity=\"info\">Generate one or more cards with an idea. Cards will be created with a 'pending' status.</p-message>\n\n          <div class=\"field mt-4\">\n            <label for=\"idea\">Idea</label>\n            <input id=\"idea\" type=\"text\" pInputText formControlName=\"idea\" placeholder=\"e.g., 'Ordering food at a restaurant'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"form-field mt-4\">\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              [filter]=\"true\"\n              formControlName=\"langCode\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"\n              styleClass=\"w-full\"></p-select>\n          </div>\n\n          <div class=\"field mt-4\">\n            <label for=\"num-cards\">Number of Cards</label>\n            <input id=\"num-cards\" type=\"number\" pInputText formControlName=\"numCards\" placeholder=\"e.g., '10'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"flex flex-wrap gap-4 mt-4\">\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"autosave\" inputId=\"autosave-switch\"></p-toggleSwitch>\n              <label for=\"autosave-switch\" class=\"ml-2\"> Auto-save?</label>\n            </div>\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"doNotRepeat\" inputId=\"repeat-switch\"></p-toggleSwitch>\n              <label for=\"repeat-switch\" class=\"ml-2\"> Do not repeat topics?</label>\n            </div>\n          </div>\n\n          <div class=\"mt-4\">\n            <p-button label=\"Generate Cards\" icon=\"pi pi-bolt\" type=\"submit\" [loading]=\"loading()\" [disabled]=\"cardsForm.invalid\"></p-button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <p-divider align=\"center\" styleClass=\"my-5\">\n    <span class=\"p-tag\">Maintenance</span>\n  </p-divider>\n\n  <!-- Maintenance Section -->\n  <div class=\"grid\">\n    <!-- Card Specific Maintenance -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Card Specific Maintenance</h3>\n        <div class=\"field\">\n          <label for=\"cardId\">Card ID</label>\n          <input\n            id=\"cardId\"\n            type=\"text\"\n            pInputText\n            [value]=\"cardId()\"\n            (input)=\"cardId.set($any($event.target).value)\"\n            placeholder=\"Enter Card ID\"\n            class=\"w-full\" />\n        </div>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Generate Image\" icon=\"pi pi-image\" (onClick)=\"generateImageForCard()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Missing Data\"\n            icon=\"pi pi-database\"\n            (onClick)=\"generateMissingData()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Batch Operations -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Batch Operations</h3>\n        <p>Run maintenance tasks on all pending cards.</p>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Complete Pending Cards\" icon=\"pi pi-check-square\" (onClick)=\"completePendingCards()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Pending Images\"\n            icon=\"pi pi-images\"\n            (onClick)=\"generatePendingImages()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Result Section -->\n  @if (result()) {\n  <div class=\"col-12 mt-4\">\n    <div class=\"p-panel p-4\">\n      <h3 class=\"text-xl font-semibold mb-3\">Result</h3>\n      <pre>{{ result() | json }}</pre>\n    </div>\n  </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'app-cards-creator', standalone: true, imports: [ReactiveFormsModule, CommonModule, ButtonModule, InputTextModule, DividerModule, MessageModule, SelectModule, ToggleSwitchModule, TableModule], template: "<div>\n  <h2 class=\"text-2xl font-bold mb-4\">Card Generation</h2>\n  <p-message severity=\"secondary\"\n    >Paso 1: Genearar una o varias tarjetas vacias con solo la idea, estas tiene estatus de pending. no lo cambies ser\u00E1 necesario en el paso 2.\n  </p-message>\n\n  <div class=\"grid\">\n    <div class=\"col-12\">\n      <form [formGroup]=\"cardsForm\" (ngSubmit)=\"generateCards()\">\n        <div class=\"p-panel p-4\">\n          <h3 class=\"text-xl font-semibold mb-3\">Generate Cards</h3>\n          <p-message severity=\"info\">Generate one or more cards with an idea. Cards will be created with a 'pending' status.</p-message>\n\n          <div class=\"field mt-4\">\n            <label for=\"idea\">Idea</label>\n            <input id=\"idea\" type=\"text\" pInputText formControlName=\"idea\" placeholder=\"e.g., 'Ordering food at a restaurant'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"form-field mt-4\">\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              [filter]=\"true\"\n              formControlName=\"langCode\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"\n              styleClass=\"w-full\"></p-select>\n          </div>\n\n          <div class=\"field mt-4\">\n            <label for=\"num-cards\">Number of Cards</label>\n            <input id=\"num-cards\" type=\"number\" pInputText formControlName=\"numCards\" placeholder=\"e.g., '10'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"flex flex-wrap gap-4 mt-4\">\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"autosave\" inputId=\"autosave-switch\"></p-toggleSwitch>\n              <label for=\"autosave-switch\" class=\"ml-2\"> Auto-save?</label>\n            </div>\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"doNotRepeat\" inputId=\"repeat-switch\"></p-toggleSwitch>\n              <label for=\"repeat-switch\" class=\"ml-2\"> Do not repeat topics?</label>\n            </div>\n          </div>\n\n          <div class=\"mt-4\">\n            <p-button label=\"Generate Cards\" icon=\"pi pi-bolt\" type=\"submit\" [loading]=\"loading()\" [disabled]=\"cardsForm.invalid\"></p-button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <p-divider align=\"center\" styleClass=\"my-5\">\n    <span class=\"p-tag\">Maintenance</span>\n  </p-divider>\n\n  <!-- Maintenance Section -->\n  <div class=\"grid\">\n    <!-- Card Specific Maintenance -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Card Specific Maintenance</h3>\n        <div class=\"field\">\n          <label for=\"cardId\">Card ID</label>\n          <input\n            id=\"cardId\"\n            type=\"text\"\n            pInputText\n            [value]=\"cardId()\"\n            (input)=\"cardId.set($any($event.target).value)\"\n            placeholder=\"Enter Card ID\"\n            class=\"w-full\" />\n        </div>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Generate Image\" icon=\"pi pi-image\" (onClick)=\"generateImageForCard()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Missing Data\"\n            icon=\"pi pi-database\"\n            (onClick)=\"generateMissingData()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Batch Operations -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Batch Operations</h3>\n        <p>Run maintenance tasks on all pending cards.</p>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Complete Pending Cards\" icon=\"pi pi-check-square\" (onClick)=\"completePendingCards()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Pending Images\"\n            icon=\"pi pi-images\"\n            (onClick)=\"generatePendingImages()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Result Section -->\n  @if (result()) {\n  <div class=\"col-12 mt-4\">\n    <div class=\"p-panel p-4\">\n      <h3 class=\"text-xl font-semibold mb-3\">Result</h3>\n      <pre>{{ result() | json }}</pre>\n    </div>\n  </div>\n  }\n\n  <p-divider align=\"center\" styleClass=\"my-5\"> Busquedas pendientes </p-divider>\n\n  <p-button label=\"Buscar No publicadas\" icon=\"pi pi-database\" (onClick)=\"searchNotPublic()\" [loading]=\"loading()\" severity=\"secondary\"></p-button>\n  <p-button label=\"Buscar no publicadas (new)\" icon=\"pi pi-database\" (onClick)=\"searchNotpublished()\" [loading]=\"loading()\" severity=\"secondary\"></p-button>\n  <br />\n\n  <br />\n\n  @if (notPublishedResults()) {\n  <div class=\"mt-4\">\n    <p-table [value]=\"notPublishedResults().rows\" [tableStyle]=\"{ 'min-width': '50rem' }\">\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th>ID</th>\n          <th>Name</th>\n          <th>Language</th>\n          <th>Status</th>\n          <th>Character Name</th>\n          <th>Actions</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row>\n        <tr>\n          <td>{{ row?._id }}</td>\n          <td>{{ row?.name }}</td>\n          <td>{{ row?.lang }}</td>\n          <td>{{ row?.manageable?.status }}</td>\n          <td>{{ row?.characterCard?.data?.name }}</td>\n          <td>\n            <a [href]=\"'/app/conversations/edit/' + row._id\" target=\"_blank\">\n              <p-button icon=\"pi pi-pencil\" styleClass=\"p-button-rounded p-button-text\"></p-button>\n            </a>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n\n    <br />\n    <br />\n  </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /*
@@ -6630,5 +6689,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACCDataGenerationComponent, AGENT_CARDS_STATE_SERVICE, AIGenerationService, AgentCardListComponent, AgentCardUI, AgentCardsGenerationService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, CardsCreatorComponent, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardDetailsComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EAgentType, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, MessageContent, MessageContentDisplayer, MessagesStateService, ModelSelectorComponent, PopupService, SystemPromptType, TextEngineOptions, TextEngines, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, getMoodStatePrompt, markdownToHtml, matchTranscription, provideAgentCardService, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
+export { ACCDataGenerationComponent, AGENT_CARDS_STATE_SERVICE, AIGenerationService, AgentCardListComponent, AgentCardUI, AgentCardsGenerationService, AudioService, AudioSpeed, BACKGROUND_SERVICE_TOKEN, CONVERSATION_AI_TOKEN, CardsCreatorComponent, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardDetailsComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EAgentType, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, MessageContent, MessageContentDisplayer, MessagesStateService, ModelSelectorComponent, PopupService, SystemPromptType, TextEngineOptions, TextEngines, VIDEO_PLAYER_SERVICE_TOKEN, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, getMoodStatePrompt, markdownToHtml, matchTranscription, provideAgentCardService, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map