@dataclouder/ngx-agent-cards 0.1.70 → 0.1.71

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, inject, signal, computed, RendererFactory2, ApplicationRef, Injector, EnvironmentInjector, createComponent, ChangeDetectionStrategy, Component, output, Input, input, effect, ViewChild, DestroyRef, HostBinding, ElementRef, Pipe, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
 import * as i1 from '@dataclouder/ngx-core';
-import { MoodStateOptions, LANGUAGES, EntityCommunicationService, TOAST_ALERTS_TOKEN, APP_CONFIG, AudioSpeed as AudioSpeed$1, LoadingBarService, EModelQuality, getLangDesc, AudioSpeedReverse, formatCamelCaseString, getSupportedLanguageOptions, AudioNotificationService, MoodState, SUPPORTED_LANGUAGES, FormUtilsService, EntityBaseFormComponent, DcManageableFormComponent, DcLearnableFormComponent, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, EmptyStateComponent } from '@dataclouder/ngx-core';
+import { MoodStateOptions, LANGUAGES, EntityCommunicationService, TOAST_ALERTS_TOKEN, APP_CONFIG, AudioSpeed as AudioSpeed$1, LoadingBarService, EModelQuality, getLangDesc, AudioSpeedReverse, formatCamelCaseString, AudioNotificationService, MoodState, SUPPORTED_LANGUAGES, FormUtilsService, DcTagsFormComponent, EntityBaseFormComponent, getSupportedLanguageOptions, DcManageableFormComponent, DcLearnableFormComponent, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, EmptyStateComponent } from '@dataclouder/ngx-core';
 import { UserService } from '@dataclouder/ngx-users';
 import { AiWhisperService, TtsService, NgxAiServicesService, GeneratedAssetsService, VoiceSelectorComponent } from '@dataclouder/ngx-ai-services';
 import * as i2$1 from '@angular/common';
@@ -36,34 +36,31 @@ import { RatingModule } from 'primeng/rating';
 import * as i1$4 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { BadgeModule } from 'primeng/badge';
-import * as i2$6 from 'primeng/tooltip';
+import * as i2$7 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import * as i5 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i1$3 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
-import * as i5$1 from 'primeng/tabs';
+import * as i2$6 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
 import { ChipModule } from 'primeng/chip';
 import { MarkdownComponent } from 'ngx-markdown';
 import * as i2$4 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import * as i2$5 from 'primeng/api';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { PortalModule } from '@angular/cdk/portal';
 import * as i3$2 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i6 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
