@dataclouder/ngx-agent-cards 0.2.11 → 0.2.13

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

@@ -79,6 +79,9 @@ import { PaginatorModule } from 'primeng/paginator';
 import * as i3$5 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
 import { isEmpty } from 'es-toolkit/compat';
+import { Live2DModel } from 'untitled-pixi-live2d-engine/cubism';
+import * as PIXI from 'pixi.js';
+import { Application } from 'pixi.js';
 import * as i3$6 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { form, required, submit, FormField } from '@angular/forms/signals';
@@ -239,6 +242,7 @@ var EAccountsPlatform;
     EAccountsPlatform["Tiktok"] = "tiktok";
     EAccountsPlatform["Instagram"] = "instagram";
     EAccountsPlatform["Youtube"] = "youtube";
+    EAccountsPlatform["Facebook"] = "facebook";
 })(EAccountsPlatform || (EAccountsPlatform = {}));
 class WordTimestamps {
     constructor() {
@@ -1476,6 +1480,14 @@ class DefaultAgentCardsService extends EntityCommunicationService {
         this.fbAuthService = inject(FirebaseAuthService, { optional: true });
         this.randomSeed = Math.floor(Math.random() * 100000);
     }
+    findOne(id, projection) {
+        return this.operation({
+            action: 'findOne',
+            query: { _id: id },
+            projection,
+            populate: 'live2d',
+        });
+    }
     partialUpdateAgentCard(agentCard) {
         const id = agentCard.id || agentCard._id;
         return this.operation({
@@ -7370,66 +7382,93 @@ class AccountPlatformForm {
         this.fb = inject(FormBuilder);
         this.router = inject(Router);
         this.toastService = inject(TOAST_ALERTS_TOKEN);
+        this.cdr = inject(ChangeDetectorRef);
         // Format the platform options for dropdown display
         this.platformOptions = Object.values(EAccountsPlatform).map((value) => ({
             label: value.charAt(0).toUpperCase() + value.slice(1), // Capitalize first letter
             value: value,
         }));
+        this.authMethodOptions = [
+            { label: 'Google OAuth', value: 'google' },
+            { label: 'Otro / Contraseña', value: 'other' }
+        ];
         this.genericId = this.route.snapshot.params['id'];
+        // Keep track of which indexes are expanded. By default, all are minimized (empty Set).
+        this.expandedIndexes = new Set();
     }
     async ngOnInit() {
         // Initialize the form if not provided as input
         if (!this.formArray) {
             this.formArray = this.fb.array([]);
         }
-        else {
-            this.formArray.push(this.fb.group({
-                name: [''],
-                platform: [''],
-                email: [''],
-            }));
-        }
+        // Force initial change detection
+        this.cdr.markForCheck();
+        // Force change detection when the FormArray's structure or values change asynchronously
+        this.formArray.valueChanges.subscribe(() => {
+            this.cdr.markForCheck();
+        });
     }
-    async save() {
-        if (this.formArray.valid) {
-            try {
-                // Add your save logic here
-                const formData = {
-                    ...this.formArray.value,
-                };
-                console.log('Form data to save:', formData);
-                const successToast = {
-                    title: 'Success',
-                    subtitle: 'Form saved successfully',
-                };
-                this.toastService.success(successToast);
-                // Navigate back or to a specific route after saving
-                this.router.navigate(['../'], { relativeTo: this.route });
+    createAccountFormGroup(account) {
+        return this.fb.group({
+            platform: [account?.platform || EAccountsPlatform.Google],
+            user: [account?.user || ''],
+            email: [account?.email || ''],
+            authMethod: [account?.authMethod || 'google'],
+            pass: [account?.pass || ''],
+        });
+    }
+    addAccount() {
+        const newIndex = this.formArray.length;
+        this.formArray.push(this.createAccountFormGroup());
+        // Auto expand newly added accounts
+        this.expandedIndexes.add(newIndex);
+        this.formArray.markAsDirty();
+        this.cdr.markForCheck();
+    }
+    removeAccount(index, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.formArray.removeAt(index);
+        this.expandedIndexes.delete(index);
+        // Adjust set of expanded indexes to account for index shift
+        const newExpanded = new Set();
+        this.expandedIndexes.forEach((idx) => {
+            if (idx > index) {
+                newExpanded.add(idx - 1);
             }
-            catch (error) {
-                console.error('Error saving form:', error);
-                const errorToast = {
-                    title: 'Error',
-                    subtitle: 'Error saving form',
-                };
-                this.toastService.error(errorToast);
+            else if (idx < index) {
+                newExpanded.add(idx);
             }
+        });
+        this.expandedIndexes = newExpanded;
+        this.formArray.markAsDirty();
+        this.cdr.markForCheck();
+    }
+    toggleExpand(index, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.expandedIndexes.has(index)) {
+            this.expandedIndexes.delete(index);
         }
         else {
-            this.formArray.markAllAsTouched();
-            const infoToast = {
-                title: 'Warning',
-                subtitle: 'Please fill all required fields',
-            };
-            this.toastService.warn(infoToast);
+            this.expandedIndexes.add(index);
         }
+        this.cdr.markForCheck();
+    }
+    isExpanded(index) {
+        return this.expandedIndexes.has(index);
+    }
+    getPlatformLabel(value) {
+        return value ? value.charAt(0).toUpperCase() + value.slice(1) : 'Plataforma';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AccountPlatformForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-select>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$6.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.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", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"accounts-container\" style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n    <span style=\"font-weight: 600; font-size: 1.1rem; color: var(--p-text-color);\">Cuentas Vinculadas</span>\n    <p-button type=\"button\" severity=\"success\" icon=\"pi pi-plus\" label=\"Agregar cuenta\" (click)=\"addAccount()\"></p-button>\n  </div>\n\n  @if (formArray?.controls?.length === 0) {\n    <div style=\"text-align: center; padding: 2rem; color: var(--p-text-muted-color); border: 1px dashed var(--p-content-border-color); border-radius: 6px;\">\n      <i class=\"pi pi-info-circle\" style=\"font-size: 1.5rem; margin-bottom: 0.5rem; display: block;\"></i>\n      No hay cuentas vinculadas. Presiona \"Agregar cuenta\" para registrar una.\n    </div>\n  } @else {\n    <div style=\"display: flex; flex-direction: column; gap: 0.75rem;\">\n      @for (formAccount of formArray.controls; track formAccount; let idx = $index) {\n        <div \n          [style.border]=\"'1px solid var(--p-content-border-color)'\" \n          [style.borderRadius]=\"'6px'\"\n          [style.backgroundColor]=\"'var(--p-content-background)'\"\n          [style.overflow]=\"'hidden'\"\n          [style.transition]=\"'all 0.2s ease'\">\n          \n          <!-- Compact Row Header (Always visible, click to toggle) -->\n          <div \n            (click)=\"toggleExpand(idx)\" \n            style=\"display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; cursor: pointer; background-color: var(--p-content-background); transition: background-color 0.15s;\"\n            [style.borderBottom]=\"isExpanded(idx) ? '1px solid var(--p-content-border-color)' : 'none'\"\n            class=\"hover:bg-muted-light\">\n            \n            <div style=\"display: flex; align-items: center; gap: 0.75rem;\">\n              <i class=\"pi\" [class.pi-chevron-right]=\"!isExpanded(idx)\" [class.pi-chevron-down]=\"isExpanded(idx)\" style=\"font-size: 0.85rem; color: var(--p-text-muted-color);\"></i>\n              \n              <!-- Badge/Chip for Platform -->\n              <span \n                [style.fontWeight]=\"'600'\" \n                [style.fontSize]=\"'0.95rem'\"\n                [style.color]=\"'var(--p-primary-color)'\">\n                {{ getPlatformLabel(formAccount.get('platform')?.value) }}\n              </span>\n\n              <!-- Muted details -->\n              @if (formAccount.get('user')?.value || formAccount.get('email')?.value) {\n                <span style=\"font-size: 0.85rem; color: var(--p-text-muted-color);\">\n                  \u2014 {{ formAccount.get('user')?.value || formAccount.get('email')?.value }}\n                </span>\n              }\n            </div>\n\n            <!-- Actions -->\n            <div style=\"display: flex; align-items: center; gap: 0.5rem;\" (click)=\"$event.stopPropagation()\">\n              <p-button \n                type=\"button\" \n                severity=\"danger\" \n                [text]=\"true\" \n                icon=\"pi pi-trash\" \n                pTooltip=\"Eliminar cuenta\" \n                (click)=\"removeAccount(idx, $event)\">\n              </p-button>\n            </div>\n          </div>\n\n          <!-- Expanded Body (Only visible if expanded) -->\n          @if (isExpanded(idx)) {\n            <div style=\"padding: 1.25rem; background-color: var(--p-content-background);\">\n              <form [formGroup]=\"$any(formAccount)\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;\">\n                <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n                  <label style=\"font-weight: 500; font-size: 0.85rem;\">Plataforma</label>\n                  <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Selecciona una plataforma\" styleClass=\"w-full\"></p-select>\n                </div>\n\n                <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n                  <label style=\"font-weight: 500; font-size: 0.85rem;\">Usuario</label>\n                  <input pInputText type=\"text\" formControlName=\"user\" placeholder=\"Nombre de usuario\" class=\"w-full\" />\n                </div>\n\n                <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n                  <label style=\"font-weight: 500; font-size: 0.85rem;\">Correo Electr\u00F3nico</label>\n                  <input pInputText type=\"email\" formControlName=\"email\" placeholder=\"ejemplo@correo.com\" class=\"w-full\" />\n                </div>\n\n                <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n                  <label style=\"font-weight: 500; font-size: 0.85rem;\">M\u00E9todo de Autenticaci\u00F3n</label>\n                  <p-select [options]=\"authMethodOptions\" formControlName=\"authMethod\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Selecciona un m\u00E9todo\" styleClass=\"w-full\"></p-select>\n                </div>\n\n                <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n                  <label style=\"font-weight: 500; font-size: 0.85rem;\">Contrase\u00F1a / Token</label>\n                  <input pInputText type=\"password\" formControlName=\"pass\" placeholder=\"Ingresa la contrase\u00F1a\" class=\"w-full\" />\n                </div>\n              </form>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.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", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { 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", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AccountPlatformForm, decorators: [{
             type: Component,
-            args: [{ selector: 'account-platform-form', imports: [ReactiveFormsModule, CardModule, TextareaModule, ButtonModule, SelectModule, InputTextModule, ChipModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-select>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"] }]
+            args: [{ selector: 'account-platform-form', imports: [ReactiveFormsModule, CardModule, TextareaModule, ButtonModule, SelectModule, InputTextModule, ChipModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"accounts-container\" style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n    <span style=\"font-weight: 600; font-size: 1.1rem; color: var(--p-text-color);\">Cuentas Vinculadas</span>\n    <p-button type=\"button\" severity=\"success\" icon=\"pi pi-plus\" label=\"Agregar cuenta\" (click)=\"addAccount()\"></p-button>\n  </div>\n\n  @if (formArray?.controls?.length === 0) {\n    <div style=\"text-align: center; padding: 2rem; color: var(--p-text-muted-color); border: 1px dashed var(--p-content-border-color); border-radius: 6px;\">\n      <i class=\"pi pi-info-circle\" style=\"font-size: 1.5rem; margin-bottom: 0.5rem; display: block;\"></i>\n      No hay cuentas vinculadas. Presiona \"Agregar cuenta\" para registrar una.\n    </div>\n  } @else {\n    <div style=\"display: flex; flex-direction: column; gap: 0.75rem;\">\n      @for (formAccount of formArray.controls; track formAccount; let idx = $index) {\n        <div \n          [style.border]=\"'1px solid var(--p-content-border-color)'\" \n          [style.borderRadius]=\"'6px'\"\n          [style.backgroundColor]=\"'var(--p-content-background)'\"\n          [style.overflow]=\"'hidden'\"\n          [style.transition]=\"'all 0.2s ease'\">\n          \n          <!-- Compact Row Header (Always visible, click to toggle) -->\n          <div \n            (click)=\"toggleExpand(idx)\" \n            style=\"display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; cursor: pointer; background-color: var(--p-content-background); transition: background-color 0.15s;\"\n            [style.borderBottom]=\"isExpanded(idx) ? '1px solid var(--p-content-border-color)' : 'none'\"\n            class=\"hover:bg-muted-light\">\n            \n            <div style=\"display: flex; align-items: center; gap: 0.75rem;\">\n              <i class=\"pi\" [class.pi-chevron-right]=\"!isExpanded(idx)\" [class.pi-chevron-down]=\"isExpanded(idx)\" style=\"font-size: 0.85rem; color: var(--p-text-muted-color);\"></i>\n              \n              <!-- Badge/Chip for Platform -->\n              <span \n                [style.fontWeight]=\"'600'\" \n                [style.fontSize]=\"'0.95rem'\"\n                [style.color]=\"'var(--p-primary-color)'\">\n                {{ getPlatformLabel(formAccount.get('platform')?.value) }}\n              </span>\n\n              <!-- Muted details -->\n              @if (formAccount.get('user')?.value || formAccount.get('email')?.value) {\n                <span style=\"font-size: 0.85rem; color: var(--p-text-muted-color);\">\n                  \u2014 {{ formAccount.get('user')?.value || formAccount.get('email')?.value }}\n                </span>\n              }\n            </div>\n\n            <!-- Actions -->\n            <div style=\"display: flex; align-items: center; gap: 0.5rem;\" (click)=\"$event.stopPropagation()\">\n              <p-button \n                type=\"button\" \n                severity=\"danger\" \n                [text]=\"true\" \n                icon=\"pi pi-trash\" \n                pTooltip=\"Eliminar cuenta\" \n                (click)=\"removeAccount(idx, $event)\">\n              </p-button>\n            </div>\n          </div>\n\n          <!-- Expanded Body (Only visible if expanded) -->\n          @if (isExpanded(idx)) {\n            <div style=\"padding: 1.25rem; background-color: var(--p-content-background);\">\n              <form [formGroup]=\"$any(formAccount)\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;\">\n                <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n                  <label style=\"font-weight: 500; font-size: 0.85rem;\">Plataforma</label>\n                  <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Selecciona una plataforma\" styleClass=\"w-full\"></p-select>\n                </div>\n\n                <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n                  <label style=\"font-weight: 500; font-size: 0.85rem;\">Usuario</label>\n                  <input pInputText type=\"text\" formControlName=\"user\" placeholder=\"Nombre de usuario\" class=\"w-full\" />\n                </div>\n\n                <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n                  <label style=\"font-weight: 500; font-size: 0.85rem;\">Correo Electr\u00F3nico</label>\n                  <input pInputText type=\"email\" formControlName=\"email\" placeholder=\"ejemplo@correo.com\" class=\"w-full\" />\n                </div>\n\n                <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n                  <label style=\"font-weight: 500; font-size: 0.85rem;\">M\u00E9todo de Autenticaci\u00F3n</label>\n                  <p-select [options]=\"authMethodOptions\" formControlName=\"authMethod\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Selecciona un m\u00E9todo\" styleClass=\"w-full\"></p-select>\n                </div>\n\n                <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n                  <label style=\"font-weight: 500; font-size: 0.85rem;\">Contrase\u00F1a / Token</label>\n                  <input pInputText type=\"password\" formControlName=\"pass\" placeholder=\"Ingresa la contrase\u00F1a\" class=\"w-full\" />\n                </div>\n              </form>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"] }]
         }], propDecorators: { formArray: [{
                 type: Input
             }] } });
@@ -7455,6 +7494,8 @@ class CharacterFormGroupService {
             learnable: this.formUtils.createLearnableFormGroup(),
             voiceCloning: this.createVoiceCloningFormGroup(),
             agenticConfig: this.createAgenticConfigFormGroup(),
+            live2d: [null],
+            avatarType: [null],
         });
     }
     patchFormWithConversationData(form, agentCard) {
@@ -7560,6 +7601,15 @@ class CharacterFormGroupService {
                 });
             }
         }
+        const accountsFormArray = form.get('accounts');
+        if (accountsFormArray) {
+            accountsFormArray.clear();
+            if (agentCard.accounts?.length) {
+                agentCard.accounts.forEach((account) => {
+                    accountsFormArray.push(this.createAccountFormGroup(account));
+                });
+            }
+        }
     }
     createCharacterCardFormGroup(characterCard) {
         return this.fb.group({
@@ -7623,6 +7673,8 @@ class CharacterFormGroupService {
             secondaryVoice: this.createVoiceTTSFormGroup(),
             model: createAIModelFormGroup(),
             rules: this.fb.array([]),
+            chatMode: ['regular'],
+            avatarDisplayMode: ['card'],
         });
     }
     createAccountsFormGroup() {
@@ -7630,6 +7682,15 @@ class CharacterFormGroupService {
             accounts: this.fb.array([]),
         });
     }
+    createAccountFormGroup(account) {
+        return this.fb.group({
+            platform: [account?.platform || 'google'],
+            user: [account?.user || ''],
+            email: [account?.email || ''],
+            authMethod: [account?.authMethod || 'google'],
+            pass: [account?.pass || ''],
+        });
+    }
     createModelFormGroup(model) {
         return this.fb.group({
             id: this.fb.control(model?.id || ''),
@@ -8237,7 +8298,7 @@ Improve the following first message:`;
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcCharacterCardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcCharacterCardFormComponent, isStandalone: true, selector: "dc-character-card-form", inputs: { characterCardForm: "characterCardForm" }, outputs: { generateMissingDataRequest: "generateMissingDataRequest" }, ngImport: i0, template: "<div [formGroup]=\"characterCardForm\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold  mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"form-field\">\n        <label for=\"cardName\" class=\"block text-sm font-medium \"\n          >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <input\n          pInputText\n          id=\"cardName\"\n          type=\"text\"\n          formControlName=\"name\"\n          class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"gender\" class=\"block text-sm font-medium \"\n          >Gender <span pTooltip=\"El genero del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <p-select\n          class=\"w-full\"\n          id=\"gender\"\n          [options]=\"genderOptions\"\n          formControlName=\"gender\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Gender'\"></p-select>\n        @if (dataGroup.controls['gender']?.errors?.['required'] && dataGroup.controls['gender']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Gender is required </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium \"\n        >Description\n        <span pTooltip=\"Descripci\u00F3n de la tarjeta, si es una tarjeta compleja utiliza los campos de  PERSONA\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        class=\"textmin mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium \"\n        >Hook <span pTooltip=\"Texto gancho para atraer al usuario a interactuar con esta tarjeta\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardHook\"\n        formControlName=\"hook\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardInstructions\" class=\"block text-sm font-medium \"\n        >Instructions <span pTooltip=\"Instrucciones para el usuario, sepa que tiene que hacer.\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardInstructions\"\n        formControlName=\"instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium \"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium \"\n        >Greetings (Saludos Iniciales)<span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider> Persona </p-divider>\n\n    <dc-persona-form [personaForm]=\"personaGroup\" />\n\n    <p-divider> Avanzado </p-divider>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium \"\n        >(\u2757\uFE0FObsoleto) Post-History Instructions\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"post_history_instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardSystemPrompt\" class=\"block text-sm font-medium \">\n        (\u26A0\uFE0F Cuidado) System Prompt <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n      </label>\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardSystemPrompt\"\n        formControlName=\"system_prompt\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n      @if (dataGroup.controls['system_prompt']?.errors?.['required'] && dataGroup.controls['system_prompt']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> System prompt is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium \"\n        >Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardCreatorNotes\"\n        formControlName=\"creator_notes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium \">Tags \u2139\uFE0F</label>\n      <dc-tags-form [form]=\"dataGroup\" />\n    </div>\n\n    <p-divider align=\"center\" type=\"dotted\">\n      <b>Traducciones a otros idiomas</b>\n    </p-divider>\n\n    @if(langTranslationGroup){\n    <dc-character-card-translations-tabs-form [formGroup]=\"langTranslationGroup\" />\n    }\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { 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", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.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", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i2$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: DcCharacterCardTranslationsTabsFormComponent, selector: "dc-character-card-translations-tabs-form", inputs: ["formGroup"] }, { kind: "component", type: DcPersonaFormComponent, selector: "dc-persona-form", inputs: ["personaForm"] }, { kind: "component", type: DcTagsFormComponent, selector: "dc-tags-form", inputs: ["form"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcCharacterCardFormComponent, isStandalone: true, selector: "dc-character-card-form", inputs: { characterCardForm: "characterCardForm" }, outputs: { generateMissingDataRequest: "generateMissingDataRequest" }, ngImport: i0, template: "<div [formGroup]=\"characterCardForm\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold  mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"form-field\">\n        <label for=\"cardName\" class=\"block text-sm font-medium \"\n          >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <input\n          pInputText\n          id=\"cardName\"\n          type=\"text\"\n          formControlName=\"name\"\n          class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"gender\" class=\"block text-sm font-medium \"\n          >Gender <span pTooltip=\"El genero del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <p-select\n          class=\"w-full\"\n          id=\"gender\"\n          [options]=\"genderOptions\"\n          formControlName=\"gender\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Gender'\"></p-select>\n        @if (dataGroup.controls['gender']?.errors?.['required'] && dataGroup.controls['gender']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Gender is required </div>\n        }\n      </div>\n    </div>\n\n    <p-accordion [multiple]=\"true\">\n      <p-accordion-panel value=\"cardContent\">\n        <p-accordion-header>\n          <span>Contenido de la tarjeta</span>\n          <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\"\n            >Descripci\u00F3n, hook, instrucciones, escenario y saludos</span\n          >\n        </p-accordion-header>\n        <p-accordion-content>\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium \"\n        >Description\n        <span pTooltip=\"Descripci\u00F3n de la tarjeta, si es una tarjeta compleja utiliza los campos de  PERSONA\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        class=\"textmin mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium \"\n        >Hook <span pTooltip=\"Texto gancho para atraer al usuario a interactuar con esta tarjeta\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardHook\"\n        formControlName=\"hook\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardInstructions\" class=\"block text-sm font-medium \"\n        >Instructions <span pTooltip=\"Instrucciones para el usuario, sepa que tiene que hacer.\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardInstructions\"\n        formControlName=\"instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium \"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium \"\n        >Greetings (Saludos Iniciales)<span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n        </p-accordion-content>\n      </p-accordion-panel>\n    </p-accordion>\n\n    <p-accordion [multiple]=\"true\">\n      <p-accordion-panel value=\"persona\">\n        <p-accordion-header>\n          <span>Persona Details</span>\n          <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\"\n            >Identidad, f\u00EDsico, personalidad, psicolog\u00EDa, etc.</span\n          >\n        </p-accordion-header>\n        <p-accordion-content>\n          <dc-persona-form [personaForm]=\"personaGroup\" />\n        </p-accordion-content>\n      </p-accordion-panel>\n    </p-accordion>\n\n    <p-divider> Avanzado </p-divider>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium \"\n        >(\u2757\uFE0FObsoleto) Post-History Instructions\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"post_history_instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardSystemPrompt\" class=\"block text-sm font-medium \">\n        (\u26A0\uFE0F Cuidado) System Prompt <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n      </label>\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardSystemPrompt\"\n        formControlName=\"system_prompt\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n      @if (dataGroup.controls['system_prompt']?.errors?.['required'] && dataGroup.controls['system_prompt']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> System prompt is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium \"\n        >Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardCreatorNotes\"\n        formControlName=\"creator_notes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium \">Tags \u2139\uFE0F</label>\n      <dc-tags-form [form]=\"dataGroup\" />\n    </div>\n\n    <p-divider align=\"center\" type=\"dotted\">\n      <b>Traducciones a otros idiomas</b>\n    </p-divider>\n\n    @if(langTranslationGroup){\n    <dc-character-card-translations-tabs-form [formGroup]=\"langTranslationGroup\" />\n    }\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { 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", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.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", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i2$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i8.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i8.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i8.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i8.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: DcCharacterCardTranslationsTabsFormComponent, selector: "dc-character-card-translations-tabs-form", inputs: ["formGroup"] }, { kind: "component", type: DcPersonaFormComponent, selector: "dc-persona-form", inputs: ["personaForm"] }, { kind: "component", type: DcTagsFormComponent, selector: "dc-tags-form", inputs: ["form"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcCharacterCardFormComponent, decorators: [{
             type: Component,
@@ -8251,10 +8312,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         ToggleButtonModule,
                         SelectModule,
                         DividerModule,
+                        AccordionModule,
                         DcCharacterCardTranslationsTabsFormComponent,
                         DcPersonaFormComponent,
                         DcTagsFormComponent,
-                    ], template: "<div [formGroup]=\"characterCardForm\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold  mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"form-field\">\n        <label for=\"cardName\" class=\"block text-sm font-medium \"\n          >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <input\n          pInputText\n          id=\"cardName\"\n          type=\"text\"\n          formControlName=\"name\"\n          class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"gender\" class=\"block text-sm font-medium \"\n          >Gender <span pTooltip=\"El genero del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <p-select\n          class=\"w-full\"\n          id=\"gender\"\n          [options]=\"genderOptions\"\n          formControlName=\"gender\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Gender'\"></p-select>\n        @if (dataGroup.controls['gender']?.errors?.['required'] && dataGroup.controls['gender']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Gender is required </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium \"\n        >Description\n        <span pTooltip=\"Descripci\u00F3n de la tarjeta, si es una tarjeta compleja utiliza los campos de  PERSONA\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        class=\"textmin mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium \"\n        >Hook <span pTooltip=\"Texto gancho para atraer al usuario a interactuar con esta tarjeta\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardHook\"\n        formControlName=\"hook\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardInstructions\" class=\"block text-sm font-medium \"\n        >Instructions <span pTooltip=\"Instrucciones para el usuario, sepa que tiene que hacer.\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardInstructions\"\n        formControlName=\"instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium \"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium \"\n        >Greetings (Saludos Iniciales)<span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider> Persona </p-divider>\n\n    <dc-persona-form [personaForm]=\"personaGroup\" />\n\n    <p-divider> Avanzado </p-divider>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium \"\n        >(\u2757\uFE0FObsoleto) Post-History Instructions\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"post_history_instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardSystemPrompt\" class=\"block text-sm font-medium \">\n        (\u26A0\uFE0F Cuidado) System Prompt <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n      </label>\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardSystemPrompt\"\n        formControlName=\"system_prompt\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n      @if (dataGroup.controls['system_prompt']?.errors?.['required'] && dataGroup.controls['system_prompt']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> System prompt is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium \"\n        >Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardCreatorNotes\"\n        formControlName=\"creator_notes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium \">Tags \u2139\uFE0F</label>\n      <dc-tags-form [form]=\"dataGroup\" />\n    </div>\n\n    <p-divider align=\"center\" type=\"dotted\">\n      <b>Traducciones a otros idiomas</b>\n    </p-divider>\n\n    @if(langTranslationGroup){\n    <dc-character-card-translations-tabs-form [formGroup]=\"langTranslationGroup\" />\n    }\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"] }]
+                    ], template: "<div [formGroup]=\"characterCardForm\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold  mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"form-field\">\n        <label for=\"cardName\" class=\"block text-sm font-medium \"\n          >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <input\n          pInputText\n          id=\"cardName\"\n          type=\"text\"\n          formControlName=\"name\"\n          class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"gender\" class=\"block text-sm font-medium \"\n          >Gender <span pTooltip=\"El genero del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <p-select\n          class=\"w-full\"\n          id=\"gender\"\n          [options]=\"genderOptions\"\n          formControlName=\"gender\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Gender'\"></p-select>\n        @if (dataGroup.controls['gender']?.errors?.['required'] && dataGroup.controls['gender']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Gender is required </div>\n        }\n      </div>\n    </div>\n\n    <p-accordion [multiple]=\"true\">\n      <p-accordion-panel value=\"cardContent\">\n        <p-accordion-header>\n          <span>Contenido de la tarjeta</span>\n          <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\"\n            >Descripci\u00F3n, hook, instrucciones, escenario y saludos</span\n          >\n        </p-accordion-header>\n        <p-accordion-content>\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium \"\n        >Description\n        <span pTooltip=\"Descripci\u00F3n de la tarjeta, si es una tarjeta compleja utiliza los campos de  PERSONA\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        class=\"textmin mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium \"\n        >Hook <span pTooltip=\"Texto gancho para atraer al usuario a interactuar con esta tarjeta\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardHook\"\n        formControlName=\"hook\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardInstructions\" class=\"block text-sm font-medium \"\n        >Instructions <span pTooltip=\"Instrucciones para el usuario, sepa que tiene que hacer.\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardInstructions\"\n        formControlName=\"instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium \"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium \"\n        >Greetings (Saludos Iniciales)<span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n        </p-accordion-content>\n      </p-accordion-panel>\n    </p-accordion>\n\n    <p-accordion [multiple]=\"true\">\n      <p-accordion-panel value=\"persona\">\n        <p-accordion-header>\n          <span>Persona Details</span>\n          <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\"\n            >Identidad, f\u00EDsico, personalidad, psicolog\u00EDa, etc.</span\n          >\n        </p-accordion-header>\n        <p-accordion-content>\n          <dc-persona-form [personaForm]=\"personaGroup\" />\n        </p-accordion-content>\n      </p-accordion-panel>\n    </p-accordion>\n\n    <p-divider> Avanzado </p-divider>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium \"\n        >(\u2757\uFE0FObsoleto) Post-History Instructions\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"post_history_instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardSystemPrompt\" class=\"block text-sm font-medium \">\n        (\u26A0\uFE0F Cuidado) System Prompt <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n      </label>\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardSystemPrompt\"\n        formControlName=\"system_prompt\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n      @if (dataGroup.controls['system_prompt']?.errors?.['required'] && dataGroup.controls['system_prompt']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> System prompt is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium \"\n        >Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardCreatorNotes\"\n        formControlName=\"creator_notes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium \">Tags \u2139\uFE0F</label>\n      <dc-tags-form [form]=\"dataGroup\" />\n    </div>\n\n    <p-divider align=\"center\" type=\"dotted\">\n      <b>Traducciones a otros idiomas</b>\n    </p-divider>\n\n    @if(langTranslationGroup){\n    <dc-character-card-translations-tabs-form [formGroup]=\"langTranslationGroup\" />\n    }\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"] }]
         }], propDecorators: { characterCardForm: [{
                 type: Input,
                 args: [{ required: true }]
@@ -8352,9 +8414,18 @@ class DcConversationSettingsFormComponent {
     constructor() {
         this.rules = [];
         this.displayModeOptions = [
-            { label: 'Chat', value: 'chat' },
-            { label: 'Immersive', value: 'immersive' },
-            { label: 'Transparent', value: 'transparent' },
+            { label: 'Chat (Deprecated Soon)', value: 'chat' },
+            { label: 'Immersive (Deprecated Soon)', value: 'immersive' },
+            { label: 'Transparent (Deprecated Soon)', value: 'transparent' },
+        ];
+        this.chatModeOptions = [
+            { label: 'Regular (Chat List)', value: 'regular' },
+            { label: 'Immersive (Voice HUD)', value: 'immersive' },
+        ];
+        this.avatarDisplayModeOptions = [
+            { label: 'Card (Enclosed Box)', value: 'card' },
+            { label: 'Transparent (No Card Border)', value: 'transparent' },
+            { label: 'Fullscreen (Full Page behind Chat)', value: 'fullscreen' },
         ];
         this.dialogService = inject(DialogService);
         this.rulesService = inject(ConversationRuleService);
@@ -8400,7 +8471,7 @@ class DcConversationSettingsFormComponent {
         this.getRules();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcConversationSettingsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcConversationSettingsFormComponent, isStandalone: true, selector: "dc-conversation-settings-form", inputs: { form: "form", textEngineOptions: "textEngineOptions", conversationOptions: "conversationOptions", voiceTTSOptions: "voiceTTSOptions" }, providers: [DialogService], ngImport: i0, template: "<div [formGroup]=\"form\">\n  <h3 class=\"text-xl font-bold border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div>\n    <label for=\"rules\" class=\"block text-sm font-medium\">\n      Conversation Rules\n      <span pTooltip=\"Add rules to the conversation\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n    </label>\n    <p-select id=\"rules\" [options]=\"rules\" (onChange)=\"addRule($event.value)\" placeholder=\"Select a Rule\" optionLabel=\"name\" class=\"w-full\"></p-select>\n\n    <div formArrayName=\"rules\" class=\"mt-4 space-y-2\">\n      @for (rule of rulesFormArray.controls; track rule; let i = $index) {\n      <div [formGroupName]=\"i\" class=\"flex items-center justify-between p-2 border rounded-md\">\n        <span>{{ rule.value.name }}</span>\n        <button pButton type=\"button\" icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\" (click)=\"removeRule(i)\"></button>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"md:col-span-2\">\n      <label for=\"displayMode\" class=\"block text-sm font-medium\">\n        Display Mode\n        <span pTooltip=\"chat: standard card layout | immersive: full-screen experience | transparent: character floats over background (requires transparent WebM video)\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"displayMode\"\n        [options]=\"displayModeOptions\"\n        formControlName=\"displayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        User Must Start\n        <span pTooltip=\"If true the user must start the conversation, ignoring first message if any.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"userMustStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Stream Responses\n        <span pTooltip=\"Enable real-time token streaming for LLM responses.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"streamResponses\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-voice-tts-form [form]=\"mainVoiceFormGroup\" [title]=\"'Main Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <dc-voice-tts-form [form]=\"secondaryVoiceFormGroup\" [title]=\"'Secondary Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n  <hr />\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.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", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i4$3.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: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions", "fullForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcConversationSettingsFormComponent, isStandalone: true, selector: "dc-conversation-settings-form", inputs: { form: "form", textEngineOptions: "textEngineOptions", conversationOptions: "conversationOptions", voiceTTSOptions: "voiceTTSOptions" }, providers: [DialogService], ngImport: i0, template: "<div [formGroup]=\"form\">\n  <h3 class=\"text-xl font-bold border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div>\n    <label for=\"rules\" class=\"block text-sm font-medium\">\n      Conversation Rules\n      <span pTooltip=\"Add rules to the conversation\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n    </label>\n    <p-select id=\"rules\" [options]=\"rules\" (onChange)=\"addRule($event.value)\" placeholder=\"Select a Rule\" optionLabel=\"name\" class=\"w-full\"></p-select>\n\n    <div formArrayName=\"rules\" class=\"mt-4 space-y-2\">\n      @for (rule of rulesFormArray.controls; track rule; let i = $index) {\n      <div [formGroupName]=\"i\" class=\"flex items-center justify-between p-2 border rounded-md\">\n        <span>{{ rule.value.name }}</span>\n        <button pButton type=\"button\" icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\" (click)=\"removeRule(i)\"></button>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"md:col-span-2\">\n      <label for=\"displayMode\" class=\"block text-sm font-medium text-red-500\">\n        Display Mode (Deprecated Soon)\n        <span pTooltip=\"[Deprecated] Use Chat Mode and Avatar Display Mode instead.\" class=\"text-red-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"displayMode\"\n        [options]=\"displayModeOptions\"\n        formControlName=\"displayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"chatMode\" class=\"block text-sm font-medium\">\n        Chat Mode\n        <span pTooltip=\"regular: standard scrolling message list | immersive: voice-first Heads-Up Display (HUD)\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"chatMode\"\n        [options]=\"chatModeOptions\"\n        formControlName=\"chatMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Chat Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"avatarDisplayMode\" class=\"block text-sm font-medium\">\n        Avatar Display Mode\n        <span pTooltip=\"card: enclosed box layout | transparent: floats overlaying background | fullscreen: stretches model to fill page behind chat\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"avatarDisplayMode\"\n        [options]=\"avatarDisplayModeOptions\"\n        formControlName=\"avatarDisplayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Avatar Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        User Must Start\n        <span pTooltip=\"If true the user must start the conversation, ignoring first message if any.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"userMustStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Stream Responses\n        <span pTooltip=\"Enable real-time token streaming for LLM responses.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"streamResponses\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-voice-tts-form [form]=\"mainVoiceFormGroup\" [title]=\"'Main Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <dc-voice-tts-form [form]=\"secondaryVoiceFormGroup\" [title]=\"'Secondary Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n  <hr />\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.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", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i4$3.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: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions", "fullForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcConversationSettingsFormComponent, decorators: [{
             type: Component,
@@ -8415,7 +8486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         DynamicDialogModule,
                         ModelSelectorComponent,
                         DcVoiceTtsFormComponent,
-                    ], providers: [DialogService], template: "<div [formGroup]=\"form\">\n  <h3 class=\"text-xl font-bold border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div>\n    <label for=\"rules\" class=\"block text-sm font-medium\">\n      Conversation Rules\n      <span pTooltip=\"Add rules to the conversation\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n    </label>\n    <p-select id=\"rules\" [options]=\"rules\" (onChange)=\"addRule($event.value)\" placeholder=\"Select a Rule\" optionLabel=\"name\" class=\"w-full\"></p-select>\n\n    <div formArrayName=\"rules\" class=\"mt-4 space-y-2\">\n      @for (rule of rulesFormArray.controls; track rule; let i = $index) {\n      <div [formGroupName]=\"i\" class=\"flex items-center justify-between p-2 border rounded-md\">\n        <span>{{ rule.value.name }}</span>\n        <button pButton type=\"button\" icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\" (click)=\"removeRule(i)\"></button>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"md:col-span-2\">\n      <label for=\"displayMode\" class=\"block text-sm font-medium\">\n        Display Mode\n        <span pTooltip=\"chat: standard card layout | immersive: full-screen experience | transparent: character floats over background (requires transparent WebM video)\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"displayMode\"\n        [options]=\"displayModeOptions\"\n        formControlName=\"displayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        User Must Start\n        <span pTooltip=\"If true the user must start the conversation, ignoring first message if any.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"userMustStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Stream Responses\n        <span pTooltip=\"Enable real-time token streaming for LLM responses.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"streamResponses\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-voice-tts-form [form]=\"mainVoiceFormGroup\" [title]=\"'Main Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <dc-voice-tts-form [form]=\"secondaryVoiceFormGroup\" [title]=\"'Secondary Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n  <hr />\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n" }]
+                    ], providers: [DialogService], template: "<div [formGroup]=\"form\">\n  <h3 class=\"text-xl font-bold border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div>\n    <label for=\"rules\" class=\"block text-sm font-medium\">\n      Conversation Rules\n      <span pTooltip=\"Add rules to the conversation\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n    </label>\n    <p-select id=\"rules\" [options]=\"rules\" (onChange)=\"addRule($event.value)\" placeholder=\"Select a Rule\" optionLabel=\"name\" class=\"w-full\"></p-select>\n\n    <div formArrayName=\"rules\" class=\"mt-4 space-y-2\">\n      @for (rule of rulesFormArray.controls; track rule; let i = $index) {\n      <div [formGroupName]=\"i\" class=\"flex items-center justify-between p-2 border rounded-md\">\n        <span>{{ rule.value.name }}</span>\n        <button pButton type=\"button\" icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\" (click)=\"removeRule(i)\"></button>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"md:col-span-2\">\n      <label for=\"displayMode\" class=\"block text-sm font-medium text-red-500\">\n        Display Mode (Deprecated Soon)\n        <span pTooltip=\"[Deprecated] Use Chat Mode and Avatar Display Mode instead.\" class=\"text-red-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"displayMode\"\n        [options]=\"displayModeOptions\"\n        formControlName=\"displayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"chatMode\" class=\"block text-sm font-medium\">\n        Chat Mode\n        <span pTooltip=\"regular: standard scrolling message list | immersive: voice-first Heads-Up Display (HUD)\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"chatMode\"\n        [options]=\"chatModeOptions\"\n        formControlName=\"chatMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Chat Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"avatarDisplayMode\" class=\"block text-sm font-medium\">\n        Avatar Display Mode\n        <span pTooltip=\"card: enclosed box layout | transparent: floats overlaying background | fullscreen: stretches model to fill page behind chat\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"avatarDisplayMode\"\n        [options]=\"avatarDisplayModeOptions\"\n        formControlName=\"avatarDisplayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Avatar Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        User Must Start\n        <span pTooltip=\"If true the user must start the conversation, ignoring first message if any.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"userMustStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Stream Responses\n        <span pTooltip=\"Enable real-time token streaming for LLM responses.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"streamResponses\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-voice-tts-form [form]=\"mainVoiceFormGroup\" [title]=\"'Main Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <dc-voice-tts-form [form]=\"secondaryVoiceFormGroup\" [title]=\"'Secondary Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n  <hr />\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n" }]
         }], propDecorators: { form: [{
                 type: Input
             }], textEngineOptions: [{
@@ -8441,6 +8512,13 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.textEngineOptions = TextEngineOptions;
         this.languageOptions = getSupportedLanguageOptions('es');
         this.agentTypeOptions = Object.values(EAgentType).filter((value) => value !== null);
+        this.avatarTypeOptions = [
+            { label: 'Default (Static/Video Loop)', value: null },
+            { label: 'Image', value: 'image' },
+            { label: 'Video', value: 'video' },
+            { label: 'Live2D', value: 'live2d' },
+            { label: 'VRoid', value: 'vroid' },
+        ];
         this.agenticEngineOptions = Object.values(AgenticEngine);
         this.agenticPatternOptions = Object.values(AgenticPattern);
         this.allowedToolsOptions = [
@@ -8452,6 +8530,7 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         ];
         this.onSave = output();
         this.inputSettings = input(null, ...(ngDevMode ? [{ debugName: "inputSettings" }] : /* istanbul ignore next */ []));
+        this.onSelectLive2d = output();
         this.form = this.characterFormGroupService.createAgentCardForm();
         this.isGenerating = signal(false, ...(ngDevMode ? [{ debugName: "isGenerating" }] : /* istanbul ignore next */ []));
         this.isCloningVoice = signal(false, ...(ngDevMode ? [{ debugName: "isCloningVoice" }] : /* istanbul ignore next */ []));
@@ -8496,7 +8575,14 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         }
     }
     async save() {
+        const live2d = this.form.value.live2d;
+        if (live2d && typeof live2d === 'object' && live2d._id) {
+            this.form.patchValue({ live2d: live2d._id });
+        }
         const result = await super.save();
+        if (live2d) {
+            this.form.patchValue({ live2d });
+        }
         if (result) {
             this.onSave.emit(result);
             if (this.toastService) {
@@ -8721,7 +8807,7 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.router.navigate(['../../cards-creator'], { relativeTo: this.route });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DCAgentCardFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { inputSettings: { classPropertyName: "inputSettings", publicName: "inputSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSave: "onSave" }, 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 [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\" >\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\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                  <p-accordion [multiple]=\"true\" >\n            <p-accordion-panel value=\"manageable\">\n              <p-accordion-header>\n                <span>Manageable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Controla visibilidad y acceso</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"learnable\">\n              <p-accordion-header>\n                <span>Learnable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Aprendizaje y conocimiento</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"conversationSettings\">\n              <p-accordion-header>\n                <span>Conversation Settings</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Modelo, voz y configuraci\u00F3n del chat</span>\n              </p-accordion-header>\n              <p-accordion-content>\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              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.conversationFlow){\n            <p-accordion-panel value=\"conversationFlow\">\n              <p-accordion-header>\n                <span>Conversation Flow</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Objetivos, triggers y condiciones din\u00E1micas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n            <p-accordion-panel value=\"accounts\">\n              <p-accordion-header>\n                <span>Gesti\u00F3n de cuentas</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                @if(form.controls.accounts) {\n                <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n                }\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"voiceCloning\">\n              <p-accordion-header>\n                <span>Clonaci\u00F3n de voz</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"voiceCloning\">\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                    <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 class=\"form-field voice-clone-status\">\n                    @if(!form.get('voiceCloning.sample').value?.url){\n                      <small class=\"muted\">Sube un audio para entrenar un modelo de voz.</small>\n                    }\n                    <!-- @if(canCloneVoice()){ -->\n                      <p-button\n                        icon=\"pi pi-bolt\"\n                        severity=\"help\"\n                        [loading]=\"isCloningVoice()\"\n                        label=\"Crear modelo en Fish Audio\"\n                        (click)=\"cloneVoice()\">\n                      </p-button>\n                    <!-- } -->\n                    @if(fishModelId()){\n                      <div class=\"model-tag\">\n                        <span>Modelo Fish Audio: <code>{{ fishModelId() }}</code></span>\n                        <p-button\n                          icon=\"pi pi-refresh\"\n                          severity=\"secondary\"\n                          [text]=\"true\"\n                          [loading]=\"isCloningVoice()\"\n                          label=\"Regenerar\"\n                          (click)=\"cloneVoice()\">\n                        </p-button>\n                      </div>\n                    }\n                  </div>\n                  <dc-voice-tts-form\n                    [form]=\"$any(form.get('voiceCloning.main'))\"\n                    [title]=\"'Voice Cloning \u2014 Main Voice'\"\n                    [voiceTTSOptions]=\"voiceTTSOptions\"\n                    [fullForm]=\"true\">\n                  </dc-voice-tts-form>\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.agenticConfig) {\n            <p-accordion-panel value=\"agenticConfig\">\n              <p-accordion-header>\n                <span>Configuraci\u00F3n Ag\u00E9ntica</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Motor ag\u00E9ntico, patrones y herramientas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"agenticConfig\">\n                  <div class=\"form-field flex items-center gap-2 mb-4\">\n                    <p-checkbox id=\"agenticEnabled\" formControlName=\"enabled\" [binary]=\"true\"></p-checkbox>\n                    <label for=\"agenticEnabled\" class=\"cursor-pointer\">Habilitar Agente Aut\u00F3nomo</label>\n                  </div>\n\n                  @if(form.get('agenticConfig.enabled').value) {\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticEngine\" class=\"block text-sm font-medium mb-1\">Motor Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticEngine\"\n                        [options]=\"agenticEngineOptions\"\n                        formControlName=\"engine\"\n                        [placeholder]=\"'Seleccionar Motor'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticPattern\" class=\"block text-sm font-medium mb-1\">Patr\u00F3n Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticPattern\"\n                        [options]=\"agenticPatternOptions\"\n                        formControlName=\"pattern\"\n                        [placeholder]=\"'Seleccionar Patr\u00F3n'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"maxIterations\" class=\"block text-sm font-medium mb-1\">M\u00E1ximo de Iteraciones</label>\n                      <input pInputText id=\"maxIterations\" type=\"number\" formControlName=\"maxIterations\" class=\"w-full\" />\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label class=\"block text-sm font-medium mb-2\">Herramientas Permitidas</label>\n                      <div class=\"flex flex-col gap-2 mt-2 pl-2\">\n                        @for (toolOpt of allowedToolsOptions; track toolOpt.value) {\n                          <div class=\"flex items-center gap-2\">\n                            <p-checkbox\n                              [inputId]=\"'tool_' + toolOpt.value\"\n                              [binary]=\"true\"\n                              [ngModel]=\"isToolAllowed(toolOpt.value)\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              (onChange)=\"toggleTool(toolOpt.value, $event.checked)\">\n                            </p-checkbox>\n                            <label [for]=\"'tool_' + toolOpt.value\" class=\"cursor-pointer text-sm\">{{ toolOpt.label }}</label>\n                          </div>\n                        }\n                      </div>\n                    </div>\n\n                    @if(form.get('agenticConfig.pattern').value === 'reflection') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"reflectionPrompt\" class=\"block text-sm font-medium mb-1\">Prompt de Reflexi\u00F3n</label>\n                        <textarea pTextarea id=\"reflectionPrompt\" formControlName=\"reflectionPrompt\" rows=\"3\" [autoResize]=\"true\" class=\"w-full\"></textarea>\n                      </div>\n                    }\n\n                    @if(form.get('agenticConfig.engine').value === 'os_hermes') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"connectionUrl\" class=\"block text-sm font-medium mb-1\">URL de Conexi\u00F3n</label>\n                        <input pInputText id=\"connectionUrl\" type=\"text\" formControlName=\"connectionUrl\" placeholder=\"ws://...\" class=\"w-full\" />\n                      </div>\n                    }\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Razonamiento</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.reasoningModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Ejecuci\u00F3n</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.executionModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n                  }\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n          </p-accordion>\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 .card-group{padding:1rem;margin-bottom:1.5rem}.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%}.voice-clone-status{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}.voice-clone-status .muted{color:var(--p-text-muted-color)}.voice-clone-status .model-tag{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--p-surface-100, #f3f4f6);border-radius:6px;font-size:.9rem}.voice-clone-status .model-tag code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}\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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormArrayDirective, selector: "[formArray]", inputs: ["formArray"], 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: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.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", "motionOptions"], 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$6.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i8.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i8.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i8.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i8.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { 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: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions", "fullForm"] }, { 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", "provider"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { inputSettings: { classPropertyName: "inputSettings", publicName: "inputSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSave: "onSave", onSelectLive2d: "onSelectLive2d" }, 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 [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\" >\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\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\n          <div class=\"form-field\">\n            <label for=\"avatarType\">Avatar Type <span pTooltip=\"image: static picture | video: double looping video (ping-pong) | live2d: interactive 2D model with real-time audio lip-sync | vroid: 3D model (future)\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"avatarType\"\n              [options]=\"avatarTypeOptions\"\n              formControlName=\"avatarType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              placeholder=\"Select Avatar Type\"\n              class=\"w-full mt-1\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label>Avatar Live2D <span pTooltip=\"Selecciona el modelo Live2D para este agente\">\u2139\uFE0F</span></label>\n            <div style=\"display: flex; align-items: center; gap: 12px; margin-top: 4px;\">\n              @if (form.get('live2d')?.value; as live2d) {\n                <div style=\"display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--p-border-color); border-radius: 6px; background: var(--p-content-background);\">\n                  <img width=\"36px\" height=\"36px\" style=\"border-radius: 50%; object-fit: cover;\" [src]=\"live2d.image?.url || 'defaults/images/face-3.jpg'\" alt=\"live2d preview\" />\n                  <span style=\"font-weight: 500;\">{{ live2d.name }}</span>\n                  <p-button icon=\"pi pi-times\" [text]=\"true\" severity=\"danger\" (onClick)=\"form.patchValue({ live2d: null })\" />\n                </div>\n              }\n              <p-button (onClick)=\"onSelectLive2d.emit()\" label=\"Seleccionar Live2D\" icon=\"pi pi-search\" [outlined]=\"true\" />\n            </div>\n          </div>\n        </div>\n\n                  <p-accordion [multiple]=\"true\" >\n            <p-accordion-panel value=\"manageable\">\n              <p-accordion-header>\n                <span>Manageable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Controla visibilidad y acceso</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"learnable\">\n              <p-accordion-header>\n                <span>Learnable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Aprendizaje y conocimiento</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"conversationSettings\">\n              <p-accordion-header>\n                <span>Conversation Settings</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Modelo, voz y configuraci\u00F3n del chat</span>\n              </p-accordion-header>\n              <p-accordion-content>\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              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.conversationFlow){\n            <p-accordion-panel value=\"conversationFlow\">\n              <p-accordion-header>\n                <span>Conversation Flow</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Objetivos, triggers y condiciones din\u00E1micas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n            <p-accordion-panel value=\"accounts\">\n              <p-accordion-header>\n                <span>Gesti\u00F3n de cuentas</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                @if(form.controls.accounts) {\n                <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n                }\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"voiceCloning\">\n              <p-accordion-header>\n                <span>Clonaci\u00F3n de voz</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"voiceCloning\">\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                    <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 class=\"form-field voice-clone-status\">\n                    @if(!form.get('voiceCloning.sample').value?.url){\n                      <small class=\"muted\">Sube un audio para entrenar un modelo de voz.</small>\n                    }\n                    <!-- @if(canCloneVoice()){ -->\n                      <p-button\n                        icon=\"pi pi-bolt\"\n                        severity=\"help\"\n                        [loading]=\"isCloningVoice()\"\n                        label=\"Crear modelo en Fish Audio\"\n                        (click)=\"cloneVoice()\">\n                      </p-button>\n                    <!-- } -->\n                    @if(fishModelId()){\n                      <div class=\"model-tag\">\n                        <span>Modelo Fish Audio: <code>{{ fishModelId() }}</code></span>\n                        <p-button\n                          icon=\"pi pi-refresh\"\n                          severity=\"secondary\"\n                          [text]=\"true\"\n                          [loading]=\"isCloningVoice()\"\n                          label=\"Regenerar\"\n                          (click)=\"cloneVoice()\">\n                        </p-button>\n                      </div>\n                    }\n                  </div>\n                  <dc-voice-tts-form\n                    [form]=\"$any(form.get('voiceCloning.main'))\"\n                    [title]=\"'Voice Cloning \u2014 Main Voice'\"\n                    [voiceTTSOptions]=\"voiceTTSOptions\"\n                    [fullForm]=\"true\">\n                  </dc-voice-tts-form>\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.agenticConfig) {\n            <p-accordion-panel value=\"agenticConfig\">\n              <p-accordion-header>\n                <span>Configuraci\u00F3n Ag\u00E9ntica</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Motor ag\u00E9ntico, patrones y herramientas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"agenticConfig\">\n                  <div class=\"form-field flex items-center gap-2 mb-4\">\n                    <p-checkbox id=\"agenticEnabled\" formControlName=\"enabled\" [binary]=\"true\"></p-checkbox>\n                    <label for=\"agenticEnabled\" class=\"cursor-pointer\">Habilitar Agente Aut\u00F3nomo</label>\n                  </div>\n\n                  @if(form.get('agenticConfig.enabled').value) {\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticEngine\" class=\"block text-sm font-medium mb-1\">Motor Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticEngine\"\n                        [options]=\"agenticEngineOptions\"\n                        formControlName=\"engine\"\n                        [placeholder]=\"'Seleccionar Motor'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticPattern\" class=\"block text-sm font-medium mb-1\">Patr\u00F3n Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticPattern\"\n                        [options]=\"agenticPatternOptions\"\n                        formControlName=\"pattern\"\n                        [placeholder]=\"'Seleccionar Patr\u00F3n'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"maxIterations\" class=\"block text-sm font-medium mb-1\">M\u00E1ximo de Iteraciones</label>\n                      <input pInputText id=\"maxIterations\" type=\"number\" formControlName=\"maxIterations\" class=\"w-full\" />\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label class=\"block text-sm font-medium mb-2\">Herramientas Permitidas</label>\n                      <div class=\"flex flex-col gap-2 mt-2 pl-2\">\n                        @for (toolOpt of allowedToolsOptions; track toolOpt.value) {\n                          <div class=\"flex items-center gap-2\">\n                            <p-checkbox\n                              [inputId]=\"'tool_' + toolOpt.value\"\n                              [binary]=\"true\"\n                              [ngModel]=\"isToolAllowed(toolOpt.value)\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              (onChange)=\"toggleTool(toolOpt.value, $event.checked)\">\n                            </p-checkbox>\n                            <label [for]=\"'tool_' + toolOpt.value\" class=\"cursor-pointer text-sm\">{{ toolOpt.label }}</label>\n                          </div>\n                        }\n                      </div>\n                    </div>\n\n                    @if(form.get('agenticConfig.pattern').value === 'reflection') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"reflectionPrompt\" class=\"block text-sm font-medium mb-1\">Prompt de Reflexi\u00F3n</label>\n                        <textarea pTextarea id=\"reflectionPrompt\" formControlName=\"reflectionPrompt\" rows=\"3\" [autoResize]=\"true\" class=\"w-full\"></textarea>\n                      </div>\n                    }\n\n                    @if(form.get('agenticConfig.engine').value === 'os_hermes') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"connectionUrl\" class=\"block text-sm font-medium mb-1\">URL de Conexi\u00F3n</label>\n                        <input pInputText id=\"connectionUrl\" type=\"text\" formControlName=\"connectionUrl\" placeholder=\"ws://...\" class=\"w-full\" />\n                      </div>\n                    }\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Razonamiento</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.reasoningModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Ejecuci\u00F3n</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.executionModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n                  }\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n          </p-accordion>\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 .card-group{padding:1rem;margin-bottom:1.5rem}.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%}.voice-clone-status{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}.voice-clone-status .muted{color:var(--p-text-muted-color)}.voice-clone-status .model-tag{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--p-surface-100, #f3f4f6);border-radius:6px;font-size:.9rem}.voice-clone-status .model-tag code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}\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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormArrayDirective, selector: "[formArray]", inputs: ["formArray"], 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: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.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", "motionOptions"], 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$6.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i8.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i8.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i8.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i8.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { 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: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions", "fullForm"] }, { 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", "provider"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
             type: Component,
@@ -8749,8 +8835,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         SimpleUploaderComponent,
                         TextareaModule,
                         ModelSelectorComponent,
-                    ], 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 [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\" >\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\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                  <p-accordion [multiple]=\"true\" >\n            <p-accordion-panel value=\"manageable\">\n              <p-accordion-header>\n                <span>Manageable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Controla visibilidad y acceso</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"learnable\">\n              <p-accordion-header>\n                <span>Learnable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Aprendizaje y conocimiento</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"conversationSettings\">\n              <p-accordion-header>\n                <span>Conversation Settings</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Modelo, voz y configuraci\u00F3n del chat</span>\n              </p-accordion-header>\n              <p-accordion-content>\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              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.conversationFlow){\n            <p-accordion-panel value=\"conversationFlow\">\n              <p-accordion-header>\n                <span>Conversation Flow</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Objetivos, triggers y condiciones din\u00E1micas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n            <p-accordion-panel value=\"accounts\">\n              <p-accordion-header>\n                <span>Gesti\u00F3n de cuentas</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                @if(form.controls.accounts) {\n                <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n                }\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"voiceCloning\">\n              <p-accordion-header>\n                <span>Clonaci\u00F3n de voz</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"voiceCloning\">\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                    <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 class=\"form-field voice-clone-status\">\n                    @if(!form.get('voiceCloning.sample').value?.url){\n                      <small class=\"muted\">Sube un audio para entrenar un modelo de voz.</small>\n                    }\n                    <!-- @if(canCloneVoice()){ -->\n                      <p-button\n                        icon=\"pi pi-bolt\"\n                        severity=\"help\"\n                        [loading]=\"isCloningVoice()\"\n                        label=\"Crear modelo en Fish Audio\"\n                        (click)=\"cloneVoice()\">\n                      </p-button>\n                    <!-- } -->\n                    @if(fishModelId()){\n                      <div class=\"model-tag\">\n                        <span>Modelo Fish Audio: <code>{{ fishModelId() }}</code></span>\n                        <p-button\n                          icon=\"pi pi-refresh\"\n                          severity=\"secondary\"\n                          [text]=\"true\"\n                          [loading]=\"isCloningVoice()\"\n                          label=\"Regenerar\"\n                          (click)=\"cloneVoice()\">\n                        </p-button>\n                      </div>\n                    }\n                  </div>\n                  <dc-voice-tts-form\n                    [form]=\"$any(form.get('voiceCloning.main'))\"\n                    [title]=\"'Voice Cloning \u2014 Main Voice'\"\n                    [voiceTTSOptions]=\"voiceTTSOptions\"\n                    [fullForm]=\"true\">\n                  </dc-voice-tts-form>\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.agenticConfig) {\n            <p-accordion-panel value=\"agenticConfig\">\n              <p-accordion-header>\n                <span>Configuraci\u00F3n Ag\u00E9ntica</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Motor ag\u00E9ntico, patrones y herramientas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"agenticConfig\">\n                  <div class=\"form-field flex items-center gap-2 mb-4\">\n                    <p-checkbox id=\"agenticEnabled\" formControlName=\"enabled\" [binary]=\"true\"></p-checkbox>\n                    <label for=\"agenticEnabled\" class=\"cursor-pointer\">Habilitar Agente Aut\u00F3nomo</label>\n                  </div>\n\n                  @if(form.get('agenticConfig.enabled').value) {\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticEngine\" class=\"block text-sm font-medium mb-1\">Motor Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticEngine\"\n                        [options]=\"agenticEngineOptions\"\n                        formControlName=\"engine\"\n                        [placeholder]=\"'Seleccionar Motor'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticPattern\" class=\"block text-sm font-medium mb-1\">Patr\u00F3n Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticPattern\"\n                        [options]=\"agenticPatternOptions\"\n                        formControlName=\"pattern\"\n                        [placeholder]=\"'Seleccionar Patr\u00F3n'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"maxIterations\" class=\"block text-sm font-medium mb-1\">M\u00E1ximo de Iteraciones</label>\n                      <input pInputText id=\"maxIterations\" type=\"number\" formControlName=\"maxIterations\" class=\"w-full\" />\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label class=\"block text-sm font-medium mb-2\">Herramientas Permitidas</label>\n                      <div class=\"flex flex-col gap-2 mt-2 pl-2\">\n                        @for (toolOpt of allowedToolsOptions; track toolOpt.value) {\n                          <div class=\"flex items-center gap-2\">\n                            <p-checkbox\n                              [inputId]=\"'tool_' + toolOpt.value\"\n                              [binary]=\"true\"\n                              [ngModel]=\"isToolAllowed(toolOpt.value)\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              (onChange)=\"toggleTool(toolOpt.value, $event.checked)\">\n                            </p-checkbox>\n                            <label [for]=\"'tool_' + toolOpt.value\" class=\"cursor-pointer text-sm\">{{ toolOpt.label }}</label>\n                          </div>\n                        }\n                      </div>\n                    </div>\n\n                    @if(form.get('agenticConfig.pattern').value === 'reflection') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"reflectionPrompt\" class=\"block text-sm font-medium mb-1\">Prompt de Reflexi\u00F3n</label>\n                        <textarea pTextarea id=\"reflectionPrompt\" formControlName=\"reflectionPrompt\" rows=\"3\" [autoResize]=\"true\" class=\"w-full\"></textarea>\n                      </div>\n                    }\n\n                    @if(form.get('agenticConfig.engine').value === 'os_hermes') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"connectionUrl\" class=\"block text-sm font-medium mb-1\">URL de Conexi\u00F3n</label>\n                        <input pInputText id=\"connectionUrl\" type=\"text\" formControlName=\"connectionUrl\" placeholder=\"ws://...\" class=\"w-full\" />\n                      </div>\n                    }\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Razonamiento</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.reasoningModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Ejecuci\u00F3n</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.executionModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n                  }\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n          </p-accordion>\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 .card-group{padding:1rem;margin-bottom:1.5rem}.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%}.voice-clone-status{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}.voice-clone-status .muted{color:var(--p-text-muted-color)}.voice-clone-status .model-tag{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--p-surface-100, #f3f4f6);border-radius:6px;font-size:.9rem}.voice-clone-status .model-tag code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}\n"] }]
-        }], propDecorators: { onSave: [{ type: i0.Output, args: ["onSave"] }], inputSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputSettings", required: false }] }] } });
+                    ], 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 [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\" >\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\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\n          <div class=\"form-field\">\n            <label for=\"avatarType\">Avatar Type <span pTooltip=\"image: static picture | video: double looping video (ping-pong) | live2d: interactive 2D model with real-time audio lip-sync | vroid: 3D model (future)\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"avatarType\"\n              [options]=\"avatarTypeOptions\"\n              formControlName=\"avatarType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              placeholder=\"Select Avatar Type\"\n              class=\"w-full mt-1\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label>Avatar Live2D <span pTooltip=\"Selecciona el modelo Live2D para este agente\">\u2139\uFE0F</span></label>\n            <div style=\"display: flex; align-items: center; gap: 12px; margin-top: 4px;\">\n              @if (form.get('live2d')?.value; as live2d) {\n                <div style=\"display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--p-border-color); border-radius: 6px; background: var(--p-content-background);\">\n                  <img width=\"36px\" height=\"36px\" style=\"border-radius: 50%; object-fit: cover;\" [src]=\"live2d.image?.url || 'defaults/images/face-3.jpg'\" alt=\"live2d preview\" />\n                  <span style=\"font-weight: 500;\">{{ live2d.name }}</span>\n                  <p-button icon=\"pi pi-times\" [text]=\"true\" severity=\"danger\" (onClick)=\"form.patchValue({ live2d: null })\" />\n                </div>\n              }\n              <p-button (onClick)=\"onSelectLive2d.emit()\" label=\"Seleccionar Live2D\" icon=\"pi pi-search\" [outlined]=\"true\" />\n            </div>\n          </div>\n        </div>\n\n                  <p-accordion [multiple]=\"true\" >\n            <p-accordion-panel value=\"manageable\">\n              <p-accordion-header>\n                <span>Manageable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Controla visibilidad y acceso</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"learnable\">\n              <p-accordion-header>\n                <span>Learnable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Aprendizaje y conocimiento</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"conversationSettings\">\n              <p-accordion-header>\n                <span>Conversation Settings</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Modelo, voz y configuraci\u00F3n del chat</span>\n              </p-accordion-header>\n              <p-accordion-content>\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              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.conversationFlow){\n            <p-accordion-panel value=\"conversationFlow\">\n              <p-accordion-header>\n                <span>Conversation Flow</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Objetivos, triggers y condiciones din\u00E1micas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n            <p-accordion-panel value=\"accounts\">\n              <p-accordion-header>\n                <span>Gesti\u00F3n de cuentas</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                @if(form.controls.accounts) {\n                <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n                }\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"voiceCloning\">\n              <p-accordion-header>\n                <span>Clonaci\u00F3n de voz</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"voiceCloning\">\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                    <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 class=\"form-field voice-clone-status\">\n                    @if(!form.get('voiceCloning.sample').value?.url){\n                      <small class=\"muted\">Sube un audio para entrenar un modelo de voz.</small>\n                    }\n                    <!-- @if(canCloneVoice()){ -->\n                      <p-button\n                        icon=\"pi pi-bolt\"\n                        severity=\"help\"\n                        [loading]=\"isCloningVoice()\"\n                        label=\"Crear modelo en Fish Audio\"\n                        (click)=\"cloneVoice()\">\n                      </p-button>\n                    <!-- } -->\n                    @if(fishModelId()){\n                      <div class=\"model-tag\">\n                        <span>Modelo Fish Audio: <code>{{ fishModelId() }}</code></span>\n                        <p-button\n                          icon=\"pi pi-refresh\"\n                          severity=\"secondary\"\n                          [text]=\"true\"\n                          [loading]=\"isCloningVoice()\"\n                          label=\"Regenerar\"\n                          (click)=\"cloneVoice()\">\n                        </p-button>\n                      </div>\n                    }\n                  </div>\n                  <dc-voice-tts-form\n                    [form]=\"$any(form.get('voiceCloning.main'))\"\n                    [title]=\"'Voice Cloning \u2014 Main Voice'\"\n                    [voiceTTSOptions]=\"voiceTTSOptions\"\n                    [fullForm]=\"true\">\n                  </dc-voice-tts-form>\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.agenticConfig) {\n            <p-accordion-panel value=\"agenticConfig\">\n              <p-accordion-header>\n                <span>Configuraci\u00F3n Ag\u00E9ntica</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Motor ag\u00E9ntico, patrones y herramientas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"agenticConfig\">\n                  <div class=\"form-field flex items-center gap-2 mb-4\">\n                    <p-checkbox id=\"agenticEnabled\" formControlName=\"enabled\" [binary]=\"true\"></p-checkbox>\n                    <label for=\"agenticEnabled\" class=\"cursor-pointer\">Habilitar Agente Aut\u00F3nomo</label>\n                  </div>\n\n                  @if(form.get('agenticConfig.enabled').value) {\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticEngine\" class=\"block text-sm font-medium mb-1\">Motor Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticEngine\"\n                        [options]=\"agenticEngineOptions\"\n                        formControlName=\"engine\"\n                        [placeholder]=\"'Seleccionar Motor'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticPattern\" class=\"block text-sm font-medium mb-1\">Patr\u00F3n Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticPattern\"\n                        [options]=\"agenticPatternOptions\"\n                        formControlName=\"pattern\"\n                        [placeholder]=\"'Seleccionar Patr\u00F3n'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"maxIterations\" class=\"block text-sm font-medium mb-1\">M\u00E1ximo de Iteraciones</label>\n                      <input pInputText id=\"maxIterations\" type=\"number\" formControlName=\"maxIterations\" class=\"w-full\" />\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label class=\"block text-sm font-medium mb-2\">Herramientas Permitidas</label>\n                      <div class=\"flex flex-col gap-2 mt-2 pl-2\">\n                        @for (toolOpt of allowedToolsOptions; track toolOpt.value) {\n                          <div class=\"flex items-center gap-2\">\n                            <p-checkbox\n                              [inputId]=\"'tool_' + toolOpt.value\"\n                              [binary]=\"true\"\n                              [ngModel]=\"isToolAllowed(toolOpt.value)\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              (onChange)=\"toggleTool(toolOpt.value, $event.checked)\">\n                            </p-checkbox>\n                            <label [for]=\"'tool_' + toolOpt.value\" class=\"cursor-pointer text-sm\">{{ toolOpt.label }}</label>\n                          </div>\n                        }\n                      </div>\n                    </div>\n\n                    @if(form.get('agenticConfig.pattern').value === 'reflection') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"reflectionPrompt\" class=\"block text-sm font-medium mb-1\">Prompt de Reflexi\u00F3n</label>\n                        <textarea pTextarea id=\"reflectionPrompt\" formControlName=\"reflectionPrompt\" rows=\"3\" [autoResize]=\"true\" class=\"w-full\"></textarea>\n                      </div>\n                    }\n\n                    @if(form.get('agenticConfig.engine').value === 'os_hermes') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"connectionUrl\" class=\"block text-sm font-medium mb-1\">URL de Conexi\u00F3n</label>\n                        <input pInputText id=\"connectionUrl\" type=\"text\" formControlName=\"connectionUrl\" placeholder=\"ws://...\" class=\"w-full\" />\n                      </div>\n                    }\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Razonamiento</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.reasoningModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Ejecuci\u00F3n</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.executionModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n                  }\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n          </p-accordion>\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 .card-group{padding:1rem;margin-bottom:1.5rem}.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%}.voice-clone-status{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}.voice-clone-status .muted{color:var(--p-text-muted-color)}.voice-clone-status .model-tag{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--p-surface-100, #f3f4f6);border-radius:6px;font-size:.9rem}.voice-clone-status .model-tag code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}\n"] }]
+        }], propDecorators: { onSave: [{ type: i0.Output, args: ["onSave"] }], inputSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputSettings", required: false }] }], onSelectLive2d: [{ type: i0.Output, args: ["onSelectLive2d"] }] } });
 
 class TruncatePipe {
     transform(value, length = 100, suffix = '...') {
@@ -8889,63 +8975,71 @@ class AgentCardListComponent extends EntityBaseListV2Component {
     async ngOnInit() {
         this.fixedQuery = this.entityCommunicationService.getFixedQuery();
         const email = this.userService.user()?.email;
-        const baseFilters = [
-            {
-                name: 'Tipo de Agente',
-                field: 'agentType',
-                type: 'select',
-                defaultValue: EAgentType.None,
-                options: [
-                    { label: 'Todos', value: EAgentType.None },
-                    { label: 'Social', value: EAgentType.Social },
-                    { label: 'Personaje', value: EAgentType.Character },
-                ],
-            },
-            {
-                name: 'Género',
-                field: 'characterCard.data.gender',
-                type: 'select',
-                operator: '$eq',
-                options: [
-                    { label: 'Todos', value: null },
-                    { label: 'Masculino', value: 'male' },
-                    { label: 'Femenino', value: 'female' },
-                    { label: 'Otro', value: 'other' },
-                ],
-            },
-        ];
-        const adminFilters = [
-            {
-                name: 'Voz Única',
-                field: 'voiceCloning.sample',
-                type: 'select',
-                operator: '$not_null',
-                options: [
-                    { label: 'Todos', value: null },
-                    { label: 'Solo con Voz Única', value: true },
-                ],
-            },
-            {
-                name: 'Auditoría',
-                field: 'auditable._owner',
-                type: 'select',
-                operator: '$eq',
-                fieldMap: {
-                    createdBy: 'auditable.createdBy',
-                    updatedBy: 'auditable.updatedBy',
+        const serviceFilters = typeof this.entityCommunicationService.getCustomFilters === 'function'
+            ? this.entityCommunicationService.getCustomFilters()
+            : [];
+        if (serviceFilters && serviceFilters.length > 0) {
+            this.customFilters = [...serviceFilters, ...this.extraFilters];
+        }
+        else {
+            const baseFilters = [
+                {
+                    name: 'Tipo de Agente',
+                    field: 'agentType',
+                    type: 'select',
+                    defaultValue: EAgentType.None,
+                    options: [
+                        { label: 'Todos', value: EAgentType.None },
+                        { label: 'Social', value: EAgentType.Social },
+                        { label: 'Personaje', value: EAgentType.Character },
+                    ],
                 },
-                valueMap: {
-                    createdBy: email,
-                    updatedBy: email,
+                {
+                    name: 'Género',
+                    field: 'characterCard.data.gender',
+                    type: 'select',
+                    operator: '$eq',
+                    options: [
+                        { label: 'Todos', value: null },
+                        { label: 'Masculino', value: 'male' },
+                        { label: 'Femenino', value: 'female' },
+                        { label: 'Otro', value: 'other' },
+                    ],
                 },
-                options: [
-                    { label: 'Todos', value: null },
-                    { label: 'Creado por mí', value: 'createdBy' },
-                    { label: 'Actualizado por mí', value: 'updatedBy' },
-                ],
-            },
-        ];
-        this.customFilters = [...baseFilters, ...(this.userService.isAdmin() ? adminFilters : []), ...this.extraFilters];
+            ];
+            const adminFilters = [
+                {
+                    name: 'Voz Única',
+                    field: 'voiceCloning.sample',
+                    type: 'select',
+                    operator: '$not_null',
+                    options: [
+                        { label: 'Todos', value: null },
+                        { label: 'Solo con Voz Única', value: true },
+                    ],
+                },
+                {
+                    name: 'Auditoría',
+                    field: 'auditable._owner',
+                    type: 'select',
+                    operator: '$eq',
+                    fieldMap: {
+                        createdBy: 'auditable.createdBy',
+                        updatedBy: 'auditable.updatedBy',
+                    },
+                    valueMap: {
+                        createdBy: email,
+                        updatedBy: email,
+                    },
+                    options: [
+                        { label: 'Todos', value: null },
+                        { label: 'Creado por mí', value: 'createdBy' },
+                        { label: 'Actualizado por mí', value: 'updatedBy' },
+                    ],
+                },
+            ];
+            this.customFilters = [...baseFilters, ...(this.userService.isAdmin() ? adminFilters : []), ...this.extraFilters];
+        }
         // this.viewType.set('table');
         super.ngOnInit();
         return null;
@@ -9011,6 +9105,324 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }] });
 
+class Live2dModelComponent {
+    constructor() {
+        // Signal inputs
+        this.modelPath = input.required(...(ngDevMode ? [{ debugName: "modelPath" }] : /* istanbul ignore next */ []));
+        this.scale = input(0.4, ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
+        this.zoom = input(undefined, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+        this.x = input(50, ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
+        this.y = input(50, ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+        // Outputs (using new Angular output API)
+        this.modelLoaded = output();
+        this.viewStateChanged = output();
+        this.modelParameters = null;
+        this.modelParts = null;
+        this.motionGroups = [];
+        this.expressions = [];
+        this.isViewInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isViewInitialized" }] : /* istanbul ignore next */ []));
+        // Zoom fallback to scale * 100 if zoom input is undefined
+        this.effectiveZoom = computed(() => {
+            const z = this.zoom();
+            if (z !== undefined) {
+                return z;
+            }
+            return Math.round(this.scale() * 100);
+        }, ...(ngDevMode ? [{ debugName: "effectiveZoom" }] : /* istanbul ignore next */ []));
+        // Pointer dragging state
+        this.isDragging = false;
+        this.dragStart = { x: 0, y: 0 };
+        this.dragStartModel = { x: 50, y: 50 };
+        // Reactive model loading once canvas is initialized
+        effect(() => {
+            const path = this.modelPath();
+            if (this.isViewInitialized()) {
+                this.loadModel(path);
+            }
+        });
+        // Reactive scale and position transform updates
+        effect(() => {
+            const currentZoom = this.effectiveZoom();
+            const currentX = this.x();
+            const currentY = this.y();
+            this.updateModelTransform(currentZoom, currentX, currentY);
+        });
+    }
+    async ngAfterViewInit() {
+        await this.initializeCanvas();
+        // Register wheel event programmatically to ensure it's not passive
+        // and prevent default scroll on the parent page.
+        this.canvasRef.nativeElement.addEventListener('wheel', this.onWheel.bind(this), { passive: false });
+        this.isViewInitialized.set(true);
+    }
+    async initializeCanvas() {
+        this.app = new Application();
+        if (typeof this.app.init === 'function') {
+            await this.app.init({
+                canvas: this.canvasRef.nativeElement,
+                resizeTo: this.canvasRef.nativeElement.parentElement || undefined,
+                backgroundColor: 0x000000,
+                backgroundAlpha: 0,
+                antialias: true,
+                resolution: window.devicePixelRatio || 1,
+                autoDensity: true,
+            });
+        }
+        else {
+            alert('Not able to load the model');
+        }
+    }
+    async loadModel(modelPath) {
+        if (this.model) {
+            this.app.stage.removeChild(this.model);
+            this.model.destroy();
+        }
+        this.model = await Live2DModel.from(modelPath, {
+            ticker: PIXI.Ticker.shared,
+            autoFocus: true,
+            autoHitTest: true,
+            breathDepth: 0.2,
+        });
+        this.app.stage.addChild(this.model);
+        this.extractModelInfo();
+        this.model.anchor.set(0.5, 0.5);
+        // Apply initial coordinates from inputs/signals
+        this.updateModelTransform(this.effectiveZoom(), this.x(), this.y());
+        this.modelLoaded.emit({
+            parameters: this.modelParameters,
+            parts: this.modelParts,
+            motions: this.motionGroups,
+            expressions: this.expressions
+        });
+    }
+    updateModelTransform(zoomVal, xVal, yVal) {
+        if (!this.model)
+            return;
+        const targetScale = zoomVal / 100;
+        if (Math.abs(this.model.scale.x - targetScale) > 0.001) {
+            this.model.scale.set(targetScale, targetScale);
+        }
+        if (this.app) {
+            const targetX = (xVal / 100) * this.app.screen.width;
+            if (Math.abs(this.model.x - targetX) > 1) {
+                this.model.x = targetX;
+            }
+            const targetY = (yVal / 100) * this.app.screen.height;
+            if (Math.abs(this.model.y - targetY) > 1) {
+                this.model.y = targetY;
+            }
+        }
+    }
+    extractModelInfo() {
+        if (!this.model || !this.model.internalModel || !this.model.internalModel.coreModel) {
+            return;
+        }
+        const coreModel = this.model.internalModel.coreModel._model;
+        if (coreModel.parameters) {
+            this.modelParameters = {
+                count: coreModel.parameters.count,
+                ids: coreModel.parameters.ids,
+                minimumValues: coreModel.parameters.minimumValues,
+                maximumValues: coreModel.parameters.maximumValues,
+                defaultValues: coreModel.parameters.defaultValues,
+                currentValues: coreModel.parameters.values,
+            };
+        }
+        if (coreModel.parts) {
+            this.modelParts = {
+                count: coreModel.parts.count,
+                ids: coreModel.parts.ids,
+                opacities: coreModel.parts.opacities,
+                parentIndices: coreModel.parts.parentIndices,
+            };
+        }
+        if (this.model.internalModel && this.model.internalModel.motionManager) {
+            this.motionGroups = Object.keys(this.model.internalModel.motionManager.motionGroups);
+            if (this.model.internalModel.motionManager.expressionManager) {
+                this.expressions = this.model.internalModel.motionManager.expressionManager.definitions.map((def) => def.Name || def.name);
+            }
+        }
+    }
+    playAnimation(groupName) {
+        if (!this.model)
+            return;
+        this.model.motion(groupName);
+    }
+    playRandomAnimation() {
+        if (this.motionGroups.length > 0) {
+            const group = this.motionGroups[Math.floor(Math.random() * this.motionGroups.length)];
+            this.playAnimation(group);
+        }
+    }
+    speak(audioUrl, options) {
+        if (!this.model)
+            return;
+        if (options?.focus !== false) {
+            const transform = this.getFaceTransform();
+            if (transform) {
+                this.viewStateChanged.emit(transform);
+            }
+        }
+        this.model.speak(audioUrl, {
+            volume: 0,
+            crossOrigin: options?.crossOrigin || 'anonymous',
+        });
+    }
+    stopSpeaking() {
+        if (this.model) {
+            this.model.stopSpeaking();
+        }
+    }
+    updateModelParameter(event) {
+        if (!this.model || !this.model.internalModel || !this.model.internalModel.coreModel) {
+            return;
+        }
+        const coreModel = this.model.internalModel.coreModel;
+        coreModel.setParameterValueById(event.id, event.value);
+        if (this.modelParameters && this.modelParameters.currentValues) {
+            this.modelParameters.currentValues[event.index] = event.value;
+        }
+    }
+    setExpression(expressionName) {
+        if (this.model) {
+            this.model.expression(expressionName);
+        }
+    }
+    // Pointer drag event handlers
+    onPointerDown(event) {
+        if (!this.model || !this.app)
+            return;
+        this.isDragging = true;
+        this.dragStart.x = event.clientX;
+        this.dragStart.y = event.clientY;
+        this.dragStartModel.x = this.x();
+        this.dragStartModel.y = this.y();
+        const canvas = this.canvasRef.nativeElement;
+        canvas.setPointerCapture(event.pointerId);
+    }
+    onPointerMove(event) {
+        if (!this.isDragging || !this.model || !this.app)
+            return;
+        const dx = event.clientX - this.dragStart.x;
+        const dy = event.clientY - this.dragStart.y;
+        const canvasWidth = this.app.screen.width;
+        const canvasHeight = this.app.screen.height;
+        const dxPct = (dx / canvasWidth) * 100;
+        const dyPct = (dy / canvasHeight) * 100;
+        const newX = Math.round(this.dragStartModel.x + dxPct);
+        const newY = Math.round(this.dragStartModel.y + dyPct);
+        this.viewStateChanged.emit({
+            zoom: this.effectiveZoom(),
+            x: newX,
+            y: newY
+        });
+    }
+    onPointerUp(event) {
+        if (this.isDragging) {
+            this.isDragging = false;
+            const canvas = this.canvasRef.nativeElement;
+            try {
+                canvas.releasePointerCapture(event.pointerId);
+            }
+            catch (e) {
+                // Ignore
+            }
+        }
+    }
+    // Wheel scroll event handler for zoom centering on cursor
+    onWheel(event) {
+        event.preventDefault();
+        if (!this.model || !this.app)
+            return;
+        const zoomFactor = 1.05;
+        const currentZoom = this.effectiveZoom();
+        let targetZoom = currentZoom;
+        if (event.deltaY < 0) {
+            targetZoom = currentZoom * zoomFactor;
+        }
+        else {
+            targetZoom = currentZoom / zoomFactor;
+        }
+        const roundedZoom = Math.max(1, Math.min(Math.round(targetZoom), 200));
+        // Get pointer coordinates relative to canvas bounding box
+        const rect = this.canvasRef.nativeElement.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+        const canvasWidth = this.app.screen.width;
+        const canvasHeight = this.app.screen.height;
+        // Convert current model position from percentages to pixels
+        const oldModelX = (this.x() / 100) * canvasWidth;
+        const oldModelY = (this.y() / 100) * canvasHeight;
+        const oldScale = Math.max(0.001, currentZoom / 100);
+        const newScale = roundedZoom / 100;
+        // Calculate new model position so that the point under the cursor remains unchanged
+        const newModelX = mouseX - (mouseX - oldModelX) * (newScale / oldScale);
+        const newModelY = mouseY - (mouseY - oldModelY) * (newScale / oldScale);
+        // Convert back to percentages
+        const newXPct = Math.round((newModelX / canvasWidth) * 100);
+        const newYPct = Math.round((newModelY / canvasHeight) * 100);
+        this.viewStateChanged.emit({
+            zoom: roundedZoom,
+            x: newXPct,
+            y: newYPct
+        });
+    }
+    getFaceTransform() {
+        if (!this.model || !this.app)
+            return null;
+        const hitAreas = this.model.internalModel?.settings?.hitAreas || [];
+        const headHitArea = hitAreas.find((h) => ['Head', 'Face', 'head', 'face'].some(name => (h.Name && h.Name.includes(name)) || (h.Id && h.Id.includes(name))));
+        let bounds;
+        if (headHitArea) {
+            try {
+                const hitAreaName = headHitArea.Name || headHitArea.Id;
+                bounds = this.model.getHitAreaBounds(hitAreaName);
+            }
+            catch (e) {
+                console.warn('Failed to get hit area bounds, falling back to top 30%', e);
+            }
+        }
+        if (!bounds) {
+            const modelBounds = this.model.getLocalBounds();
+            bounds = {
+                x: modelBounds.x,
+                y: modelBounds.y,
+                width: modelBounds.width,
+                height: modelBounds.height * 0.3
+            };
+        }
+        const targetFaceHeight = this.app.screen.height * 0.6;
+        const suggestedScale = targetFaceHeight / bounds.height;
+        const zoomValue = Math.min(Math.round(suggestedScale * 100), 200);
+        const faceCenterX = bounds.x + (bounds.width / 2);
+        const faceCenterY = bounds.y + (bounds.height / 2);
+        const localBounds = this.model.getLocalBounds();
+        const anchorX = 0.5;
+        const anchorY = 0.5;
+        const offsetX = (faceCenterX - (localBounds.x + localBounds.width * anchorX)) * suggestedScale;
+        const offsetY = (faceCenterY - (localBounds.y + localBounds.height * anchorY)) * suggestedScale;
+        const verticalFocusPoint = 0.35;
+        const targetX = (this.app.screen.width / 2) - offsetX;
+        const targetY = (this.app.screen.height * verticalFocusPoint) - offsetY;
+        const xPct = (targetX / this.app.screen.width) * 100;
+        const yPct = (targetY / this.app.screen.height) * 100;
+        return {
+            zoom: zoomValue,
+            x: Math.round(xPct),
+            y: Math.round(yPct)
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Live2dModelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: Live2dModelComponent, isStandalone: true, selector: "app-live2d-model", inputs: { modelPath: { classPropertyName: "modelPath", publicName: "modelPath", isSignal: true, isRequired: true, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: false, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelLoaded: "modelLoaded", viewStateChanged: "viewStateChanged" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas\n        class=\"canvas-container\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"></canvas>\n", styles: [":host{display:block;width:100%;height:100%}.canvas-container{width:100%!important;height:100%!important;display:block}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Live2dModelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-live2d-model', standalone: true, imports: [], template: "<canvas #canvas\n        class=\"canvas-container\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"></canvas>\n", styles: [":host{display:block;width:100%;height:100%}.canvas-container{width:100%!important;height:100%!important;display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { canvasRef: [{
+                type: ViewChild,
+                args: ['canvas']
+            }], modelPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelPath", required: true }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: false }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], modelLoaded: [{ type: i0.Output, args: ["modelLoaded"] }], viewStateChanged: [{ type: i0.Output, args: ["viewStateChanged"] }] } });
+
 class DcAgentCardConverseComponent {
     set isConversationActive(val) {
         this._isConversationActive.set(val);
@@ -9018,6 +9430,11 @@ class DcAgentCardConverseComponent {
     get isConversationActive() {
         return this._isConversationActive();
     }
+    onViewStateChanged(event) {
+        this.live2dZoomState.set(event.zoom);
+        this.live2dXState.set(event.x);
+        this.live2dYState.set(event.y);
+    }
     constructor() {
         this.agentCardService = inject(CONVERSATION_AI_TOKEN);
         this.route = inject(ActivatedRoute);
@@ -9028,14 +9445,52 @@ class DcAgentCardConverseComponent {
         this.videoPlayerService = inject(VideoPlayerNativeService);
         this.agentCardId = '';
         this.useNativePlayer = true;
+        this.activeAudioMessage = null;
         this._isConversationActive = signal(false, ...(ngDevMode ? [{ debugName: "_isConversationActive" }] : /* istanbul ignore next */ []));
         this.onStartConversation = output();
         this.videoPlayerA = viewChild('videoPlayerA', ...(ngDevMode ? [{ debugName: "videoPlayerA" }] : /* istanbul ignore next */ []));
         this.videoPlayerB = viewChild('videoPlayerB', ...(ngDevMode ? [{ debugName: "videoPlayerB" }] : /* istanbul ignore next */ []));
+        this.live2dModel = viewChild(Live2dModelComponent, ...(ngDevMode ? [{ debugName: "live2dModel" }] : /* istanbul ignore next */ []));
         this.agentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "agentCard" }] : /* istanbul ignore next */ []));
         this.showInfoLayer = signal(false, ...(ngDevMode ? [{ debugName: "showInfoLayer" }] : /* istanbul ignore next */ []));
-        this.isTransparent = computed(() => this.agentCard()?.conversationSettings?.displayMode === 'transparent', ...(ngDevMode ? [{ debugName: "isTransparent" }] : /* istanbul ignore next */ []));
         this.isChatActive = computed(() => this._isConversationActive() || this.chatMonitorService.isConversationActive(), ...(ngDevMode ? [{ debugName: "isChatActive" }] : /* istanbul ignore next */ []));
+        this.live2dZoomState = signal(undefined, ...(ngDevMode ? [{ debugName: "live2dZoomState" }] : /* istanbul ignore next */ []));
+        this.live2dXState = signal(50, ...(ngDevMode ? [{ debugName: "live2dXState" }] : /* istanbul ignore next */ []));
+        this.live2dYState = signal(50, ...(ngDevMode ? [{ debugName: "live2dYState" }] : /* istanbul ignore next */ []));
+        this.avatarDisplay = computed(() => {
+            const settings = this.agentCard()?.conversationSettings;
+            if (settings?.avatarDisplayMode) {
+                return settings.avatarDisplayMode;
+            }
+            if (settings?.displayMode === 'transparent') {
+                return 'transparent';
+            }
+            if (settings?.displayMode === 'immersive') {
+                return 'fullscreen';
+            }
+            return 'card';
+        }, ...(ngDevMode ? [{ debugName: "avatarDisplay" }] : /* istanbul ignore next */ []));
+        // Dynamic avatar renderer selection
+        this.avatarType = computed(() => {
+            const card = this.agentCard();
+            if (!card)
+                return 'image';
+            if (card.avatarType) {
+                return card.avatarType;
+            }
+            if (card.assets?.motions?.length)
+                return 'video';
+            return 'image';
+        }, ...(ngDevMode ? [{ debugName: "avatarType" }] : /* istanbul ignore next */ []));
+        // URL finder for .model3.json manifest
+        this.model3JsonUrl = computed(() => {
+            const card = this.agentCard();
+            const live2dEntity = card?.live2d;
+            if (!live2dEntity || !live2dEntity.files)
+                return null;
+            const manifestFile = live2dEntity.files.find((f) => f.url.endsWith('.model3.json'));
+            return manifestFile ? manifestFile.url : null;
+        }, ...(ngDevMode ? [{ debugName: "model3JsonUrl" }] : /* istanbul ignore next */ []));
         effect(() => {
             const isConversationActive = this.isChatActive();
             if (isConversationActive) {
@@ -9043,6 +9498,24 @@ class DcAgentCardConverseComponent {
             }
         });
         effect(() => {
+            const card = this.agentCard();
+            const live2dEntity = card?.live2d;
+            if (live2dEntity) {
+                this.live2dZoomState.set(live2dEntity.defaultZoom !== undefined ? live2dEntity.defaultZoom : undefined);
+                this.live2dXState.set(live2dEntity.defaultX !== undefined ? live2dEntity.defaultX : 50);
+                this.live2dYState.set(live2dEntity.defaultY !== undefined ? live2dEntity.defaultY : 50);
+            }
+            else {
+                this.live2dZoomState.set(undefined);
+                this.live2dXState.set(50);
+                this.live2dYState.set(50);
+            }
+        });
+        // Native Video player initialization effect (only runs when avatarType is 'video')
+        effect(() => {
+            const type = this.avatarType();
+            if (type !== 'video')
+                return;
             const videoElA = this.videoPlayerA();
             const videoElB = this.videoPlayerB();
             const card = this.agentCard();
@@ -9054,6 +9527,25 @@ class DcAgentCardConverseComponent {
                 this.videoPlayerService.setAgentCard(card);
             }
         });
+        // Live2D Speak (Lip-Sync) effect
+        effect(() => {
+            const audioMsg = this.activeAudioMessage;
+            const type = this.avatarType();
+            const l2d = this.live2dModel();
+            if (type === 'live2d' && audioMsg?.audioUrl && l2d) {
+                l2d.stopSpeaking();
+                l2d.speak(audioMsg.audioUrl, { volume: 0.0 });
+            }
+        });
+        // Live2D Mood state emotion updates mapping
+        effect(() => {
+            const mood = this.conversationFlowStateService.flowState().moodState?.value;
+            const type = this.avatarType();
+            const l2d = this.live2dModel();
+            if (type === 'live2d' && mood && l2d) {
+                l2d.setExpression(mood);
+            }
+        });
     }
     ngOnDestroy() {
         this.videoPlayerService.cleanUp();
@@ -9148,18 +9640,20 @@ class DcAgentCardConverseComponent {
         this.showInfoLayer.update((value) => !value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcAgentCardConverseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcAgentCardConverseComponent, isStandalone: true, selector: "dc-agent-card-converse", inputs: { agentCardId: "agentCardId", useNativePlayer: "useNativePlayer", isConversationActive: "isConversationActive" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayerA", first: true, predicate: ["videoPlayerA"], descendants: true, isSignal: true }, { propertyName: "videoPlayerB", first: true, predicate: ["videoPlayerB"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #cardContent>\n  <div class=\"card-container\">\n    <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" [style.opacity]=\"videoPlayerService.isVideoPlaying() ? 0 : 1\" style=\"transition: opacity 0.5s ease-in-out;\" alt=\"\" />\n    <!-- Se implementa l\u00F3gica de doble video (ping-pong) para evitar parpadeos -->\n    <video #videoPlayerA class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 1; z-index: 1;\" playsinline></video>\n    <video #videoPlayerB class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 0; z-index: 2;\" playsinline></video>\n\n\n\n    @if (!isChatActive()) {\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n      \n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n    }\n\n    <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n      <div class=\"info-content\">\n        <h1\n          ><strong>{{ agentCard()?.name || agentCard()?.characterCard?.data?.name }}</strong></h1\n        >\n\n        @if (agentCard()?.characterCard?.data?.instructions) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.instructions' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.instructions | parseCard: agentCard() }}</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div style=\"display: flex; justify-content: center; align-items: center\" [class.transparent-mode]=\"isTransparent()\">\n  @if (isTransparent()) {\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  } @else {\n    <p-card>\n      <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    </p-card>\n  }\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.transparent-mode .card-container{width:420px;height:700px;position:relative}.transparent-mode .card-image{background:transparent}.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:var(--chat-user-message-bg);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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$6.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }, { kind: "pipe", type: i3$6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcAgentCardConverseComponent, isStandalone: true, selector: "dc-agent-card-converse", inputs: { agentCardId: "agentCardId", useNativePlayer: "useNativePlayer", activeAudioMessage: "activeAudioMessage", isConversationActive: "isConversationActive" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayerA", first: true, predicate: ["videoPlayerA"], descendants: true, isSignal: true }, { propertyName: "videoPlayerB", first: true, predicate: ["videoPlayerB"], descendants: true, isSignal: true }, { propertyName: "live2dModel", first: true, predicate: Live2dModelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #cardContent>\n  <div class=\"card-container\">\n    <!-- CASO 1: Renderizado por Video (Ping-pong nativo) -->\n    @if (avatarType() === 'video') {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" [style.opacity]=\"videoPlayerService.isVideoPlaying() ? 0 : 1\" style=\"transition: opacity 0.5s ease-in-out;\" alt=\"\" />\n      <video #videoPlayerA class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 1; z-index: 1;\" playsinline></video>\n      <video #videoPlayerB class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 0; z-index: 2;\" playsinline></video>\n    }\n\n    <!-- CASO 2: Renderizado por Live2D (PixiJS Canvas) -->\n    @else if (avatarType() === 'live2d') {\n      @if (model3JsonUrl(); as modelPath) {\n        <app-live2d-model\n          #live2dModel\n          class=\"card-image\"\n          style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: all; z-index: 2;\"\n          [modelPath]=\"modelPath\"\n          [zoom]=\"live2dZoomState()\"\n          [x]=\"live2dXState()\"\n          [y]=\"live2dYState()\"\n          (viewStateChanged)=\"onViewStateChanged($event)\">\n        </app-live2d-model>\n      } @else {\n        <!-- Fallback si no tiene manifest -->\n        <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      }\n    }\n\n    <!-- CASO 3: Renderizado por VRoid (WebGL 3D - Placeholder) -->\n    @else if (avatarType() === 'vroid') {\n      <div class=\"card-image\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; display: flex; align-items: center; justify-content: center; color: white; z-index: 2;\">\n        <span>[3D VRoid Avatar Canvas]</span>\n      </div>\n    }\n\n    <!-- CASO 4: Imagen Est\u00E1tica Est\u00E1ndar -->\n    @else {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n    }\n\n\n\n    @if (!isChatActive()) {\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n      \n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n    }\n\n    <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n      <div class=\"info-content\">\n        <h1\n          ><strong>{{ agentCard()?.name || agentCard()?.characterCard?.data?.name }}</strong></h1\n        >\n\n        @if (agentCard()?.characterCard?.data?.instructions) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.instructions' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.instructions | parseCard: agentCard() }}</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div \n  style=\"display: flex; justify-content: center; align-items: center\" \n  [class.transparent-mode]=\"avatarDisplay() === 'transparent'\"\n  [class.fullscreen-mode]=\"avatarDisplay() === 'fullscreen'\"\n  [class.card-mode]=\"avatarDisplay() === 'card'\"\n>\n  @if (avatarDisplay() === 'transparent' || avatarDisplay() === 'fullscreen') {\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  } @else {\n    <p-card>\n      <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    </p-card>\n  }\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}:host{display:block;width:100%;height:100%}.transparent-mode .card-container{width:420px;height:700px;position:relative}.transparent-mode .card-image{background:transparent}.fullscreen-mode{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.fullscreen-mode .card-container{width:100%;height:100%;position:relative}.fullscreen-mode .card-image{background:transparent}.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:var(--chat-user-message-bg);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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$6.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Live2dModelComponent, selector: "app-live2d-model", inputs: ["modelPath", "scale", "zoom", "x", "y"], outputs: ["modelLoaded", "viewStateChanged"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }, { kind: "pipe", type: i3$6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcAgentCardConverseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-converse', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe, TranslateModule, NgTemplateOutlet], template: "<ng-template #cardContent>\n  <div class=\"card-container\">\n    <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" [style.opacity]=\"videoPlayerService.isVideoPlaying() ? 0 : 1\" style=\"transition: opacity 0.5s ease-in-out;\" alt=\"\" />\n    <!-- Se implementa l\u00F3gica de doble video (ping-pong) para evitar parpadeos -->\n    <video #videoPlayerA class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 1; z-index: 1;\" playsinline></video>\n    <video #videoPlayerB class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 0; z-index: 2;\" playsinline></video>\n\n\n\n    @if (!isChatActive()) {\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n      \n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n    }\n\n    <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n      <div class=\"info-content\">\n        <h1\n          ><strong>{{ agentCard()?.name || agentCard()?.characterCard?.data?.name }}</strong></h1\n        >\n\n        @if (agentCard()?.characterCard?.data?.instructions) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.instructions' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.instructions | parseCard: agentCard() }}</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div style=\"display: flex; justify-content: center; align-items: center\" [class.transparent-mode]=\"isTransparent()\">\n  @if (isTransparent()) {\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  } @else {\n    <p-card>\n      <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    </p-card>\n  }\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.transparent-mode .card-container{width:420px;height:700px;position:relative}.transparent-mode .card-image{background:transparent}.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:var(--chat-user-message-bg);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-converse', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe, TranslateModule, NgTemplateOutlet, Live2dModelComponent], template: "<ng-template #cardContent>\n  <div class=\"card-container\">\n    <!-- CASO 1: Renderizado por Video (Ping-pong nativo) -->\n    @if (avatarType() === 'video') {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" [style.opacity]=\"videoPlayerService.isVideoPlaying() ? 0 : 1\" style=\"transition: opacity 0.5s ease-in-out;\" alt=\"\" />\n      <video #videoPlayerA class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 1; z-index: 1;\" playsinline></video>\n      <video #videoPlayerB class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 0; z-index: 2;\" playsinline></video>\n    }\n\n    <!-- CASO 2: Renderizado por Live2D (PixiJS Canvas) -->\n    @else if (avatarType() === 'live2d') {\n      @if (model3JsonUrl(); as modelPath) {\n        <app-live2d-model\n          #live2dModel\n          class=\"card-image\"\n          style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: all; z-index: 2;\"\n          [modelPath]=\"modelPath\"\n          [zoom]=\"live2dZoomState()\"\n          [x]=\"live2dXState()\"\n          [y]=\"live2dYState()\"\n          (viewStateChanged)=\"onViewStateChanged($event)\">\n        </app-live2d-model>\n      } @else {\n        <!-- Fallback si no tiene manifest -->\n        <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      }\n    }\n\n    <!-- CASO 3: Renderizado por VRoid (WebGL 3D - Placeholder) -->\n    @else if (avatarType() === 'vroid') {\n      <div class=\"card-image\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; display: flex; align-items: center; justify-content: center; color: white; z-index: 2;\">\n        <span>[3D VRoid Avatar Canvas]</span>\n      </div>\n    }\n\n    <!-- CASO 4: Imagen Est\u00E1tica Est\u00E1ndar -->\n    @else {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n    }\n\n\n\n    @if (!isChatActive()) {\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n      \n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n    }\n\n    <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n      <div class=\"info-content\">\n        <h1\n          ><strong>{{ agentCard()?.name || agentCard()?.characterCard?.data?.name }}</strong></h1\n        >\n\n        @if (agentCard()?.characterCard?.data?.instructions) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.instructions' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.instructions | parseCard: agentCard() }}</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div \n  style=\"display: flex; justify-content: center; align-items: center\" \n  [class.transparent-mode]=\"avatarDisplay() === 'transparent'\"\n  [class.fullscreen-mode]=\"avatarDisplay() === 'fullscreen'\"\n  [class.card-mode]=\"avatarDisplay() === 'card'\"\n>\n  @if (avatarDisplay() === 'transparent' || avatarDisplay() === 'fullscreen') {\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  } @else {\n    <p-card>\n      <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    </p-card>\n  }\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}:host{display:block;width:100%;height:100%}.transparent-mode .card-container{width:420px;height:700px;position:relative}.transparent-mode .card-image{background:transparent}.fullscreen-mode{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.fullscreen-mode .card-container{width:100%;height:100%;position:relative}.fullscreen-mode .card-image{background:transparent}.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:var(--chat-user-message-bg);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
             }], useNativePlayer: [{
                 type: Input
+            }], activeAudioMessage: [{
+                type: Input
             }], isConversationActive: [{
                 type: Input
-            }], onStartConversation: [{ type: i0.Output, args: ["onStartConversation"] }], videoPlayerA: [{ type: i0.ViewChild, args: ['videoPlayerA', { isSignal: true }] }], videoPlayerB: [{ type: i0.ViewChild, args: ['videoPlayerB', { isSignal: true }] }] } });
+            }], onStartConversation: [{ type: i0.Output, args: ["onStartConversation"] }], videoPlayerA: [{ type: i0.ViewChild, args: ['videoPlayerA', { isSignal: true }] }], videoPlayerB: [{ type: i0.ViewChild, args: ['videoPlayerB', { isSignal: true }] }], live2dModel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Live2dModelComponent), { isSignal: true }] }] } });
 
 var GenerationType;
 (function (GenerationType) {
@@ -9778,5 +10272,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACCDataGenerationComponent, AGENT_CARDS_STATE_SERVICE, AIGenerationService, AgentCardListComponent, AgentCardUI, AgentCardsGenerationService, AgenticEngine, AgenticPattern, AudioService, AudioSpeed, BACKGROUND_SERVICE_TOKEN, CHAT_OBSERVER_CONFIG, CONVERSATION_AI_TOKEN, CardRouteService, CardRoutesComponent, CardsCreatorComponent, ChatEngineTestComponent, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationFlowStateService, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationRuleService, ConversationRulesComponent, ConversationStatus, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardConverseComponent, DcAgentCardDetailComponent, DcObserverInterventionComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EAgentType, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, MessageContent, MessageContentDisplayer, MessagesStateService, ModelSelectorComponent, PolitoNotificationComponent, PopupService, PromptPreviewComponent, SectionType, SystemPromptType, TextEngineOptions, TextEngines, VIDEO_PLAYER_SERVICE_TOKEN, VideoPlayerNativeService, VideoPlayerService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, XKillsAgentCardsService, 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, AgenticEngine, AgenticPattern, AudioService, AudioSpeed, BACKGROUND_SERVICE_TOKEN, CHAT_OBSERVER_CONFIG, CONVERSATION_AI_TOKEN, CardRouteService, CardRoutesComponent, CardsCreatorComponent, ChatEngineTestComponent, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationFlowStateService, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationRuleService, ConversationRulesComponent, ConversationStatus, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardConverseComponent, DcAgentCardDetailComponent, DcObserverInterventionComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EAgentType, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, Live2dModelComponent, MessageContent, MessageContentDisplayer, MessagesStateService, ModelSelectorComponent, PolitoNotificationComponent, PopupService, PromptPreviewComponent, SectionType, SystemPromptType, TextEngineOptions, TextEngines, VIDEO_PLAYER_SERVICE_TOKEN, VideoPlayerNativeService, VideoPlayerService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, XKillsAgentCardsService, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, getMoodStatePrompt, markdownToHtml, matchTranscription, provideAgentCardService, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map