@dataclouder/ngx-agent-cards 0.1.16 → 0.1.18

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

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, inject, RendererFactory2, ApplicationRef, Injector, EnvironmentInjector, signal, createComponent, Pipe, input, output, Input, Component, effect, ViewChild, computed, DestroyRef, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, EventEmitter, Output, ViewChildren } from '@angular/core';
+import { formatCamelCaseString, HttpCoreService, AudioSpeed as AudioSpeed$1, TOAST_ALERTS_TOKEN, EModelQuality, AudioSpeedReverse, ModelQualityOptions, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule, DatePipe, DecimalPipe, NgComponentOutlet } from '@angular/common';
-import { HttpCoreService, AudioSpeed as AudioSpeed$1, TOAST_ALERTS_TOKEN, EModelQuality, AudioSpeedReverse, ModelQualityOptions, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
+import { nanoid } from 'nanoid';
 import { DynamicDialogRef, DialogService, DynamicDialogConfig, DynamicDialogModule } from 'primeng/dynamicdialog';
 import * as i1$3 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i2 from 'primeng/progressbar';
+import * as i2$1 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
+import * as i2 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
 import * as i1 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, FormBuilder, FormsModule, FormArray } from '@angular/forms';
-import { MicVadComponent } from '@dataclouder/ngx-mic';
-import * as i3 from 'primeng/textarea';
+import { FormControl, ReactiveFormsModule, FormBuilder, FormsModule, FormArray, FormGroup } from '@angular/forms';
+import { DCMicComponent, MicVadComponent } from '@dataclouder/ngx-mic';
+import * as i4 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
-import * as i2$1 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import { nanoid } from 'nanoid';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, fromEvent, filter } from 'rxjs';
 import { takeUntil, map } from 'rxjs/operators';
@@ -25,7 +25,7 @@ import { SkeletonModule } from 'primeng/skeleton';
 import * as i2$3 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import { SliderModule } from 'primeng/slider';
-import * as i3$1 from 'primeng/radiobutton';
+import * as i3 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { RatingModule } from 'primeng/rating';
 import { TableModule } from 'primeng/table';
@@ -39,11 +39,13 @@ import { SelectModule } from 'primeng/select';
 import { ActivatedRoute, Router } from '@angular/router';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { PortalModule } from '@angular/cdk/portal';