-import * as i5$2 from 'primeng/dialog';
+import * as i5$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i7 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { FileUploadModule } from 'primeng/fileupload';
-import * as i2$7 from 'primeng/card';
+import * as i2$8 from 'primeng/card';
 import { CardModule } from 'primeng/card';
 import { AspectRatioOptions, SafeHtmlPipe, ResolutionType, AspectType, AssetsLoaderComponent, SimpleUploaderComponent, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
-import { DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';
 import { AccordionModule } from 'primeng/accordion';
 import * as i1$7 from '@angular/router';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
@@ -77,7 +74,7 @@ import * as i4$1 from 'primeng/inputgroupaddon';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import * as i1$6 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i2$8 from 'primeng/speeddial';
+import * as i2$9 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
 import { isEmpty } from 'es-toolkit/compat';
 
@@ -87,7 +84,7 @@ interface CharacterCardData {
   gender: string;                     // male, female or other
   scenario: string;                   // 2-3 sentences: of the world, environment, time of day, weather, etc. where the character is.
   greetings: string[];                // 2-3 Character's opening message to start a conversation, less than 50 words. 
-  appearance: string;                // current description for image generation less than 50 words.
+  appearance: string;                 // current description for image generation less than 50 words.
   persona: {
     identity: string;                  // Name, Age, Gender, Species, Sexuality, Role, Appearance
     physical: string;                  // physical description including height, build, hairColor, hairStyle, eyeColor, skinTone, distinctiveMarks, clothing style, currentOutfit
@@ -102,6 +99,7 @@ interface CharacterCardData {
   };
   tags: string[];                     // Array of 6-8 descriptive tags
   hook: string;                       // 40 to 60 words for readable hook, why play this character, what makes them compelling, add some questions for challenges, make it engaging.
+  instructions: string;               // 40 to 60 words for instructions explaining where the user is and what to do when starting the conversation, like you were invited to the john's house to take a coffee, continue the conversation in a friendly manner, 
 }
   
 Description format for PERSONA core data (compact, information-dense):
@@ -1472,13 +1470,11 @@ class DefaultAgentCardsService extends EntityCommunicationService {
         return this.httpService.get(`${Endpoints$2.GenerateImage}/${idCard}`, 'primary');
     }
     async callChatCompletion(conversation, tag) {
+        debugger;
         let messages = conversation.messages.map((m) => ({ content: m.content, role: m.role }));
         messages = messages.filter((m) => m.role != ChatRole.AssistantHelper);
         const conversationFiltered = { ...conversation, messages };
-        // const response = conversation.returnJson
-        //   ? await this.httpService.postHttp<IAgentResponseDTO>({ service: `${Endpoints.AgentChat}?returnJson=true`, data: conversationFiltered, host: 'primary' })
         const host = this.appConfig?.aiServicesUrl || this.appConfig?.backendNodeUrl;
-        // const service = `${Endpoints.AgentChat}`;
         const service = `api/ai-services/gemini/chat`;
         const response = await this.httpService.postHttp({ service, data: conversationFiltered, host });
         if (response?.metadata?.tokens) {
@@ -3189,11 +3185,11 @@ class ChatHeaderComponent {
         this.settingsClickEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ChatHeaderComponent, isStandalone: true, selector: "dc-chat-header", inputs: { alternativeConversation: "alternativeConversation", agentCard: "agentCard" }, outputs: { restartConversationEvent: "restartConversationEvent", showInfoEvent: "showInfoEvent", settingsClickEvent: "settingsClickEvent" }, ngImport: i0, template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n    {{ agentCard.title }}\n    } @else { Reiniciar conversaci\u00F3n }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (userService.isAdmin()){\n    <div class=\"admin-controls\">\n      <i style=\"color: rgb(255, 149, 0)\" class=\"pi pi-key\"></i>\n\n      <p-button variant=\"text\" [raised]=\"true\" icon=\"pi pi-id-card\" (click)=\"showInfo()\"></p-button>\n    </div>\n\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ChatHeaderComponent, isStandalone: true, selector: "dc-chat-header", inputs: { alternativeConversation: "alternativeConversation", agentCard: "agentCard" }, outputs: { restartConversationEvent: "restartConversationEvent", showInfoEvent: "showInfoEvent", settingsClickEvent: "settingsClickEvent" }, ngImport: i0, template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.name) {\n    {{ agentCard.name }}\n    } @else { Reiniciar conversaci\u00F3n }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.name }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (userService.isAdmin()){\n    <div class=\"admin-controls\">\n      <i style=\"color: rgb(255, 149, 0)\" class=\"pi pi-key\"></i>\n\n      <p-button variant=\"text\" [raised]=\"true\" icon=\"pi pi-id-card\" (click)=\"showInfo()\"></p-button>\n    </div>\n\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat-header', standalone: true, imports: [ButtonModule, DecimalPipe], template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n    {{ agentCard.title }}\n    } @else { Reiniciar conversaci\u00F3n }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (userService.isAdmin()){\n    <div class=\"admin-controls\">\n      <i style=\"color: rgb(255, 149, 0)\" class=\"pi pi-key\"></i>\n\n      <p-button variant=\"text\" [raised]=\"true\" icon=\"pi pi-id-card\" (click)=\"showInfo()\"></p-button>\n    </div>\n\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"] }]
+            args: [{ selector: 'dc-chat-header', standalone: true, imports: [ButtonModule, DecimalPipe], template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.name) {\n    {{ agentCard.name }}\n    } @else { Reiniciar conversaci\u00F3n }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.name }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (userService.isAdmin()){\n    <div class=\"admin-controls\">\n      <i style=\"color: rgb(255, 149, 0)\" class=\"pi pi-key\"></i>\n\n      <p-button variant=\"text\" [raised]=\"true\" icon=\"pi pi-id-card\" (click)=\"showInfo()\"></p-button>\n    </div>\n\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"] }]
         }], propDecorators: { alternativeConversation: [{
                 type: Input
             }], agentCard: [{
@@ -4375,7 +4371,7 @@ class ConversationInspector {
         this.viewMode.set(this.viewMode() === 'markdown' ? 'regular' : 'markdown');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConversationInspector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ConversationInspector, isStandalone: true, selector: "dc-conversation-info", outputs: { completeEvent: "completeEvent" }, ngImport: i0, template: "<div class=\"info-content\">\n  <p-tabs value=\"0\">\n    <p-tablist>\n      <p-tab value=\"0\">Summary</p-tab>\n      <p-tab value=\"1\">Dynamic Flow</p-tab>\n      <p-tab value=\"2\">Messages</p-tab>\n      <p-tab value=\"3\">Pricing</p-tab>\n      <p-tab value=\"4\">More</p-tab>\n    </p-tablist>\n    <p-tabpanels>\n      <p-tabpanel value=\"0\">\n        <ng-template #content>\n          <div class=\"flex flex-wrap gap-2 mb-2\">\n            <p-button label=\"Call Agent\" (click)=\"callAgent()\" />\n            <p-button label=\"Feedback\" icon=\"pi pi-pencil\" (click)=\"openFeedback()\" />\n            <p-button label=\"Complete\" icon=\"pi pi-check\" (click)=\"complete()\" />\n          </div>\n\n          <!-- Summary -->\n          <p-divider>Score</p-divider>\n\n          <label for=\"slider\">Current Score : {{ evaluationService.scoreSignal() }}</label>\n\n          <div class=\"flex flex gap-3\">\n            <p-slider [(ngModel)]=\"value\" [step]=\"10\" class=\"w-56\" />\n            <p-button label=\"Set Score to {{ value }}\" (onClick)=\"setScore()\" />\n          </div>\n          <!-- Summary ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"1\">\n        <ng-template #content>\n          <!-- Dynamic Flow -->\n\n          <p-divider>Conversation Flow</p-divider>\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (dynamicFlowService.conversationFlowState()?.goal?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Goal</p>\n            </div>\n            @if(dynamicFlowService.conversationFlowState()?.goal?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger User Message</p>\n            </div>\n            @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger Assistant Message</p>\n            </div>\n            @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <h3>Herramientas</h3>\n          @for (tool of dynamicFlowService.conversationFlowState()?.tools; track tool.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (tool.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">{{ tool.name }}</p>\n            </div>\n            @if(tool.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ tool.description }} </div>\n            }\n          </div>\n          }\n\n          <h3>Challenges Retos</h3>\n          @for (challenge of dynamicFlowService.conversationFlowState()?.challenges; track challenge.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (challenge.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n\n              <p class=\"font-semibold\"> {{ challenge.emoji }} {{ challenge.name }}</p>\n            </div>\n            @if(challenge.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ challenge.description }} </div>\n            }\n          </div>\n          }\n          <h5>Conditions</h5>\n\n          @for (condition of dynamicFlowService.conversationFlowState()?.dynamicConditions; track $index) {\n          <div class=\"pl-2 mt-1 text-sm text-gray-600 italic\"> When the {{ condition.what }} is {{ condition.when }} than {{ condition.value }} Do </div>\n          <ol>\n            @for (doAction of condition.do; track $index) {\n            <li class=\"pl-5 mt-1 text-sm text-gray-600 italic\">\n              {{ $index }})\n              <span style=\"color: brown\"> {{ doAction.actionType }}</span>\n              <span style=\"color: green\"> {{ doAction.systemPromptType }}</span>\n              <span style=\"color: green\"> {{ doAction.dynamicFlowTaskType }}</span>\n\n              to\n              <span style=\"color: rgb(49, 23, 177)\"> {{ doAction.enabled }}</span>\n              \"{{ doAction.prompt }}\"\n            </li>\n            }\n          </ol>\n          }\n\n          <p>Challenges</p>\n          <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n\n          <!-- Dynamic Flow ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"2\">\n        <ng-template #content>\n          <div>\n            <p-button label=\"Exportar todo\" (click)=\"exportChat('all')\" />\n            <p-button label=\"Exportar conversaci\u00F3n\" (click)=\"exportChat('conversation')\" />\n            <p-button [label]=\"'Vista ' + viewMode()\" (click)=\"toggleViewMode()\" />\n          </div>\n          <dc-prompt-preview [messages]=\"messageStateService.getMessagesSignal()()\" [view]=\"viewMode()\"></dc-prompt-preview>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"3\">\n        <ng-template #content>\n          <dc-cost-details></dc-cost-details>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"4\">\n        <ng-template #content>\n          <!-- MORE INFO -->\n\n          <details>\n            <summary>Estado Global Conversation Flow</summary>\n            <p>Goal</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.goal | safeJson }}</pre>\n            <p>Trigger User Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage | safeJson }}</pre>\n            <p>Trigger Assistant Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage | safeJson }}</pre>\n            <p>Conditions</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.dynamicConditions | safeJson }}</pre>\n            <p>Tools</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.tools | safeJson }}</pre>\n            <p>Challenges</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>Agent Card</summary>\n            <pre>{{ agentCard | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>User Settings</summary>\n            <pre>{{ chatUserSettings | safeJson }}</pre>\n          </details>\n\n          <!-- MORE INFO ends Here -->\n        </ng-template>\n      </p-tabpanel>\n    </p-tabpanels>\n  </p-tabs>\n</div>\n", styles: [":host{overflow-y:scroll}.info-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i1$5.Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i1$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: PromptPreviewComponent, selector: "dc-prompt-preview", inputs: ["messages", "jailBrake", "view"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i5$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i5$1.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i5$1.TabList, selector: "p-tablist" }, { kind: "component", type: i5$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: CostDetailsComponent, selector: "dc-cost-details" }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ConversationInspector, isStandalone: true, selector: "dc-conversation-info", outputs: { completeEvent: "completeEvent" }, ngImport: i0, template: "<div class=\"info-content\">\n  <p-tabs value=\"0\">\n    <p-tablist>\n      <p-tab value=\"0\">Summary</p-tab>\n      <p-tab value=\"1\">Dynamic Flow</p-tab>\n      <p-tab value=\"2\">Messages</p-tab>\n      <p-tab value=\"3\">Pricing</p-tab>\n      <p-tab value=\"4\">More</p-tab>\n    </p-tablist>\n    <p-tabpanels>\n      <p-tabpanel value=\"0\">\n        <ng-template #content>\n          <div class=\"flex flex-wrap gap-2 mb-2\">\n            <p-button label=\"Call Agent\" (click)=\"callAgent()\" />\n            <p-button label=\"Feedback\" icon=\"pi pi-pencil\" (click)=\"openFeedback()\" />\n            <p-button label=\"Complete\" icon=\"pi pi-check\" (click)=\"complete()\" />\n          </div>\n\n          <!-- Summary -->\n          <p-divider>Score</p-divider>\n\n          <label for=\"slider\">Current Score : {{ evaluationService.scoreSignal() }}</label>\n\n          <div class=\"flex flex gap-3\">\n            <p-slider [(ngModel)]=\"value\" [step]=\"10\" class=\"w-56\" />\n            <p-button label=\"Set Score to {{ value }}\" (onClick)=\"setScore()\" />\n          </div>\n          <!-- Summary ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"1\">\n        <ng-template #content>\n          <!-- Dynamic Flow -->\n\n          <p-divider>Conversation Flow</p-divider>\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (dynamicFlowService.conversationFlowState()?.goal?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Goal</p>\n            </div>\n            @if(dynamicFlowService.conversationFlowState()?.goal?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger User Message</p>\n            </div>\n            @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger Assistant Message</p>\n            </div>\n            @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <h3>Herramientas</h3>\n          @for (tool of dynamicFlowService.conversationFlowState()?.tools; track tool.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (tool.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">{{ tool.name }}</p>\n            </div>\n            @if(tool.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ tool.description }} </div>\n            }\n          </div>\n          }\n\n          <h3>Challenges Retos</h3>\n          @for (challenge of dynamicFlowService.conversationFlowState()?.challenges; track challenge.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (challenge.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n\n              <p class=\"font-semibold\"> {{ challenge.emoji }} {{ challenge.name }}</p>\n            </div>\n            @if(challenge.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ challenge.description }} </div>\n            }\n          </div>\n          }\n          <h5>Conditions</h5>\n\n          @for (condition of dynamicFlowService.conversationFlowState()?.dynamicConditions; track $index) {\n          <div class=\"pl-2 mt-1 text-sm text-gray-600 italic\"> When the {{ condition.what }} is {{ condition.when }} than {{ condition.value }} Do </div>\n          <ol>\n            @for (doAction of condition.do; track $index) {\n            <li class=\"pl-5 mt-1 text-sm text-gray-600 italic\">\n              {{ $index }})\n              <span style=\"color: brown\"> {{ doAction.actionType }}</span>\n              <span style=\"color: green\"> {{ doAction.systemPromptType }}</span>\n              <span style=\"color: green\"> {{ doAction.dynamicFlowTaskType }}</span>\n\n              to\n              <span style=\"color: rgb(49, 23, 177)\"> {{ doAction.enabled }}</span>\n              \"{{ doAction.prompt }}\"\n            </li>\n            }\n          </ol>\n          }\n\n          <p>Challenges</p>\n          <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n\n          <!-- Dynamic Flow ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"2\">\n        <ng-template #content>\n          <div>\n            <p-button label=\"Exportar todo\" (click)=\"exportChat('all')\" />\n            <p-button label=\"Exportar conversaci\u00F3n\" (click)=\"exportChat('conversation')\" />\n            <p-button [label]=\"'Vista ' + viewMode()\" (click)=\"toggleViewMode()\" />\n          </div>\n          <dc-prompt-preview [messages]=\"messageStateService.getMessagesSignal()()\" [view]=\"viewMode()\"></dc-prompt-preview>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"3\">\n        <ng-template #content>\n          <dc-cost-details></dc-cost-details>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"4\">\n        <ng-template #content>\n          <!-- MORE INFO -->\n\n          <details>\n            <summary>Estado Global Conversation Flow</summary>\n            <p>Goal</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.goal | safeJson }}</pre>\n            <p>Trigger User Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage | safeJson }}</pre>\n            <p>Trigger Assistant Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage | safeJson }}</pre>\n            <p>Conditions</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.dynamicConditions | safeJson }}</pre>\n            <p>Tools</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.tools | safeJson }}</pre>\n            <p>Challenges</p>\n            <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>Agent Card</summary>\n            <pre>{{ agentCard | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>User Settings</summary>\n            <pre>{{ chatUserSettings | safeJson }}</pre>\n          </details>\n\n          <!-- MORE INFO ends Here -->\n        </ng-template>\n      </p-tabpanel>\n    </p-tabpanels>\n  </p-tabs>\n</div>\n", styles: [":host{overflow-y:scroll}.info-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i1$5.Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i1$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: PromptPreviewComponent, selector: "dc-prompt-preview", inputs: ["messages", "jailBrake", "view"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$6.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2$6.TabList, selector: "p-tablist" }, { kind: "component", type: i2$6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: CostDetailsComponent, selector: "dc-cost-details" }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConversationInspector, decorators: [{
             type: Component,
@@ -4711,69 +4707,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
-class TranslateDialogComponent {
-    constructor() {
-        this.fb = inject(FormBuilder);
-        this.dialogRef = inject(DialogRef);
-        this.data = inject(DIALOG_DATA);
-        this.languages = getSupportedLanguageOptions('es');
-        console.log(this.data);
-        this.form = this.fb.group({
-            targetLang: [''],
-        });
-    }
-    onCancel() {
-        this.dialogRef.close();
-    }
-    onConfirm() {
-        this.dialogRef.close(this.form.value.targetLang);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: TranslateDialogComponent, isStandalone: true, selector: "dc-translate-dialog", ngImport: i0, template: `
-    <div class="translate-dialog">
-      <h4>Tu idioma actual es: {{ data.currentLang }}</h4>
-      <h2>Selecciona el idioma al que quieres traducir</h2>
-      <form [formGroup]="form">
-        <select formControlName="targetLang">
-          <option value="">Select language...</option>
-          @for (lang of languages; track lang) {
-          <option [value]="lang.value">
-            {{ lang.label }}
-          </option>
-          }
-        </select>
-      </form>
-      <div class="actions">
-        <button (click)="onCancel()">Cancel</button>
-        <button (click)="onConfirm()" [disabled]="!form.value.targetLang"> Translate </button>
-      </div>
-    </div>
-  `, isInline: true, styles: [".translate-dialog{padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000026}.actions{margin-top:20px;display:flex;justify-content:flex-end;gap:10px}select{width:100%;padding:8px;margin-top:10px;border:1px solid #ccc;border-radius:4px}button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer}button:first-child{background:#f0f0f0}button:last-child{background:#007bff;color:#fff}button:disabled{background:#ccc;cursor:not-allowed}h2{margin:0 0 16px;color:#333}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: TranslateDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-translate-dialog', standalone: true, imports: [ReactiveFormsModule], template: `
-    <div class="translate-dialog">
-      <h4>Tu idioma actual es: {{ data.currentLang }}</h4>
-      <h2>Selecciona el idioma al que quieres traducir</h2>
-      <form [formGroup]="form">
-        <select formControlName="targetLang">
-          <option value="">Select language...</option>
-          @for (lang of languages; track lang) {
-          <option [value]="lang.value">
-            {{ lang.label }}
-          </option>
-          }
-        </select>
-      </form>
-      <div class="actions">
-        <button (click)="onCancel()">Cancel</button>
-        <button (click)="onConfirm()" [disabled]="!form.value.targetLang"> Translate </button>
-      </div>
-    </div>
-  `, styles: [".translate-dialog{padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000026}.actions{margin-top:20px;display:flex;justify-content:flex-end;gap:10px}select{width:100%;padding:8px;margin-top:10px;border:1px solid #ccc;border-radius:4px}button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer}button:first-child{background:#f0f0f0}button:last-child{background:#007bff;color:#fff}button:disabled{background:#ccc;cursor:not-allowed}h2{margin:0 0 16px;color:#333}\n"] }]
-        }], ctorParameters: () => [] });
-
 class ACCDataGenerationComponent {
     constructor() {
         this.agentCardService = inject(CONVERSATION_AI_TOKEN);
@@ -4785,23 +4718,38 @@ class ACCDataGenerationComponent {
         this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
         this.generationStep = signal('idea', ...(ngDevMode ? [{ debugName: "generationStep" }] : []));
     }
-    generatePrompt() {
+    showPrompt() {
+        const prompt = this.buildPrompt();
+        if (!prompt)
+            return;
+        this.prompt.set(prompt);
+        this.generationStep.set('prompt');
+    }
+    async generateDirectly() {
+        const prompt = this.buildPrompt();
+        if (!prompt)
+            return;
+        this.prompt.set(prompt);
+        await this.generate();
+    }
+    buildPrompt() {
         const currentCharacterCard = this.agentCard?.characterCard?.data;
         if (!currentCharacterCard) {
-            return;
+            return undefined;
         }
-        delete currentCharacterCard?.langTranslation;
-        delete currentCharacterCard?.post_history_instructions;
-        delete currentCharacterCard?.system_prompt;
+        const cardCopy = { ...currentCharacterCard };
+        delete cardCopy?.langTranslation;
+        delete cardCopy?.post_history_instructions;
+        delete cardCopy?.system_prompt;
         let langPromtp = '';
         if (this.agentCard.lang) {
             langPromtp = `Despite language instructions, Return the requested data in ${getLangDesc(this.agentCard.lang)}`;
         }
         const prompt_user = `Mejora la ficha de personaje y devuelve la estructura JSON solicitada siguiendo las siguientes ideas: ${this.idea}`;
-        const currentCardJson = JSON.stringify(currentCharacterCard, null, 2);
-        const prompt_for_generation = `
+        const currentCardJson = JSON.stringify(cardCopy, null, 2);
+        return `
 Generate a character profile with ultra-compact, information-dense descriptions.
-Use concise language: eliminate articles (a, the), use abbreviations, bullet points, 
+Use concise language: eliminate articles (a, the), use abbreviations, bullet points,
 and pipe separators (|) where possible. Prioritize essential details only.
 
 COMPACT FORMAT RULES:
@@ -4813,7 +4761,7 @@ COMPACT FORMAT RULES:
 - Minimal adjectives, maximum information density
 - Example: "1.70m, lean, silver hair (long), blue eyes (sharp), pale skin. Black dress w/magic embroidery, pointed hat. Voice melodic/cutting. Crosses arms (annoyed), touches rings (thinking), erect posture. Raised brow (disdain), icy stare (fury)."
 
-- More examples: 
+- More examples:
 Speech Style: Concise/direct, becomes sarcastic/grandiose when intimidating, double meanings
 Common Phrases: "Insolent mortals" | "Do you know what you've done?" | "The price will be steep" | "You test my patience" | "Perhaps... just perhaps..." | ""
 Language Habits: Dramatic pauses before threats/conditions
@@ -4831,8 +4779,6 @@ ${langPromtp}
 ## Your Task is:
 ${prompt_user}
     `;
-        this.prompt.set(prompt_for_generation);
-        this.generationStep.set('prompt');
     }
     async generate() {
         this.loading.set(true);
@@ -4842,6 +4788,7 @@ ${prompt_user}
             returnJson: true,
         };
         try {
+            debugger;
             const response = await this.agentCardService.callChatCompletion(conversation);
             let improvements;
             if (typeof response.content === 'string') {
@@ -4863,11 +4810,11 @@ ${prompt_user}
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCDataGenerationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ACCDataGenerationComponent, isStandalone: true, selector: "dc-acc-data-generation", inputs: { agentCard: "agentCard" }, outputs: { cardImprovementsChange: "cardImprovementsChange" }, ngImport: i0, template: "<div>\n  @if (agentCard?.characterCard?.data?.name) {\n  <h2>{{ agentCard.characterCard.data.name }}</h2>\n  } @switch (generationStep()) { @case ('idea') {\n  <div class=\"form-field\">\n    <label for=\"idea\">Escribe tus ideas para mejorar tu personaje</label>\n    <br />\n    <textarea class=\"w-full\" pTextarea id=\"idea\" [(ngModel)]=\"idea\" rows=\"2\"></textarea>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate Prompt\" (click)=\"generatePrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Generated Character Improvements:</h3>\n    @if (cardImprovements(); as card) {\n    <div class=\"grid\">\n      <div class=\"col-12\">\n        <strong>Name:</strong>\n        <p>{{ card.name }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Gender:</strong>\n        <p>{{ card.gender }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Scenario:</strong>\n        <p>{{ card.scenario }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Hook:</strong>\n        <p>{{ card.hook }}</p>\n      </div>\n      @if(card.persona) {\n      <div class=\"col-12\">\n        <strong>Identity:</strong>\n        <p>{{ card.persona.identity }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Physical:</strong>\n        <p>{{ card.persona.physical }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Personality:</strong>\n        <p>{{ card.persona.personality }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Communication:</strong>\n        <p>{{ card.persona.communication }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Psychology:</strong>\n        <p>{{ card.persona.psychology }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Background:</strong>\n        <p>{{ card.persona.background }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Capabilities:</strong>\n        <p>{{ card.persona.capabilities }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Social:</strong>\n        <p>{{ card.persona.social }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Preferences:</strong>\n        <p>{{ card.persona.preferences }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Situation:</strong>\n        <p>{{ card.persona.situation }}</p>\n      </div>\n      }\n      <div class=\"col-12\">\n        <strong>Greetings:</strong>\n        <ul>\n          @for (greeting of card.greetings; track $index) {\n          <li>{{ greeting }}</li>\n          }\n        </ul>\n      </div>\n      <div class=\"col-12\">\n        <strong>Tags:</strong>\n        <p>{{ card.tags.join(', ') }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Appearance:</strong>\n        <p>{{ card.appearance }}</p>\n      </div>\n    </div>\n    }\n  </div>\n  } }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ACCDataGenerationComponent, isStandalone: true, selector: "dc-acc-data-generation", inputs: { agentCard: "agentCard" }, outputs: { cardImprovementsChange: "cardImprovementsChange" }, ngImport: i0, template: "<div>\n  @if (agentCard?.characterCard?.data?.name) {\n  <h2>{{ agentCard.characterCard.data.name }}</h2>\n  } @switch (generationStep()) { @case ('idea') {\n  <div class=\"form-field\">\n    <label for=\"idea\">Escribe tus ideas para mejorar tu personaje</label>\n    <br />\n    <textarea class=\"w-full\" pTextarea id=\"idea\" [(ngModel)]=\"idea\" rows=\"2\"></textarea>\n  </div>\n  <div class=\"flex justify-end gap-2\">\n    <p-button label=\"Show Prompt\" (click)=\"showPrompt()\" styleClass=\"p-button-secondary\"></p-button>\n    <p-button label=\"Generate\" (click)=\"generateDirectly()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Generated Character Improvements:</h3>\n    @if (cardImprovements(); as card) {\n    <div class=\"grid\">\n      <div class=\"col-12\">\n        <strong>Name:</strong>\n        <p>{{ card.name }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Gender:</strong>\n        <p>{{ card.gender }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Scenario:</strong>\n        <p>{{ card.scenario }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Hook:</strong>\n        <p>{{ card.hook }}</p>\n      </div>\n      @if(card.persona) {\n      <div class=\"col-12\">\n        <strong>Identity:</strong>\n        <p>{{ card.persona.identity }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Physical:</strong>\n        <p>{{ card.persona.physical }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Personality:</strong>\n        <p>{{ card.persona.personality }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Communication:</strong>\n        <p>{{ card.persona.communication }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Psychology:</strong>\n        <p>{{ card.persona.psychology }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Background:</strong>\n        <p>{{ card.persona.background }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Capabilities:</strong>\n        <p>{{ card.persona.capabilities }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Social:</strong>\n        <p>{{ card.persona.social }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Preferences:</strong>\n        <p>{{ card.persona.preferences }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Situation:</strong>\n        <p>{{ card.persona.situation }}</p>\n      </div>\n      }\n      <div class=\"col-12\">\n        <strong>Greetings:</strong>\n        <ul>\n          @for (greeting of card.greetings; track $index) {\n          <li>{{ greeting }}</li>\n          }\n        </ul>\n      </div>\n      <div class=\"col-12\">\n        <strong>Tags:</strong>\n        <p>{{ card.tags.join(', ') }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Appearance:</strong>\n        <p>{{ card.appearance }}</p>\n      </div>\n    </div>\n    }\n  </div>\n  } }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCDataGenerationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-acc-data-generation', standalone: true, imports: [CommonModule, ButtonModule, FormsModule, TextareaModule], template: "<div>\n  @if (agentCard?.characterCard?.data?.name) {\n  <h2>{{ agentCard.characterCard.data.name }}</h2>\n  } @switch (generationStep()) { @case ('idea') {\n  <div class=\"form-field\">\n    <label for=\"idea\">Escribe tus ideas para mejorar tu personaje</label>\n    <br />\n    <textarea class=\"w-full\" pTextarea id=\"idea\" [(ngModel)]=\"idea\" rows=\"2\"></textarea>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate Prompt\" (click)=\"generatePrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Generated Character Improvements:</h3>\n    @if (cardImprovements(); as card) {\n    <div class=\"grid\">\n      <div class=\"col-12\">\n        <strong>Name:</strong>\n        <p>{{ card.name }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Gender:</strong>\n        <p>{{ card.gender }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Scenario:</strong>\n        <p>{{ card.scenario }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Hook:</strong>\n        <p>{{ card.hook }}</p>\n      </div>\n      @if(card.persona) {\n      <div class=\"col-12\">\n        <strong>Identity:</strong>\n        <p>{{ card.persona.identity }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Physical:</strong>\n        <p>{{ card.persona.physical }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Personality:</strong>\n        <p>{{ card.persona.personality }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Communication:</strong>\n        <p>{{ card.persona.communication }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Psychology:</strong>\n        <p>{{ card.persona.psychology }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Background:</strong>\n        <p>{{ card.persona.background }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Capabilities:</strong>\n        <p>{{ card.persona.capabilities }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Social:</strong>\n        <p>{{ card.persona.social }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Preferences:</strong>\n        <p>{{ card.persona.preferences }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Situation:</strong>\n        <p>{{ card.persona.situation }}</p>\n      </div>\n      }\n      <div class=\"col-12\">\n        <strong>Greetings:</strong>\n        <ul>\n          @for (greeting of card.greetings; track $index) {\n          <li>{{ greeting }}</li>\n          }\n        </ul>\n      </div>\n      <div class=\"col-12\">\n        <strong>Tags:</strong>\n        <p>{{ card.tags.join(', ') }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Appearance:</strong>\n        <p>{{ card.appearance }}</p>\n      </div>\n    </div>\n    }\n  </div>\n  } }\n</div>\n" }]
+            args: [{ selector: 'dc-acc-data-generation', standalone: true, imports: [CommonModule, ButtonModule, FormsModule, TextareaModule], template: "<div>\n  @if (agentCard?.characterCard?.data?.name) {\n  <h2>{{ agentCard.characterCard.data.name }}</h2>\n  } @switch (generationStep()) { @case ('idea') {\n  <div class=\"form-field\">\n    <label for=\"idea\">Escribe tus ideas para mejorar tu personaje</label>\n    <br />\n    <textarea class=\"w-full\" pTextarea id=\"idea\" [(ngModel)]=\"idea\" rows=\"2\"></textarea>\n  </div>\n  <div class=\"flex justify-end gap-2\">\n    <p-button label=\"Show Prompt\" (click)=\"showPrompt()\" styleClass=\"p-button-secondary\"></p-button>\n    <p-button label=\"Generate\" (click)=\"generateDirectly()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Generated Character Improvements:</h3>\n    @if (cardImprovements(); as card) {\n    <div class=\"grid\">\n      <div class=\"col-12\">\n        <strong>Name:</strong>\n        <p>{{ card.name }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Gender:</strong>\n        <p>{{ card.gender }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Scenario:</strong>\n        <p>{{ card.scenario }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Hook:</strong>\n        <p>{{ card.hook }}</p>\n      </div>\n      @if(card.persona) {\n      <div class=\"col-12\">\n        <strong>Identity:</strong>\n        <p>{{ card.persona.identity }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Physical:</strong>\n        <p>{{ card.persona.physical }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Personality:</strong>\n        <p>{{ card.persona.personality }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Communication:</strong>\n        <p>{{ card.persona.communication }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Psychology:</strong>\n        <p>{{ card.persona.psychology }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Background:</strong>\n        <p>{{ card.persona.background }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Capabilities:</strong>\n        <p>{{ card.persona.capabilities }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Social:</strong>\n        <p>{{ card.persona.social }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Preferences:</strong>\n        <p>{{ card.persona.preferences }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Situation:</strong>\n        <p>{{ card.persona.situation }}</p>\n      </div>\n      }\n      <div class=\"col-12\">\n        <strong>Greetings:</strong>\n        <ul>\n          @for (greeting of card.greetings; track $index) {\n          <li>{{ greeting }}</li>\n          }\n        </ul>\n      </div>\n      <div class=\"col-12\">\n        <strong>Tags:</strong>\n        <p>{{ card.tags.join(', ') }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Appearance:</strong>\n        <p>{{ card.appearance }}</p>\n      </div>\n    </div>\n    }\n  </div>\n  } }\n</div>\n" }]
         }], propDecorators: { agentCard: [{
                 type: Input
             }], cardImprovementsChange: [{
@@ -5067,11 +5014,12 @@ class ACCTranslationGenerationComponent {
         if (!currentCharacterCard) {
             return;
         }
-        const { hook, mes_example } = currentCharacterCard;
+        const { hook, mes_example, instructions: characterInstructions } = currentCharacterCard;
         const characterData = {
             greetings: this.greetings(),
             hook: hook,
             communication: currentCharacterCard?.persona?.communication || mes_example,
+            instructions: characterInstructions,
         };
         const instructions = `These are message of my character card, Translate the following data while preserving the exact tone, register, and speaking style of the original:
     * Preserve personality traits: Match the character's way of speaking (friendly, sarcastic, energetic, reserved, etc.)
@@ -5096,6 +5044,7 @@ and return the result in the following JSON structure example:
       greetings: string[];
       hook: string;
       communication: string;
+      instructions: string;
     }
     `;
         const currentCardJson = JSON.stringify(characterData, null, 2);
@@ -5155,11 +5104,117 @@ ${prompt_user}
         return Object.keys(obj);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCTranslationGenerationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ACCTranslationGenerationComponent, isStandalone: true, selector: "dc-acc-translation-generation", inputs: { agentCard: "agentCard" }, outputs: { cardImprovementsChange: "cardImprovementsChange" }, ngImport: i0, template: "<div>\n  @switch (generationStep()) { @case ('idea') {\n\n  <p-message severity=\"warn\">Antes de Traducir asegurate que los campos de Greetings, Notes y Message Example esten completados</p-message>\n\n  <!-- Todos los Inicios de conversaci\u00F3n -->\n  <h5 pTooltip=\"Todos los inicios de conversaci\u00F3n\" tooltipPosition=\"left\"> Inicios de conversaci\u00F3n </h5>\n\n  @for (greeting of greetings(); track $index) {\n  <li> {{ greeting }} </li>\n  }\n\n  <!-- Ejemplo de mensaje -->\n  <h5 pTooltip=\"Ejemplo de mensaje\" tooltipPosition=\"left\"> Ejemplo de mensaje </h5>\n  <p> {{ agentCard.characterCard.data.mes_example }} </p>\n\n  <!-- Notas del creador -->\n  <h5 pTooltip=\"Texto corto para incitar a la interacci\u00F3n\" tooltipPosition=\"left\"> Gancho para Interacci\u00F3n </h5>\n  @if (agentCard.characterCard.data.hook) {\n  <p> {{ agentCard.characterCard.data.hook }} </p>\n  } @else {\n  <p-message severity=\"error\">No hay gancho para interacci\u00F3n </p-message>\n  }\n\n  <div class=\"flex justify-end gap-2\">\n    <p-button label=\"Translate to 10 most important lang\" (click)=\"generateTop10Prompt()\"></p-button>\n    <p-button label=\"Translate to English and Spanish\" (click)=\"generateEnEsPrompt()\"></p-button>\n    <p-button label=\"Translate to all languages\" (click)=\"generatePrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Generated Character Translations:</h3>\n    @if (cardImprovements(); as card) {\n    <div>\n      @for (lang of objectKeys(card); track lang) {\n      <div class=\"mb-3\">\n        <h4>{{ lang }}</h4>\n        <div class=\"grid\">\n          <div class=\"col-12\">\n            <strong>Greetings:</strong>\n            <ul>\n              @for (greeting of card[lang].greetings; track $index) {\n              <li>{{ greeting }}</li>\n              }\n            </ul>\n          </div>\n          <div class=\"col-12\">\n            <strong>Hook:</strong>\n            <p>{{ card[lang]?.hook }}</p>\n          </div>\n          <div class=\"col-12\">\n            <strong>Communication:</strong>\n            <p>{{ card[lang]?.communication }}</p>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n  } }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ACCTranslationGenerationComponent, isStandalone: true, selector: "dc-acc-translation-generation", inputs: { agentCard: "agentCard" }, outputs: { cardImprovementsChange: "cardImprovementsChange" }, ngImport: i0, template: "<div>\n  @switch (generationStep()) { @case ('idea') {\n\n  <p-message severity=\"warn\"\n    >Antes de traducir, aseg\u00FArate de que los campos de Saludos (Greetings), Gancho (Hook), Instrucciones (Instructions) y Comunicaci\u00F3n (Communication) est\u00E9n\n    completados.</p-message\n  >\n\n  <!-- Todos los Inicios de conversaci\u00F3n -->\n  <h5 pTooltip=\"Todos los inicios de conversaci\u00F3n\" tooltipPosition=\"left\"> Inicios de conversaci\u00F3n </h5>\n\n  @for (greeting of greetings(); track $index) {\n  <li> {{ greeting }} </li>\n  }\n\n  <!-- Ejemplo de mensaje -->\n  <h5 pTooltip=\"Ejemplo de mensaje\" tooltipPosition=\"left\"> Ejemplo de mensaje </h5>\n  <p> {{ agentCard.characterCard.data.mes_example }} </p>\n\n  <!-- Notas del creador -->\n  <h5 pTooltip=\"Texto corto para incitar a la interacci\u00F3n\" tooltipPosition=\"left\"> Gancho para Interacci\u00F3n </h5>\n  @if (agentCard.characterCard.data.hook) {\n  <p> {{ agentCard.characterCard.data.hook }} </p>\n  } @else {\n  <p-message severity=\"error\">No hay gancho para interacci\u00F3n </p-message>\n  }\n\n  <div class=\"flex justify-end gap-2\">\n    <p-button label=\"Traducir a los 10 idiomas m\u00E1s importantes\" (click)=\"generateTop10Prompt()\"></p-button>\n    <p-button label=\"Traducir a Ingl\u00E9s y Espa\u00F1ol\" (click)=\"generateEnEsPrompt()\"></p-button>\n    <p-button label=\"Traducir a todos los idiomas\" (click)=\"generatePrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generar\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Traducciones generadas para el personaje:</h3>\n    @if (cardImprovements(); as card) {\n    <div>\n      @for (lang of objectKeys(card); track lang) {\n      <div class=\"mb-3\">\n        <h4>{{ lang }}</h4>\n        <div class=\"grid\">\n          <div class=\"col-12\">\n            <strong>Greetings:</strong>\n            <ul>\n              @for (greeting of card[lang].greetings; track $index) {\n              <li>{{ greeting }}</li>\n              }\n            </ul>\n          </div>\n          <div class=\"col-12\">\n            <strong>Hook:</strong>\n            <p>{{ card[lang]?.hook }}</p>\n          </div>\n          <div class=\"col-12\">\n            <strong>Communication:</strong>\n            <p>{{ card[lang]?.communication }}</p>\n          </div>\n        </div>\n        <div class=\"col-12\">\n          <strong>Instrucciones:</strong>\n          <p>{{ card[lang]?.instructions }}</p>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n  } }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCTranslationGenerationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-acc-translation-generation', standalone: true, imports: [CommonModule, ButtonModule, FormsModule, AccordionModule, TooltipModule, MessageModule], template: "<div>\n  @switch (generationStep()) { @case ('idea') {\n\n  <p-message severity=\"warn\">Antes de Traducir asegurate que los campos de Greetings, Notes y Message Example esten completados</p-message>\n\n  <!-- Todos los Inicios de conversaci\u00F3n -->\n  <h5 pTooltip=\"Todos los inicios de conversaci\u00F3n\" tooltipPosition=\"left\"> Inicios de conversaci\u00F3n </h5>\n\n  @for (greeting of greetings(); track $index) {\n  <li> {{ greeting }} </li>\n  }\n\n  <!-- Ejemplo de mensaje -->\n  <h5 pTooltip=\"Ejemplo de mensaje\" tooltipPosition=\"left\"> Ejemplo de mensaje </h5>\n  <p> {{ agentCard.characterCard.data.mes_example }} </p>\n\n  <!-- Notas del creador -->\n  <h5 pTooltip=\"Texto corto para incitar a la interacci\u00F3n\" tooltipPosition=\"left\"> Gancho para Interacci\u00F3n </h5>\n  @if (agentCard.characterCard.data.hook) {\n  <p> {{ agentCard.characterCard.data.hook }} </p>\n  } @else {\n  <p-message severity=\"error\">No hay gancho para interacci\u00F3n </p-message>\n  }\n\n  <div class=\"flex justify-end gap-2\">\n    <p-button label=\"Translate to 10 most important lang\" (click)=\"generateTop10Prompt()\"></p-button>\n    <p-button label=\"Translate to English and Spanish\" (click)=\"generateEnEsPrompt()\"></p-button>\n    <p-button label=\"Translate to all languages\" (click)=\"generatePrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Generated Character Translations:</h3>\n    @if (cardImprovements(); as card) {\n    <div>\n      @for (lang of objectKeys(card); track lang) {\n      <div class=\"mb-3\">\n        <h4>{{ lang }}</h4>\n        <div class=\"grid\">\n          <div class=\"col-12\">\n            <strong>Greetings:</strong>\n            <ul>\n              @for (greeting of card[lang].greetings; track $index) {\n              <li>{{ greeting }}</li>\n              }\n            </ul>\n          </div>\n          <div class=\"col-12\">\n            <strong>Hook:</strong>\n            <p>{{ card[lang]?.hook }}</p>\n          </div>\n          <div class=\"col-12\">\n            <strong>Communication:</strong>\n            <p>{{ card[lang]?.communication }}</p>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n  } }\n</div>\n" }]
+            args: [{ selector: 'dc-acc-translation-generation', standalone: true, imports: [CommonModule, ButtonModule, FormsModule, AccordionModule, TooltipModule, MessageModule], template: "<div>\n  @switch (generationStep()) { @case ('idea') {\n\n  <p-message severity=\"warn\"\n    >Antes de traducir, aseg\u00FArate de que los campos de Saludos (Greetings), Gancho (Hook), Instrucciones (Instructions) y Comunicaci\u00F3n (Communication) est\u00E9n\n    completados.</p-message\n  >\n\n  <!-- Todos los Inicios de conversaci\u00F3n -->\n  <h5 pTooltip=\"Todos los inicios de conversaci\u00F3n\" tooltipPosition=\"left\"> Inicios de conversaci\u00F3n </h5>\n\n  @for (greeting of greetings(); track $index) {\n  <li> {{ greeting }} </li>\n  }\n\n  <!-- Ejemplo de mensaje -->\n  <h5 pTooltip=\"Ejemplo de mensaje\" tooltipPosition=\"left\"> Ejemplo de mensaje </h5>\n  <p> {{ agentCard.characterCard.data.mes_example }} </p>\n\n  <!-- Notas del creador -->\n  <h5 pTooltip=\"Texto corto para incitar a la interacci\u00F3n\" tooltipPosition=\"left\"> Gancho para Interacci\u00F3n </h5>\n  @if (agentCard.characterCard.data.hook) {\n  <p> {{ agentCard.characterCard.data.hook }} </p>\n  } @else {\n  <p-message severity=\"error\">No hay gancho para interacci\u00F3n </p-message>\n  }\n\n  <div class=\"flex justify-end gap-2\">\n    <p-button label=\"Traducir a los 10 idiomas m\u00E1s importantes\" (click)=\"generateTop10Prompt()\"></p-button>\n    <p-button label=\"Traducir a Ingl\u00E9s y Espa\u00F1ol\" (click)=\"generateEnEsPrompt()\"></p-button>\n    <p-button label=\"Traducir a todos los idiomas\" (click)=\"generatePrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generar\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Traducciones generadas para el personaje:</h3>\n    @if (cardImprovements(); as card) {\n    <div>\n      @for (lang of objectKeys(card); track lang) {\n      <div class=\"mb-3\">\n        <h4>{{ lang }}</h4>\n        <div class=\"grid\">\n          <div class=\"col-12\">\n            <strong>Greetings:</strong>\n            <ul>\n              @for (greeting of card[lang].greetings; track $index) {\n              <li>{{ greeting }}</li>\n              }\n            </ul>\n          </div>\n          <div class=\"col-12\">\n            <strong>Hook:</strong>\n            <p>{{ card[lang]?.hook }}</p>\n          </div>\n          <div class=\"col-12\">\n            <strong>Communication:</strong>\n            <p>{{ card[lang]?.communication }}</p>\n          </div>\n        </div>\n        <div class=\"col-12\">\n          <strong>Instrucciones:</strong>\n          <p>{{ card[lang]?.instructions }}</p>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n  } }\n</div>\n" }]
+        }], propDecorators: { agentCard: [{
+                type: Input
+            }], cardImprovementsChange: [{
+                type: Output
+            }] } });
+
+class ACCSettingsGenerationComponent {
+    constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.audioNotificationService = inject(AudioNotificationService);
+        this.cardImprovementsChange = new EventEmitter();
+        this.cardImprovements = signal(null, ...(ngDevMode ? [{ debugName: "cardImprovements" }] : []));
+        this.idea = signal('', ...(ngDevMode ? [{ debugName: "idea" }] : []));
+        this.prompt = signal('', ...(ngDevMode ? [{ debugName: "prompt" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.generationStep = signal('idea', ...(ngDevMode ? [{ debugName: "generationStep" }] : []));
+    }
+    ngOnInit() {
+        console.log(this.agentCard);
+        debugger;
+    }
+    showPrompt() {
+        const prompt = this.buildPrompt();
+        if (!prompt)
+            return;
+        this.prompt.set(prompt);
+        this.generationStep.set('prompt');
+    }
+    async generateDirectly() {
+        const prompt = this.buildPrompt();
+        if (!prompt)
+            return;
+        this.prompt.set(prompt);
+        await this.generate();
+    }
+    buildPrompt() {
+        debugger;
+        const currentCharacterCard = this.agentCard?.characterCard?.data;
+        if (!currentCharacterCard) {
+            return undefined;
+        }
+        let langPrompt = '';
+        if (this.agentCard.lang) {
+            langPrompt = `Despite language instructions, Return the requested data in ${getLangDesc(this.agentCard.lang)}`;
+        }
+        const prompt_user = `Generate a name, a quick general description, and conversationSettings for the character. Follow these ideas: ${this.idea()}`;
+        const currentCardJson = JSON.stringify(this.agentCard, null, 2);
+        return `
+    Based on the provided character card, generate a name, a quick general description, and conversationSettings.
+    
+    ## My current character card data is:
+    \`\`\`json
+    ${currentCardJson}
+    \`\`\`
+
+    ${langPrompt}
+
+    ## Your Task is:
+    ${prompt_user}
+
+    Return a JSON object with the following structure:
+    {
+      "name": "Character Name",
+      "description": "A brief description of the character.",
+      "conversationSettings": {
+        "modelQuality": "fast",
+        "autoStart": true,
+        "userMustStart": false
+      }
+    }
+    `;
+    }
+    async generate() {
+        this.loading.set(true);
+        const conversation = {
+            messages: [{ role: ChatRole.User, content: this.prompt() }],
+            model: { quality: EModelQuality.BALANCED },
+            returnJson: true,
+        };
+        try {
+            const response = await this.agentCardService.callChatCompletion(conversation);
+            let improvements;
+            if (typeof response.content === 'string') {
+                improvements = JSON.parse(response.content);
+            }
+            else {
+                improvements = response.content;
+            }
+            this.cardImprovements.set(improvements);
+            this.cardImprovementsChange.emit(improvements);
+            this.generationStep.set('result');
+            this.audioNotificationService.playFinishNotification();
+        }
+        catch (error) {
+            console.error('Error generating character settings:', error);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCSettingsGenerationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ACCSettingsGenerationComponent, isStandalone: true, selector: "dc-acc-settings-generation", inputs: { agentCard: "agentCard" }, outputs: { cardImprovementsChange: "cardImprovementsChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  @switch (generationStep()) { @case ('idea') {\n  <div class=\"flex flex-col gap-2\">\n    <label for=\"idea\">Idea</label>\n    <textarea id=\"idea\" name=\"idea\" pTextarea [(ngModel)]=\"idea\" rows=\"5\" cols=\"30\"></textarea>\n    <p-button label=\"Generate\" (click)=\"generateDirectly()\"></p-button>\n    <p-button label=\"Show Prompt\" (click)=\"showPrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div class=\"flex flex-col gap-2\">\n    <label for=\"prompt\">Prompt</label>\n    <textarea id=\"prompt\" name=\"prompt\" pTextarea [(ngModel)]=\"prompt\" rows=\"15\" cols=\"60\"></textarea>\n    <p-button label=\"Generate\" (click)=\"generate()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div class=\"flex flex-col gap-2\">\n    <label>Generated Settings</label>\n    <pre>{{ cardImprovements() | json }}</pre>\n  </div>\n  } }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCSettingsGenerationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-acc-settings-generation', standalone: true, imports: [CommonModule, ButtonModule, FormsModule, TextareaModule], template: "<div class=\"flex flex-col gap-4\">\n  @switch (generationStep()) { @case ('idea') {\n  <div class=\"flex flex-col gap-2\">\n    <label for=\"idea\">Idea</label>\n    <textarea id=\"idea\" name=\"idea\" pTextarea [(ngModel)]=\"idea\" rows=\"5\" cols=\"30\"></textarea>\n    <p-button label=\"Generate\" (click)=\"generateDirectly()\"></p-button>\n    <p-button label=\"Show Prompt\" (click)=\"showPrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div class=\"flex flex-col gap-2\">\n    <label for=\"prompt\">Prompt</label>\n    <textarea id=\"prompt\" name=\"prompt\" pTextarea [(ngModel)]=\"prompt\" rows=\"15\" cols=\"60\"></textarea>\n    <p-button label=\"Generate\" (click)=\"generate()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div class=\"flex flex-col gap-2\">\n    <label>Generated Settings</label>\n    <pre>{{ cardImprovements() | json }}</pre>\n  </div>\n  } }\n</div>\n" }]
         }], propDecorators: { agentCard: [{
                 type: Input
             }], cardImprovementsChange: [{
@@ -5182,6 +5237,9 @@ class GenerateCharacterDialogComponent {
         console.log(translations);
         this.cardImprovements.langTranslation = translations;
     }
+    onSettingsImprovementsChange(settings) {
+        this.cardImprovements = { ...this.cardImprovements, ...settings };
+    }
     accept() {
         this.ref.close(this.cardImprovements);
     }
@@ -5189,7 +5247,7 @@ class GenerateCharacterDialogComponent {
         this.ref.close(result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GenerateCharacterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: GenerateCharacterDialogComponent, isStandalone: true, selector: "dc-generate-character-dialog", ngImport: i0, template: "<p-divider align=\"center\" type=\"dotted\"><b>Informaci\u00F3n del personaje</b></p-divider>\n<dc-acc-data-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onCardImprovementsChange($event)\"></dc-acc-data-generation>\n@if(cardImprovements.persona){\n<p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n}\n<p-divider align=\"center\" type=\"dotted\"><b>Movimientos</b></p-divider>\n<dc-acc-motion-generation [agentCard]=\"agentCard\"></dc-acc-motion-generation>\n<p-divider align=\"center\" type=\"dotted\"><b>Traducciones</b></p-divider>\n<dc-acc-translation-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onTranslationImprovementsChange($event)\"></dc-acc-translation-generation>\n@if(cardImprovements.langTranslation){\n<p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n}\n<p-divider align=\"center\" type=\"dotted\"><b>__</b></p-divider>\n\n<!-- <div class=\"flex justify-end\">\n  <p-button label=\"Cancel\" styleClass=\"p-button-text\" (click)=\"close(false)\"></p-button>\n  <p-button label=\"Accept\" (click)=\"accept()\"></p-button>\n</div> -->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ACCDataGenerationComponent, selector: "dc-acc-data-generation", inputs: ["agentCard"], outputs: ["cardImprovementsChange"] }, { kind: "component", type: ACCMotionGenerationComponent, selector: "dc-acc-motion-generation", inputs: ["agentCard"] }, { kind: "component", type: ACCTranslationGenerationComponent, selector: "dc-acc-translation-generation", inputs: ["agentCard"], outputs: ["cardImprovementsChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i1$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: GenerateCharacterDialogComponent, isStandalone: true, selector: "dc-generate-character-dialog", ngImport: i0, template: "<div class=\"card\">\n  <p-tabs lazy value=\"0\">\n    <p-tablist>\n      <p-tab value=\"0\">Informaci\u00F3n del personaje</p-tab>\n      <p-tab value=\"1\">Movimientos</p-tab>\n      <p-tab value=\"2\">Traducciones</p-tab>\n      <p-tab value=\"3\">Settings</p-tab>\n    </p-tablist>\n    <p-tabpanels>\n      <p-tabpanel value=\"0\">\n        <dc-acc-data-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onCardImprovementsChange($event)\"></dc-acc-data-generation>\n        @if(cardImprovements.persona){\n        <p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n        }\n      </p-tabpanel>\n      <p-tabpanel value=\"1\">\n        <dc-acc-motion-generation [agentCard]=\"agentCard\"></dc-acc-motion-generation>\n      </p-tabpanel>\n      <p-tabpanel value=\"2\">\n        <ng-template #content>\n          <dc-acc-translation-generation\n            [agentCard]=\"agentCard\"\n            (cardImprovementsChange)=\"onTranslationImprovementsChange($event)\"></dc-acc-translation-generation>\n          @if(cardImprovements.langTranslation){\n          <p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n          }\n        </ng-template>\n      </p-tabpanel>\n\n      <p-tabpanel value=\"3\">\n        <ng-template #content>\n          <h3> Esta es la secci\u00F3n de configuraci\u00F3n</h3>\n          <dc-acc-settings-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onSettingsImprovementsChange($event)\"></dc-acc-settings-generation>\n          @if(cardImprovements.name){\n          <p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n          }\n        </ng-template>\n      </p-tabpanel>\n    </p-tabpanels>\n  </p-tabs>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ACCDataGenerationComponent, selector: "dc-acc-data-generation", inputs: ["agentCard"], outputs: ["cardImprovementsChange"] }, { kind: "component", type: ACCMotionGenerationComponent, selector: "dc-acc-motion-generation", inputs: ["agentCard"] }, { kind: "component", type: ACCTranslationGenerationComponent, selector: "dc-acc-translation-generation", inputs: ["agentCard"], outputs: ["cardImprovementsChange"] }, { kind: "component", type: ACCSettingsGenerationComponent, selector: "dc-acc-settings-generation", inputs: ["agentCard"], outputs: ["cardImprovementsChange"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$6.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2$6.TabList, selector: "p-tablist" }, { kind: "component", type: i2$6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GenerateCharacterDialogComponent, decorators: [{
             type: Component,
@@ -5200,8 +5258,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         ACCDataGenerationComponent,
                         ACCMotionGenerationComponent,
                         ACCTranslationGenerationComponent,
-                        DividerModule,
-                    ], template: "<p-divider align=\"center\" type=\"dotted\"><b>Informaci\u00F3n del personaje</b></p-divider>\n<dc-acc-data-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onCardImprovementsChange($event)\"></dc-acc-data-generation>\n@if(cardImprovements.persona){\n<p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n}\n<p-divider align=\"center\" type=\"dotted\"><b>Movimientos</b></p-divider>\n<dc-acc-motion-generation [agentCard]=\"agentCard\"></dc-acc-motion-generation>\n<p-divider align=\"center\" type=\"dotted\"><b>Traducciones</b></p-divider>\n<dc-acc-translation-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onTranslationImprovementsChange($event)\"></dc-acc-translation-generation>\n@if(cardImprovements.langTranslation){\n<p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n}\n<p-divider align=\"center\" type=\"dotted\"><b>__</b></p-divider>\n\n<!-- <div class=\"flex justify-end\">\n  <p-button label=\"Cancel\" styleClass=\"p-button-text\" (click)=\"close(false)\"></p-button>\n  <p-button label=\"Accept\" (click)=\"accept()\"></p-button>\n</div> -->\n" }]
+                        ACCSettingsGenerationComponent,
+                        TabsModule,
+                    ], template: "<div class=\"card\">\n  <p-tabs lazy value=\"0\">\n    <p-tablist>\n      <p-tab value=\"0\">Informaci\u00F3n del personaje</p-tab>\n      <p-tab value=\"1\">Movimientos</p-tab>\n      <p-tab value=\"2\">Traducciones</p-tab>\n      <p-tab value=\"3\">Settings</p-tab>\n    </p-tablist>\n    <p-tabpanels>\n      <p-tabpanel value=\"0\">\n        <dc-acc-data-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onCardImprovementsChange($event)\"></dc-acc-data-generation>\n        @if(cardImprovements.persona){\n        <p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n        }\n      </p-tabpanel>\n      <p-tabpanel value=\"1\">\n        <dc-acc-motion-generation [agentCard]=\"agentCard\"></dc-acc-motion-generation>\n      </p-tabpanel>\n      <p-tabpanel value=\"2\">\n        <ng-template #content>\n          <dc-acc-translation-generation\n            [agentCard]=\"agentCard\"\n            (cardImprovementsChange)=\"onTranslationImprovementsChange($event)\"></dc-acc-translation-generation>\n          @if(cardImprovements.langTranslation){\n          <p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n          }\n        </ng-template>\n      </p-tabpanel>\n\n      <p-tabpanel value=\"3\">\n        <ng-template #content>\n          <h3> Esta es la secci\u00F3n de configuraci\u00F3n</h3>\n          <dc-acc-settings-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onSettingsImprovementsChange($event)\"></dc-acc-settings-generation>\n          @if(cardImprovements.name){\n          <p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n          }\n        </ng-template>\n      </p-tabpanel>\n    </p-tabpanels>\n  </p-tabs>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class AccountPlatformForm {
@@ -5265,7 +5324,7 @@ class AccountPlatformForm {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AccountPlatformForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-select>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$7.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-select>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AccountPlatformForm, decorators: [{
             type: Component,
@@ -5357,6 +5416,9 @@ class CharacterFormGroupService {
     handleArrayForms(form, agentCard) {
         // If not possible to patch arrays if control does not exist, that why they are created dinamycally depending on the data.
         this.createAndPatchCharacterArrayForm(form, agentCard);
+        if (agentCard.learnable) {
+            this.formUtils.patchLearnableFormGroup(form.get('learnable'), agentCard.learnable);
+        }
         if (agentCard.conversationFlow?.dynamicConditions?.length) {
             const dynamicConditionsFormArray = form.get('conversationFlow.dynamicConditions');
             agentCard.conversationFlow.dynamicConditions.forEach((condition) => {
@@ -5411,6 +5473,7 @@ class CharacterFormGroupService {
                 post_history_instructions: [''],
                 gender: [''],
                 hook: [''],
+                instructions: [''],
                 langTranslation: this.createMultiLanguageFormGroup(),
                 persona: this.createPersonaFormGroup(),
             }),
@@ -5442,6 +5505,7 @@ class CharacterFormGroupService {
             greetings: this.fb.array([]),
             hook: [''],
             communication: [''],
+            instructions: [''],
         });
     }
     createConversationSettingFormGroup() {
@@ -5704,7 +5768,7 @@ class DcDynamicConditionsFormComponent {
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDynamicConditionsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcDynamicConditionsFormComponent, isStandalone: true, selector: "dc-dynamic-conditions-form", inputs: { dynamicConditionsArray: "dynamicConditionsArray", dynamicConditionsPath: "dynamicConditionsPath", entityWhatOptions: "entityWhatOptions", entityWhenOptions: "entityWhenOptions", systemPromptTypeOptions: "systemPromptTypeOptions" }, ngImport: i0, template: "<div class=\"group\">\n  <h4>Dynamic Conditions <span pTooltip=\"Conditions that trigger tasks based on conversation state\">\u2139\uFE0F</span></h4>\n  @for (conditionControl of dynamicConditionsArray.controls; track conditionControl; let i = $index) {\n  <div class=\"group nested-group dynamic-condition-item\">\n    <div class=\"flex justify-between items-center mb-4\">\n      <h5>Condition {{ i + 1 }}</h5>\n      <button\n        pTooltip=\"Remove Condition\"\n        variant=\"outlined\"\n        [raised]=\"true\"\n        pButton\n        severity=\"danger\"\n        icon=\"pi pi-trash\"\n        (click)=\"removeDynamicCondition(i)\"></button>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhat' + i\">What <span pTooltip=\"Identifier for this condition (optional)\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhat' + i\"\n        [options]=\"entityWhatOptions\"\n        [formControl]=\"conditionControl.controls.what\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select What'\"></p-select>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhen' + i\">When <span pTooltip=\"Field or variable to check\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhen' + i\"\n        [options]=\"entityWhenOptions\"\n        [formControl]=\"conditionControl.controls.when\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select When'\"></p-select>\n    </div>\n    <div class=\"form-field\">\n      <label [for]=\"'conditionValue' + i\">Value <span pTooltip=\"Value to compare against\">\u2139\uFE0F</span></label>\n      <input pInputText [id]=\"'conditionValue' + i\" type=\"text\" [formControl]=\"conditionControl.controls.value\" />\n    </div>\n\n    <div class=\"group very-nested-group\">\n      <h6>DO THIS <span pTooltip=\"Tasks to execute if this condition is met\">\u2139\uFE0F</span></h6>\n      @for (doControl of conditionControl.controls.do.controls; track doControl; let j = $index) {\n      <dc-do-action-form\n        [formGroup]=\"doControl\"\n        [conditionIndex]=\"i\"\n        [doItemIndex]=\"j\"\n        [systemPromptTypeOptions]=\"systemPromptTypeOptions\"\n        (removeItem)=\"removeDoItem(i, j)\">\n      </dc-do-action-form>\n      }\n      <button\n        pButton\n        type=\"button\"\n        label=\"Add 'Do' Task\"\n        icon=\"pi pi-plus\"\n        (click)=\"addDoControl(conditionControl.controls.do)\"\n        class=\"p-button-outlined p-button-sm\"\n        style=\"margin-top: 10px\"></button>\n    </div>\n  </div>\n  }\n  <button pButton type=\"button\" severity=\"info\" label=\"Add Dynamic Condition\" (click)=\"addDynamicCondition()\"></button>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DcDoActionFormComponent, selector: "dc-do-action-form", inputs: ["formGroup", "conditionIndex", "doItemIndex", "systemPromptTypeOptions"], outputs: ["removeItem"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcDynamicConditionsFormComponent, isStandalone: true, selector: "dc-dynamic-conditions-form", inputs: { dynamicConditionsArray: "dynamicConditionsArray", dynamicConditionsPath: "dynamicConditionsPath", entityWhatOptions: "entityWhatOptions", entityWhenOptions: "entityWhenOptions", systemPromptTypeOptions: "systemPromptTypeOptions" }, ngImport: i0, template: "<div class=\"group\">\n  <h4>Dynamic Conditions <span pTooltip=\"Conditions that trigger tasks based on conversation state\">\u2139\uFE0F</span></h4>\n  @for (conditionControl of dynamicConditionsArray.controls; track conditionControl; let i = $index) {\n  <div class=\"group nested-group dynamic-condition-item\">\n    <div class=\"flex justify-between items-center mb-4\">\n      <h5>Condition {{ i + 1 }}</h5>\n      <button\n        pTooltip=\"Remove Condition\"\n        variant=\"outlined\"\n        [raised]=\"true\"\n        pButton\n        severity=\"danger\"\n        icon=\"pi pi-trash\"\n        (click)=\"removeDynamicCondition(i)\"></button>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhat' + i\">What <span pTooltip=\"Identifier for this condition (optional)\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhat' + i\"\n        [options]=\"entityWhatOptions\"\n        [formControl]=\"conditionControl.controls.what\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select What'\"></p-select>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhen' + i\">When <span pTooltip=\"Field or variable to check\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhen' + i\"\n        [options]=\"entityWhenOptions\"\n        [formControl]=\"conditionControl.controls.when\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select When'\"></p-select>\n    </div>\n    <div class=\"form-field\">\n      <label [for]=\"'conditionValue' + i\">Value <span pTooltip=\"Value to compare against\">\u2139\uFE0F</span></label>\n      <input pInputText [id]=\"'conditionValue' + i\" type=\"text\" [formControl]=\"conditionControl.controls.value\" />\n    </div>\n\n    <div class=\"group very-nested-group\">\n      <h6>DO THIS <span pTooltip=\"Tasks to execute if this condition is met\">\u2139\uFE0F</span></h6>\n      @for (doControl of conditionControl.controls.do.controls; track doControl; let j = $index) {\n      <dc-do-action-form\n        [formGroup]=\"doControl\"\n        [conditionIndex]=\"i\"\n        [doItemIndex]=\"j\"\n        [systemPromptTypeOptions]=\"systemPromptTypeOptions\"\n        (removeItem)=\"removeDoItem(i, j)\">\n      </dc-do-action-form>\n      }\n      <button\n        pButton\n        type=\"button\"\n        label=\"Add 'Do' Task\"\n        icon=\"pi pi-plus\"\n        (click)=\"addDoControl(conditionControl.controls.do)\"\n        class=\"p-button-outlined p-button-sm\"\n        style=\"margin-top: 10px\"></button>\n    </div>\n  </div>\n  }\n  <button pButton type=\"button\" severity=\"info\" label=\"Add Dynamic Condition\" (click)=\"addDynamicCondition()\"></button>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DcDoActionFormComponent, selector: "dc-do-action-form", inputs: ["formGroup", "conditionIndex", "doItemIndex", "systemPromptTypeOptions"], outputs: ["removeItem"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDynamicConditionsFormComponent, decorators: [{
             type: Component,
@@ -5762,7 +5826,7 @@ class DcDynamicCriteriaFormComponent {
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDynamicCriteriaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcDynamicCriteriaFormComponent, isStandalone: true, selector: "dc-dynamic-criteria-form", inputs: { formArray: "formArray", title: "title", mode: "mode", availableItems: "availableItems" }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"flex justify-content-between align-items-center mb-4\">\n    <h4 class=\"m-0 text-xl font-semibold\">{{ title }}</h4>\n    <button pButton type=\"button\" (click)=\"openDialog()\" [label]=\"'Add ' + title\" class=\"p-button-sm\"></button>\n  </div>\n\n  @for (item of formArray.controls; track $index) {\n  <div [formGroup]=\"getItemFormGroup($index)\" class=\"border-1 surface-border border-round p-4 mb-3\">\n    <div class=\"grid formgrid\">\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"name-{{ $index }}\" class=\"block mb-2\">Name</label>\n        <input id=\"name-{{ $index }}\" type=\"text\" pInputText formControlName=\"name\" class=\"w-full\" />\n      </div>\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"emoji-{{ $index }}\" class=\"block mb-2\">Emoji</label>\n        <input id=\"emoji-{{ $index }}\" type=\"text\" pInputText formControlName=\"emoji\" class=\"w-full\" />\n      </div>\n\n      <div class=\"col-12\">\n        <label for=\"description-{{ $index }}\" class=\"block mb-2\">Description</label>\n        <input id=\"description-{{ $index }}\" type=\"text\" pInputText formControlName=\"description\" class=\"w-full\" />\n      </div>\n    </div>\n\n    <div class=\"col-12 flex justify-content-between items-center mt-2\">\n      <div class=\"field-checkbox flex items-center\">\n        <p-checkbox formControlName=\"enabled\" [binary]=\"true\" inputId=\"enabled-{{ $index }}\"></p-checkbox>\n        <label for=\"enabled-{{ $index }}\" class=\"ml-2\">Enabled</label>\n      </div>\n      <button pButton type=\"button\" icon=\"pi pi-trash\" (click)=\"removeItem($index)\" class=\"p-button-danger p-button-sm\"></button>\n    </div>\n  </div>\n  }\n\n  <p-dialog [header]=\"'Select ' + title\" [(visible)]=\"displayDialog\" [modal]=\"true\" [style]=\"{ width: '50vw' }\">\n    <div class=\"flex flex-col gap-3\">\n      @for (item of availableItems; track $index) {\n      <div class=\"flex justify-content-between align-items-center py-2 border-bottom-1 surface-border\">\n        <div>\n          <span class=\"font-semibold\">{{ item.emoji }} {{ item.name }}:</span>\n          {{ item.description }}\n        </div>\n        <button pButton type=\"button\" label=\"Add\" (click)=\"addItem(item)\" class=\"p-button-sm\"></button>\n      </div>\n      }\n    </div>\n  </p-dialog>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcDynamicCriteriaFormComponent, isStandalone: true, selector: "dc-dynamic-criteria-form", inputs: { formArray: "formArray", title: "title", mode: "mode", availableItems: "availableItems" }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"flex justify-content-between align-items-center mb-4\">\n    <h4 class=\"m-0 text-xl font-semibold\">{{ title }}</h4>\n    <button pButton type=\"button\" (click)=\"openDialog()\" [label]=\"'Add ' + title\" class=\"p-button-sm\"></button>\n  </div>\n\n  @for (item of formArray.controls; track $index) {\n  <div [formGroup]=\"getItemFormGroup($index)\" class=\"border-1 surface-border border-round p-4 mb-3\">\n    <div class=\"grid formgrid\">\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"name-{{ $index }}\" class=\"block mb-2\">Name</label>\n        <input id=\"name-{{ $index }}\" type=\"text\" pInputText formControlName=\"name\" class=\"w-full\" />\n      </div>\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"emoji-{{ $index }}\" class=\"block mb-2\">Emoji</label>\n        <input id=\"emoji-{{ $index }}\" type=\"text\" pInputText formControlName=\"emoji\" class=\"w-full\" />\n      </div>\n\n      <div class=\"col-12\">\n        <label for=\"description-{{ $index }}\" class=\"block mb-2\">Description</label>\n        <input id=\"description-{{ $index }}\" type=\"text\" pInputText formControlName=\"description\" class=\"w-full\" />\n      </div>\n    </div>\n\n    <div class=\"col-12 flex justify-content-between items-center mt-2\">\n      <div class=\"field-checkbox flex items-center\">\n        <p-checkbox formControlName=\"enabled\" [binary]=\"true\" inputId=\"enabled-{{ $index }}\"></p-checkbox>\n        <label for=\"enabled-{{ $index }}\" class=\"ml-2\">Enabled</label>\n      </div>\n      <button pButton type=\"button\" icon=\"pi pi-trash\" (click)=\"removeItem($index)\" class=\"p-button-danger p-button-sm\"></button>\n    </div>\n  </div>\n  }\n\n  <p-dialog [header]=\"'Select ' + title\" [(visible)]=\"displayDialog\" [modal]=\"true\" [style]=\"{ width: '50vw' }\">\n    <div class=\"flex flex-col gap-3\">\n      @for (item of availableItems; track $index) {\n      <div class=\"flex justify-content-between align-items-center py-2 border-bottom-1 surface-border\">\n        <div>\n          <span class=\"font-semibold\">{{ item.emoji }} {{ item.name }}:</span>\n          {{ item.description }}\n        </div>\n        <button pButton type=\"button\" label=\"Add\" (click)=\"addItem(item)\" class=\"p-button-sm\"></button>\n      </div>\n      }\n    </div>\n  </p-dialog>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDynamicCriteriaFormComponent, decorators: [{
             type: Component,
@@ -5837,7 +5901,7 @@ class DCConversationFlowFormComponent {
         console.log(this.formGroup.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCConversationFlowFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCConversationFlowFormComponent, isStandalone: true, selector: "dc-conversation-flow-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"group\">\n  <h3>Conversation Flow <span pTooltip=\"Define the flow and logic of the conversation\">\u2139\uFE0F</span></h3>\n\n  <div formGroupName=\"moodState\" class=\"group\">\n    <h4>Mood State <span pTooltip=\"Configure mood detection settings\">\u2139\uFE0F</span></h4>\n    <div class=\"form-field\">\n      <p-toggleswitch formControlName=\"enabled\"></p-toggleswitch>\n\n      <label for=\"enabled\">Detectar estado de animo? \uD83D\uDE12 \uD83E\uDD22 \uD83D\uDE24 \uD83D\uDE08 \uD83D\uDE31 <span pTooltip=\"Enable mood state detection\">\u2139\uFE0F</span></label>\n    </div>\n\n    @if (formGroup.controls.moodState.controls.enabled.value) {\n    <div class=\"form-field\">\n      <p-toggleswitch formControlName=\"useAssetStatesOnly\"></p-toggleswitch>\n\n      <label for=\"useAssetStatesOnly\"\n        >Use Asset States Only <span pTooltip=\"Depends on the motion assets, if you tag with moods, those will be the only ones detected\">\u2139\uFE0F</span></label\n      >\n    </div>\n\n    <div class=\"form-field\">\n      <label for=\"detectableStates\">Detectable States <span pTooltip=\"List of detectable mood states\">\u2139\uFE0F</span></label>\n      <i>Pending for development</i>\n    </div>\n    }\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"Aqu\u00ED se especifican las reglas de como se progresa en la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n\n    <agent-task-form [formGroup]=\"formGroup.controls.goal\" [shortForm]=\"true\"></agent-task-form>\n  </div>\n\n  <details>\n    <summary>Trigger Task (Tareas autom\u00E1ticas que se activan al conversar)</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4\n        >Trigger Tasks\n        <span\n          (click)=\"showData()\"\n          pTooltip=\"Tareas que se ejecutan en eventos espec\u00EDficos de la conversaci\u00F3n como  cuando el usuario env\u00EDa un mensaje, cuando el agente responde, etc. se visualizan normalmente en la secci\u00F3n de retro\"\n          >\u2139\uFE0F</span\n        ></h4\n      >\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">\n          <b>{{ eventKey | formatKey }}</b>\n        </label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\" [shortForm]=\"true\"></agent-task-form>\n      </div>\n      }\n    </div>\n  </details>\n  <details>\n    <summary>Tools (Herramientas que usa la APP al ocurrir eventos)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.tools\" title=\"Tool\" mode=\"select\" [availableItems]=\"validTools\"> </dc-dynamic-criteria-form>\n  </details>\n  <details>\n    <summary>Challenges (Mini Desafios al conversar)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.challenges\" title=\"Challenge\" mode=\"free-text\"> </dc-dynamic-criteria-form>\n  </details>\n\n  <dc-dynamic-conditions-form\n    [dynamicConditionsArray]=\"formGroup.controls.dynamicConditions\"\n    [dynamicConditionsPath]=\"'formGroup.controls.dynamicConditions'\"\n    [entityWhatOptions]=\"entityWhatOptions\"\n    [entityWhenOptions]=\"entityWhenOptions\"\n    [systemPromptTypeOptions]=\"systemPromptTypeOptions\">\n  </dc-dynamic-conditions-form>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: AgentTaskFormComponent, selector: "agent-task-form", inputs: ["formGroup", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: DcDynamicConditionsFormComponent, selector: "dc-dynamic-conditions-form", inputs: ["dynamicConditionsArray", "dynamicConditionsPath", "entityWhatOptions", "entityWhenOptions", "systemPromptTypeOptions"] }, { kind: "component", type: DcDynamicCriteriaFormComponent, selector: "dc-dynamic-criteria-form", inputs: ["formArray", "title", "mode", "availableItems"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: FormatKeyPipe, name: "formatKey" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCConversationFlowFormComponent, isStandalone: true, selector: "dc-conversation-flow-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"group\">\n  <h3>Conversation Flow <span pTooltip=\"Define the flow and logic of the conversation\">\u2139\uFE0F</span></h3>\n\n  <div formGroupName=\"moodState\" class=\"group\">\n    <h4>Mood State <span pTooltip=\"Configure mood detection settings\">\u2139\uFE0F</span></h4>\n    <div class=\"form-field\">\n      <p-toggleswitch formControlName=\"enabled\"></p-toggleswitch>\n\n      <label for=\"enabled\">Detectar estado de animo? \uD83D\uDE12 \uD83E\uDD22 \uD83D\uDE24 \uD83D\uDE08 \uD83D\uDE31 <span pTooltip=\"Enable mood state detection\">\u2139\uFE0F</span></label>\n    </div>\n\n    @if (formGroup.controls.moodState.controls.enabled.value) {\n    <div class=\"form-field\">\n      <p-toggleswitch formControlName=\"useAssetStatesOnly\"></p-toggleswitch>\n\n      <label for=\"useAssetStatesOnly\"\n        >Use Asset States Only <span pTooltip=\"Depends on the motion assets, if you tag with moods, those will be the only ones detected\">\u2139\uFE0F</span></label\n      >\n    </div>\n\n    <div class=\"form-field\">\n      <label for=\"detectableStates\">Detectable States <span pTooltip=\"List of detectable mood states\">\u2139\uFE0F</span></label>\n      <i>Pending for development</i>\n    </div>\n    }\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"Aqu\u00ED se especifican las reglas de como se progresa en la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n\n    <agent-task-form [formGroup]=\"formGroup.controls.goal\" [shortForm]=\"true\"></agent-task-form>\n  </div>\n\n  <details>\n    <summary>Trigger Task (Tareas autom\u00E1ticas que se activan al conversar)</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4\n        >Trigger Tasks\n        <span\n          (click)=\"showData()\"\n          pTooltip=\"Tareas que se ejecutan en eventos espec\u00EDficos de la conversaci\u00F3n como  cuando el usuario env\u00EDa un mensaje, cuando el agente responde, etc. se visualizan normalmente en la secci\u00F3n de retro\"\n          >\u2139\uFE0F</span\n        ></h4\n      >\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">\n          <b>{{ eventKey | formatKey }}</b>\n        </label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\" [shortForm]=\"true\"></agent-task-form>\n      </div>\n      }\n    </div>\n  </details>\n  <details>\n    <summary>Tools (Herramientas que usa la APP al ocurrir eventos)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.tools\" title=\"Tool\" mode=\"select\" [availableItems]=\"validTools\"> </dc-dynamic-criteria-form>\n  </details>\n  <details>\n    <summary>Challenges (Mini Desafios al conversar)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.challenges\" title=\"Challenge\" mode=\"free-text\"> </dc-dynamic-criteria-form>\n  </details>\n\n  <dc-dynamic-conditions-form\n    [dynamicConditionsArray]=\"formGroup.controls.dynamicConditions\"\n    [dynamicConditionsPath]=\"'formGroup.controls.dynamicConditions'\"\n    [entityWhatOptions]=\"entityWhatOptions\"\n    [entityWhenOptions]=\"entityWhenOptions\"\n    [systemPromptTypeOptions]=\"systemPromptTypeOptions\">\n  </dc-dynamic-conditions-form>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: AgentTaskFormComponent, selector: "agent-task-form", inputs: ["formGroup", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: DcDynamicConditionsFormComponent, selector: "dc-dynamic-conditions-form", inputs: ["dynamicConditionsArray", "dynamicConditionsPath", "entityWhatOptions", "entityWhenOptions", "systemPromptTypeOptions"] }, { kind: "component", type: DcDynamicCriteriaFormComponent, selector: "dc-dynamic-criteria-form", inputs: ["formArray", "title", "mode", "availableItems"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: FormatKeyPipe, name: "formatKey" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCConversationFlowFormComponent, decorators: [{
             type: Component,
@@ -5935,11 +5999,11 @@ class DcCharacterCardTranslationFormComponent {
         console.log(this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardTranslationFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcCharacterCardTranslationFormComponent, isStandalone: true, selector: "dc-character-card-translation-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"form-container space-y-4\">\n  <div class=\"form-field\">\n    <label for=\"hook\" class=\"block text-sm font-medium text-gray-700\">Hook</label>\n    <textarea\n      pInputTextarea\n      id=\"hook\"\n      formControlName=\"hook\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label for=\"communication\" class=\"block text-sm font-medium text-gray-700\">Communication</label>\n    <textarea\n      pInputTextarea\n      id=\"communication\"\n      formControlName=\"communication\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label class=\"block text-sm font-medium text-gray-700\">Greetings</label>\n    <div formArrayName=\"greetings\" class=\"space-y-2\">\n      @for (greeting of greetings.controls; track greeting; let i = $index) {\n      <div class=\"flex items-center space-x-2\">\n        <input\n          pInputText\n          [formControlName]=\"i\"\n          class=\"flex-grow mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"removeGreeting(i)\" class=\"p-button-rounded p-button-danger p-button-sm\"></button>\n      </div>\n      }\n    </div>\n    <button pButton type=\"button\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addGreeting()\" class=\"p-button-sm mt-2\"></button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcCharacterCardTranslationFormComponent, isStandalone: true, selector: "dc-character-card-translation-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"form-container space-y-4\">\n  <div class=\"form-field\">\n    <label for=\"hook\" class=\"block text-sm font-medium text-gray-700\">Hook</label>\n    <textarea\n      pInputTextarea\n      id=\"hook\"\n      formControlName=\"hook\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label for=\"communication\" class=\"block text-sm font-medium text-gray-700\">Communication</label>\n    <textarea\n      pInputTextarea\n      id=\"communication\"\n      formControlName=\"communication\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label for=\"instructions\" class=\"block text-sm font-medium text-gray-700\">Instructions</label>\n    <textarea\n      pInputTextarea\n      id=\"instructions\"\n      formControlName=\"instructions\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label class=\"block text-sm font-medium text-gray-700\">Greetings</label>\n    <div formArrayName=\"greetings\" class=\"space-y-2\">\n      @for (greeting of greetings.controls; track greeting; let i = $index) {\n      <div class=\"flex items-center space-x-2\">\n        <input\n          pInputText\n          [formControlName]=\"i\"\n          class=\"flex-grow mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"removeGreeting(i)\" class=\"p-button-rounded p-button-danger p-button-sm\"></button>\n      </div>\n      }\n    </div>\n    <button pButton type=\"button\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addGreeting()\" class=\"p-button-sm mt-2\"></button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardTranslationFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-character-card-translation-form', standalone: true, imports: [ReactiveFormsModule, InputTextModule, TextareaModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"formGroup\" class=\"form-container space-y-4\">\n  <div class=\"form-field\">\n    <label for=\"hook\" class=\"block text-sm font-medium text-gray-700\">Hook</label>\n    <textarea\n      pInputTextarea\n      id=\"hook\"\n      formControlName=\"hook\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label for=\"communication\" class=\"block text-sm font-medium text-gray-700\">Communication</label>\n    <textarea\n      pInputTextarea\n      id=\"communication\"\n      formControlName=\"communication\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label class=\"block text-sm font-medium text-gray-700\">Greetings</label>\n    <div formArrayName=\"greetings\" class=\"space-y-2\">\n      @for (greeting of greetings.controls; track greeting; let i = $index) {\n      <div class=\"flex items-center space-x-2\">\n        <input\n          pInputText\n          [formControlName]=\"i\"\n          class=\"flex-grow mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"removeGreeting(i)\" class=\"p-button-rounded p-button-danger p-button-sm\"></button>\n      </div>\n      }\n    </div>\n    <button pButton type=\"button\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addGreeting()\" class=\"p-button-sm mt-2\"></button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'dc-character-card-translation-form', standalone: true, imports: [ReactiveFormsModule, InputTextModule, TextareaModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"formGroup\" class=\"form-container space-y-4\">\n  <div class=\"form-field\">\n    <label for=\"hook\" class=\"block text-sm font-medium text-gray-700\">Hook</label>\n    <textarea\n      pInputTextarea\n      id=\"hook\"\n      formControlName=\"hook\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label for=\"communication\" class=\"block text-sm font-medium text-gray-700\">Communication</label>\n    <textarea\n      pInputTextarea\n      id=\"communication\"\n      formControlName=\"communication\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label for=\"instructions\" class=\"block text-sm font-medium text-gray-700\">Instructions</label>\n    <textarea\n      pInputTextarea\n      id=\"instructions\"\n      formControlName=\"instructions\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label class=\"block text-sm font-medium text-gray-700\">Greetings</label>\n    <div formArrayName=\"greetings\" class=\"space-y-2\">\n      @for (greeting of greetings.controls; track greeting; let i = $index) {\n      <div class=\"flex items-center space-x-2\">\n        <input\n          pInputText\n          [formControlName]=\"i\"\n          class=\"flex-grow mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"removeGreeting(i)\" class=\"p-button-rounded p-button-danger p-button-sm\"></button>\n      </div>\n      }\n    </div>\n    <button pButton type=\"button\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addGreeting()\" class=\"p-button-sm mt-2\"></button>\n  </div>\n</div>\n" }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }] } });
@@ -5971,7 +6035,7 @@ class DcCharacterCardTranslationsTabsFormComponent {
         this.formGroup.removeControl(langCode);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardTranslationsTabsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcCharacterCardTranslationsTabsFormComponent, isStandalone: true, selector: "dc-character-card-translations-tabs-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div class=\"flex justify-between items-center mb-4\">\n  <h4 class=\"text-lg font-semibold\">Translations ({{ (formGroup?.controls | keyvalue)?.length }})</h4>\n  <p-button icon=\"pi pi-plus\" label=\"Add Language\" (click)=\"showAddLanguageDialog()\" />\n</div>\n\n<p-tabs value=\"0\" [scrollable]=\"true\">\n  <p-tablist>\n    @for (control of formGroup.controls | keyvalue; track control.key; let i = $index) {\n    <p-tab [value]=\"control.key\">\n      <div class=\"flex items-center\">\n        <span>{{ control.key }}</span>\n        <button\n          pButton\n          type=\"button\"\n          icon=\"pi pi-times\"\n          class=\"p-button-rounded p-button-danger p-button-text ml-2\"\n          (click)=\"removeLanguage(control.key)\"></button>\n      </div>\n    </p-tab>\n    }\n  </p-tablist>\n  <p-tabpanels>\n    @for (control of formGroup.controls | keyvalue; track control.key) {\n    <p-tabpanel [value]=\"control.key\">\n      @if (control.value) {\n      <dc-character-card-translation-form [formGroup]=\"control.value\" />\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>\n\n<p-dialog header=\"Add New Language\" [(visible)]=\"displayAddLanguageDialog\" [modal]=\"true\" [style]=\"{ width: '50vw', height: '50vh' }\">\n  <div style=\"height: 30vh\">\n    <label for=\"language\">Only Valid Languages and not added yet are displayed</label>\n    <br />\n    <p-select\n      [options]=\"availableLanguages()\"\n      [(ngModel)]=\"selectedLanguage\"\n      placeholder=\"Select a Language\"\n      optionLabel=\"description\"\n      optionValue=\"code\"\n      [filter]=\"true\"\n      filterBy=\"description\"\n      [showClear]=\"true\"></p-select>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-times\" label=\"Cancel\" styleClass=\"p-button-text\" (click)=\"displayAddLanguageDialog = false\" />\n    <p-button icon=\"pi pi-check\" label=\"Add\" (click)=\"addLanguage()\" [disabled]=\"!selectedLanguage\" />\n  </ng-template>\n</p-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i5$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i5$1.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i5$1.TabList, selector: "p-tablist" }, { kind: "component", type: i5$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: DcCharacterCardTranslationFormComponent, selector: "dc-character-card-translation-form", inputs: ["formGroup"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcCharacterCardTranslationsTabsFormComponent, isStandalone: true, selector: "dc-character-card-translations-tabs-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div class=\"flex justify-between items-center mb-4\">\n  <h4 class=\"text-lg font-semibold\">Translations ({{ (formGroup?.controls | keyvalue)?.length }})</h4>\n  <p-button icon=\"pi pi-plus\" label=\"Add Language\" (click)=\"showAddLanguageDialog()\" />\n</div>\n\n<p-tabs value=\"0\" [scrollable]=\"true\">\n  <p-tablist>\n    @for (control of formGroup.controls | keyvalue; track control.key; let i = $index) {\n    <p-tab [value]=\"control.key\">\n      <div class=\"flex items-center\">\n        <span>{{ control.key }}</span>\n        <button\n          pButton\n          type=\"button\"\n          icon=\"pi pi-times\"\n          class=\"p-button-rounded p-button-danger p-button-text ml-2\"\n          (click)=\"removeLanguage(control.key)\"></button>\n      </div>\n    </p-tab>\n    }\n  </p-tablist>\n  <p-tabpanels>\n    @for (control of formGroup.controls | keyvalue; track control.key) {\n    <p-tabpanel [value]=\"control.key\">\n      @if (control.value) {\n      <dc-character-card-translation-form [formGroup]=\"control.value\" />\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>\n\n<p-dialog header=\"Add New Language\" [(visible)]=\"displayAddLanguageDialog\" [modal]=\"true\" [style]=\"{ width: '50vw', height: '50vh' }\">\n  <div style=\"height: 30vh\">\n    <label for=\"language\">Only Valid Languages and not added yet are displayed</label>\n    <br />\n    <p-select\n      [options]=\"availableLanguages()\"\n      [(ngModel)]=\"selectedLanguage\"\n      placeholder=\"Select a Language\"\n      optionLabel=\"description\"\n      optionValue=\"code\"\n      [filter]=\"true\"\n      filterBy=\"description\"\n      [showClear]=\"true\"></p-select>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-times\" label=\"Cancel\" styleClass=\"p-button-text\" (click)=\"displayAddLanguageDialog = false\" />\n    <p-button icon=\"pi pi-check\" label=\"Add\" (click)=\"addLanguage()\" [disabled]=\"!selectedLanguage\" />\n  </ng-template>\n</p-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$6.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2$6.TabList, selector: "p-tablist" }, { kind: "component", type: i2$6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: DcCharacterCardTranslationFormComponent, selector: "dc-character-card-translation-form", inputs: ["formGroup"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardTranslationsTabsFormComponent, decorators: [{
             type: Component,
@@ -5982,7 +6046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class DcPersonaFormComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcPersonaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DcPersonaFormComponent, isStandalone: true, selector: "dc-persona-form", inputs: { personaForm: "personaForm" }, ngImport: i0, template: "<div [formGroup]=\"personaForm\" class=\"space-y-6\">\n  <h3 class=\"text-xl font-semibold text-gray-700\">\n    Persona Details <span pTooltip=\"Detailed information about the character's persona\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n  </h3>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"identity\" class=\"block text-sm font-medium text-gray-700\"\n      >Identity <span pTooltip=\"Name, Age, Gender, Species, Sexuality, Role, Appearance\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"identity\"\n      formControlName=\"identity\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"physical\" class=\"block text-sm font-medium text-gray-700\"\n      >Physical\n      <span\n        pTooltip=\"physical description including height, build, hairColor, hairStyle, eyeColor, skinTone, distinctiveMarks, clothing style, currentOutfit\"\n        class=\"text-blue-500 cursor-pointer\"\n        >\u2139\uFE0F</span\n      ></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"physical\"\n      formControlName=\"physical\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"personality\" class=\"block text-sm font-medium text-gray-700\"\n      >Personality\n      <span pTooltip=\"personality description surface traits, Temperament, Values, Beliefs, Observable traits\" class=\"text-blue-500 cursor-pointer\"\n        >\u2139\uFE0F</span\n      ></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"personality\"\n      formControlName=\"personality\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"communication\" class=\"block text-sm font-medium text-gray-700\"\n      >Communication\n      <span pTooltip=\"(How They Express) Speech Pattern, Style Common Phrases, Language Habits\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"communication\"\n      formControlName=\"communication\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"psychology\" class=\"block text-sm font-medium text-gray-700\"\n      >Psychology <span pTooltip=\"Motivations, Desires, Goals, Traumas, Conflicts, Weaknesses\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"psychology\"\n      formControlName=\"psychology\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"background\" class=\"block text-sm font-medium text-gray-700\"\n      >Background <span pTooltip=\"Background, History, origin, formative, secrets\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"background\"\n      formControlName=\"background\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"capabilities\" class=\"block text-sm font-medium text-gray-700\"\n      >Capabilities\n      <span pTooltip=\"skills, knowledge, abilities, expertise, limitations, Tools, Strengths\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"capabilities\"\n      formControlName=\"capabilities\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"social\" class=\"block text-sm font-medium text-gray-700\"\n      >Social <span pTooltip=\"Relationships, reputation, allies, enemies, social role\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"social\"\n      formControlName=\"social\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"preferences\" class=\"block text-sm font-medium text-gray-700\"\n      >Preferences <span pTooltip=\"likes, dislikes, hobbies, interests, hates\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"preferences\"\n      formControlName=\"preferences\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"situation\" class=\"block text-sm font-medium text-gray-700\"\n      >Situation\n      <span pTooltip=\"Current context for the character, immediate goal or challenge and constraints\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"situation\"\n      formControlName=\"situation\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DcPersonaFormComponent, isStandalone: true, selector: "dc-persona-form", inputs: { personaForm: "personaForm" }, ngImport: i0, template: "<div [formGroup]=\"personaForm\" class=\"space-y-6\">\n  <h3 class=\"text-xl font-semibold text-gray-700\">\n    Persona Details <span pTooltip=\"Detailed information about the character's persona\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n  </h3>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"identity\" class=\"block text-sm font-medium text-gray-700\"\n      >Identity <span pTooltip=\"Name, Age, Gender, Species, Sexuality, Role, Appearance\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"identity\"\n      formControlName=\"identity\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"physical\" class=\"block text-sm font-medium text-gray-700\"\n      >Physical\n      <span\n        pTooltip=\"physical description including height, build, hairColor, hairStyle, eyeColor, skinTone, distinctiveMarks, clothing style, currentOutfit\"\n        class=\"text-blue-500 cursor-pointer\"\n        >\u2139\uFE0F</span\n      ></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"physical\"\n      formControlName=\"physical\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"personality\" class=\"block text-sm font-medium text-gray-700\"\n      >Personality\n      <span pTooltip=\"personality description surface traits, Temperament, Values, Beliefs, Observable traits\" class=\"text-blue-500 cursor-pointer\"\n        >\u2139\uFE0F</span\n      ></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"personality\"\n      formControlName=\"personality\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"communication\" class=\"block text-sm font-medium text-gray-700\"\n      >Communication\n      <span pTooltip=\"(How They Express) Speech Pattern, Style Common Phrases, Language Habits\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"communication\"\n      formControlName=\"communication\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"psychology\" class=\"block text-sm font-medium text-gray-700\"\n      >Psychology <span pTooltip=\"Motivations, Desires, Goals, Traumas, Conflicts, Weaknesses\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"psychology\"\n      formControlName=\"psychology\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"background\" class=\"block text-sm font-medium text-gray-700\"\n      >Background <span pTooltip=\"Background, History, origin, formative, secrets\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"background\"\n      formControlName=\"background\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"capabilities\" class=\"block text-sm font-medium text-gray-700\"\n      >Capabilities\n      <span pTooltip=\"skills, knowledge, abilities, expertise, limitations, Tools, Strengths\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"capabilities\"\n      formControlName=\"capabilities\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"social\" class=\"block text-sm font-medium text-gray-700\"\n      >Social <span pTooltip=\"Relationships, reputation, allies, enemies, social role\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"social\"\n      formControlName=\"social\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"preferences\" class=\"block text-sm font-medium text-gray-700\"\n      >Preferences <span pTooltip=\"likes, dislikes, hobbies, interests, hates\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"preferences\"\n      formControlName=\"preferences\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"situation\" class=\"block text-sm font-medium text-gray-700\"\n      >Situation\n      <span pTooltip=\"Current context for the character, immediate goal or challenge and constraints\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"situation\"\n      formControlName=\"situation\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcPersonaFormComponent, decorators: [{
             type: Component,
@@ -6107,7 +6171,7 @@ Improve the following first message:`;
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcCharacterCardFormComponent, isStandalone: true, selector: "dc-character-card-form", inputs: { characterCardForm: "characterCardForm" }, outputs: { generateMissingDataRequest: "generateMissingDataRequest" }, ngImport: i0, template: "<div [formGroup]=\"characterCardForm\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 bg-white p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold text-gray-700 mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"form-field\">\n        <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n          >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <input\n          pInputText\n          id=\"cardName\"\n          type=\"text\"\n          formControlName=\"name\"\n          class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"gender\" class=\"block text-sm font-medium text-gray-700\"\n          >Gender <span pTooltip=\"El genero del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <p-select\n          class=\"w-full\"\n          id=\"gender\"\n          [options]=\"genderOptions\"\n          formControlName=\"gender\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Gender'\"></p-select>\n        @if (dataGroup.controls['gender']?.errors?.['required'] && dataGroup.controls['gender']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Gender is required </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u26A0\uFE0FChanged) Description\n        <span pTooltip=\"Descripci\u00F3n detallada del personaje, este campo es ignorado si existe una PERSONA\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        class=\"textmin mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >(\u2757\uFE0FObsoleto) First Message\n            <span pTooltip=\"Mensaje para iniciar la historia, OBSOLETO utilizar Greetings en su lugar, poner uno o varios.\" class=\"text-blue-500 cursor-pointer\"\n              >\u2139\uFE0F</span\n            ></span\n          >\n          <div class=\"flex items-center space-x-2\">\n            <p-togglebutton\n              [formControl]=\"markdownForm.controls.seeMarkdown\"\n              [onLabel]=\"'Editar'\"\n              [offLabel]=\"'Ver Markdown'\"\n              size=\"small\"\n              styleClass=\"min-w-16 p-button-sm\"\n              (onChange)=\"checkCdr()\" />\n            <p-button icon=\"pi pi-refresh\" (click)=\"improveFirstMessage()\" label=\"Mejorar\" styleClass=\"p-button-sm p-button-outlined\"></p-button>\n          </div>\n        </div>\n      </label>\n\n      @if(markdownForm.controls.seeMarkdown.value){\n      <div [innerHTML]=\"dataGroup.controls['first_mes'].value | mdToHtmlArray\" class=\"prose mt-1 p-3 border border-gray-200 rounded-md\"></div>\n      }@else{\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardFirstMessage\"\n        formControlName=\"first_mes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n      </textarea>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"mes_example\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) Mensajes de Ejemplo\n        <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n, agregar esta info dentro de comunication\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"mes_example\"\n        formControlName=\"mes_example\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Hook <span pTooltip=\"Texto gancho para atraer al usuario a interactuar con esta tarjeta\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardHook\"\n        formControlName=\"hook\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium text-gray-700\"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Greetings (Saludos Iniciales)<span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider> Persona </p-divider>\n\n    <dc-persona-form [personaForm]=\"personaGroup\" />\n\n    <p-divider> Avanzado </p-divider>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) Post-History Instructions\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"post_history_instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardSystemPrompt\" class=\"block text-sm font-medium text-gray-700\">\n        (\u26A0\uFE0F Cuidado) System Prompt <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n      </label>\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardSystemPrompt\"\n        formControlName=\"system_prompt\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n      @if (dataGroup.controls['system_prompt']?.errors?.['required'] && dataGroup.controls['system_prompt']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> System prompt is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardCreatorNotes\"\n        formControlName=\"creator_notes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium text-gray-700\">Tags \u2139\uFE0F</label>\n      <div class=\"array-field space-y-2\">\n        @for (tag of tagsArray.controls; track tag; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\">\n          <input\n            pInputText\n            [id]=\"'cardTag' + i\"\n            type=\"text\"\n            [formControl]=\"asFormControl(tag)\"\n            (input)=\"updateArrayField('tags', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\" />\n          <button pButton severity=\"danger\" label=\"Remove\" icon=\"pi pi-times\" (click)=\"removeArrayItem('tags', i)\" class=\"p-button-sm\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addArrayItem('tags')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider align=\"center\" type=\"dotted\">\n      <b>Traducciones a otros idiomas</b>\n    </p-divider>\n\n    @if(langTranslationGroup){\n    <dc-character-card-translations-tabs-form [formGroup]=\"langTranslationGroup\" />\n    }\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i6$1.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i1$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: DcCharacterCardTranslationsTabsFormComponent, selector: "dc-character-card-translations-tabs-form", inputs: ["formGroup"] }, { kind: "component", type: DcPersonaFormComponent, selector: "dc-persona-form", inputs: ["personaForm"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcCharacterCardFormComponent, isStandalone: true, selector: "dc-character-card-form", inputs: { characterCardForm: "characterCardForm" }, outputs: { generateMissingDataRequest: "generateMissingDataRequest" }, ngImport: i0, template: "<div [formGroup]=\"characterCardForm\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 bg-white p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold text-gray-700 mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"form-field\">\n        <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n          >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <input\n          pInputText\n          id=\"cardName\"\n          type=\"text\"\n          formControlName=\"name\"\n          class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"gender\" class=\"block text-sm font-medium text-gray-700\"\n          >Gender <span pTooltip=\"El genero del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <p-select\n          class=\"w-full\"\n          id=\"gender\"\n          [options]=\"genderOptions\"\n          formControlName=\"gender\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Gender'\"></p-select>\n        @if (dataGroup.controls['gender']?.errors?.['required'] && dataGroup.controls['gender']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Gender is required </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u26A0\uFE0FChanged) Description\n        <span pTooltip=\"Descripci\u00F3n detallada del personaje, este campo es ignorado si existe una PERSONA\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        class=\"textmin mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >(\u2757\uFE0FObsoleto) First Message\n            <span pTooltip=\"Mensaje para iniciar la historia, OBSOLETO utilizar Greetings en su lugar, poner uno o varios.\" class=\"text-blue-500 cursor-pointer\"\n              >\u2139\uFE0F</span\n            ></span\n          >\n          <div class=\"flex items-center space-x-2\">\n            <p-togglebutton\n              [formControl]=\"markdownForm.controls.seeMarkdown\"\n              [onLabel]=\"'Editar'\"\n              [offLabel]=\"'Ver Markdown'\"\n              size=\"small\"\n              styleClass=\"min-w-16 p-button-sm\"\n              (onChange)=\"checkCdr()\" />\n            <p-button icon=\"pi pi-refresh\" (click)=\"improveFirstMessage()\" label=\"Mejorar\" styleClass=\"p-button-sm p-button-outlined\"></p-button>\n          </div>\n        </div>\n      </label>\n\n      @if(markdownForm.controls.seeMarkdown.value){\n      <div [innerHTML]=\"dataGroup.controls['first_mes'].value | mdToHtmlArray\" class=\"prose mt-1 p-3 border border-gray-200 rounded-md\"></div>\n      }@else{\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardFirstMessage\"\n        formControlName=\"first_mes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n      </textarea>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"mes_example\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) Mensajes de Ejemplo\n        <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n, agregar esta info dentro de comunication\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"mes_example\"\n        formControlName=\"mes_example\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Hook <span pTooltip=\"Texto gancho para atraer al usuario a interactuar con esta tarjeta\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardHook\"\n        formControlName=\"hook\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >Instructions <span pTooltip=\"Instrucciones para el usuario, sepa que tiene que hacer.\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardInstructions\"\n        formControlName=\"instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium text-gray-700\"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Greetings (Saludos Iniciales)<span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider> Persona </p-divider>\n\n    <dc-persona-form [personaForm]=\"personaGroup\" />\n\n    <p-divider> Avanzado </p-divider>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) Post-History Instructions\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"post_history_instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardSystemPrompt\" class=\"block text-sm font-medium text-gray-700\">\n        (\u26A0\uFE0F Cuidado) System Prompt <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n      </label>\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardSystemPrompt\"\n        formControlName=\"system_prompt\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n      @if (dataGroup.controls['system_prompt']?.errors?.['required'] && dataGroup.controls['system_prompt']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> System prompt is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardCreatorNotes\"\n        formControlName=\"creator_notes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium text-gray-700\">Tags \u2139\uFE0F</label>\n      <dc-tags-form [form]=\"dataGroup\" />\n    </div>\n\n    <p-divider align=\"center\" type=\"dotted\">\n      <b>Traducciones a otros idiomas</b>\n    </p-divider>\n\n    @if(langTranslationGroup){\n    <dc-character-card-translations-tabs-form [formGroup]=\"langTranslationGroup\" />\n    }\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i6$1.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i1$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: DcCharacterCardTranslationsTabsFormComponent, selector: "dc-character-card-translations-tabs-form", inputs: ["formGroup"] }, { kind: "component", type: DcPersonaFormComponent, selector: "dc-persona-form", inputs: ["personaForm"] }, { kind: "component", type: DcTagsFormComponent, selector: "dc-tags-form", inputs: ["form"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardFormComponent, decorators: [{
             type: Component,
@@ -6124,7 +6188,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         DividerModule,
                         DcCharacterCardTranslationsTabsFormComponent,
                         DcPersonaFormComponent,
-                    ], template: "<div [formGroup]=\"characterCardForm\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 bg-white p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold text-gray-700 mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"form-field\">\n        <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n          >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <input\n          pInputText\n          id=\"cardName\"\n          type=\"text\"\n          formControlName=\"name\"\n          class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"gender\" class=\"block text-sm font-medium text-gray-700\"\n          >Gender <span pTooltip=\"El genero del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <p-select\n          class=\"w-full\"\n          id=\"gender\"\n          [options]=\"genderOptions\"\n          formControlName=\"gender\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Gender'\"></p-select>\n        @if (dataGroup.controls['gender']?.errors?.['required'] && dataGroup.controls['gender']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Gender is required </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u26A0\uFE0FChanged) Description\n        <span pTooltip=\"Descripci\u00F3n detallada del personaje, este campo es ignorado si existe una PERSONA\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        class=\"textmin mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >(\u2757\uFE0FObsoleto) First Message\n            <span pTooltip=\"Mensaje para iniciar la historia, OBSOLETO utilizar Greetings en su lugar, poner uno o varios.\" class=\"text-blue-500 cursor-pointer\"\n              >\u2139\uFE0F</span\n            ></span\n          >\n          <div class=\"flex items-center space-x-2\">\n            <p-togglebutton\n              [formControl]=\"markdownForm.controls.seeMarkdown\"\n              [onLabel]=\"'Editar'\"\n              [offLabel]=\"'Ver Markdown'\"\n              size=\"small\"\n              styleClass=\"min-w-16 p-button-sm\"\n              (onChange)=\"checkCdr()\" />\n            <p-button icon=\"pi pi-refresh\" (click)=\"improveFirstMessage()\" label=\"Mejorar\" styleClass=\"p-button-sm p-button-outlined\"></p-button>\n          </div>\n        </div>\n      </label>\n\n      @if(markdownForm.controls.seeMarkdown.value){\n      <div [innerHTML]=\"dataGroup.controls['first_mes'].value | mdToHtmlArray\" class=\"prose mt-1 p-3 border border-gray-200 rounded-md\"></div>\n      }@else{\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardFirstMessage\"\n        formControlName=\"first_mes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n      </textarea>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"mes_example\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) Mensajes de Ejemplo\n        <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n, agregar esta info dentro de comunication\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"mes_example\"\n        formControlName=\"mes_example\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Hook <span pTooltip=\"Texto gancho para atraer al usuario a interactuar con esta tarjeta\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardHook\"\n        formControlName=\"hook\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium text-gray-700\"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Greetings (Saludos Iniciales)<span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider> Persona </p-divider>\n\n    <dc-persona-form [personaForm]=\"personaGroup\" />\n\n    <p-divider> Avanzado </p-divider>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) Post-History Instructions\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"post_history_instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardSystemPrompt\" class=\"block text-sm font-medium text-gray-700\">\n        (\u26A0\uFE0F Cuidado) System Prompt <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n      </label>\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardSystemPrompt\"\n        formControlName=\"system_prompt\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n      @if (dataGroup.controls['system_prompt']?.errors?.['required'] && dataGroup.controls['system_prompt']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> System prompt is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardCreatorNotes\"\n        formControlName=\"creator_notes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium text-gray-700\">Tags \u2139\uFE0F</label>\n      <div class=\"array-field space-y-2\">\n        @for (tag of tagsArray.controls; track tag; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\">\n          <input\n            pInputText\n            [id]=\"'cardTag' + i\"\n            type=\"text\"\n            [formControl]=\"asFormControl(tag)\"\n            (input)=\"updateArrayField('tags', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\" />\n          <button pButton severity=\"danger\" label=\"Remove\" icon=\"pi pi-times\" (click)=\"removeArrayItem('tags', i)\" class=\"p-button-sm\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addArrayItem('tags')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider align=\"center\" type=\"dotted\">\n      <b>Traducciones a otros idiomas</b>\n    </p-divider>\n\n    @if(langTranslationGroup){\n    <dc-character-card-translations-tabs-form [formGroup]=\"langTranslationGroup\" />\n    }\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"] }]
+                        DcTagsFormComponent,
+                    ], template: "<div [formGroup]=\"characterCardForm\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 bg-white p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold text-gray-700 mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"form-field\">\n        <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n          >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <input\n          pInputText\n          id=\"cardName\"\n          type=\"text\"\n          formControlName=\"name\"\n          class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"gender\" class=\"block text-sm font-medium text-gray-700\"\n          >Gender <span pTooltip=\"El genero del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <p-select\n          class=\"w-full\"\n          id=\"gender\"\n          [options]=\"genderOptions\"\n          formControlName=\"gender\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Gender'\"></p-select>\n        @if (dataGroup.controls['gender']?.errors?.['required'] && dataGroup.controls['gender']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Gender is required </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u26A0\uFE0FChanged) Description\n        <span pTooltip=\"Descripci\u00F3n detallada del personaje, este campo es ignorado si existe una PERSONA\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        class=\"textmin mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >(\u2757\uFE0FObsoleto) First Message\n            <span pTooltip=\"Mensaje para iniciar la historia, OBSOLETO utilizar Greetings en su lugar, poner uno o varios.\" class=\"text-blue-500 cursor-pointer\"\n              >\u2139\uFE0F</span\n            ></span\n          >\n          <div class=\"flex items-center space-x-2\">\n            <p-togglebutton\n              [formControl]=\"markdownForm.controls.seeMarkdown\"\n              [onLabel]=\"'Editar'\"\n              [offLabel]=\"'Ver Markdown'\"\n              size=\"small\"\n              styleClass=\"min-w-16 p-button-sm\"\n              (onChange)=\"checkCdr()\" />\n            <p-button icon=\"pi pi-refresh\" (click)=\"improveFirstMessage()\" label=\"Mejorar\" styleClass=\"p-button-sm p-button-outlined\"></p-button>\n          </div>\n        </div>\n      </label>\n\n      @if(markdownForm.controls.seeMarkdown.value){\n      <div [innerHTML]=\"dataGroup.controls['first_mes'].value | mdToHtmlArray\" class=\"prose mt-1 p-3 border border-gray-200 rounded-md\"></div>\n      }@else{\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardFirstMessage\"\n        formControlName=\"first_mes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n      </textarea>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"mes_example\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) Mensajes de Ejemplo\n        <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n, agregar esta info dentro de comunication\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"mes_example\"\n        formControlName=\"mes_example\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Hook <span pTooltip=\"Texto gancho para atraer al usuario a interactuar con esta tarjeta\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardHook\"\n        formControlName=\"hook\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >Instructions <span pTooltip=\"Instrucciones para el usuario, sepa que tiene que hacer.\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardInstructions\"\n        formControlName=\"instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium text-gray-700\"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Greetings (Saludos Iniciales)<span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider> Persona </p-divider>\n\n    <dc-persona-form [personaForm]=\"personaGroup\" />\n\n    <p-divider> Avanzado </p-divider>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) Post-History Instructions\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"post_history_instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardSystemPrompt\" class=\"block text-sm font-medium text-gray-700\">\n        (\u26A0\uFE0F Cuidado) System Prompt <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n      </label>\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardSystemPrompt\"\n        formControlName=\"system_prompt\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n      @if (dataGroup.controls['system_prompt']?.errors?.['required'] && dataGroup.controls['system_prompt']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> System prompt is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardCreatorNotes\"\n        formControlName=\"creator_notes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium text-gray-700\">Tags \u2139\uFE0F</label>\n      <dc-tags-form [form]=\"dataGroup\" />\n    </div>\n\n    <p-divider align=\"center\" type=\"dotted\">\n      <b>Traducciones a otros idiomas</b>\n    </p-divider>\n\n    @if(langTranslationGroup){\n    <dc-character-card-translations-tabs-form [formGroup]=\"langTranslationGroup\" />\n    }\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"] }]
         }], propDecorators: { characterCardForm: [{
                 type: Input,
                 args: [{ required: true }]
@@ -6260,7 +6325,7 @@ class DcConversationSettingsFormComponent {
         this.getRules();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcConversationSettingsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcConversationSettingsFormComponent, isStandalone: true, selector: "dc-conversation-settings-form", inputs: { form: "form", textEngineOptions: "textEngineOptions", conversationOptions: "conversationOptions", voiceTTSOptions: "voiceTTSOptions" }, providers: [DialogService], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"p-6 bg-white rounded-lg shadow-md space-y-6\">\n  <h3 class=\"text-xl font-bold text-gray-900 border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div>\n    <label for=\"rules\" class=\"block text-sm font-medium text-gray-700\">\n      Conversation Rules\n      <span pTooltip=\"Add rules to the conversation\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n    </label>\n    <p-select id=\"rules\" [options]=\"rules\" (onChange)=\"addRule($event.value)\" placeholder=\"Select a Rule\" optionLabel=\"name\" class=\"w-full\"></p-select>\n\n    <div formArrayName=\"rules\" class=\"mt-4 space-y-2\">\n      @for (rule of rulesFormArray.controls; track rule; let i = $index) {\n      <div [formGroupName]=\"i\" class=\"flex items-center justify-between p-2 border rounded-md\">\n        <span>{{ rule.value.name }}</span>\n        <button pButton type=\"button\" icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\" (click)=\"removeRule(i)\"></button>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium text-gray-700\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium text-gray-700\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium text-gray-700\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium text-gray-700\">\n        User Must Start\n        <span pTooltip=\"If true the user must start the conversation, ignoring first message if any.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"userMustStart\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-voice-tts-form [form]=\"mainVoiceFormGroup\" [title]=\"'Main Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <dc-voice-tts-form [form]=\"secondaryVoiceFormGroup\" [title]=\"'Secondary Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n  <hr />\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcConversationSettingsFormComponent, isStandalone: true, selector: "dc-conversation-settings-form", inputs: { form: "form", textEngineOptions: "textEngineOptions", conversationOptions: "conversationOptions", voiceTTSOptions: "voiceTTSOptions" }, providers: [DialogService], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"p-6 bg-white rounded-lg shadow-md space-y-6\">\n  <h3 class=\"text-xl font-bold text-gray-900 border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div>\n    <label for=\"rules\" class=\"block text-sm font-medium text-gray-700\">\n      Conversation Rules\n      <span pTooltip=\"Add rules to the conversation\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n    </label>\n    <p-select id=\"rules\" [options]=\"rules\" (onChange)=\"addRule($event.value)\" placeholder=\"Select a Rule\" optionLabel=\"name\" class=\"w-full\"></p-select>\n\n    <div formArrayName=\"rules\" class=\"mt-4 space-y-2\">\n      @for (rule of rulesFormArray.controls; track rule; let i = $index) {\n      <div [formGroupName]=\"i\" class=\"flex items-center justify-between p-2 border rounded-md\">\n        <span>{{ rule.value.name }}</span>\n        <button pButton type=\"button\" icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\" (click)=\"removeRule(i)\"></button>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium text-gray-700\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium text-gray-700\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium text-gray-700\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium text-gray-700\">\n        User Must Start\n        <span pTooltip=\"If true the user must start the conversation, ignoring first message if any.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"userMustStart\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-voice-tts-form [form]=\"mainVoiceFormGroup\" [title]=\"'Main Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <dc-voice-tts-form [form]=\"secondaryVoiceFormGroup\" [title]=\"'Secondary Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n  <hr />\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcConversationSettingsFormComponent, decorators: [{
             type: Component,
@@ -6293,7 +6358,6 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.fb = inject(FormBuilder);
         this.entityCommunicationService = inject(CONVERSATION_AI_TOKEN);
         this.dialogService = inject(DialogService);
-        this.promptBuilder = inject(ConversationPromptBuilderService);
         this.characterFormGroupService = inject(CharacterFormGroupService);
         // select options
         this.conversationOptions = ConversationTypeOptions;
@@ -6304,7 +6368,6 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.storageSettings = input(this.getSettings(), ...(ngDevMode ? [{ debugName: "storageSettings" }] : []));
         this.onSave = output();
         this.onGoDetails = output();
-        this.onTranslate = output();
         this.form = this.characterFormGroupService.createAgentCardForm();
         this.isGenerating = signal(false, ...(ngDevMode ? [{ debugName: "isGenerating" }] : []));
     }
@@ -6321,6 +6384,9 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.characterFormGroupService.handleArrayForms(this.form, agentCard);
         this.characterFormGroupService.handleTranslationForm(this.form, agentCard);
         this.storageSettings().path = 'conversation-cards/' + this.entityId();
+        if (agentCard.learnable) {
+            this.form.get('learnable')?.patchValue(agentCard.learnable);
+        }
     }
     async save() {
         const result = await super.save();
@@ -6388,29 +6454,6 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
     goToDetails() {
         this.onGoDetails.emit(this.entityId());
     }
-    translate() {
-        const langControl = this.form.get('lang');
-        if (!langControl?.value) {
-            if (this.toastService) {
-                this.toastService.error({
-                    title: 'Translation Error',
-                    subtitle: 'Please specify the current language using the Language field',
-                });
-            }
-            return;
-        }
-        const dialogRef = this.dialogService.open(TranslateDialogComponent, {
-            data: { currentLang: langControl.value },
-            width: '400px',
-        });
-        dialogRef.onClose.subscribe((targetLang) => {
-            if (targetLang) {
-                const currentDataCard = { ...this.entity(), ...this.form.value };
-                const data = { card: currentDataCard, currentLang: langControl.value, targetLang, id: this.entityId() };
-                this.onTranslate.emit(data);
-            }
-        });
-    }
     downloadConversation() {
         const data = this.form.value;
         const cardData = this.entity();
@@ -6476,7 +6519,6 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         dialogRef.onClose.subscribe(async (result) => {
             console.log(result);
             if (result?.langTranslation) {
-                this.toastService.info({ title: 'Character generated', subtitle: 'No te olvides de guardar cambios si estas seguro' });
                 // this.form.controls.characterCard.patchValue({ data: result });
                 const card = this.entity();
                 card.characterCard.data.langTranslation = result.langTranslation;
@@ -6485,18 +6527,22 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
                 if (card && card.characterCard?.data?.langTranslation) {
                     this.characterFormGroupService.handleTranslationForm(this.form, card);
                 }
+                await this.save();
+                this.toastService.info({ title: 'Se detectó una Traducción', subtitle: 'Se guardaron los datos' });
             }
             else if (result) {
-                this.toastService.success({ title: 'Character generated', subtitle: 'No te olvides de guardar cambios si estas seguro' });
                 this.entity.update((card) => ({ ...card, characterCard: { ...card.characterCard, data: result } }));
                 this.form.controls.characterCard.patchValue({ data: result });
                 this.characterFormGroupService.createAndPatchCharacterArrayForm(this.form, this.entity());
+                await this.save();
+                this.toastService.success({ title: 'Character generated', subtitle: 'Se guardaron los datos' });
             }
             else {
-                this.toastService.error({
-                    title: 'Algo salió mal :/',
-                    subtitle: 'La información no pudo ser extraída correcamente, pero no te preocupes, puedes intentar de nuevo',
-                });
+                // debugger;
+                // this.toastService.error({
+                //   title: 'Algo salió mal :/',
+                //   subtitle: 'La información no pudo ser extraída correcamente, pero no te preocupes, puedes intentar de nuevo',
+                // });
             }
             this.isGenerating.set(false);
         });
@@ -6527,15 +6573,13 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.router.navigate(['../../cards-creator'], { relativeTo: this.route });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCAgentCardFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n    <p-button severity=\"danger\" (click)=\"deleteCard()\" icon=\"pi pi-trash\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts) {\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$7.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled", "metadata"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSave: "onSave", onGoDetails: "onGoDetails" }, providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n    <p-button severity=\"danger\" (click)=\"deleteCard()\" icon=\"pi pi-trash\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts) {\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled", "metadata"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-agent-form', standalone: true, providers: [DialogService], imports: [
                         ReactiveFormsModule,
                         AssetsLoaderComponent,
-                        OverlayModule,
-                        PortalModule,
                         ButtonModule,
                         InputTextModule,
                         CheckboxModule,
@@ -6556,7 +6600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         DcLearnableFormComponent,
                         SimpleUploaderComponent,
                         TextareaModule,
-                    ], template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n    <p-button severity=\"danger\" (click)=\"deleteCard()\" icon=\"pi pi-trash\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts) {\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
+                    ], template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n    <p-button severity=\"danger\" (click)=\"deleteCard()\" icon=\"pi pi-trash\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts) {\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
         }] });
 
 class TruncatePipe {
@@ -6619,7 +6663,7 @@ class AgentCardUI {
         }
         else {
             description = this.card()?.characterCard?.data?.hook || this.card()?.characterCard?.data?.creator_notes || this.card()?.description || '';
-            this.name.set(this.card()?.name || this.card()?.title);
+            this.name.set(this.card()?.name);
         }
         description = description?.replace(/{{char}}/g, this.card()?.name).replace(/{{user}}/g, this.userService.userName());
         this.finalDescription.set(description);
@@ -6636,7 +6680,7 @@ class AgentCardUI {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AgentCardUI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AgentCardUI, isStandalone: true, selector: "dc-agent-card-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: { onAction: "onAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(this.userService.isAdmin()) {\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      [tooltipOptions]=\"{ tooltipPosition: 'top' }\"\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)=\"eventCard(eventType.Select)\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ name() }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"finalDescription() | truncate : 200\"></span>\n    </p>\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      @if(isTaken()){\n      <p-tag icon=\"pi pi-check-circle\" severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n      } @if(userService.isAdmin()){\n\n      <p-tag icon=\"pi pi-eye\" severity=\"secondary\" [value]=\"card()?.manageable?.status || 'Sin estado'\" [rounded]=\"true\" />\n      }\n    </div>\n\n    <p-button\n      (click)=\"eventCard(eventType.Select); $event.stopPropagation()\"\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: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$8.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$7.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AgentCardUI, isStandalone: true, selector: "dc-agent-card-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: { onAction: "onAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(this.userService.isAdmin()) {\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      [tooltipOptions]=\"{ tooltipPosition: 'top' }\"\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)=\"eventCard(eventType.Select)\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ name() }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"finalDescription() | truncate : 200\"></span>\n    </p>\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      @if(isTaken()){\n      <p-tag icon=\"pi pi-check-circle\" severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n      } @if(userService.isAdmin()){\n\n      <p-tag icon=\"pi pi-eye\" severity=\"secondary\" [value]=\"card()?.manageable?.status || 'Sin estado'\" [rounded]=\"true\" />\n      }\n    </div>\n\n    <p-button\n      (click)=\"eventCard(eventType.Select); $event.stopPropagation()\"\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: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$9.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$8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AgentCardUI, decorators: [{
             type: Component,
@@ -6899,11 +6943,11 @@ class DcAgentCardDetailsComponent {
         this.showInfoLayer.update((value) => !value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      <!-- This video is affected by Plyr i set by default background transparent -->\n      <video #videoPlayer class=\"card-image\"></video>\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      @if(!chatMonitorService.isConversationActive()) {\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n      }\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.title }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$7.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      <!-- This video is affected by Plyr i set by default background transparent -->\n      <video #videoPlayer class=\"card-image\"></video>\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      @if(!chatMonitorService.isConversationActive()) {\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n      }\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.name }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      <!-- This video is affected by Plyr i set by default background transparent -->\n      <video #videoPlayer class=\"card-image\"></video>\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      @if(!chatMonitorService.isConversationActive()) {\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n      }\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.title }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
+            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      <!-- This video is affected by Plyr i set by default background transparent -->\n      <video #videoPlayer class=\"card-image\"></video>\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      @if(!chatMonitorService.isConversationActive()) {\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n      }\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.name }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
         }], ctorParameters: () => [], propDecorators: { agentCardId: [{
                 type: Input
             }], videoPlayer: [{
@@ -7089,7 +7133,7 @@ class ConversationRuleListComponent extends EntityBaseListComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConversationRuleListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ConversationRuleListComponent, isStandalone: true, selector: "app-conversationRule-list", usesInheritance: true, ngImport: i0, template: "@if (!onlyView()) {\n<p-button [icon]=\"viewType() === 'card' ? 'pi pi-table' : 'pi pi-list'\" label=\"Change View\" [link]=\"true\" (click)=\"toggleView()\" />\n}\n<div class=\"conversationRule-list-container\">\n  <dc-filter-bar [isAdmin]=\"userService.isAdmin()\" [options]=\"filterBarOptions\" (onNew)=\"onNew()\" (onFilterAction)=\"doAction($event)\"></dc-filter-bar>\n\n  @if (viewType() === 'card') {\n  <div class=\"conversationRule-list-content\">\n    @for (conversationRule of items(); track conversationRule.id) {\n    <div class=\"card-source\">\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(conversationRule)\"\n          [radius]=\"70\"\n          type=\"quarter-circle\"\n          direction=\"down-left\"\n          [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true }\" />\n      </div>\n      <p-card [header]=\"conversationRule.name\">\n        <p class=\"m-0\">{{ conversationRule.description | slice : 0 : 250 }}...</p>\n        <span>{{ conversationRule?.auditable?.updatedAt | date : 'dd/MM/yyyy HH:mm' }}</span>\n      </p-card>\n    </div>\n    } @if (items().length === 0) {\n    <p-card>\n      <p>No conversationRules found</p>\n    </p-card>\n    }\n  </div>\n  } @else if ( viewType() === 'table'){\n\n  <app-quick-table [tableData]=\"items()\"></app-quick-table>\n\n  }\n\n  <div class=\"paginator-container\">\n    <p-paginator\n      currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n      [showCurrentPageReport]=\"true\"\n      (onPageChange)=\"onPageChange($event)\"\n      [first]=\"first\"\n      [rows]=\"rows\"\n      [totalRecords]=\"totalRecords\"\n      [rowsPerPageOptions]=\"[10, 20, 30]\">\n    </p-paginator>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.conversationRule-list-container{display:flex;flex-direction:column;height:100%}.conversationRule-list-content{margin-top:10px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin-bottom:10px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$7.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "isAdmin"], outputs: ["onFilterAction", "onNew"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$8.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: PaginatorModule }, { kind: "component", type: i1$6.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ConversationRuleListComponent, isStandalone: true, selector: "app-conversationRule-list", usesInheritance: true, ngImport: i0, template: "@if (!onlyView()) {\n<p-button [icon]=\"viewType() === 'card' ? 'pi pi-table' : 'pi pi-list'\" label=\"Change View\" [link]=\"true\" (click)=\"toggleView()\" />\n}\n<div class=\"conversationRule-list-container\">\n  <dc-filter-bar [isAdmin]=\"userService.isAdmin()\" [options]=\"filterBarOptions\" (onNew)=\"onNew()\" (onFilterAction)=\"doAction($event)\"></dc-filter-bar>\n\n  @if (viewType() === 'card') {\n  <div class=\"conversationRule-list-content\">\n    @for (conversationRule of items(); track conversationRule.id) {\n    <div class=\"card-source\">\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(conversationRule)\"\n          [radius]=\"70\"\n          type=\"quarter-circle\"\n          direction=\"down-left\"\n          [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true }\" />\n      </div>\n      <p-card [header]=\"conversationRule.name\">\n        <p class=\"m-0\">{{ conversationRule.description | slice : 0 : 250 }}...</p>\n        <span>{{ conversationRule?.auditable?.updatedAt | date : 'dd/MM/yyyy HH:mm' }}</span>\n      </p-card>\n    </div>\n    } @if (items().length === 0) {\n    <p-card>\n      <p>No conversationRules found</p>\n    </p-card>\n    }\n  </div>\n  } @else if ( viewType() === 'table'){\n\n  <app-quick-table [tableData]=\"items()\"></app-quick-table>\n\n  }\n\n  <div class=\"paginator-container\">\n    <p-paginator\n      currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n      [showCurrentPageReport]=\"true\"\n      (onPageChange)=\"onPageChange($event)\"\n      [first]=\"first\"\n      [rows]=\"rows\"\n      [totalRecords]=\"totalRecords\"\n      [rowsPerPageOptions]=\"[10, 20, 30]\">\n    </p-paginator>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.conversationRule-list-container{display:flex;flex-direction:column;height:100%}.conversationRule-list-content{margin-top:10px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin-bottom:10px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters", "isAdmin"], outputs: ["onFilterAction", "onNew"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$9.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: PaginatorModule }, { kind: "component", type: i1$6.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConversationRuleListComponent, decorators: [{
             type: Component,
@@ -7165,7 +7209,7 @@ class ConversationRuleFormComponent extends EntityBaseFormComponent {
         alert('Relation selected');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConversationRuleFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ConversationRuleFormComponent, isStandalone: true, selector: "app-conversation-rule-form", usesInheritance: true, ngImport: i0, template: "<h3>ConversationRules Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Conversation Rule' : 'New Conversation Rule'\">\n    <form [formGroup]=\"form\">\n      <div style=\"display: flex; gap: 10px\">\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"1\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"rule\" class=\"block\">Rule</label>\n            <textarea id=\"rule\" pTextarea formControlName=\"rule\" rows=\"3\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button (click)=\"save()\" label=\"Save Rule\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n\n    <p-dialog header=\"Search for relation\" [(visible)]=\"isDialogVisible\" [modal]=\"true\" [style]=\"{ width: '50vw' }\" draggable=\"false\">\n      <app-conversationRule-list [onlyView]=\"true\" (onSelect)=\"handleRelationSelection($event)\"></app-conversationRule-list>\n    </p-dialog>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$7.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: ConversationRuleListComponent, selector: "app-conversationRule-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ConversationRuleFormComponent, isStandalone: true, selector: "app-conversation-rule-form", usesInheritance: true, ngImport: i0, template: "<h3>ConversationRules Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Conversation Rule' : 'New Conversation Rule'\">\n    <form [formGroup]=\"form\">\n      <div style=\"display: flex; gap: 10px\">\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"1\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"rule\" class=\"block\">Rule</label>\n            <textarea id=\"rule\" pTextarea formControlName=\"rule\" rows=\"3\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button (click)=\"save()\" label=\"Save Rule\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n\n    <p-dialog header=\"Search for relation\" [(visible)]=\"isDialogVisible\" [modal]=\"true\" [style]=\"{ width: '50vw' }\" draggable=\"false\">\n      <app-conversationRule-list [onlyView]=\"true\" (onSelect)=\"handleRelationSelection($event)\"></app-conversationRule-list>\n    </p-dialog>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: ConversationRuleListComponent, selector: "app-conversationRule-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConversationRuleFormComponent, decorators: [{
             type: Component,