@dataclouder/ngx-agent-cards 0.1.22 → 0.1.23

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

@@ -43,6 +43,8 @@ import * as i3$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i6 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
+import * as i13 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
 import { MultiImagesStorageService, ResolutionType, AspectType, CropperComponentModal, SimpleUploaderComponent } from '@dataclouder/ngx-cloud-storage';
 import * as i12 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
@@ -4627,7 +4629,7 @@ class DCAgentCardFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCAgentCardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null }, bannerImgSettings: { classPropertyName: "bannerImgSettings", publicName: "bannerImgSettings", isSignal: true, isRequired: false, transformFunction: null }, imageStorageSettings: { classPropertyName: "imageStorageSettings", publicName: "imageStorageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onImageLoaded: "onImageLoaded", onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], ngImport: i0, template: "<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)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n            @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n            <div class=\"error\"> Title is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.controls.description.errors?.['required'] && form.controls.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              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group bg-sky-50\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n              >\n            </label>\n\n            <p-select\n              id=\"textEngine\"\n              [options]=\"textEngineOptions\"\n              formControlName=\"textEngine\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label class=\"cursor-pointer\" for=\"conversationType\" (click)=\"openConversationTypeDialog()\"\n              >Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label\n            >\n            <p-select\n              id=\"conversationType\"\n              [options]=\"conversationOptions\"\n              formControlName=\"conversationType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n            <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n          </div>\n\n          <div formGroupName=\"tts\" class=\"group\">\n            <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n            <div class=\"form-field\">\n              <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector(true)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"voice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-info-circle\" (click)=\"openVoiceSelector(false)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"secondaryVoice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"speed\"\n                [options]=\"audioSpeedOptions\"\n                formControlName=\"speed\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n            </div>\n          </div>\n\n          <dc-model-selector [modelForm]=\"form.controls.conversationSettings.controls.model\" [shortForm]=\"true\"></dc-model-selector>\n        </div>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                Public\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                Published\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts){\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        <div style=\"position: relative; min-height: 60px\">\n          <div style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n            <h1>Uploads</h1>\n\n            <div style=\"display: flex; gap: 10px\">\n              <dc-simple-uploader\n                [buttonLabel]=\"'Agregar movimiento'\"\n                (fileUploaded)=\"onMotionUploaded($event)\"\n                [storagePath]=\"'/movimientos/file'\"\n                [accept]=\"'video/*'\"></dc-simple-uploader>\n\n              @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n              <dc-cropper-modal\n                #cropperBanner\n                id=\"cropperBanner\"\n                [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n                [imgStorageSettings]=\"bannerImgSettings()\"\n                [currentStorage]=\"conversation?.assets?.bannerImg\"\n                (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n              }\n\n              <dc-cropper-modal\n                id=\"cropperCardImage\"\n                #cropperStickers\n                [buttonLabel]=\"'agregar sticker'\"\n                [imgStorageSettings]=\"stickerStorageSettings\"\n                (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n\n              <div>\n                @if (!agentCardId) {\n                <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n                } @else {\n\n                <p-button (click)=\"generateMainImage()\" pTooltip=\"Generar/Re generar la imagen\" icon=\"pi pi-sparkles\" [rounded]=\"true\" severity=\"info\" />\n\n                <dc-cropper-modal\n                  id=\"cropperCardImage\"\n                  #cropperCardImage\n                  [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n                  [imgStorageSettings]=\"imageStorageSettings()\"\n                  [currentStorage]=\"conversation?.assets?.image\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                  (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n                }\n              </div>\n            </div>\n            <!-- Banner -->\n\n            <div style=\"position: relative; margin-bottom: 100px\">\n              <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n              <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n              <video class=\"main-motion-card\" [src]=\"conversation?.assets?.motion?.url\" autoplay loop muted playsinline></video>\n            </div>\n\n            <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n              @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n              <div style=\"position: relative\">\n                <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n                <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if(form.controls.characterCard){\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  <p-popover #textEngineDialog header=\"Text Engine Information\">\n    <div class=\"p-4\">\n      <h3>Text Engine Types</h3>\n      <ul>\n        <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n        <li\n          ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n          puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n          personaje principal</li\n        >\n        <li\n          ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo\n          se presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n        >\n      </ul>\n    </div>\n  </p-popover>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".textmin{min-width:36vw}.image-gen-btn{position:absolute;bottom:15px;left:35%}.main-image-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;left:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003}@media (max-width: 1300px){.main-image-card{max-width:170px}}@media (max-width: 768px){.main-image-card{max-width:130px}}.main-motion-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;right:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003}@media (max-width: 1300px){.main-motion-card{max-width:170px}}@media (max-width: 768px){.main-motion-card{max-width:130px}}.main-banner-image-card{display:block;width:100%;height:auto;border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i6$1.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i9.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i10.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i12.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled"], outputs: ["fileUploaded", "uploadError"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null }, bannerImgSettings: { classPropertyName: "bannerImgSettings", publicName: "bannerImgSettings", isSignal: true, isRequired: false, transformFunction: null }, imageStorageSettings: { classPropertyName: "imageStorageSettings", publicName: "imageStorageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onImageLoaded: "onImageLoaded", onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], ngImport: i0, template: "<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)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n            @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n            <div class=\"error\"> Title is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.controls.description.errors?.['required'] && form.controls.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              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group bg-sky-50\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n              >\n            </label>\n\n            <p-select\n              id=\"textEngine\"\n              [options]=\"textEngineOptions\"\n              formControlName=\"textEngine\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label class=\"cursor-pointer\" for=\"conversationType\" (click)=\"openConversationTypeDialog()\"\n              >Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label\n            >\n            <p-select\n              id=\"conversationType\"\n              [options]=\"conversationOptions\"\n              formControlName=\"conversationType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n            <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n          </div>\n\n          <div formGroupName=\"tts\" class=\"group\">\n            <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n            <div class=\"form-field\">\n              <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector(true)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"voice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-info-circle\" (click)=\"openVoiceSelector(false)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"secondaryVoice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"speed\"\n                [options]=\"audioSpeedOptions\"\n                formControlName=\"speed\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n            </div>\n          </div>\n\n          <dc-model-selector [modelForm]=\"form.controls.conversationSettings.controls.model\" [shortForm]=\"true\"></dc-model-selector>\n        </div>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                Public\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                Published\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts){\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        <div style=\"position: relative; min-height: 60px\">\n          <div style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n            <p-message severity=\"info\">\n              <div style=\"display: flex; gap: 10px\">\n                <dc-simple-uploader\n                  [buttonLabel]=\"'Agregar movimiento'\"\n                  (fileUploaded)=\"onMotionUploaded($event)\"\n                  [storagePath]=\"'/movimientos/file'\"\n                  [accept]=\"'video/*'\"></dc-simple-uploader>\n\n                @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n                <dc-cropper-modal\n                  #cropperBanner\n                  id=\"cropperBanner\"\n                  [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n                  [imgStorageSettings]=\"bannerImgSettings()\"\n                  [currentStorage]=\"conversation?.assets?.bannerImg\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                  (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n                }\n\n                <dc-cropper-modal\n                  id=\"cropperCardImage\"\n                  #cropperStickers\n                  [buttonLabel]=\"'agregar sticker'\"\n                  [imgStorageSettings]=\"stickerStorageSettings\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                  (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n\n                <div>\n                  @if (!agentCardId) {\n                  <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n                  } @else {\n\n                  <dc-cropper-modal\n                    id=\"cropperCardImage\"\n                    #cropperCardImage\n                    [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n                    [imgStorageSettings]=\"imageStorageSettings()\"\n                    [currentStorage]=\"conversation?.assets?.image\"\n                    (onFileSelected)=\"onImageSelected($event)\"\n                    (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n                  }\n                </div>\n\n                <p-button (click)=\"generateMainImage()\" pTooltip=\"Generar/Re generar la imagen\" icon=\"pi pi-sparkles\" [rounded]=\"true\" severity=\"info\" />\n              </div>\n            </p-message>\n            <!-- Banner -->\n\n            <div style=\"position: relative; margin-bottom: 100px\">\n              <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/defaults/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n              <img [src]=\"conversation?.assets?.image?.url || 'assets/defaults/images/default_2_3.webp'\" class=\"main-image-card\" />\n              <video class=\"main-motion-card\" [src]=\"conversation?.assets?.motion?.url\" autoplay loop muted playsinline></video>\n            </div>\n\n            <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n              @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n              <div style=\"position: relative\">\n                <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n                <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if(form.controls.characterCard){\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  <p-popover #textEngineDialog header=\"Text Engine Information\">\n    <div class=\"p-4\">\n      <h3>Text Engine Types</h3>\n      <ul>\n        <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n        <li\n          ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n          puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n          personaje principal</li\n        >\n        <li\n          ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo\n          se presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n        >\n      </ul>\n    </div>\n  </p-popover>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".textmin{min-width:36vw}.image-gen-btn{position:absolute;bottom:15px;left:35%}.main-image-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;left:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003}@media (max-width: 1300px){.main-image-card{max-width:170px}}@media (max-width: 768px){.main-image-card{max-width:130px}}.main-motion-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;right:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003}@media (max-width: 1300px){.main-motion-card{max-width:170px}}@media (max-width: 768px){.main-motion-card{max-width:130px}}.main-banner-image-card{display:block;width:100%;height:auto;border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i6$1.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i9.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i10.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i12.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i13.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
             type: Component,
@@ -4659,7 +4661,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         InputNumberModule,
                         FileUploadModule,
                         SimpleUploaderComponent,
-                    ], 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)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n            @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n            <div class=\"error\"> Title is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.controls.description.errors?.['required'] && form.controls.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              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group bg-sky-50\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n              >\n            </label>\n\n            <p-select\n              id=\"textEngine\"\n              [options]=\"textEngineOptions\"\n              formControlName=\"textEngine\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label class=\"cursor-pointer\" for=\"conversationType\" (click)=\"openConversationTypeDialog()\"\n              >Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label\n            >\n            <p-select\n              id=\"conversationType\"\n              [options]=\"conversationOptions\"\n              formControlName=\"conversationType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n            <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n          </div>\n\n          <div formGroupName=\"tts\" class=\"group\">\n            <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n            <div class=\"form-field\">\n              <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector(true)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"voice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-info-circle\" (click)=\"openVoiceSelector(false)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"secondaryVoice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"speed\"\n                [options]=\"audioSpeedOptions\"\n                formControlName=\"speed\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n            </div>\n          </div>\n\n          <dc-model-selector [modelForm]=\"form.controls.conversationSettings.controls.model\" [shortForm]=\"true\"></dc-model-selector>\n        </div>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                Public\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                Published\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts){\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        <div style=\"position: relative; min-height: 60px\">\n          <div style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n            <h1>Uploads</h1>\n\n            <div style=\"display: flex; gap: 10px\">\n              <dc-simple-uploader\n                [buttonLabel]=\"'Agregar movimiento'\"\n                (fileUploaded)=\"onMotionUploaded($event)\"\n                [storagePath]=\"'/movimientos/file'\"\n                [accept]=\"'video/*'\"></dc-simple-uploader>\n\n              @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n              <dc-cropper-modal\n                #cropperBanner\n                id=\"cropperBanner\"\n                [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n                [imgStorageSettings]=\"bannerImgSettings()\"\n                [currentStorage]=\"conversation?.assets?.bannerImg\"\n                (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n              }\n\n              <dc-cropper-modal\n                id=\"cropperCardImage\"\n                #cropperStickers\n                [buttonLabel]=\"'agregar sticker'\"\n                [imgStorageSettings]=\"stickerStorageSettings\"\n                (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n\n              <div>\n                @if (!agentCardId) {\n                <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n                } @else {\n\n                <p-button (click)=\"generateMainImage()\" pTooltip=\"Generar/Re generar la imagen\" icon=\"pi pi-sparkles\" [rounded]=\"true\" severity=\"info\" />\n\n                <dc-cropper-modal\n                  id=\"cropperCardImage\"\n                  #cropperCardImage\n                  [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n                  [imgStorageSettings]=\"imageStorageSettings()\"\n                  [currentStorage]=\"conversation?.assets?.image\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                  (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n                }\n              </div>\n            </div>\n            <!-- Banner -->\n\n            <div style=\"position: relative; margin-bottom: 100px\">\n              <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n              <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n              <video class=\"main-motion-card\" [src]=\"conversation?.assets?.motion?.url\" autoplay loop muted playsinline></video>\n            </div>\n\n            <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n              @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n              <div style=\"position: relative\">\n                <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n                <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if(form.controls.characterCard){\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  <p-popover #textEngineDialog header=\"Text Engine Information\">\n    <div class=\"p-4\">\n      <h3>Text Engine Types</h3>\n      <ul>\n        <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n        <li\n          ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n          puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n          personaje principal</li\n        >\n        <li\n          ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo\n          se presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n        >\n      </ul>\n    </div>\n  </p-popover>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".textmin{min-width:36vw}.image-gen-btn{position:absolute;bottom:15px;left:35%}.main-image-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;left:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003}@media (max-width: 1300px){.main-image-card{max-width:170px}}@media (max-width: 768px){.main-image-card{max-width:130px}}.main-motion-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;right:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003}@media (max-width: 1300px){.main-motion-card{max-width:170px}}@media (max-width: 768px){.main-motion-card{max-width:130px}}.main-banner-image-card{display:block;width:100%;height:auto;border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
+                        MessageModule,
+                    ], 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)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n            @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n            <div class=\"error\"> Title is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.controls.description.errors?.['required'] && form.controls.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              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group bg-sky-50\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n              >\n            </label>\n\n            <p-select\n              id=\"textEngine\"\n              [options]=\"textEngineOptions\"\n              formControlName=\"textEngine\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label class=\"cursor-pointer\" for=\"conversationType\" (click)=\"openConversationTypeDialog()\"\n              >Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label\n            >\n            <p-select\n              id=\"conversationType\"\n              [options]=\"conversationOptions\"\n              formControlName=\"conversationType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n            <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n          </div>\n\n          <div formGroupName=\"tts\" class=\"group\">\n            <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n            <div class=\"form-field\">\n              <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector(true)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"voice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-info-circle\" (click)=\"openVoiceSelector(false)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"secondaryVoice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"speed\"\n                [options]=\"audioSpeedOptions\"\n                formControlName=\"speed\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n            </div>\n          </div>\n\n          <dc-model-selector [modelForm]=\"form.controls.conversationSettings.controls.model\" [shortForm]=\"true\"></dc-model-selector>\n        </div>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                Public\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                Published\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts){\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        <div style=\"position: relative; min-height: 60px\">\n          <div style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n            <p-message severity=\"info\">\n              <div style=\"display: flex; gap: 10px\">\n                <dc-simple-uploader\n                  [buttonLabel]=\"'Agregar movimiento'\"\n                  (fileUploaded)=\"onMotionUploaded($event)\"\n                  [storagePath]=\"'/movimientos/file'\"\n                  [accept]=\"'video/*'\"></dc-simple-uploader>\n\n                @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n                <dc-cropper-modal\n                  #cropperBanner\n                  id=\"cropperBanner\"\n                  [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n                  [imgStorageSettings]=\"bannerImgSettings()\"\n                  [currentStorage]=\"conversation?.assets?.bannerImg\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                  (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n                }\n\n                <dc-cropper-modal\n                  id=\"cropperCardImage\"\n                  #cropperStickers\n                  [buttonLabel]=\"'agregar sticker'\"\n                  [imgStorageSettings]=\"stickerStorageSettings\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                  (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n\n                <div>\n                  @if (!agentCardId) {\n                  <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n                  } @else {\n\n                  <dc-cropper-modal\n                    id=\"cropperCardImage\"\n                    #cropperCardImage\n                    [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n                    [imgStorageSettings]=\"imageStorageSettings()\"\n                    [currentStorage]=\"conversation?.assets?.image\"\n                    (onFileSelected)=\"onImageSelected($event)\"\n                    (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n                  }\n                </div>\n\n                <p-button (click)=\"generateMainImage()\" pTooltip=\"Generar/Re generar la imagen\" icon=\"pi pi-sparkles\" [rounded]=\"true\" severity=\"info\" />\n              </div>\n            </p-message>\n            <!-- Banner -->\n\n            <div style=\"position: relative; margin-bottom: 100px\">\n              <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/defaults/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n              <img [src]=\"conversation?.assets?.image?.url || 'assets/defaults/images/default_2_3.webp'\" class=\"main-image-card\" />\n              <video class=\"main-motion-card\" [src]=\"conversation?.assets?.motion?.url\" autoplay loop muted playsinline></video>\n            </div>\n\n            <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n              @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n              <div style=\"position: relative\">\n                <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n                <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if(form.controls.characterCard){\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  <p-popover #textEngineDialog header=\"Text Engine Information\">\n    <div class=\"p-4\">\n      <h3>Text Engine Types</h3>\n      <ul>\n        <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n        <li\n          ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n          puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n          personaje principal</li\n        >\n        <li\n          ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo\n          se presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n        >\n      </ul>\n    </div>\n  </p-popover>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".textmin{min-width:36vw}.image-gen-btn{position:absolute;bottom:15px;left:35%}.main-image-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;left:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003}@media (max-width: 1300px){.main-image-card{max-width:170px}}@media (max-width: 768px){.main-image-card{max-width:130px}}.main-motion-card{max-width:220px;display:block;border-radius:8px;position:absolute;bottom:-100px;right:20px;transform:none;z-index:1;box-shadow:0 4px 8px #0003}@media (max-width: 1300px){.main-motion-card{max-width:170px}}@media (max-width: 768px){.main-motion-card{max-width:130px}}.main-banner-image-card{display:block;width:100%;height:auto;border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
         }] });
 
 class DCConversationCardUIComponent {
@@ -4688,11 +4691,11 @@ class DCConversationCardUIComponent {
         this.onCardAction.emit({ event: 'delete', card: this.card() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationCardUIComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardAction: "onCardAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ card().title }}</p>\n\n    <!-- <h5 class=\"title\">\n      <span [innerHTML]=\"card().characterCard?.data.description | truncate : 100\"></span>\n    </h5> -->\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card().taken){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$5.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardAction: "onCardAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/defaults/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ card().title }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().description || card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card().taken){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$5.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationCardUIComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-default-ui', imports: [PopoverModule, TruncatePipe, ButtonModule, SpeedDialModule, CardModule, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ card().title }}</p>\n\n    <!-- <h5 class=\"title\">\n      <span [innerHTML]=\"card().characterCard?.data.description | truncate : 100\"></span>\n    </h5> -->\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card().taken){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"] }]
+            args: [{ selector: 'dc-agent-card-default-ui', imports: [PopoverModule, TruncatePipe, ButtonModule, SpeedDialModule, CardModule, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/defaults/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ card().title }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().description || card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card().taken){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"] }]
         }] });
 
 // This component contains a really avanced strategy to dinamically render Conversation Cards Details so every app can implement it with their own Style and Behavior
@@ -4942,11 +4945,11 @@ class DcAgentCardDetailsComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          @if (agentCard?.characterCard.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/defaults/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          @if (agentCard?.characterCard.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          @if (agentCard?.characterCard.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
+            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/defaults/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          @if (agentCard?.characterCard.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
         }], propDecorators: { agentCardId: [{
                 type: Input
             }] } });