-import * as i3$2 from 'primeng/inputtext';
+import * as i3$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i6 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import { MultiImagesStorageService, ResolutionType, AspectType, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
+import * as i12 from 'primeng/inputnumber';
+import { InputNumberModule } from 'primeng/inputnumber';
 import { DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';
 import * as i6$1 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
@@ -52,7 +54,7 @@ import { PopoverModule } from 'primeng/popover';
 import * as i2$4 from 'primeng/card';
 import { CardModule } from 'primeng/card';
 import { ChipModule } from 'primeng/chip';
-import * as i3$3 from 'primeng/listbox';
+import * as i3$2 from 'primeng/listbox';
 import { ListboxModule } from 'primeng/listbox';
 import * as i9 from 'primeng/inputgroupaddon';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
@@ -62,7 +64,7 @@ import * as i1$4 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i2$5 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
-import * as i4 from 'primeng/tag';
+import * as i4$1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 
 const characterCardStringDataDefinition = `
@@ -432,6 +434,42 @@ const ConversationTypeOptions = [
     { value: ConversationType.LanguagePractice, label: 'Language Practice Conversation' },
 ];
 
+function extractJsonFromResponse(content) {
+    // Match everything between the first { and last } OR first [ and last ]
+    const jsonMatch = content.match(/(\{[\s\S]*?\}|\[[\s\S]*?\])/);
+    if (!jsonMatch)
+        return null;
+    try {
+        return JSON.parse(jsonMatch[0]);
+    }
+    catch (error) {
+        console.error('Error parsing JSON:', error);
+        return null;
+    }
+}
+
+var EDoActionType;
+(function (EDoActionType) {
+    EDoActionType["ChangePrompt"] = "changePrompt";
+    EDoActionType["ChangeModel"] = "changeModel";
+    EDoActionType["Summarize"] = "summarize";
+})(EDoActionType || (EDoActionType = {}));
+const DoActionTypeOptions = [
+    { label: 'Cambiar Prompt', value: EDoActionType.ChangePrompt },
+    { label: 'Cambiar Modelo (Pendiente)', value: EDoActionType.ChangeModel },
+    { label: 'Resumir (Pendiente)', value: EDoActionType.Summarize },
+];
+var SystemPromptType;
+(function (SystemPromptType) {
+    SystemPromptType["SystemPrompt"] = "systemPrompt";
+    SystemPromptType["ConversationType"] = "conversationType";
+    SystemPromptType["UserInformation"] = "userInformation";
+    SystemPromptType["CharacterDescription"] = "characterDescription";
+    SystemPromptType["ScenarioDescription"] = "scenarioDescription";
+    SystemPromptType["MessageExamples"] = "messageExamples";
+    SystemPromptType["JailBreak"] = "jailBreak";
+})(SystemPromptType || (SystemPromptType = {}));
+
 class AudioService {
     playFinishRecordingAudio() {
         const audio = new Audio('assets/sounds/circuitbreaker.mp3');
@@ -612,7 +650,7 @@ function getDefaultPromptByType(conversationType) {
     const prompt = defaultPrompts[conversationType];
     if (!prompt) {
         console.warn('There is no prompt template for conversation type', conversationType);
-        return 'default instructions: just continue the conversation';
+        return '';
     }
     return prompt;
 }
@@ -658,7 +696,7 @@ class DCConversationPromptBuilderService {
     convertConversationToHtml(messages, jailBrake = '') {
         let finalPrompt = '';
         for (const message of messages) {
-            finalPrompt += `<h5>${message.role}</h5>`;
+            finalPrompt += `<h5> <b class='text-blue-700'>${formatCamelCaseString(message.role)}</b> <b class='text-red-700'>${formatCamelCaseString(message.messageId)}</b></h5>`;
             finalPrompt += `<p>${message.content} </p>`;
         }
         if (jailBrake) {
@@ -684,25 +722,27 @@ class DCConversationPromptBuilderService {
         return text;
     }
     buildInitialConversation(characterCard, conversationType = ConversationType.General) {
-        let systemPromptInstructions = getDefaultPromptByType(conversationType);
+        const chat = [];
         if (characterCard?.data?.system_prompt) {
-            systemPromptInstructions = characterCard.data.system_prompt;
+            chat.push({ role: ChatRole.System, content: characterCard?.data?.system_prompt, messageId: SystemPromptType.SystemPrompt });
+        }
+        let systemPromptInstructions = getDefaultPromptByType(conversationType);
+        if (systemPromptInstructions) {
+            chat.push({ role: ChatRole.System, content: systemPromptInstructions, messageId: SystemPromptType.ConversationType });
         }
         if (this.userDataExchange.getUserDataInformation()) {
-            systemPromptInstructions += '\nHere some information about the user:\n' + this.userDataExchange.getUserDataInformation();
+            chat.push({ role: ChatRole.System, content: this.userDataExchange.getUserDataInformation(), messageId: SystemPromptType.UserInformation });
         }
-        const chat = [];
-        chat.push({ role: ChatRole.System, content: systemPromptInstructions });
         if (characterCard.data.description) {
-            chat.push({ role: ChatRole.System, content: characterCard.data.description });
+            chat.push({ role: ChatRole.System, content: characterCard.data.description, messageId: SystemPromptType.CharacterDescription });
         }
         if (characterCard.data.scenario) {
             const scenarioDesc = 'Simple description for the Scenario: ' + characterCard.data.scenario;
-            chat.push({ role: ChatRole.System, content: scenarioDesc });
+            chat.push({ role: ChatRole.System, content: scenarioDesc, messageId: SystemPromptType.ScenarioDescription });
         }
         if (characterCard.data.mes_example) {
             const examples = 'Here are some examples of how {{char}} could response to {{user}}: ' + characterCard.data.mes_example;
-            chat.push({ role: ChatRole.System, content: examples });
+            chat.push({ role: ChatRole.System, content: examples, messageId: SystemPromptType.MessageExamples });
         }
         const gretting = this.selectOneRandomGreeting(characterCard.data.first_mes, characterCard.data.alternate_greetings);
         chat.push({ role: ChatRole.System, content: '[Start a new Chat]' });
@@ -917,6 +957,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }] });
 
+class MessagesStateService {
+    constructor() {
+        this.messagesSignal = signal([]);
+    }
+    getMessagesSignal() {
+        return this.messagesSignal;
+    }
+    addMessage(message) {
+        if (!message.messageId) {
+            message.messageId = nanoid();
+        }
+        this.messagesSignal.update((messages) => [...messages, message]);
+        console.log('Message added via MessagesStateService:', this.messagesSignal());
+        return message.messageId;
+    }
+    updateMessage(messageId, updatedMessage, insertIfNotFound = false) {
+        let found = false;
+        this.messagesSignal.update((messages) => messages.map((message) => {
+            if (message.messageId === messageId) {
+                found = true;
+                return { ...message, ...updatedMessage };
+            }
+            return message;
+        }));
+        if (!found && insertIfNotFound) {
+            const newMessage = { ...updatedMessage, messageId };
+            this.addMessage(newMessage);
+        }
+        return found;
+    }
+    clearMessages() {
+        this.messagesSignal.set([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessagesStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessagesStateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessagesStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class DynamicFlowService {
+    constructor() {
+        this.messagesStateService = inject(MessagesStateService);
+        // State
+        this.conversationFlowState = signal(null);
+    }
+    setConversationFlow(conversationFlow) {
+        this.conversationFlowState.set(conversationFlow);
+    }
+    changePrompt() {
+        // This method is currently empty as per requirements.
+        console.log('DynamicConditionsService: changePrompt called');
+        this.removeSystemPrompts(); // Example call, assuming this is the intended flow
+    }
+    doConditions(condition) {
+        condition.do?.forEach((action) => {
+            switch (action.actionType) {
+                case EDoActionType.ChangePrompt:
+                    this.doActionPrompt(action);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    doActionPrompt(action) {
+        const prompt = action.prompt;
+        const messageId = action.systemPromptType;
+        this.messagesStateService.updateMessage(messageId, { content: prompt, role: ChatRole.System }, true);
+        console.log('DynamicConditionsService: doActionPrompt called', this.messagesStateService.getMessagesSignal()());
+        console.log('DynamicConditionsService: doActionPrompt called');
+    }
+    removeSystemPrompts() {
+        const idsToRemove = [
+            // Ensure idsToRemove is string array
+            SystemPromptType.ScenarioDescription,
+            SystemPromptType.MessageExamples,
+            SystemPromptType.UserInformation,
+            SystemPromptType.CharacterDescription,
+        ];
+        const currentMessages = this.messagesStateService.getMessagesSignal()();
+        const filteredMessages = currentMessages.filter((message) => !idsToRemove.includes(message.messageId));
+        this.messagesStateService.clearMessages();
+        filteredMessages.forEach((msg) => this.messagesStateService.addMessage(msg));
+        console.log('System prompts removed, messages updated in state:', this.messagesStateService.getMessagesSignal()());
+    }
+    checkDynamicConditions(previousScore, currentScore) {
+        const dynamicConditions = this.conversationFlowState()?.dynamicConditions;
+        if (dynamicConditions) {
+            dynamicConditions.forEach((condition) => {
+                if (condition.what === EntityWhat.Goal) {
+                    if (condition.when === EntityWhen.GreaterThanOrEqual) {
+                        const conditionValue = Number(condition.value);
+                        // Check if the condition was not met before but is met now
+                        if (previousScore < conditionValue && currentScore >= conditionValue) {
+                            this.doConditions(condition);
+                            // alert('Goal Condition met: Score reached ' + conditionValue);
+                        }
+                    }
+                    // Add more condition checks for 'when' if necessary (e.g., LessThanOrEqual, Equal)
+                }
+                // Add more condition checks for 'what' if necessary
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicFlowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicFlowService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicFlowService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * SafeJsonPipe - A pipe that safely stringifies objects with circular references
  * This pipe handles circular references and DOM objects that can't be serialized
@@ -987,26 +1145,12 @@ class ChatHeaderComponent {
     settingsClick() {
         this.settingsClickEvent.emit();
     }
-    async changeConversationCard() {
-        const response = prompt('¿Qué conversación quieres usar? Escribe el titulo ejemplo: word_reflection_level_1_base_es');
-        if (response) {
-            const filters = {
-                filters: {
-                    title: { $regex: response },
-                },
-            };
-            console.log('filters', filters);
-            const conversationCards = await this.agentCardService.filterConversationCards(filters);
-            console.log('conversationCards', conversationCards);
-            this.alternativeConversation = conversationCards.rows;
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatHeaderComponent, isStandalone: true, selector: "dc-chat-header", inputs: { isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, alternativeConversation: { classPropertyName: "alternativeConversation", publicName: "alternativeConversation", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null } }, 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 {\n      Reiniciar conversaci\u00F3n\n    }\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 (isAdmin()){\n    <div class=\"admin-controls\">\n      <span class=\"pointer\" (click)=\"changeConversationCard()\"> \uD83D\uDD04 </span>\n      <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span>\n    </div>\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatHeaderComponent, isStandalone: true, selector: "dc-chat-header", inputs: { isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, alternativeConversation: { classPropertyName: "alternativeConversation", publicName: "alternativeConversation", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null } }, 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 (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\n      <!-- <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span> -->\n    </div>\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat-header', standalone: true, imports: [], template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n      {{ agentCard.title }}\n    } @else {\n      Reiniciar conversaci\u00F3n\n    }\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 (isAdmin()){\n    <div class=\"admin-controls\">\n      <span class=\"pointer\" (click)=\"changeConversationCard()\"> \uD83D\uDD04 </span>\n      <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span>\n    </div>\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"] }]
+            args: [{ selector: 'dc-chat-header', standalone: true, imports: [ButtonModule], 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 (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\n      <!-- <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span> -->\n    </div>\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { alternativeConversation: [{
                 type: Input
             }], agentCard: [{
@@ -1520,11 +1664,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }] });
 
+// Helper function to get context messages based on type
+function getContextMessages(messages, contextType) {
+    const conversationMessages = messages.filter((message) => [ChatRole.User, ChatRole.Assistant].includes(message.role));
+    if (conversationMessages.length === 0) {
+        return [];
+    }
+    switch (contextType) {
+        case ContextType.LastAssistantMessage: {
+            const lastAssistant = conversationMessages
+                .slice()
+                .reverse()
+                .find((m) => m.role === ChatRole.Assistant);
+            return lastAssistant ? [lastAssistant] : [];
+        }
+        case ContextType.LastUserMessage: {
+            const lastUser = conversationMessages
+                .slice()
+                .reverse()
+                .find((m) => m.role === ChatRole.User);
+            return lastUser ? [lastUser] : [];
+        }
+        case ContextType.LastDialog: {
+            const lastUser = conversationMessages
+                .slice()
+                .reverse()
+                .find((m) => m.role === ChatRole.User);
+            const lastAssistant = conversationMessages
+                .slice()
+                .reverse()
+                .find((m) => m.role === ChatRole.Assistant);
+            const dialog = [];
+            if (lastAssistant)
+                dialog.push(lastAssistant);
+            if (lastUser)
+                dialog.push(lastUser);
+            // Sort by timestamp if available, otherwise keep order [Assistant, User] if both exist
+            // Assuming messageId or a timestamp property exists and is comparable
+            // dialog.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0)); // Example sorting
+            return dialog;
+        }
+        case ContextType.Last2Dialogs: {
+            // I think i have an error with this.
+            const users = conversationMessages.filter((m) => m.role === ChatRole.User);
+            const assistants = conversationMessages.filter((m) => m.role === ChatRole.Assistant);
+            const lastTwoUsers = users.slice(-2);
+            const lastTwoAssistants = assistants.slice(-2);
+            const dialogs = [...lastTwoAssistants, ...lastTwoUsers];
+            // Sort by timestamp if available
+            // dialogs.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0)); // Example sorting
+            return dialogs;
+        }
+        case ContextType.LastUserAndPreviousAssistant: {
+            const lastUserIndex = conversationMessages.map((m) => m.role).lastIndexOf(ChatRole.User);
+            // Not exactrly getting the last assistant will depend if conversation is one and one.
+            if (lastUserIndex <= 0) {
+                return [];
+            }
+            const messages = conversationMessages.slice(lastUserIndex - 1, lastUserIndex + 1);
+            console.log('LastUserAndPreviousAssistant', messages);
+            return messages;
+        }
+        case ContextType.AllConversation:
+        default:
+            return conversationMessages;
+    }
+}
+
 class EvaluationService {
     constructor() {
         // Services
         this.defaultAgentCardService = inject(DefaultAgentCardsService);
         this.toastService = inject(TOAST_ALERTS_TOKEN);
+        this.dynamicFlowService = inject(DynamicFlowService);
         // Signals
         this.scoreSignal = signal(0); // Only Score
         this.evaluationResultSignal = signal(null); // Not sure if ill give some use
@@ -1582,75 +1794,9 @@ This is the conversation history:
         return jsonData;
     }
     getConversationString(messages, contextType) {
-        const contextMessages = this.getContextMessages(messages, contextType);
+        const contextMessages = getContextMessages(messages, contextType);
         return contextMessages.map((message) => `${message.role}: ${message.content}`).join('\n');
     }
-    // Helper function to get context messages based on type
-    getContextMessages(messages, contextType) {
-        const conversationMessages = messages.filter((message) => [ChatRole.User, ChatRole.Assistant].includes(message.role));
-        if (conversationMessages.length === 0) {
-            return [];
-        }
-        switch (contextType) {
-            case ContextType.LastAssistantMessage: {
-                const lastAssistant = conversationMessages
-                    .slice()
-                    .reverse()
-                    .find((m) => m.role === ChatRole.Assistant);
-                return lastAssistant ? [lastAssistant] : [];
-            }
-            case ContextType.LastUserMessage: {
-                const lastUser = conversationMessages
-                    .slice()
-                    .reverse()
-                    .find((m) => m.role === ChatRole.User);
-                return lastUser ? [lastUser] : [];
-            }
-            case ContextType.LastDialog: {
-                const lastUser = conversationMessages
-                    .slice()
-                    .reverse()
-                    .find((m) => m.role === ChatRole.User);
-                const lastAssistant = conversationMessages
-                    .slice()
-                    .reverse()
-                    .find((m) => m.role === ChatRole.Assistant);
-                const dialog = [];
-                if (lastAssistant)
-                    dialog.push(lastAssistant);
-                if (lastUser)
-                    dialog.push(lastUser);
-                // Sort by timestamp if available, otherwise keep order [Assistant, User] if both exist
-                // Assuming messageId or a timestamp property exists and is comparable
-                // dialog.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0)); // Example sorting
-                return dialog;
-            }
-            case ContextType.Last2Dialogs: {
-                // I think i have an error with this.
-                const users = conversationMessages.filter((m) => m.role === ChatRole.User);
-                const assistants = conversationMessages.filter((m) => m.role === ChatRole.Assistant);
-                const lastTwoUsers = users.slice(-2);
-                const lastTwoAssistants = assistants.slice(-2);
-                const dialogs = [...lastTwoAssistants, ...lastTwoUsers];
-                // Sort by timestamp if available
-                // dialogs.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0)); // Example sorting
-                return dialogs;
-            }
-            case ContextType.LastUserAndPreviousAssistant: {
-                const lastUserIndex = conversationMessages.map((m) => m.role).lastIndexOf(ChatRole.User);
-                // Not exactrly getting the last assistant will depend if conversation is one and one.
-                if (lastUserIndex <= 0) {
-                    return [];
-                }
-                const messages = conversationMessages.slice(lastUserIndex - 1, lastUserIndex + 1);
-                console.log('LastUserAndPreviousAssistant', messages);
-                return messages;
-            }
-            case ContextType.AllConversation:
-            default:
-                return conversationMessages;
-        }
-    }
     /**
      * Diference with evaluateConversation is task is already processed here.
      * Evaluates a conversation context based on a specific task and attaches the result to a designated message.
@@ -1677,10 +1823,18 @@ This is the conversation history:
         }
     }
     updateScore(additionalScore) {
-        this.scoreSignal.update((currentScore) => {
-            const newScore = currentScore + additionalScore * 10;
-            return newScore > 100 ? 100 : newScore;
-        });
+        // Aqui tengo que verificar que se cumple condición de goal!
+        const previuesScore = this.scoreSignal();
+        const newScore = previuesScore + additionalScore * 10;
+        // How to add the conditions dynamically?
+        this.dynamicFlowService.checkDynamicConditions(previuesScore, newScore);
+        if (newScore > 100) {
+            this.scoreSignal.set(100);
+        }
+        else {
+            console.log('Score updated to:', newScore);
+            this.scoreSignal.set(newScore);
+        }
     }
     resetScore() {
         this.scoreSignal.set(0);
@@ -1704,27 +1858,23 @@ const EvaluationStructureString = `
 class ConversationService {
     constructor() {
         this.defaultAgentCardService = inject(DefaultAgentCardsService);
+        // Services
+        this.toastAlerts = inject(TOAST_ALERTS_TOKEN);
         this.messageProcessingService = inject(MessageProcessingService);
         this.conversationBuilder = inject(DCConversationPromptBuilderService);
         this.userDataExchange = inject(USER_DATA_EXCHANGE);
         this.evaluationService = inject(EvaluationService);
+        this.messagesStateService = inject(MessagesStateService);
+        this.dynamicFlowService = inject(DynamicFlowService);
         // State Signals
-        this.messagesSignal = signal([]);
         this.isThinkingSignal = signal(false);
-        this.conversationSettingsSignal = signal(null);
-        this.conversationFlowSignal = signal(null);
+        this.conversationSettingsState = signal(null);
         this.isDestroyedSignal = signal(false);
         this.micStatusSignal = signal('ready');
         this.currentAudioStatus = signal(null); // Orchestrator notifies about audio state
         this.wordClickedSignal = signal(null); // Signal for clicked word
         // Var State
-        this.avatarImages = {
-            userImg: 'assets/defaults/avatar_user.png',
-            assistantImg: 'assets/defaults/avatar_ai.webp',
-        };
-    }
-    getMessagesSignal() {
-        return this.messagesSignal;
+        this.avatarImages = { userImg: 'assets/defaults/avatar_user.png', assistantImg: 'assets/defaults/avatar_ai.webp' };
     }
     /**
      * Notifies subscribers that a word has been clicked in a message.
@@ -1741,35 +1891,11 @@ class ConversationService {
         return this.wordClickedSignal;
     }
     createNewUserMessage() {
-        const message = {
-            content: '...',
-            role: ChatRole.User,
-        };
-        const processedMessage = this.messageProcessingService.processMessage(message, this.conversationSettingsSignal(), this.avatarImages);
-        this.addMessage(processedMessage);
+        const message = { content: '...', role: ChatRole.User };
+        const processedMessage = this.messageProcessingService.processMessage(message, this.conversationSettingsState(), this.avatarImages);
+        this.messagesStateService.addMessage(processedMessage);
         return processedMessage.messageId;
     }
-    // Add message to conversation
-    addMessage(message) {
-        this.messagesSignal.update((messages) => [...messages, message]);
-        console.log('Message added:', this.messagesSignal());
-        return message.messageId;
-    }
-    // Update message by ID
-    updateMessage(messageId, updatedMessage) {
-        let found = false;
-        this.messagesSignal.update((messages) => {
-            return messages.map((message) => {
-                if (message.messageId === messageId) {
-                    found = true;
-                    // Create a new message object with the updated properties
-                    return { ...message, ...updatedMessage };
-                }
-                return message;
-            });
-        });
-        return found;
-    }
     // Get thinking state as a signal
     isThinking() {
         return this.isThinkingSignal;
@@ -1784,36 +1910,62 @@ class ConversationService {
             conversationSettings.model = userSettings.model;
         }
     }
-    setupConversationWithAgentCard(agentCard, parseDict = null, conversationFlow = null) {
+    setupConversationWithAgentCard(agentCard, parseDict = null, conversationFlowApp = null) {
         // Basically extract settings and flow from agent card, and overrider with user seetings is needed.
         this.avatarImages.assistantImg = agentCard?.assets?.image?.url || this.avatarImages.assistantImg; // Set user AI avatar image
         const conversationSettings = this.conversationBuilder.buildConversationSettings(agentCard, parseDict);
         // Here i need some rules to see when i will override and what.
         this.overrideSettingsByUserSettings(conversationSettings);
-        this.conversationSettingsSignal.set(conversationSettings);
+        this.conversationSettingsState.set(conversationSettings);
         // this.conversationFlowSignal.set(this.conversationBuilder.buildConversationFlow(agentCard, parseDict));
-        if (conversationFlow) {
-            this.conversationFlowSignal.set(conversationFlow);
+        if (conversationFlowApp) {
+            // Just replace the default if agent card has a value
+            if (agentCard.conversationFlow) {
+                if (agentCard.conversationFlow?.goal?.task) {
+                    conversationFlowApp.goal = agentCard.conversationFlow.goal;
+                }
+                if (agentCard.conversationFlow?.dynamicConditions) {
+                    conversationFlowApp.dynamicConditions = agentCard.conversationFlow.dynamicConditions;
+                }
+                if (agentCard.conversationFlow?.triggerTasks) {
+                    // Leave default if a concreate task is not provided.
+                    if (agentCard.conversationFlow.triggerTasks?.onUserMessage?.task) {
+                        conversationFlowApp.triggerTasks.onUserMessage = agentCard.conversationFlow.triggerTasks.onUserMessage;
+                    }
+                    if (agentCard.conversationFlow.triggerTasks?.onUserMessage?.task) {
+                        conversationFlowApp.triggerTasks.onUserMessage = agentCard.conversationFlow.triggerTasks.onUserMessage;
+                    }
+                    agentCard.conversationFlow.triggerTasks = { ...agentCard.conversationFlow.triggerTasks, ...conversationFlowApp.triggerTasks };
+                }
+                if (agentCard.conversationFlow?.bonus) {
+                    conversationFlowApp.bonus = agentCard.conversationFlow.bonus;
+                }
+            }
+            this.dynamicFlowService.setConversationFlow(conversationFlowApp);
         }
     }
     async initConversationWithSettings(conversationSettings, conversationFlow) {
         this.overrideSettingsByUserSettings(conversationSettings);
-        this.conversationSettingsSignal.set(conversationSettings);
-        this.conversationFlowSignal.set(conversationFlow);
+        this.conversationSettingsState.set(conversationSettings);
+        this.dynamicFlowService.setConversationFlow(conversationFlow);
         await this.initConversation();
     }
     async initConversation() {
         this.avatarImages.userImg = this.userDataExchange.getUserDataExchange().imgUrl;
-        const conversationSettings = this.conversationSettingsSignal();
+        const conversationSettings = this.conversationSettingsState();
         for (const i in conversationSettings.messages) {
-            conversationSettings.messages[i].messageId = nanoid();
+            if (!conversationSettings.messages[i].messageId) {
+                conversationSettings.messages[i].messageId = nanoid();
+            }
         }
         // Find first assistant message
         const firstAssistantMsg = conversationSettings?.messages.find((message) => message.role === ChatRole.Assistant);
-        this.messagesSignal.set(conversationSettings?.messages || []);
+        this.messagesStateService.clearMessages(); // Clear previous messages
+        (conversationSettings?.messages || []).forEach((msg) => this.messagesStateService.addMessage(msg));
         if (firstAssistantMsg) {
             // Process the first assistant message
-            const processedMessage = this.messageProcessingService.processMessage(firstAssistantMsg, this.conversationSettingsSignal(), this.avatarImages);
+            const processedMessage = this.messageProcessingService.processMessage(firstAssistantMsg, this.conversationSettingsState(), this.avatarImages);
+            this.messagesStateService.updateMessage(firstAssistantMsg.messageId, processedMessage);
             // Find the index of the message with the matching ID
             const messageIndex = conversationSettings.messages.findIndex((message) => message.messageId === firstAssistantMsg.messageId);
             // If found, replace the message at that index
@@ -1849,7 +2001,7 @@ class ConversationService {
         if (updateId) {
             // if you pass updateId means message exists and you want to update it.
             const messageToUpdate = { ...message, messageId: updateId };
-            const updated = this.updateMessage(updateId, messageToUpdate);
+            const updated = this.messagesStateService.updateMessage(updateId, messageToUpdate);
             if (!updated) {
                 console.error(`Failed to update message with ID: ${updateId}`);
                 // Decide how to handle this - maybe throw an error or return null?
@@ -1859,10 +2011,10 @@ class ConversationService {
         }
         else {
             // Means is new meessage, Process and add the new message
-            const processedMessage = this.messageProcessingService.processMessage(message, this.conversationSettingsSignal(), this.avatarImages);
+            const processedMessage = this.messageProcessingService.processMessage(message, this.conversationSettingsState(), this.avatarImages);
             // Ensure ID exists (processMessage should handle this, but fallback just in case)
             processedMessage.messageId = processedMessage.messageId || nanoid();
-            this.addMessage(processedMessage);
+            this.messagesStateService.addMessage(processedMessage);
             userMessageId = processedMessage.messageId;
         }
         // Set thinking state and get AI response
@@ -1887,10 +2039,14 @@ class ConversationService {
         if (this.isDestroyedSignal()) {
             return null;
         }
-        const messages = this.messagesSignal();
-        const conversationSettings = this.conversationSettingsSignal();
+        const messages = this.messagesStateService.getMessagesSignal()();
+        const conversationSettings = this.conversationSettingsState();
         if (messages.length > 31) {
             // Safety limit to prevent infinite conversations
+            this.toastAlerts.warn({
+                title: 'Conversation limit reached',
+                subtitle: 'The conversation has reached its maximum length. Please start a new conversation.',
+            });
             return null;
         }
         let conversationMessages = messages;
@@ -1914,7 +2070,7 @@ class ConversationService {
         }
         // Process response
         const newMessage = this.messageProcessingService.processMessage({ content: response.content, role: ChatRole.Assistant }, conversationSettings, this.avatarImages);
-        this.addMessage(newMessage);
+        this.messagesStateService.addMessage(newMessage);
         this.isThinkingSignal.set(false);
         this.runAssistantTrigger(newMessage); // Not waiting should be parallel.
         return newMessage.messageId;
@@ -1922,7 +2078,7 @@ class ConversationService {
     // Reset conversation
     async resetConversation(agentCard) {
         // Clear messages
-        this.messagesSignal.set([]);
+        this.messagesStateService.clearMessages();
     }
     async getTTSFile(message) {
         const userChatSettings = await this.userDataExchange.getUserChatSettings();
@@ -1930,25 +2086,30 @@ class ConversationService {
         return this.defaultAgentCardService.getTextAudioFile(ttsRequest);
     }
     async runAssistantTrigger(message) {
-        const trigger = this.conversationFlowSignal().triggerTasks.onAssistantMessage;
+        const trigger = this.dynamicFlowService.conversationFlowState().triggerTasks.onAssistantMessage;
+        console.log('Trigger:', trigger);
         if (trigger) {
-            trigger.task += ' Here is the text: ' + (message.text || message.content);
-            const result = await this.evaluationService.evaluateWithTask(trigger);
+            // const contextMessages = getContextMessages(this.messagesSignal(), ContextType.LastAssistantMessage);
+            // i cant override task in trigger.
+            const task = trigger.task + ' Here is the text: ' + (message.text || message.content);
+            const result = await this.evaluationService.evaluateWithTask({ model: trigger.model, task });
             console.log('Assistant trigger evaluation result:', result);
             message.evaluation = result;
-            this.updateMessage(message.messageId, message);
+            this.messagesStateService.updateMessage(message.messageId, message);
         }
     }
     async runUserFlowEvaluations(message) {
-        const goal = this.conversationFlowSignal().goal;
-        const trigger = this.conversationFlowSignal().triggerTasks.onUserMessage;
+        const goal = this.dynamicFlowService.conversationFlowState().goal;
+        const trigger = this.dynamicFlowService.conversationFlowState().triggerTasks.onUserMessage;
         // 1) Run Goal Evaluation
-        this.evaluationService.evaluateGoal(goal, this.messagesSignal());
+        this.evaluationService.evaluateGoal(goal, this.messagesStateService.getMessagesSignal()());
         // 2) Run User Trigger Evaluation
         if (trigger) {
-            this.evaluationService.evaluateConversation(this.messagesSignal(), trigger, ContextType.LastUserAndPreviousAssistant).then((evaluation) => {
+            this.evaluationService
+                .evaluateConversation(this.messagesStateService.getMessagesSignal()(), trigger, ContextType.LastUserAndPreviousAssistant)
+                .then((evaluation) => {
                 message.evaluation = evaluation;
-                this.updateMessage(message.messageId, message);
+                this.messagesStateService.updateMessage(message.messageId, message);
                 console.log('Trigger evaluation result:', evaluation);
             });
         }
@@ -1972,7 +2133,7 @@ class ChatFooterComponent {
         // Inputs
         this.isAIThinking = input(false);
         this.flow = input();
-        this.micSettings = input({ useWhisper: true, lang: 'en' });
+        this.micSettings = input({ micMode: 'recognition', lang: 'en' });
         // Outputs
         this.sendMessage = output();
         this.textInputChanged = output();
@@ -2000,15 +2161,6 @@ class ChatFooterComponent {
             }
         });
     }
-    ngOnInit() {
-        // throw new Error('Method not implemented.');
-        // const messages = this.conversationService.getMessagesSignal()();
-        // const firstAssistantMessage = messages.find((msn) => msn.role === ChatRole.Assistant);
-        // if (firstAssistantMessage) {
-        //   console.log('Assistant message:', firstAssistantMessage);
-        //   this.processBackgroundTask(firstAssistantMessage, ConversationEvents.OnAssistantMessage);
-        // }
-    }
     /**
      * Method used by the template to determine if the mic should continue listening
      */
@@ -2103,11 +2255,11 @@ class ChatFooterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatFooterComponent, isStandalone: true, selector: "dc-chat-footer", inputs: { isAIThinking: { classPropertyName: "isAIThinking", publicName: "isAIThinking", isSignal: true, isRequired: false, transformFunction: null }, flow: { classPropertyName: "flow", publicName: "flow", isSignal: true, isRequired: false, transformFunction: null }, micSettings: { classPropertyName: "micSettings", publicName: "micSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", textInputChanged: "textInputChanged" }, viewQueries: [{ propertyName: "micComponent", first: true, predicate: MicVadComponent, descendants: true }], ngImport: i0, template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <app-mic-vad\n      (audioRecorded)=\"handleAudioRecorded($event)\"\n      (statusChanged)=\"handleMicStatusChanged($event)\"\n      [continueListening]=\"shouldContinueListening()\" />\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"prepareUserMsnAndSend()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"prepareUserMsnAndSend()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  @if(flow()?.goal) {\n  <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  }\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MicVadComponent, selector: "app-mic-vad", inputs: ["continueListening"], outputs: ["statusChanged", "audioRecorded", "error"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatFooterComponent, isStandalone: true, selector: "dc-chat-footer", inputs: { isAIThinking: { classPropertyName: "isAIThinking", publicName: "isAIThinking", isSignal: true, isRequired: false, transformFunction: null }, flow: { classPropertyName: "flow", publicName: "flow", isSignal: true, isRequired: false, transformFunction: null }, micSettings: { classPropertyName: "micSettings", publicName: "micSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", textInputChanged: "textInputChanged" }, viewQueries: [{ propertyName: "micComponent", first: true, predicate: MicVadComponent, descendants: true }], ngImport: i0, template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <dc-mic (onFinished)=\"handleAudioRecorded($event)\"></dc-mic>\n    <!--     \n    <app-mic-vad\n      (audioRecorded)=\"handleAudioRecorded($event)\"\n      (statusChanged)=\"handleMicStatusChanged($event)\"\n      [continueListening]=\"shouldContinueListening()\" /> -->\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"prepareUserMsnAndSend()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"prepareUserMsnAndSend()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  @if(flow()?.goal) {\n  <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  }\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["isDone", "targetOrBase", "micSettings"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat-footer', standalone: true, imports: [ReactiveFormsModule, ProgressBarModule, TextareaModule, ButtonModule, MicVadComponent], template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <app-mic-vad\n      (audioRecorded)=\"handleAudioRecorded($event)\"\n      (statusChanged)=\"handleMicStatusChanged($event)\"\n      [continueListening]=\"shouldContinueListening()\" />\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"prepareUserMsnAndSend()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"prepareUserMsnAndSend()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  @if(flow()?.goal) {\n  <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  }\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"] }]
+            args: [{ selector: 'dc-chat-footer', standalone: true, imports: [ReactiveFormsModule, ProgressBarModule, TextareaModule, ButtonModule, MicVadComponent, DCMicComponent], template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <dc-mic (onFinished)=\"handleAudioRecorded($event)\"></dc-mic>\n    <!--     \n    <app-mic-vad\n      (audioRecorded)=\"handleAudioRecorded($event)\"\n      (statusChanged)=\"handleMicStatusChanged($event)\"\n      [continueListening]=\"shouldContinueListening()\" /> -->\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"prepareUserMsnAndSend()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"prepareUserMsnAndSend()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  @if(flow()?.goal) {\n  <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  }\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"] }]
         }], ctorParameters: () => [], propDecorators: { micComponent: [{
                 type: ViewChild,
                 args: [MicVadComponent]
@@ -2720,13 +2872,14 @@ class ChatMessagesListComponent {
         this.inputMessages = input.required();
         // Private services
         this.conversationService = inject(ConversationService);
+        this.messagesStateService = inject(MessagesStateService);
         this.elementRef = inject(ElementRef);
         // State
         this.aiIcon = 'assets/defaults/avatar_ai.webp';
         this.isThinking = this.conversationService.isThinking();
         this.messages = computed(() => {
             // Get the actual array of messages from the signal by calling it as a function
-            const allMessages = this.conversationService.getMessagesSignal()();
+            const allMessages = this.messagesStateService.getMessagesSignal()();
             console.log('Getting messages', allMessages);
             return allMessages.filter((message) => message.role !== ChatRole.System);
         });
@@ -2888,7 +3041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 
 class DCConversationUserChatSettingsComponent {
     constructor() {
-        this.dialogRef = inject(DynamicDialogRef);
+        this.dialogRef = inject(DynamicDialogRef, { optional: true });
         this.fb = inject(FormBuilder);
         this.conversationCardAIService = inject(CONVERSATION_AI_TOKEN);
         this.isLoadingModels = true;
@@ -2902,6 +3055,8 @@ class DCConversationUserChatSettingsComponent {
             autoTranslate: true,
         });
         this.onSettingsChange = output();
+        this.closeClicked = output();
+        this.settingsApplied = output();
         this.textEngines = Object.values(TextEngines);
         this.voiceTTSOptions = Object.values(VoiceTTSOptions);
         this.textEngineOptions = TextEngineOptions;
@@ -2937,16 +3092,27 @@ class DCConversationUserChatSettingsComponent {
         }
     }
     close() {
-        this.dialogRef.close();
+        if (this.dialogRef) {
+            this.dialogRef.close();
+        }
+        else {
+            this.closeClicked.emit();
+        }
     }
     async saveSettings() {
         if (this.form.valid) {
-            await this.conversationCardAIService.saveConversationUserChatSettings(this.form.value);
-            this.dialogRef.close(this.form.value);
+            const settings = this.form.value;
+            await this.conversationCardAIService.saveConversationUserChatSettings(settings);
+            if (this.dialogRef) {
+                this.dialogRef.close(settings);
+            }
+            else {
+                this.settingsApplied.emit(settings);
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationUserChatSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationUserChatSettingsComponent, isStandalone: true, selector: "dc-chat-settings-dialog", inputs: { showFeature: { classPropertyName: "showFeature", publicName: "showFeature", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSettingsChange: "onSettingsChange" }, viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], ngImport: i0, template: "<div class=\"dialog-container\">\n  <form [formGroup]=\"form\">\n    @if (showFeature().synthVoice) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"synthVoice\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.synthVoice.disabled\">Escuchar Voz</span>\n        <br />\n        <small>Desmarca si solo quieres leer texto</small>\n      </p>\n    </div>\n    } @if (showFeature().highlightWords) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"highlightWords\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Narraci\u00F3n de texto</span>\n        <br />\n        <small>Remarca las palabras como se van pronuncionando</small>\n      </p>\n    </div>\n    } @if (showFeature().speed) {\n    <div class=\"settings-section\">\n      <p>\n        Velocidad ({{ form.controls.speed.value | speedDisplay }})\n        <br />\n\n        <!-- <p-rating formControlName=\"speed\" iconOnClass=\"pi pi-step-forward\" iconOffClass=\"pi pi-minus\" /> -->\n\n        <p-select\n          id=\"speed\"\n          [options]=\"speedOptions\"\n          formControlName=\"speed\"\n          [placeholder]=\"'Select Language'\"\n          optionLabel=\"label\"\n          optionValue=\"value\"></p-select>\n      </p>\n    </div>\n    } @if (showFeature().realTime) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"realTime\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.realTime.disabled\">Tiempo real</span>\n        <br />\n        <small>No tienes que presionar el microphono, comenzar\u00E1 a grabar en cuanto la AI termine de hablar, cierra el chat para finalizar conversaci\u00F3n.</small>\n      </p>\n    </div>\n    } @if (showFeature().realTime) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"repeatRecording\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Reproducir mi grabaci\u00F3n</span>\n        <br />\n        <small>Escucha tu dialogo, despu\u00E9s de grabar, te ayudar\u00E1 a notar tus errores.</small>\n      </p>\n    </div>\n    } @if (showFeature().superHearing) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"superHearing\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Super O\u00EDdo \uD83E\uDDBE</span>\n        <br />\n        <small>Tu audio se procesa en el servidor para mejor efectividad, si no usa el navegador.</small>\n      </p>\n    </div>\n    }\n\n    <!-- @if (showFeature().fixGrammar) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"fixGrammar\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.fixGrammar.disabled\">Corregir gram\u00E1tica</span>\n        <br />\n        <small>La ai corrige tu forma de hablar/escribir y te retrolimenta de tus errores</small>\n      </p>\n    </div>\n    }  -->\n\n    <!-- @if (showFeature().autoTranslate) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"autoTranslate\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.autoTranslate.disabled\">Mostrar Traducciones </span>\n        <br />\n        <small>Texto adicional con la traducci\u00F3n</small>\n      </p>\n    </div>\n    }  -->\n\n    @if (showFeature().autoTranslate) {\n    <div class=\"voice-selection\">\n      <span>Voz Preferencial:</span>\n      <br />\n      <p-radioButton value=\"random\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Aleatorio</label>\n      <p-radioButton value=\"randomMan\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Hombre</label>\n      <p-radioButton value=\"randomWoman\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Mujer</label>\n    </div>\n    }\n\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"userMessageTask\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.userMessageTask.disabled\">Procesar mensajes de usuario</span>\n        <br />\n        <small>Correcciones, mejoras, retroalimentaci\u00F3n y sugerencias en el texto del usuario </small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"assistantMessageTask\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.assistantMessageTask.disabled\">Procesar mensajes de asistente</span>\n        <br />\n        <small>Correcciones, traducciones, pensamientos adicionales y m\u00E1s ayuda en el texto del asistente </small>\n      </p>\n    </div>\n\n    @if(isAdmin) {\n    <div>\n      <hr />\n      <b>Admin Section</b>\n      <br />\n\n      <b>Modelo:</b>\n\n      <dc-model-selector [modelForm]=\"form.controls.model\"></dc-model-selector>\n    </div>\n    }\n\n    <div class=\"button-group\">\n      <p-button (click)=\"saveSettings()\" label=\"Guardar cambios\"></p-button>\n      <p-button (click)=\"close()\" label=\"Cancelar\" styleClass=\"p-button-secondary\"></p-button>\n    </div>\n  </form>\n</div>\n", styles: [".dialog-container{padding:20px;background:#fff;border-radius:8px;min-width:300px;max-width:500px}.dialog-content{margin:20px 0}.dialog-actions{display:flex;justify-content:flex-end}.settings-section{margin-bottom:20px}.settings-section label{display:block;margin-bottom:5px;font-weight:700}.settings-section small{display:block;color:#666;margin-top:2px}.voice-selection{margin:15px 0}.voice-selection label{margin-right:15px}.button-group{margin-top:20px;display:flex;gap:10px;justify-content:flex-end}button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer}button:first-child{background-color:#007bff;color:#fff}button:last-child{background-color:#6c757d;color:#fff}.space{margin-left:3px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i3$1.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: SpeedDescPipe, name: "speedDisplay" }, { kind: "ngmodule", type: RatingModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationUserChatSettingsComponent, isStandalone: true, selector: "dc-chat-settings-dialog", inputs: { showFeature: { classPropertyName: "showFeature", publicName: "showFeature", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSettingsChange: "onSettingsChange", closeClicked: "closeClicked", settingsApplied: "settingsApplied" }, viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], ngImport: i0, template: "<div class=\"dialog-container\">\n  <form [formGroup]=\"form\">\n    @if (showFeature().synthVoice) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"synthVoice\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.synthVoice.disabled\">Escuchar Voz</span>\n        <br />\n        <small>Desmarca si solo quieres leer texto</small>\n      </p>\n    </div>\n    } @if (showFeature().highlightWords) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"highlightWords\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Narraci\u00F3n de texto</span>\n        <br />\n        <small>Remarca las palabras como se van pronuncionando</small>\n      </p>\n    </div>\n    } @if (showFeature().speed) {\n    <div class=\"settings-section\">\n      <p>\n        Velocidad ({{ form.controls.speed.value | speedDisplay }})\n        <br />\n\n        <!-- <p-rating formControlName=\"speed\" iconOnClass=\"pi pi-step-forward\" iconOffClass=\"pi pi-minus\" /> -->\n\n        <p-select\n          id=\"speed\"\n          [options]=\"speedOptions\"\n          formControlName=\"speed\"\n          [placeholder]=\"'Select Language'\"\n          optionLabel=\"label\"\n          optionValue=\"value\"></p-select>\n      </p>\n    </div>\n    } @if (showFeature().realTime) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"realTime\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.realTime.disabled\">Tiempo real</span>\n        <br />\n        <small>No tienes que presionar el microphono, comenzar\u00E1 a grabar en cuanto la AI termine de hablar, cierra el chat para finalizar conversaci\u00F3n.</small>\n      </p>\n    </div>\n    } @if (showFeature().realTime) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"repeatRecording\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Reproducir mi grabaci\u00F3n</span>\n        <br />\n        <small>Escucha tu dialogo, despu\u00E9s de grabar, te ayudar\u00E1 a notar tus errores.</small>\n      </p>\n    </div>\n    } @if (showFeature().superHearing) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"superHearing\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Super O\u00EDdo \uD83E\uDDBE</span>\n        <br />\n        <small>Tu audio se procesa en el servidor para mejor efectividad, si no usa el navegador.</small>\n      </p>\n    </div>\n    }\n\n    <!-- @if (showFeature().fixGrammar) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"fixGrammar\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.fixGrammar.disabled\">Corregir gram\u00E1tica</span>\n        <br />\n        <small>La ai corrige tu forma de hablar/escribir y te retrolimenta de tus errores</small>\n      </p>\n    </div>\n    }  -->\n\n    <!-- @if (showFeature().autoTranslate) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"autoTranslate\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.autoTranslate.disabled\">Mostrar Traducciones </span>\n        <br />\n        <small>Texto adicional con la traducci\u00F3n</small>\n      </p>\n    </div>\n    }  -->\n\n    @if (showFeature().autoTranslate) {\n    <div class=\"voice-selection\">\n      <span>Voz Preferencial:</span>\n      <br />\n      <p-radioButton value=\"random\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Aleatorio</label>\n      <p-radioButton value=\"randomMan\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Hombre</label>\n      <p-radioButton value=\"randomWoman\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Mujer</label>\n    </div>\n    }\n\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"userMessageTask\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.userMessageTask.disabled\">Procesar mensajes de usuario</span>\n        <br />\n        <small>Correcciones, mejoras, retroalimentaci\u00F3n y sugerencias en el texto del usuario </small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"assistantMessageTask\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.assistantMessageTask.disabled\">Procesar mensajes de asistente</span>\n        <br />\n        <small>Correcciones, traducciones, pensamientos adicionales y m\u00E1s ayuda en el texto del asistente </small>\n      </p>\n    </div>\n\n    @if(isAdmin) {\n    <div>\n      <hr />\n      <b>Admin Section</b>\n      <br />\n\n      <b>Modelo:</b>\n\n      <dc-model-selector [modelForm]=\"form.controls.model\"></dc-model-selector>\n    </div>\n    }\n\n    <div class=\"button-group\">\n      <p-button (click)=\"saveSettings()\" label=\"Guardar cambios\"></p-button>\n      <p-button (click)=\"close()\" label=\"Cancelar\" styleClass=\"p-button-secondary\"></p-button>\n    </div>\n  </form>\n</div>\n", styles: [".dialog-container{padding:20px;background:#fff;border-radius:8px;min-width:300px;max-width:500px}.dialog-content{margin:20px 0}.dialog-actions{display:flex;justify-content:flex-end}.settings-section{margin-bottom:20px}.settings-section label{display:block;margin-bottom:5px;font-weight:700}.settings-section small{display:block;color:#666;margin-top:2px}.voice-selection{margin:15px 0}.voice-selection label{margin-right:15px}.button-group{margin-top:20px;display:flex;gap:10px;justify-content:flex-end}button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer}button:first-child{background-color:#007bff;color:#fff}button:last-child{background-color:#6c757d;color:#fff}.space{margin-left:3px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i3.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: SpeedDescPipe, name: "speedDisplay" }, { kind: "ngmodule", type: RatingModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationUserChatSettingsComponent, decorators: [{
             type: Component,
@@ -2977,6 +3143,7 @@ class DCChatComponent {
         this.conversationService = inject(ConversationService);
         this.evaluationService = inject(EvaluationService);
         this.userDataExchange = inject(USER_DATA_EXCHANGE);
+        this.messageStateService = inject(MessagesStateService);
         // 📥 Inputs
         this.chatUserSettings = this.userDataExchange.getUserChatSettings(); // Default to user data exchange
         this.conversationFlow = null;
@@ -2990,7 +3157,7 @@ class DCChatComponent {
         // Signals States
         this.messages = signal([]);
         // States
-        this.micSettings = { useWhisper: true, lang: 'en' };
+        this.micSettings = { micMode: 'recognition', lang: 'en' };
         this.isInfoVisible = false;
         this.isAdmin = true;
         // Subscribe to score updates using effect
@@ -3059,11 +3226,11 @@ class DCChatComponent {
         await this.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationSettings: { classPropertyName: "conversationSettings", publicName: "conversationSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationFlow: { classPropertyName: "conversationFlow", publicName: "conversationFlow", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", goalCompleted: "goalCompleted" }, providers: [DialogService], viewQueries: [{ propertyName: "chatFooterComponent", first: true, predicate: ChatFooterComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [flow]=\"conversationFlow\"> </dc-chat-footer>\n\n  <!-- Info Dialog -->\n  <p-dialog [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n    <div class=\"info-content\">\n      <h3>Agent Card</h3>\n      <pre>{{ agentCard | safeJson }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | safeJson }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["isAdmin", "alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "flow", "micSettings"], outputs: ["sendMessage", "textInputChanged"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings", "inputMessages"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationSettings: { classPropertyName: "conversationSettings", publicName: "conversationSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationFlow: { classPropertyName: "conversationFlow", publicName: "conversationFlow", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", goalCompleted: "goalCompleted" }, providers: [DialogService], viewQueries: [{ propertyName: "chatFooterComponent", first: true, predicate: ChatFooterComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [flow]=\"conversationFlow\"> </dc-chat-footer>\n\n  <!-- Info Dialog -->\n</div>\n\n<p-dialog [style]=\"{ width: '100vw',}\" [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n  <div class=\"info-content\">\n    <div> points : {{ evaluationService.scoreSignal() }} </div>\n    <details>\n      <summary>Messages</summary>\n      @for (message of messageStateService.getMessagesSignal()(); track message.messageId) {\n      <h6>\n        @if (message.role === 'system') {\n        <b class=\"text-red-500\" style=\"text-transform: capitalize\">{{ message.role }}</b> - } @else {\n        <b style=\"text-transform: capitalize\">{{ message.role }}</b> - }\n        <b style=\"color: var(--info-color); text-transform: capitalize\">{{ message.messageId }}</b></h6\n      >\n      <p>{{ message.content }}</p>\n      }\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  </div>\n</p-dialog>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["isAdmin", "alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "flow", "micSettings"], outputs: ["sendMessage", "textInputChanged"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings", "inputMessages"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, ChatHeaderComponent, ChatFooterComponent, ChatMessagesListComponent, DialogModule, ProgressBarModule, SafeJsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [flow]=\"conversationFlow\"> </dc-chat-footer>\n\n  <!-- Info Dialog -->\n  <p-dialog [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n    <div class=\"info-content\">\n      <h3>Agent Card</h3>\n      <pre>{{ agentCard | safeJson }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | safeJson }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
+            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, ChatHeaderComponent, ChatFooterComponent, ChatMessagesListComponent, DialogModule, ProgressBarModule, SafeJsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [flow]=\"conversationFlow\"> </dc-chat-footer>\n\n  <!-- Info Dialog -->\n</div>\n\n<p-dialog [style]=\"{ width: '100vw',}\" [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n  <div class=\"info-content\">\n    <div> points : {{ evaluationService.scoreSignal() }} </div>\n    <details>\n      <summary>Messages</summary>\n      @for (message of messageStateService.getMessagesSignal()(); track message.messageId) {\n      <h6>\n        @if (message.role === 'system') {\n        <b class=\"text-red-500\" style=\"text-transform: capitalize\">{{ message.role }}</b> - } @else {\n        <b style=\"text-transform: capitalize\">{{ message.role }}</b> - }\n        <b style=\"color: var(--info-color); text-transform: capitalize\">{{ message.messageId }}</b></h6\n      >\n      <p>{{ message.content }}</p>\n      }\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  </div>\n</p-dialog>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chatFooterComponent: [{
                 type: ViewChild,
                 args: [ChatFooterComponent]
@@ -3077,6 +3244,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
+class PromptConversationTypesDialogComponent {
+    constructor() {
+        this.dialogRef = inject(DynamicDialogRef);
+        this.conversationTypeOptions = ConversationTypeOptions;
+    }
+    getDefaultPromptByType(conversationType) {
+        return getDefaultPromptByType(conversationType);
+    }
+    selectOption(option) {
+        this.dialogRef.close(option);
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PromptConversationTypesDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: PromptConversationTypesDialogComponent, isStandalone: true, selector: "dc-prompt-conversation-types-dialog", ngImport: i0, template: `
+    <div class="prompt-conversation-types-dialog-content p-d-flex p-flex-column p-gap-2">
+      @for (option of conversationTypeOptions; track $index) {
+      <h4 class="p-text-center text-blue-500"
+        ><b>{{ option.label }}</b></h4
+      >
+      <p>{{ getDefaultPromptByType(option.value) }}</p>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: ButtonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PromptConversationTypesDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dc-prompt-conversation-types-dialog',
+                    standalone: true,
+                    imports: [DialogModule, ButtonModule],
+                    template: `
+    <div class="prompt-conversation-types-dialog-content p-d-flex p-flex-column p-gap-2">
+      @for (option of conversationTypeOptions; track $index) {
+      <h4 class="p-text-center text-blue-500"
+        ><b>{{ option.label }}</b></h4
+      >
+      <p>{{ getDefaultPromptByType(option.value) }}</p>
+      }
+    </div>
+  `,
+                }]
+        }] });
+
 async function getCharacterData(file) {
     if (file.name.endsWith('.png')) {
         const filebuffer = await getFileBuffer(file);
@@ -3218,6 +3430,7 @@ class PromptPreviewDialogComponent {
     constructor() {
         this.dynamicDialogConfig = inject(DynamicDialogConfig);
         this.dialogRef = inject(DynamicDialogRef);
+        debugger;
         this.data = this.dynamicDialogConfig.data;
     }
     close() {
@@ -3302,65 +3515,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
     `, 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: () => [] });
 
-function markdownToHTML(markdownText) {
-    // Convert italics-bold (***text***)
-    let htmlText = markdownText.replace(/\*\*\*(.+?)\*\*\*/g, '<em><strong>$1</strong></em>');
-    // Convert bold (**text**)
-    htmlText = htmlText.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-    // Convert italics (*text*)
-    htmlText = htmlText.replace(/\*(.+?)\*/g, '<em>$1</em>');
-    // Convert text enclosed by double quotes ("text")
-    // htmlText = htmlText.replace(/"(.+?)"/g, '<cite>$1</cite>');
-    return htmlText;
-}
-class SimpleMdToHtmlPipe {
-    transform(text) {
-        return markdownToHTML(text);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SimpleMdToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: SimpleMdToHtmlPipe, isStandalone: true, name: "simpleMdToHtml" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SimpleMdToHtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'simpleMdToHtml',
-                    standalone: true,
-                }]
-        }] });
-class StartDivToHtmlPipe {
-    // solo create espacio entre lineas
-    transform(text) {
-        text = text.replace(/<start>/gi, '<hr>');
-        text = text.replace(/\n/g, '<br>');
-        return text;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StartDivToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: StartDivToHtmlPipe, isStandalone: true, name: "startDividerToHtml" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StartDivToHtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'startDividerToHtml',
-                    standalone: true,
-                }]
-        }] });
-class MdToHtmlArrayPipe {
-    // devuelve un array de objetos con el contenido y el tag
-    transform(text) {
-        const htmlArray = convertToHTML(text);
-        return htmlArray.map((val) => val.content).join('');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MdToHtmlArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: MdToHtmlArrayPipe, isStandalone: true, name: "mdToHtmlArray" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MdToHtmlArrayPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'mdToHtmlArray',
-                    standalone: true,
-                }]
-        }] });
-
 class AccountPlatformForm {
     constructor() {
         this.route = inject(ActivatedRoute);
@@ -3422,7 +3576,7 @@ class AccountPlatformForm {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AccountPlatformForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AccountPlatformForm, decorators: [{
             type: Component,
@@ -3560,7 +3714,7 @@ class VoiceSelectorComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: VoiceSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: VoiceSelectorComponent, isStandalone: true, selector: "dc-voice-selector", ngImport: i0, template: "<div class=\"p-fluid\">\n  <div class=\"p-field mb-3\">\n    <label for=\"language\">Select Language</label>\n    <p-dropdown\n      inputId=\"language\"\n      [options]=\"availableLanguages\"\n      [(ngModel)]=\"selectedLanguageCode\"\n      optionLabel=\"name\"\n      optionValue=\"code\"\n      placeholder=\"Select a Language\"\n      [filter]=\"true\"\n      filterBy=\"name\"\n      [style]=\"{ width: '100%' }\"\n      [showClear]=\"true\">\n    </p-dropdown>\n  </div>\n\n  <a href=\"https://cloud.google.com/text-to-speech/docs/chirp3-hd\" target=\"_blank\">Check Google Voice Examples</a>\n\n  <div class=\"p-field\">\n    <label for=\"voice\">Select Voice</label>\n    <p-listbox\n      inputId=\"voice\"\n      [options]=\"voices\"\n      [(ngModel)]=\"selectedVoiceId\"\n      optionLabel=\"name\"\n      optionValue=\"id\"\n      [style]=\"{ width: '100%' }\"\n      listStyleClass=\"p-listbox-sm\"\n      [filter]=\"true\"\n      filterBy=\"name\"\n      placeholder=\"Search voice\">\n    </p-listbox>\n  </div>\n</div>\n<div class=\"p-dialog-footer\">\n  <p-button label=\"Cancel\" icon=\"pi pi-times\" (click)=\"cancel()\" styleClass=\"p-button-text\"></p-button>\n  <p-button label=\"Select\" icon=\"pi pi-check\" (click)=\"selectVoice()\" [disabled]=\"!selectedVoiceId && !selectedLanguageCode\"></p-button>\n</div>\n", styles: [":host ::ng-deep .p-listbox-sm .p-listbox-item{padding:.5rem .75rem;font-size:.875rem}:host ::ng-deep .p-dialog-footer{padding-top:1rem;display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i3$3.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: VoiceSelectorComponent, isStandalone: true, selector: "dc-voice-selector", ngImport: i0, template: "<div class=\"p-fluid\">\n  <div class=\"p-field mb-3\">\n    <label for=\"language\">Select Language</label>\n    <p-dropdown\n      inputId=\"language\"\n      [options]=\"availableLanguages\"\n      [(ngModel)]=\"selectedLanguageCode\"\n      optionLabel=\"name\"\n      optionValue=\"code\"\n      placeholder=\"Select a Language\"\n      [filter]=\"true\"\n      filterBy=\"name\"\n      [style]=\"{ width: '100%' }\"\n      [showClear]=\"true\">\n    </p-dropdown>\n  </div>\n\n  <a href=\"https://cloud.google.com/text-to-speech/docs/chirp3-hd\" target=\"_blank\">Check Google Voice Examples</a>\n\n  <div class=\"p-field\">\n    <label for=\"voice\">Select Voice</label>\n    <p-listbox\n      inputId=\"voice\"\n      [options]=\"voices\"\n      [(ngModel)]=\"selectedVoiceId\"\n      optionLabel=\"name\"\n      optionValue=\"id\"\n      [style]=\"{ width: '100%' }\"\n      listStyleClass=\"p-listbox-sm\"\n      [filter]=\"true\"\n      filterBy=\"name\"\n      placeholder=\"Search voice\">\n    </p-listbox>\n  </div>\n</div>\n<div class=\"p-dialog-footer\">\n  <p-button label=\"Cancel\" icon=\"pi pi-times\" (click)=\"cancel()\" styleClass=\"p-button-text\"></p-button>\n  <p-button label=\"Select\" icon=\"pi pi-check\" (click)=\"selectVoice()\" [disabled]=\"!selectedVoiceId && !selectedLanguageCode\"></p-button>\n</div>\n", styles: [":host ::ng-deep .p-listbox-sm .p-listbox-item{padding:.5rem .75rem;font-size:.875rem}:host ::ng-deep .p-dialog-footer{padding-top:1rem;display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i3$2.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: VoiceSelectorComponent, decorators: [{
             type: Component,
@@ -3609,6 +3763,7 @@ class FormGroupService {
             authorId: [''],
             authorEmail: [''],
             takenCount: [0],
+            level: [0],
         });
     }
     createModelFormGroup(model) {
@@ -3633,7 +3788,15 @@ class FormGroupService {
             when: this.fb.control(condition?.when || ''),
             value: this.fb.control(condition?.value || ''),
             then: this.fb.control(condition?.then || ''),
-            task: this.createSimpleAgentTaskFormGroup(condition?.task),
+            // task: this.createSimpleAgentTaskFormGroup(condition?.task),
+            do: this.fb.array([]), // Correctly typed FormArray
+        });
+    }
+    createDoActionFormGroup(action) {
+        return this.fb.group({
+            actionType: this.fb.control(action?.actionType || ''), // Default or from params
+            systemPromptType: this.fb.control(action?.systemPromptType || ''), // Default or from params
+            prompt: this.fb.control(action?.prompt || ''), // Default or from params
         });
     }
     createTriggerTasksFormGroup() {
@@ -3652,6 +3815,50 @@ class FormGroupService {
             model: this.createModelFormGroup(task?.model),
         });
     }
+    // Operations with Array
+    //  If you have the main fromGroup use this fisrt versión
+    removeArrayItem(formGroup, controlPath, index) {
+        //  controlPath is dot separated path to the form array
+        const control = formGroup.get(controlPath);
+        if (control) {
+            control.removeAt(index);
+            // this.cdr.detectChanges();
+        }
+    }
+    addArrayItem(formGroup, controlPath, itemFactory = () => this.fb.control('')) {
+        // you can add array with function or add empty formGroup
+        const control = formGroup.get(controlPath);
+        if (control) {
+            control.push(itemFactory());
+            // this.cdr.detectChanges();
+        }
+    }
+    updateArrayField(formGroup, controlPath, index, event) {
+        const control = formGroup.get(controlPath);
+        if (control instanceof FormArray && event.target instanceof HTMLInputElement) {
+            const formControlAtIndex = control.at(index);
+            if (formControlAtIndex) {
+                formControlAtIndex.setValue(event.target.value);
+            }
+        }
+        else if (control instanceof FormArray && event.target instanceof HTMLTextAreaElement) {
+            // Handle textarea
+            const formControlAtIndex = control.at(index);
+            if (formControlAtIndex) {
+                formControlAtIndex.setValue(event.target.value);
+            }
+        }
+    }
+    // If you have the reference to the formArray use this second versión or native solution.
+    addItemToFormArray(formArray, itemFactory = () => this.fb.control('')) {
+        formArray.push(itemFactory());
+    }
+    removeItemFromFormArray(formArray, index) {
+        formArray.removeAt(index);
+    }
+    getItemFromFormArray(formArray, index) {
+        return formArray.at(index);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FormGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FormGroupService, providedIn: 'root' }); }
 }
@@ -3685,7 +3892,7 @@ class AgentTaskFormComponent {
         console.log(this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentTaskFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AgentTaskFormComponent, isStandalone: true, selector: "agent-task-form", inputs: { formGroup: "formGroup", shortForm: "shortForm" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"space-y-6 p-4\">\n  @if(formGroup.controls?.task) {\n  <div class=\"form-field\">\n    <label for=\"task\" class=\"block text-sm font-medium text-gray-700\">Task</label>\n    <input pInputText id=\"task\" [formControl]=\"formGroup.controls?.task\" class=\"w-full\" />\n  </div>\n  } @if(!shortForm && formGroup.controls?.expectedResponseType) {\n  <div class=\"form-field\">\n    <label for=\"expectedResponseType\" class=\"block text-sm font-medium text-gray-700\">Expected Response Type</label>\n    <input pInputText id=\"expectedResponseType\" type=\"text\" [formControl]=\"formGroup.controls?.expectedResponseType\" class=\"w-full\" />\n  </div>\n  } @if (formGroup.controls?.model) {\n\n  <dc-model-selector [modelForm]=\"formGroup.controls.model\" [shortForm]=\"shortForm\"></dc-model-selector>\n  } @if (!shortForm && formGroup.controls?.systemPrompt) {\n  <div class=\"form-field\">\n    <label for=\"systemPrompt\" class=\"block text-sm font-medium text-gray-700 mb-1\">System Prompt</label>\n    <input pInputText id=\"systemPrompt\" [formControl]=\"formGroup.controls?.systemPrompt\" class=\"w-full\" />\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.form-field{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AgentTaskFormComponent, isStandalone: true, selector: "agent-task-form", inputs: { formGroup: "formGroup", shortForm: "shortForm" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"space-y-6 p-4\">\n  @if(formGroup.controls?.task) {\n  <div class=\"form-field\">\n    <label for=\"task\" class=\"block text-sm font-medium text-gray-700\">Task</label>\n    <input pInputText id=\"task\" [formControl]=\"formGroup.controls?.task\" class=\"w-full\" />\n  </div>\n  } @if(!shortForm && formGroup.controls?.expectedResponseType) {\n  <div class=\"form-field\">\n    <label for=\"expectedResponseType\" class=\"block text-sm font-medium text-gray-700\">Expected Response Type</label>\n    <input pInputText id=\"expectedResponseType\" type=\"text\" [formControl]=\"formGroup.controls?.expectedResponseType\" class=\"w-full\" />\n  </div>\n  } @if (formGroup.controls?.model) {\n\n  <dc-model-selector [modelForm]=\"formGroup.controls.model\" [shortForm]=\"shortForm\"></dc-model-selector>\n  } @if (!shortForm && formGroup.controls?.systemPrompt) {\n  <div class=\"form-field\">\n    <label for=\"systemPrompt\" class=\"block text-sm font-medium text-gray-700 mb-1\">System Prompt</label>\n    <input pInputText id=\"systemPrompt\" [formControl]=\"formGroup.controls?.systemPrompt\" class=\"w-full\" />\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.form-field{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentTaskFormComponent, decorators: [{
             type: Component,
@@ -3696,57 +3903,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
-class DCConversationFlowFormComponent {
+class DcDoActionFormComponent {
     constructor() {
-        this.formGroupService = inject(FormGroupService);
-        this.entityWhatOptions = EntityWhatOptions;
-        this.entityWhenOptions = EntityWhenOptions;
-        this.formGroup = this.formGroupService.createConversationFlowFormGroup();
-        this.conversationEvents = ConversationEvents;
-        this.objectKeys = Object.keys;
+        this.removeItem = new EventEmitter();
+        this.doActionTypeOptions = DoActionTypeOptions;
     }
-    ngOnInit() {
-        if (!this.formGroup) {
-            throw new Error('DCConversationFlowFormComponent requires a formGroup input.');
-        }
+    onRemoveItem() {
+        this.removeItem.emit({ conditionIndex: this.conditionIndex, doItemIndex: this.doItemIndex });
     }
-    get dynamicConditionsArray() {
-        return this.formGroup.controls.dynamicConditions;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcDoActionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DcDoActionFormComponent, isStandalone: true, selector: "dc-do-action-form", inputs: { formGroup: "formGroup", conditionIndex: "conditionIndex", doItemIndex: "doItemIndex", systemPromptTypeOptions: "systemPromptTypeOptions" }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"bg-white shadow-md rounded-lg p-6 mb-6 border border-gray-200\">\n  <div class=\"flex justify-between items-center mb-4\">\n    <h5 class=\"text-lg font-semibold text-gray-700\">Task {{ doItemIndex + 1 }}</h5>\n    <button pButton type=\"button\" severity=\"danger\" icon=\"pi pi-trash\" (click)=\"onRemoveItem()\" class=\"p-button-sm p-button-text p-button-rounded\"></button>\n  </div>\n  <div class=\"space-y-4\">\n    <!-- Action Type -->\n    <div class=\"flex flex-col\">\n      <label [for]=\"'actionType_' + conditionIndex + '_' + doItemIndex\" class=\"mb-1 text-sm font-medium text-gray-600\">Action Type</label>\n      <p-select\n        [options]=\"doActionTypeOptions\"\n        formControlName=\"actionType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Action Type'\"\n        [id]=\"'actionType_' + conditionIndex + '_' + doItemIndex\"\n        styleClass=\"w-full\"\n        [panelStyle]=\"{ width: '100%' }\"></p-select>\n    </div>\n\n    <!-- System Prompt Type -->\n    <div class=\"flex flex-col\">\n      <label [for]=\"'systemPromptType_' + conditionIndex + '_' + doItemIndex\" class=\"mb-1 text-sm font-medium text-gray-600\">System Prompt Type</label>\n      <p-select\n        [options]=\"systemPromptTypeOptions\"\n        formControlName=\"systemPromptType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select System Prompt Type'\"\n        [id]=\"'systemPromptType_' + conditionIndex + '_' + doItemIndex\"\n        styleClass=\"w-full\"\n        [panelStyle]=\"{ width: '100%' }\"></p-select>\n    </div>\n\n    <!-- Prompt -->\n    <div class=\"flex flex-col\">\n      <label [for]=\"'prompt_' + conditionIndex + '_' + doItemIndex\" class=\"mb-1 text-sm font-medium text-gray-600\">Prompt</label>\n      <textarea\n        pTextarea\n        [autoResize]=\"true\"\n        [id]=\"'prompt_' + conditionIndex + '_' + doItemIndex\"\n        formControlName=\"prompt\"\n        rows=\"3\"\n        class=\"w-full p-inputtext p-component rounded-md border-gray-300 focus:border-primary-500 focus:ring focus:ring-primary-200 focus:ring-opacity-50\"></textarea>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcDoActionFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-do-action-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, ButtonModule, SelectModule, TextareaModule, TooltipModule], template: "<div [formGroup]=\"formGroup\" class=\"bg-white shadow-md rounded-lg p-6 mb-6 border border-gray-200\">\n  <div class=\"flex justify-between items-center mb-4\">\n    <h5 class=\"text-lg font-semibold text-gray-700\">Task {{ doItemIndex + 1 }}</h5>\n    <button pButton type=\"button\" severity=\"danger\" icon=\"pi pi-trash\" (click)=\"onRemoveItem()\" class=\"p-button-sm p-button-text p-button-rounded\"></button>\n  </div>\n  <div class=\"space-y-4\">\n    <!-- Action Type -->\n    <div class=\"flex flex-col\">\n      <label [for]=\"'actionType_' + conditionIndex + '_' + doItemIndex\" class=\"mb-1 text-sm font-medium text-gray-600\">Action Type</label>\n      <p-select\n        [options]=\"doActionTypeOptions\"\n        formControlName=\"actionType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Action Type'\"\n        [id]=\"'actionType_' + conditionIndex + '_' + doItemIndex\"\n        styleClass=\"w-full\"\n        [panelStyle]=\"{ width: '100%' }\"></p-select>\n    </div>\n\n    <!-- System Prompt Type -->\n    <div class=\"flex flex-col\">\n      <label [for]=\"'systemPromptType_' + conditionIndex + '_' + doItemIndex\" class=\"mb-1 text-sm font-medium text-gray-600\">System Prompt Type</label>\n      <p-select\n        [options]=\"systemPromptTypeOptions\"\n        formControlName=\"systemPromptType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select System Prompt Type'\"\n        [id]=\"'systemPromptType_' + conditionIndex + '_' + doItemIndex\"\n        styleClass=\"w-full\"\n        [panelStyle]=\"{ width: '100%' }\"></p-select>\n    </div>\n\n    <!-- Prompt -->\n    <div class=\"flex flex-col\">\n      <label [for]=\"'prompt_' + conditionIndex + '_' + doItemIndex\" class=\"mb-1 text-sm font-medium text-gray-600\">Prompt</label>\n      <textarea\n        pTextarea\n        [autoResize]=\"true\"\n        [id]=\"'prompt_' + conditionIndex + '_' + doItemIndex\"\n        formControlName=\"prompt\"\n        rows=\"3\"\n        class=\"w-full p-inputtext p-component rounded-md border-gray-300 focus:border-primary-500 focus:ring focus:ring-primary-200 focus:ring-opacity-50\"></textarea>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { formGroup: [{
+                type: Input,
+                args: [{ required: true }]
+            }], conditionIndex: [{
+                type: Input,
+                args: [{ required: true }]
+            }], doItemIndex: [{
+                type: Input,
+                args: [{ required: true }]
+            }], systemPromptTypeOptions: [{
+                type: Input,
+                args: [{ required: true }]
+            }], removeItem: [{
+                type: Output
+            }] } });
+
+class DcDynamicConditionsFormComponent {
+    constructor() {
+        this.formGroupService = inject(FormGroupService);
     }
     addDynamicCondition() {
-        this.dynamicConditionsArray.push(this.formGroupService.createDynamicConditionFormGroup());
+        this.formGroupService.addItemToFormArray(this.dynamicConditionsArray, () => this.formGroupService.createDynamicConditionFormGroup());
     }
     removeDynamicCondition(index) {
-        this.dynamicConditionsArray.removeAt(index);
+        this.formGroupService.removeItemFromFormArray(this.dynamicConditionsArray, index);
+    }
+    getDoArray(conditionIndex) {
+        const conditionPath = `${this.dynamicConditionsPath}.${conditionIndex}.do`;
+        return this.formGroupService.getItemFromFormArray(this.dynamicConditionsArray, conditionIndex);
+    }
+    getDoControls(conditionIndex) {
+        return this.getDoArray(conditionIndex).controls;
+    }
+    getDoItemFormGroup(conditionIndex, doItemIndex) {
+        const doItemPath = `${this.dynamicConditionsPath}.${conditionIndex}.do.${doItemIndex}`;
+        return this.formGroupService.getItemFromFormArray(this.dynamicConditionsArray, doItemIndex);
+    }
+    addDoItem(conditionIndex) {
+        this.formGroupService.addItemToFormArray(this.dynamicConditionsArray, () => this.formGroupService.createDoActionFormGroup());
     }
-    // Helper to get controls for the template to iterate
-    getDynamicConditionsControls() {
-        return this.dynamicConditionsArray.controls;
+    removeDoItem(conditionIndex, doItemIndex) {
+        debugger;
+        this.formGroupService.removeItemFromFormArray(this.dynamicConditionsArray, doItemIndex);
     }
     // Helper to safely cast to FormControl for the template
     getFormControl(control) {
         if (!(control instanceof FormControl)) {
-            // This case should ideally not happen if types are correct,
-            // but it's a safeguard.
             console.error('Expected a FormControl, but received:', control);
-            // Return a dummy FormControl or handle error appropriately
             return new FormControl(null);
         }
         return control;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcDynamicConditionsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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 (doItemControl of conditionControl.controls.do.controls; track doItemControl; let j = $index) {\n      <dc-do-action-form\n        [formGroup]=\"doItemControl\"\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)=\"addDoItem(i)\"\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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: DcDoActionFormComponent, selector: "dc-do-action-form", inputs: ["formGroup", "conditionIndex", "doItemIndex", "systemPromptTypeOptions"], outputs: ["removeItem"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcDynamicConditionsFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-dynamic-conditions-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, ButtonModule, InputTextModule, SelectModule, TooltipModule, DcDoActionFormComponent], 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 (doItemControl of conditionControl.controls.do.controls; track doItemControl; let j = $index) {\n      <dc-do-action-form\n        [formGroup]=\"doItemControl\"\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)=\"addDoItem(i)\"\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"] }]
+        }], propDecorators: { dynamicConditionsArray: [{
+                type: Input,
+                args: [{ required: true }]
+            }], dynamicConditionsPath: [{
+                type: Input,
+                args: [{ required: true }]
+            }], entityWhatOptions: [{
+                type: Input,
+                args: [{ required: true }]
+            }], entityWhenOptions: [{
+                type: Input,
+                args: [{ required: true }]
+            }], systemPromptTypeOptions: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class DCConversationFlowFormComponent {
+    constructor() {
+        // Services
+        this.formGroupService = inject(FormGroupService);
+        // Options vars
+        this.entityWhatOptions = EntityWhatOptions;
+        this.entityWhenOptions = EntityWhenOptions;
+        // FORM GROUP
+        this.formGroup = this.formGroupService.createConversationFlowFormGroup();
+        this.conversationEvents = ConversationEvents;
+        this.objectKeys = Object.keys;
+        this.doActionTypeOptions = Object.values(EDoActionType).map((value) => ({ label: this.formatEnumKey(value), value }));
+        this.systemPromptTypeOptions = Object.values(SystemPromptType).map((value) => ({ label: this.formatEnumKey(value), value }));
+    }
+    ngOnInit() {
+        if (!this.formGroup) {
+            throw new Error('DCConversationFlowFormComponent requires a formGroup input.');
+        }
+    }
+    formatEnumKey(key) {
+        // Converts camelCase or PascalCase to Title Case
+        const result = key.replace(/([A-Z])/g, ' $1');
+        return result.charAt(0).toUpperCase() + result.slice(1).trim();
+    }
+    removeArrayItem(controlPath, index) {
+        this.formGroupService.removeArrayItem(this.formGroup, controlPath, index);
+    }
     showData() {
         console.log(this.formGroup.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationFlowFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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 class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"The main objective of this conversation flow\">\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 Tasks</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4>Trigger Tasks <span (click)=\"showData()\" pTooltip=\"Tasks to be executed on specific conversation events\">\u2139\uFE0F</span></h4>\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <!-- {{ eventKey }} -->\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">{{ eventKey }}</label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\"></agent-task-form>\n      </div>\n      }\n\n      <!-- <div [formGroupName]=\"eventKey\" class=\"group nested-group\">\n      <h5>{{ conversationEvents[eventKey] }} <span pTooltip=\"Task for {{ conversationEvents[eventKey] }} event\">\u2139\uFE0F</span></h5>\n      <div class=\"form-field\">\n        <label [for]=\"eventKey + 'SystemPrompt'\">System Prompt</label>\n        <textarea pTextarea [autoResize]=\"true\" [id]=\"eventKey + 'SystemPrompt'\" formControlName=\"systemPrompt\"></textarea>\n      </div>\n      <div class=\"form-field\">\n        <label [for]=\"eventKey + 'Task'\">Task</label>\n        <textarea pTextarea [autoResize]=\"true\" [id]=\"eventKey + 'Task'\" formControlName=\"task\"></textarea>\n      </div>\n      <div class=\"form-field\">\n        <label [for]=\"eventKey + 'ExpectedResponseType'\">Expected Response Type</label>\n        <input pInputText [id]=\"eventKey + 'ExpectedResponseType'\" type=\"text\" formControlName=\"expectedResponseType\" />\n      </div>\n    </div> -->\n    </div>\n  </details>\n\n  <div class=\"form-field\">\n    <label for=\"flowBonus\">Bonus <span pTooltip=\"Bonus information or context (e.g., JSON string)\">\u2139\uFE0F</span></label>\n    <input id=\"flowBonus\" formControlName=\"bonus\" />\n  </div>\n\n  <div formArrayName=\"dynamicConditions\" class=\"group\">\n    <h4>Dynamic Conditions <span pTooltip=\"Conditions that trigger tasks based on conversation state\">\u2139\uFE0F</span></h4>\n    @for (conditionControl of getDynamicConditionsControls(); track conditionControl; let i = $index) {\n    <div [formGroupName]=\"i\" class=\"group nested-group dynamic-condition-item\">\n      <h5>Condition {{ i + 1 }}</h5>\n      <div class=\"form-field\">\n        <label [for]=\"'conditionWhat' + i\">What <span pTooltip=\"Identifier for this condition (optional)\">\u2139\uFE0F</span></label>\n\n        <p-select\n          id=\"lang\"\n          [options]=\"entityWhatOptions\"\n          formControlName=\"what\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select What'\"></p-select>\n\n        <!-- <p-dropdown [options]=\"entityWhatOptions\" formControlName=\"what\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select What\"></p-dropdown> -->\n      </div>\n      <div class=\"form-field\">\n        <label [for]=\"'conditionWhen' + i\">When <span pTooltip=\"Field or variable to check\">\u2139\uFE0F</span></label>\n\n        <p-select\n          id=\"lang\"\n          [options]=\"entityWhenOptions\"\n          formControlName=\"when\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select When'\"></p-select>\n\n        <!-- <p-dropdown [options]=\"entityWhenOptions\" formControlName=\"when\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select When\"></p-dropdown> -->\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\" formControlName=\"value\" />\n      </div>\n      <!-- The 'then' FormControl is not directly rendered here as it's an any[] type.\n           If it's meant to hold specific structured data to be rendered,\n           its type and rendering logic would need to be adjusted.\n           The task to execute is handled by the 'task' FormGroup below. -->\n\n      <div formGroupName=\"task\" class=\"group very-nested-group\">\n        <h6>Task <span pTooltip=\"Task to execute if this condition is met\">\u2139\uFE0F</span></h6>\n        <agent-task-form [formGroup]=\"conditionControl.controls.task\"></agent-task-form>\n      </div>\n      <button pButton type=\"button\" severity=\"danger\" label=\"Remove Condition\" (click)=\"removeDynamicCondition(i)\"></button>\n    </div>\n    }\n    <button pButton type=\"button\" severity=\"info\" label=\"Add Dynamic Condition\" (click)=\"addDynamicCondition()\"></button>\n  </div>\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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.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: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: AgentTaskFormComponent, selector: "agent-task-form", inputs: ["formGroup", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationFlowFormComponent, isStandalone: true, selector: "dc-conversation-flow-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"group bg-pink-50\">\n  <h3>Conversation Flow <span pTooltip=\"Define the flow and logic of the conversation\">\u2139\uFE0F</span></h3>\n\n  <div class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"The main objective of this conversation flow\">\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 Tasks</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4>Trigger Tasks <span (click)=\"showData()\" pTooltip=\"Tasks to be executed on specific conversation events\">\u2139\uFE0F</span></h4>\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <!-- {{ eventKey }} -->\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">{{ eventKey }}</label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\"></agent-task-form>\n      </div>\n      }\n    </div>\n  </details>\n\n  <div class=\"form-field\">\n    <label for=\"flowBonus\">Bonus <span pTooltip=\"Bonus information or context (e.g., JSON string)\">\u2139\uFE0F</span></label>\n    <input id=\"flowBonus\" formControlName=\"bonus\" />\n  </div>\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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationFlowFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-conversation-flow-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, ButtonModule, InputTextModule, TextareaModule, TooltipModule, AgentTaskFormComponent, SelectModule], 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 class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"The main objective of this conversation flow\">\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 Tasks</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4>Trigger Tasks <span (click)=\"showData()\" pTooltip=\"Tasks to be executed on specific conversation events\">\u2139\uFE0F</span></h4>\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <!-- {{ eventKey }} -->\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">{{ eventKey }}</label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\"></agent-task-form>\n      </div>\n      }\n\n      <!-- <div [formGroupName]=\"eventKey\" class=\"group nested-group\">\n      <h5>{{ conversationEvents[eventKey] }} <span pTooltip=\"Task for {{ conversationEvents[eventKey] }} event\">\u2139\uFE0F</span></h5>\n      <div class=\"form-field\">\n        <label [for]=\"eventKey + 'SystemPrompt'\">System Prompt</label>\n        <textarea pTextarea [autoResize]=\"true\" [id]=\"eventKey + 'SystemPrompt'\" formControlName=\"systemPrompt\"></textarea>\n      </div>\n      <div class=\"form-field\">\n        <label [for]=\"eventKey + 'Task'\">Task</label>\n        <textarea pTextarea [autoResize]=\"true\" [id]=\"eventKey + 'Task'\" formControlName=\"task\"></textarea>\n      </div>\n      <div class=\"form-field\">\n        <label [for]=\"eventKey + 'ExpectedResponseType'\">Expected Response Type</label>\n        <input pInputText [id]=\"eventKey + 'ExpectedResponseType'\" type=\"text\" formControlName=\"expectedResponseType\" />\n      </div>\n    </div> -->\n    </div>\n  </details>\n\n  <div class=\"form-field\">\n    <label for=\"flowBonus\">Bonus <span pTooltip=\"Bonus information or context (e.g., JSON string)\">\u2139\uFE0F</span></label>\n    <input id=\"flowBonus\" formControlName=\"bonus\" />\n  </div>\n\n  <div formArrayName=\"dynamicConditions\" class=\"group\">\n    <h4>Dynamic Conditions <span pTooltip=\"Conditions that trigger tasks based on conversation state\">\u2139\uFE0F</span></h4>\n    @for (conditionControl of getDynamicConditionsControls(); track conditionControl; let i = $index) {\n    <div [formGroupName]=\"i\" class=\"group nested-group dynamic-condition-item\">\n      <h5>Condition {{ i + 1 }}</h5>\n      <div class=\"form-field\">\n        <label [for]=\"'conditionWhat' + i\">What <span pTooltip=\"Identifier for this condition (optional)\">\u2139\uFE0F</span></label>\n\n        <p-select\n          id=\"lang\"\n          [options]=\"entityWhatOptions\"\n          formControlName=\"what\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select What'\"></p-select>\n\n        <!-- <p-dropdown [options]=\"entityWhatOptions\" formControlName=\"what\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select What\"></p-dropdown> -->\n      </div>\n      <div class=\"form-field\">\n        <label [for]=\"'conditionWhen' + i\">When <span pTooltip=\"Field or variable to check\">\u2139\uFE0F</span></label>\n\n        <p-select\n          id=\"lang\"\n          [options]=\"entityWhenOptions\"\n          formControlName=\"when\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select When'\"></p-select>\n\n        <!-- <p-dropdown [options]=\"entityWhenOptions\" formControlName=\"when\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select When\"></p-dropdown> -->\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\" formControlName=\"value\" />\n      </div>\n      <!-- The 'then' FormControl is not directly rendered here as it's an any[] type.\n           If it's meant to hold specific structured data to be rendered,\n           its type and rendering logic would need to be adjusted.\n           The task to execute is handled by the 'task' FormGroup below. -->\n\n      <div formGroupName=\"task\" class=\"group very-nested-group\">\n        <h6>Task <span pTooltip=\"Task to execute if this condition is met\">\u2139\uFE0F</span></h6>\n        <agent-task-form [formGroup]=\"conditionControl.controls.task\"></agent-task-form>\n      </div>\n      <button pButton type=\"button\" severity=\"danger\" label=\"Remove Condition\" (click)=\"removeDynamicCondition(i)\"></button>\n    </div>\n    }\n    <button pButton type=\"button\" severity=\"info\" label=\"Add Dynamic Condition\" (click)=\"addDynamicCondition()\"></button>\n  </div>\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"] }]
-        }], propDecorators: { formGroup: [{
+            args: [{ selector: 'dc-conversation-flow-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        ButtonModule,
+                        InputTextModule,
+                        TextareaModule,
+                        TooltipModule,
+                        AgentTaskFormComponent,
+                        SelectModule,
+                        DcDoActionFormComponent,
+                        DcDynamicConditionsFormComponent,
+                    ], template: "<div [formGroup]=\"formGroup\" class=\"group bg-pink-50\">\n  <h3>Conversation Flow <span pTooltip=\"Define the flow and logic of the conversation\">\u2139\uFE0F</span></h3>\n\n  <div class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"The main objective of this conversation flow\">\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 Tasks</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4>Trigger Tasks <span (click)=\"showData()\" pTooltip=\"Tasks to be executed on specific conversation events\">\u2139\uFE0F</span></h4>\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <!-- {{ eventKey }} -->\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">{{ eventKey }}</label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\"></agent-task-form>\n      </div>\n      }\n    </div>\n  </details>\n\n  <div class=\"form-field\">\n    <label for=\"flowBonus\">Bonus <span pTooltip=\"Bonus information or context (e.g., JSON string)\">\u2139\uFE0F</span></label>\n    <input id=\"flowBonus\" formControlName=\"bonus\" />\n  </div>\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"] }]
+        }], ctorParameters: () => [], propDecorators: { formGroup: [{
                 type: Input
             }] } });
 
+function markdownToHTML(markdownText) {
+    // Convert italics-bold (***text***)
+    let htmlText = markdownText.replace(/\*\*\*(.+?)\*\*\*/g, '<em><strong>$1</strong></em>');
+    // Convert bold (**text**)
+    htmlText = htmlText.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    // Convert italics (*text*)
+    htmlText = htmlText.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    // Convert text enclosed by double quotes ("text")
+    // htmlText = htmlText.replace(/"(.+?)"/g, '<cite>$1</cite>');
+    return htmlText;
+}
+class SimpleMdToHtmlPipe {
+    transform(text) {
+        return markdownToHTML(text);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SimpleMdToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: SimpleMdToHtmlPipe, isStandalone: true, name: "simpleMdToHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SimpleMdToHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'simpleMdToHtml',
+                    standalone: true,
+                }]
+        }] });
+class StartDivToHtmlPipe {
+    // solo create espacio entre lineas
+    transform(text) {
+        text = text.replace(/<start>/gi, '<hr>');
+        text = text.replace(/\n/g, '<br>');
+        return text;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StartDivToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: StartDivToHtmlPipe, isStandalone: true, name: "startDividerToHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StartDivToHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'startDividerToHtml',
+                    standalone: true,
+                }]
+        }] });
+class MdToHtmlArrayPipe {
+    // devuelve un array de objetos con el contenido y el tag
+    transform(text) {
+        const htmlArray = convertToHTML(text);
+        return htmlArray.map((val) => val.content).join('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MdToHtmlArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: MdToHtmlArrayPipe, isStandalone: true, name: "mdToHtmlArray" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MdToHtmlArrayPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mdToHtmlArray',
+                    standalone: true,
+                }]
+        }] });
+
 class DcCharacterCardFormComponent {
     constructor() {
         this.generateMissingDataRequest = new EventEmitter();
@@ -3754,7 +4109,8 @@ class DcCharacterCardFormComponent {
         this.cdr = inject(ChangeDetectorRef);
         this.agentCardService = inject(CONVERSATION_AI_TOKEN);
         this.toastService = inject(TOAST_ALERTS_TOKEN, { optional: true });
-        this.markdownForm = this.fb.group({ seeMarkdown: [false] });
+        this.formGroupService = inject(FormGroupService);
+        this.markdownForm = new FormGroup({ seeMarkdown: new FormControl(false) });
         this.isGenerating = false; // For improveFirstMessage loading state
     }
     get dataGroup() {
@@ -3781,34 +4137,15 @@ class DcCharacterCardFormComponent {
         this.cdr.detectChanges();
     }
     addArrayItem(controlPath) {
-        const control = this.characterCardForm.get(`data.${controlPath}`);
-        if (control) {
-            control.push(this.fb.control(''));
-            this.cdr.detectChanges();
-        }
+        this.formGroupService.addArrayItem(this.dataGroup, controlPath);
+        this.cdr.detectChanges();
     }
     removeArrayItem(controlPath, index) {
-        const control = this.characterCardForm.get(`data.${controlPath}`);
-        if (control) {
-            control.removeAt(index);
-            this.cdr.detectChanges();
-        }
+        this.formGroupService.removeArrayItem(this.dataGroup, controlPath, index);
+        this.cdr.detectChanges();
     }
     updateArrayField(controlPath, index, event) {
-        const control = this.characterCardForm.get(`data.${controlPath}`);
-        if (control instanceof FormArray && event.target instanceof HTMLInputElement) {
-            const formControlAtIndex = control.at(index);
-            if (formControlAtIndex) {
-                formControlAtIndex.setValue(event.target.value);
-            }
-        }
-        else if (control instanceof FormArray && event.target instanceof HTMLTextAreaElement) {
-            // Handle textarea
-            const formControlAtIndex = control.at(index);
-            if (formControlAtIndex) {
-                formControlAtIndex.setValue(event.target.value);
-            }
-        }
+        this.formGroupService.updateArrayField(this.dataGroup, controlPath, index, event);
     }
     async improveFirstMessage() {
         const confirmImprove = window.confirm('Are you sure you want to improve the first message? It might be shortened.');
@@ -3870,11 +4207,11 @@ Improve the following first message:`;
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcCharacterCardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcCharacterCardFormComponent, isStandalone: true, selector: "dc-character-card-form", inputs: { characterCardForm: "characterCardForm" }, outputs: { generateMissingDataRequest: "generateMissingDataRequest" }, ngImport: i0, template: "<div [formGroup]=\"characterCardForm\" class=\"p-6 bg-gray-50 min-h-screen\">\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=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n        >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 grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\" 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=\"3\"\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=\"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=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >First Message\n            <span\n              pTooltip=\"Es muy importante que la historia inicie bien, ya que es el patr\u00F3n inicial para la AI, respetar las convenciones de texto\"\n              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 bg-gray-50\"></div>\n      }@else{\n      <textarea\n        rows=\"2\"\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        >Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\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        >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=\"2\"\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 for=\"cardSystemPrompt\" class=\"block text-sm font-medium text-gray-700\"\n        >System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\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 class=\"block text-sm font-medium text-gray-700\">Image Description</label>\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"picture_description\"\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=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >Post-History Instructions (Opcional)\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"2\"\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=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></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('alternate_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('alternate_greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('alternate_greetings')\" class=\"p-button-sm\"></button>\n      </div>\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  </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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i6.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcCharacterCardFormComponent, isStandalone: true, selector: "dc-character-card-form", inputs: { characterCardForm: "characterCardForm" }, outputs: { generateMissingDataRequest: "generateMissingDataRequest" }, ngImport: i0, template: "<div [formGroup]=\"characterCardForm\" class=\"p-6 bg-teal-50 min-h-screen\">\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=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n        >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 grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\" 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=\"3\"\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=\"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=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >First Message\n            <span\n              pTooltip=\"Es muy importante que la historia inicie bien, ya que es el patr\u00F3n inicial para la AI, respetar las convenciones de texto\"\n              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=\"2\"\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        >Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\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        >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=\"2\"\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 for=\"cardSystemPrompt\" class=\"block text-sm font-medium text-gray-700\"\n        >System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\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 class=\"block text-sm font-medium text-gray-700\">Image Description</label>\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"picture_description\"\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=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >Post-History Instructions (Opcional)\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"2\"\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=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></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('alternate_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('alternate_greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('alternate_greetings')\" class=\"p-button-sm\"></button>\n      </div>\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  </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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i6.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcCharacterCardFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-character-card-form', standalone: true, imports: [ReactiveFormsModule, FormsModule, ButtonModule, InputTextModule, TextareaModule, TooltipModule, ToggleButtonModule, MdToHtmlArrayPipe], template: "<div [formGroup]=\"characterCardForm\" class=\"p-6 bg-gray-50 min-h-screen\">\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=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n        >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 grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\" 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=\"3\"\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=\"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=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >First Message\n            <span\n              pTooltip=\"Es muy importante que la historia inicie bien, ya que es el patr\u00F3n inicial para la AI, respetar las convenciones de texto\"\n              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 bg-gray-50\"></div>\n      }@else{\n      <textarea\n        rows=\"2\"\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        >Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\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        >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=\"2\"\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 for=\"cardSystemPrompt\" class=\"block text-sm font-medium text-gray-700\"\n        >System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\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 class=\"block text-sm font-medium text-gray-700\">Image Description</label>\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"picture_description\"\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=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >Post-History Instructions (Opcional)\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"2\"\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=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></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('alternate_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('alternate_greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('alternate_greetings')\" class=\"p-button-sm\"></button>\n      </div>\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  </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"] }]
+            args: [{ selector: 'dc-character-card-form', standalone: true, imports: [ReactiveFormsModule, FormsModule, ButtonModule, InputTextModule, TextareaModule, TooltipModule, ToggleButtonModule, MdToHtmlArrayPipe], template: "<div [formGroup]=\"characterCardForm\" class=\"p-6 bg-teal-50 min-h-screen\">\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=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n        >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 grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\" 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=\"3\"\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=\"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=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >First Message\n            <span\n              pTooltip=\"Es muy importante que la historia inicie bien, ya que es el patr\u00F3n inicial para la AI, respetar las convenciones de texto\"\n              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=\"2\"\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        >Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\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        >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=\"2\"\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 for=\"cardSystemPrompt\" class=\"block text-sm font-medium text-gray-700\"\n        >System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\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 class=\"block text-sm font-medium text-gray-700\">Image Description</label>\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"picture_description\"\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=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >Post-History Instructions (Opcional)\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"2\"\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=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></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('alternate_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('alternate_greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('alternate_greetings')\" class=\"p-button-sm\"></button>\n      </div>\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  </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 }]
@@ -3933,6 +4270,7 @@ class DCAgentCardFormComponent {
             version: ['1.0'],
             id: [''],
             title: [''],
+            description: [''],
             lang: [''],
             characterCard: this.formGroupService.createCharacterCardFormGroup(),
             conversationSettings: this.formGroupService.createConversationSettingFormGroup(),
@@ -3975,17 +4313,11 @@ class DCAgentCardFormComponent {
         }
     }
     patchFormWithConversationData() {
-        // Ensure conversationFlow and its sub-properties are initialized if not present
         // const conversationFlowData: Partial<IConversationFlow> = this.conversation?.conversationFlow || {};
         this.form.patchValue(this.conversation);
         // Patch dynamicConditions FormArray after the main form is patched
         const dynamicConditionsFormArray = this.form.get('conversationFlow.dynamicConditions');
         dynamicConditionsFormArray.clear(); // Clear any existing default items
-        // if (this.conversation.conversationFlow?.dynamicConditions?.length) {
-        //   this.conversation.conversationFlow.dynamicConditions.forEach((condition: DynamicCondition) => {
-        //     dynamicConditionsFormArray.push(this.createDynamicConditionFormGroup(condition));
-        //   });
-        // }
     }
     handleArrayForms() {
         // If not posible to patch arrays if control does not exist, that why they are created dinamycally depending on the data.
@@ -4000,6 +4332,14 @@ class DCAgentCardFormComponent {
             const dynamicConditionsFormArray = this.form.get('conversationFlow.dynamicConditions');
             this.conversation.conversationFlow.dynamicConditions.forEach((condition) => {
                 dynamicConditionsFormArray.push(this.formGroupService.createDynamicConditionFormGroup(condition));
+                if (condition?.do?.length) {
+                    for (let control of dynamicConditionsFormArray.controls) {
+                        const doFormArray = control.get('do');
+                        condition.do.forEach((action) => {
+                            doFormArray.push(this.formGroupService.createDoActionFormGroup(action));
+                        });
+                    }
+                }
             });
         }
     }
@@ -4238,8 +4578,18 @@ class DCAgentCardFormComponent {
             }
         });
     }
+    openConversationTypeDialog() {
+        const dialogRef = this.dialogService.open(PromptConversationTypesDialogComponent, {
+            header: 'Select Conversation Type',
+            width: '50vw',
+            contentStyle: { 'max-height': '90vh', overflow: 'auto' },
+            baseZIndex: 1000,
+            closable: true,
+            modal: true,
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCAgentCardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null }, bannerImgSettings: { classPropertyName: "bannerImgSettings", publicName: "bannerImgSettings", isSignal: true, isRequired: false, transformFunction: null }, imageStorageSettings: { classPropertyName: "imageStorageSettings", publicName: "imageStorageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onImageLoaded: "onImageLoaded", onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], ngImport: i0, template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div style=\"display: flex; gap: 15px\">\n          <div class=\"form-field\">\n            <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"id\"\n              >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n            >\n          </div>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n          <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n          @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n          <div class=\"error\"> Title is required </div>\n          }\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n          <p-select\n            id=\"lang\"\n            [options]=\"languageOptions\"\n            formControlName=\"lang\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"'Select Language'\"></p-select>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"modelQuality\"\n              >Calidad del modelo\n              <span\n                pTooltip=\"Mientras inteligente, es m\u00E1s lento y costoso $$, considera usar el rapido o balanceado salvo que necesitas una evaluaci\u00F3n muy compleja.  \"\n                >\u2139\uFE0F</span\n              ></label\n            >\n            <p-select\n              id=\"modelQuality\"\n              [options]=\"modelQualityOptions\"\n              formControlName=\"modelQuality\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Model Quality'\">\n            </p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n              >\n            </label>\n\n            <p-select\n              id=\"textEngine\"\n              [options]=\"textEngineOptions\"\n              formControlName=\"textEngine\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"conversationType\">Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"conversationType\"\n              [options]=\"conversationOptions\"\n              formControlName=\"conversationType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n            <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n          </div>\n\n          <div formGroupName=\"tts\" class=\"group\">\n            <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n            <div class=\"form-field\">\n              <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector(true)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"voice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-info-circle\" (click)=\"openVoiceSelector(false)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"secondaryVoice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"speed\"\n                [options]=\"audioSpeedOptions\"\n                formControlName=\"speed\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n            </div>\n          </div>\n\n          <dc-model-selector [modelForm]=\"form.controls.conversationSettings.controls.model\" [shortForm]=\"true\"></dc-model-selector>\n        </div>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                Public\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                Published\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts){\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        <div style=\"position: relative; min-height: 60px\">\n          <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n          @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n          <dc-cropper-modal\n            style=\"position: absolute; bottom: 10px; right: 10px\"\n            #cropperBanner\n            id=\"cropperBanner\"\n            [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n            [imgStorageSettings]=\"bannerImgSettings()\"\n            [currentStorage]=\"conversation?.assets?.bannerImg\"\n            (onFileSelected)=\"onImageSelected($event)\"\n            (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n          }\n        </div>\n        <div style=\"position: relative\">\n          <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n          @if (!agentCardId) {\n          <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n          } @else {\n\n          <p-button\n            (click)=\"generateMainImage()\"\n            class=\"image-gen-btn\"\n            pTooltip=\"Generar/Re generar la imagen\"\n            icon=\"pi pi-sparkles\"\n            [rounded]=\"true\"\n            severity=\"info\" />\n\n          <dc-cropper-modal\n            style=\"position: absolute; bottom: 10px; left: 50%\"\n            id=\"cropperCardImage\"\n            #cropperCardImage\n            [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n            [imgStorageSettings]=\"imageStorageSettings()\"\n            (onFileSelected)=\"onImageSelected($event)\"\n            (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n          }\n        </div>\n\n        <div>\n          <h4>Agregar stickers</h4>\n\n          <dc-cropper-modal\n            id=\"cropperCardImage\"\n            #cropperStickers\n            [buttonLabel]=\"'agregar sticker'\"\n            [imgStorageSettings]=\"stickerStorageSettings\"\n            (onFileSelected)=\"onImageSelected($event)\"\n            (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n          @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n          <div style=\"position: relative\">\n            <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n            <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n          </div>\n          }\n        </div>\n\n        <!-- <input pInputText type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" /> -->\n\n        @if(form.controls.characterCard){\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <p-popover #textEngineDialog header=\"Text Engine Information\">\n    <div class=\"p-4\">\n      <h3>Text Engine Types</h3>\n      <ul>\n        <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n        <li\n          ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n          puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n          personaje principal</li\n        >\n        <li\n          ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo\n          se presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n        >\n      </ul>\n    </div>\n  </p-popover>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".textmin{min-width:36vw}.image-gen-btn{position:absolute;bottom:15px;left:35%}.main-image-card{max-width:280px;display:block;margin:0 auto;border-radius:8px}.main-banner-image-card{border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{background-color:#f8f9fa;padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{background-color:#f8f9fa;padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i6$1.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i9.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i10.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null }, bannerImgSettings: { classPropertyName: "bannerImgSettings", publicName: "bannerImgSettings", isSignal: true, isRequired: false, transformFunction: null }, imageStorageSettings: { classPropertyName: "imageStorageSettings", publicName: "imageStorageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onImageLoaded: "onImageLoaded", onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], ngImport: i0, template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n            @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n            <div class=\"error\"> Title is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.controls.description.errors?.['required'] && form.controls.description.touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group bg-sky-50\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n              >\n            </label>\n\n            <p-select\n              id=\"textEngine\"\n              [options]=\"textEngineOptions\"\n              formControlName=\"textEngine\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label class=\"cursor-pointer\" for=\"conversationType\" (click)=\"openConversationTypeDialog()\"\n              >Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label\n            >\n            <p-select\n              id=\"conversationType\"\n              [options]=\"conversationOptions\"\n              formControlName=\"conversationType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n            <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n          </div>\n\n          <div formGroupName=\"tts\" class=\"group\">\n            <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n            <div class=\"form-field\">\n              <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector(true)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"voice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-info-circle\" (click)=\"openVoiceSelector(false)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"secondaryVoice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"speed\"\n                [options]=\"audioSpeedOptions\"\n                formControlName=\"speed\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n            </div>\n          </div>\n\n          <dc-model-selector [modelForm]=\"form.controls.conversationSettings.controls.model\" [shortForm]=\"true\"></dc-model-selector>\n        </div>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                Public\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                Published\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts){\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        <div style=\"position: relative; min-height: 60px\">\n          <div style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n            <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n            @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n            <dc-cropper-modal\n              style=\"position: absolute; bottom: 10px; right: 10px\"\n              #cropperBanner\n              id=\"cropperBanner\"\n              [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n              [imgStorageSettings]=\"bannerImgSettings()\"\n              [currentStorage]=\"conversation?.assets?.bannerImg\"\n              (onFileSelected)=\"onImageSelected($event)\"\n              (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n            }\n            <div style=\"position: relative\">\n              <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n              @if (!agentCardId) {\n              <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n              } @else {\n\n              <p-button\n                (click)=\"generateMainImage()\"\n                class=\"image-gen-btn\"\n                pTooltip=\"Generar/Re generar la imagen\"\n                icon=\"pi pi-sparkles\"\n                [rounded]=\"true\"\n                severity=\"info\" />\n\n              <dc-cropper-modal\n                style=\"position: absolute; bottom: 10px; left: 50%\"\n                id=\"cropperCardImage\"\n                #cropperCardImage\n                [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n                [imgStorageSettings]=\"imageStorageSettings()\"\n                (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n              }\n            </div>\n\n            <h4>Agregar stickers</h4>\n\n            <dc-cropper-modal\n              id=\"cropperCardImage\"\n              #cropperStickers\n              [buttonLabel]=\"'agregar sticker'\"\n              [imgStorageSettings]=\"stickerStorageSettings\"\n              (onFileSelected)=\"onImageSelected($event)\"\n              (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n\n            <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n              @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n              <div style=\"position: relative\">\n                <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n                <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if(form.controls.characterCard){\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <p-popover #textEngineDialog header=\"Text Engine Information\">\n    <div class=\"p-4\">\n      <h3>Text Engine Types</h3>\n      <ul>\n        <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n        <li\n          ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n          puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n          personaje principal</li\n        >\n        <li\n          ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo\n          se presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n        >\n      </ul>\n    </div>\n  </p-popover>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".textmin{min-width:36vw}.image-gen-btn{position:absolute;bottom:15px;left:35%}.main-image-card{max-width:280px;display:block;margin:0 auto;border-radius:8px}.main-banner-image-card{border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i6$1.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i9.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i10.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i12.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
             type: Component,
@@ -4256,7 +4606,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         FormsModule,
                         TooltipModule,
                         ToggleSwitchModule,
-                        MdToHtmlArrayPipe,
                         SelectModule,
                         DialogModule,
                         DynamicDialogModule,
@@ -4269,7 +4618,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         CardModule,
                         DCConversationFlowFormComponent,
                         DcCharacterCardFormComponent,
-                    ], template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div style=\"display: flex; gap: 15px\">\n          <div class=\"form-field\">\n            <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"id\"\n              >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n            >\n          </div>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n          <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n          @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n          <div class=\"error\"> Title is required </div>\n          }\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n          <p-select\n            id=\"lang\"\n            [options]=\"languageOptions\"\n            formControlName=\"lang\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [placeholder]=\"'Select Language'\"></p-select>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"modelQuality\"\n              >Calidad del modelo\n              <span\n                pTooltip=\"Mientras inteligente, es m\u00E1s lento y costoso $$, considera usar el rapido o balanceado salvo que necesitas una evaluaci\u00F3n muy compleja.  \"\n                >\u2139\uFE0F</span\n              ></label\n            >\n            <p-select\n              id=\"modelQuality\"\n              [options]=\"modelQualityOptions\"\n              formControlName=\"modelQuality\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Model Quality'\">\n            </p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n              >\n            </label>\n\n            <p-select\n              id=\"textEngine\"\n              [options]=\"textEngineOptions\"\n              formControlName=\"textEngine\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"conversationType\">Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"conversationType\"\n              [options]=\"conversationOptions\"\n              formControlName=\"conversationType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n            <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n          </div>\n\n          <div formGroupName=\"tts\" class=\"group\">\n            <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n            <div class=\"form-field\">\n              <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector(true)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"voice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-info-circle\" (click)=\"openVoiceSelector(false)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"secondaryVoice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"speed\"\n                [options]=\"audioSpeedOptions\"\n                formControlName=\"speed\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n            </div>\n          </div>\n\n          <dc-model-selector [modelForm]=\"form.controls.conversationSettings.controls.model\" [shortForm]=\"true\"></dc-model-selector>\n        </div>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                Public\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                Published\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts){\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        <div style=\"position: relative; min-height: 60px\">\n          <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n          @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n          <dc-cropper-modal\n            style=\"position: absolute; bottom: 10px; right: 10px\"\n            #cropperBanner\n            id=\"cropperBanner\"\n            [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n            [imgStorageSettings]=\"bannerImgSettings()\"\n            [currentStorage]=\"conversation?.assets?.bannerImg\"\n            (onFileSelected)=\"onImageSelected($event)\"\n            (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n          }\n        </div>\n        <div style=\"position: relative\">\n          <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n          @if (!agentCardId) {\n          <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n          } @else {\n\n          <p-button\n            (click)=\"generateMainImage()\"\n            class=\"image-gen-btn\"\n            pTooltip=\"Generar/Re generar la imagen\"\n            icon=\"pi pi-sparkles\"\n            [rounded]=\"true\"\n            severity=\"info\" />\n\n          <dc-cropper-modal\n            style=\"position: absolute; bottom: 10px; left: 50%\"\n            id=\"cropperCardImage\"\n            #cropperCardImage\n            [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n            [imgStorageSettings]=\"imageStorageSettings()\"\n            (onFileSelected)=\"onImageSelected($event)\"\n            (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n          }\n        </div>\n\n        <div>\n          <h4>Agregar stickers</h4>\n\n          <dc-cropper-modal\n            id=\"cropperCardImage\"\n            #cropperStickers\n            [buttonLabel]=\"'agregar sticker'\"\n            [imgStorageSettings]=\"stickerStorageSettings\"\n            (onFileSelected)=\"onImageSelected($event)\"\n            (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n          @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n          <div style=\"position: relative\">\n            <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n            <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n          </div>\n          }\n        </div>\n\n        <!-- <input pInputText type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" /> -->\n\n        @if(form.controls.characterCard){\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <p-popover #textEngineDialog header=\"Text Engine Information\">\n    <div class=\"p-4\">\n      <h3>Text Engine Types</h3>\n      <ul>\n        <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n        <li\n          ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n          puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n          personaje principal</li\n        >\n        <li\n          ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo\n          se presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n        >\n      </ul>\n    </div>\n  </p-popover>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".textmin{min-width:36vw}.image-gen-btn{position:absolute;bottom:15px;left:35%}.main-image-card{max-width:280px;display:block;margin:0 auto;border-radius:8px}.main-banner-image-card{border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{background-color:#f8f9fa;padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{background-color:#f8f9fa;padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
+                        InputNumberModule,
+                    ], template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n            @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n            <div class=\"error\"> Title is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.controls.description.errors?.['required'] && form.controls.description.touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group bg-sky-50\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n              >\n            </label>\n\n            <p-select\n              id=\"textEngine\"\n              [options]=\"textEngineOptions\"\n              formControlName=\"textEngine\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label class=\"cursor-pointer\" for=\"conversationType\" (click)=\"openConversationTypeDialog()\"\n              >Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label\n            >\n            <p-select\n              id=\"conversationType\"\n              [options]=\"conversationOptions\"\n              formControlName=\"conversationType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n            <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n          </div>\n\n          <div formGroupName=\"tts\" class=\"group\">\n            <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n            <div class=\"form-field\">\n              <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector(true)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"voice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n\n              <p-inputgroup>\n                <p-inputgroup-addon>\n                  <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-info-circle\" (click)=\"openVoiceSelector(false)\" />\n                </p-inputgroup-addon>\n\n                <p-select\n                  id=\"secondaryVoice\"\n                  [editable]=\"true\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                  [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </p-inputgroup>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"speed\"\n                [options]=\"audioSpeedOptions\"\n                formControlName=\"speed\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n            </div>\n          </div>\n\n          <dc-model-selector [modelForm]=\"form.controls.conversationSettings.controls.model\" [shortForm]=\"true\"></dc-model-selector>\n        </div>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                Public\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                Published\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts){\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        <div style=\"position: relative; min-height: 60px\">\n          <div style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n            <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n            @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n            <dc-cropper-modal\n              style=\"position: absolute; bottom: 10px; right: 10px\"\n              #cropperBanner\n              id=\"cropperBanner\"\n              [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n              [imgStorageSettings]=\"bannerImgSettings()\"\n              [currentStorage]=\"conversation?.assets?.bannerImg\"\n              (onFileSelected)=\"onImageSelected($event)\"\n              (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n            }\n            <div style=\"position: relative\">\n              <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n              @if (!agentCardId) {\n              <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n              } @else {\n\n              <p-button\n                (click)=\"generateMainImage()\"\n                class=\"image-gen-btn\"\n                pTooltip=\"Generar/Re generar la imagen\"\n                icon=\"pi pi-sparkles\"\n                [rounded]=\"true\"\n                severity=\"info\" />\n\n              <dc-cropper-modal\n                style=\"position: absolute; bottom: 10px; left: 50%\"\n                id=\"cropperCardImage\"\n                #cropperCardImage\n                [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n                [imgStorageSettings]=\"imageStorageSettings()\"\n                (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n              }\n            </div>\n\n            <h4>Agregar stickers</h4>\n\n            <dc-cropper-modal\n              id=\"cropperCardImage\"\n              #cropperStickers\n              [buttonLabel]=\"'agregar sticker'\"\n              [imgStorageSettings]=\"stickerStorageSettings\"\n              (onFileSelected)=\"onImageSelected($event)\"\n              (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n\n            <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n              @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n              <div style=\"position: relative\">\n                <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n                <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if(form.controls.characterCard){\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <p-popover #textEngineDialog header=\"Text Engine Information\">\n    <div class=\"p-4\">\n      <h3>Text Engine Types</h3>\n      <ul>\n        <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n        <li\n          ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n          puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n          personaje principal</li\n        >\n        <li\n          ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo\n          se presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n        >\n      </ul>\n    </div>\n  </p-popover>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".textmin{min-width:36vw}.image-gen-btn{position:absolute;bottom:15px;left:35%}.main-image-card{max-width:280px;display:block;margin:0 auto;border-radius:8px}.main-banner-image-card{border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
         }] });
 
 class DCConversationCardUIComponent {
@@ -4298,7 +4648,7 @@ class DCConversationCardUIComponent {
         this.onCardAction.emit({ event: 'delete', card: this.card() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationCardUIComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardAction: "onCardAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ card().title }}</p>\n\n    <!-- <h5 class=\"title\">\n      <span [innerHTML]=\"card().characterCard?.data.description | truncate : 100\"></span>\n    </h5> -->\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card().taken){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$5.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardAction: "onCardAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ card().title }}</p>\n\n    <!-- <h5 class=\"title\">\n      <span [innerHTML]=\"card().characterCard?.data.description | truncate : 100\"></span>\n    </h5> -->\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card().taken){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$5.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationCardUIComponent, decorators: [{
             type: Component,
@@ -4517,6 +4867,7 @@ class DcAgentCardDetailsComponent {
         this.agentCardService = inject(CONVERSATION_AI_TOKEN);
         this.route = inject(ActivatedRoute);
         this.cdr = inject(ChangeDetectorRef);
+        this.toastService = inject(TOAST_ALERTS_TOKEN);
         this.agentCardId = '';
         this.onStartConversation = output();
         this.showInfoLayer = false;
@@ -4529,6 +4880,13 @@ class DcAgentCardDetailsComponent {
             console.log(this.agentCardId);
         }
         this.agentCard = await this.agentCardService.findConversationCardByID(this.agentCardId);
+        if (!this.agentCard) {
+            this.toastService.error({
+                title: 'Conversation card not found',
+                subtitle: 'Probablemente tienes el id incorrecto, o estas en una sección errónea.',
+            });
+            return;
+        }
         if (!this.agentCard.conversationSettings) {
             console.warn('⚠️ Conversation settings not found ⚠️ probably is an old version of the card.');
             this.agentCard.conversationSettings = {};
@@ -4544,7 +4902,7 @@ class DcAgentCardDetailsComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          @if (agentCard?.characterCard.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          @if (agentCard?.characterCard.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
@@ -4553,20 +4911,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
-function extractJsonFromResponse(content) {
-    // Match everything between the first { and last } OR first [ and last ]
-    const jsonMatch = content.match(/(\{[\s\S]*?\}|\[[\s\S]*?\])/);
-    if (!jsonMatch)
-        return null;
-    try {
-        return JSON.parse(jsonMatch[0]);
-    }
-    catch (error) {
-        console.error('Error parsing JSON:', error);
-        return null;
-    }
-}
-
 /*
  * Public API Surface of ngx-agent-cards
  */
@@ -4576,5 +4920,5 @@ function extractJsonFromResponse(content) {
  * Generated bundle index. Do not edit.
  */
 
-export { AgentCardListComponent, AgentCardProgressStatus, AgentCardsAbstractService, AgentUserProgressService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, ChatEventType, ChatMessage, ChatRole, ContextType, ConversationDTO, ConversationEvents, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, EAccountsPlatform, EntityThen, EntityWhat, EntityWhatOptions, EntityWhen, EntityWhenOptions, EvalResultStringDefinition, LangCodeDescriptionEs, MessageContent, MessageOrchestratorComponent, ModelSelectorComponent, PopupService, TextEngineOptions, TextEngines, TextHighlighterComponent, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, markdownBasicToHTML, markdownToHTML$1 as markdownToHTML, markdownToHTML2, markdownToHtml, matchTranscription, provideChatAIService, provideUserDataExchange, removeAllEmojis, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
+export { AgentCardListComponent, AgentCardProgressStatus, AgentCardsAbstractService, AgentUserProgressService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, ChatEventType, ChatMessage, ChatRole, ContextType, ConversationDTO, ConversationEvents, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DCConversationUserChatSettingsComponent, DcAgentCardDetailsComponent, DoActionTypeOptions, DynamicFlowService, EAccountsPlatform, EDoActionType, EntityThen, EntityWhat, EntityWhatOptions, EntityWhen, EntityWhenOptions, EvalResultStringDefinition, LangCodeDescriptionEs, MessageContent, MessageOrchestratorComponent, ModelSelectorComponent, PopupService, SystemPromptType, TextEngineOptions, TextEngines, TextHighlighterComponent, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, markdownBasicToHTML, markdownToHTML$1 as markdownToHTML, markdownToHTML2, markdownToHtml, matchTranscription, provideChatAIService, provideUserDataExchange, removeAllEmojis, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map