@dataclouder/ngx-agent-cards 0.1.52 → 0.1.53

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

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, inject, signal, computed, RendererFactory2, ApplicationRef, Injector, EnvironmentInjector, createComponent, ChangeDetectionStrategy, Component, output, Input, input, effect, ViewChild, DestroyRef, ElementRef, Pipe, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
 import * as i1 from '@dataclouder/ngx-core';
-import { MoodStateOptions, formatCamelCaseString, LANGUAGES, EntityCommunicationService, TOAST_ALERTS_TOKEN, AudioSpeed as AudioSpeed$1, LoadingBarService, EModelQuality, getLangDesc, AudioSpeedReverse, getSupportedLanguageOptions, FormUtilsService, EntityBaseFormComponent, DcManageableFormComponent, DcLearnableFormComponent, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, EmptyStateComponent, SUPPORTED_LANGUAGES } from '@dataclouder/ngx-core';
+import { MoodStateOptions, LANGUAGES, EntityCommunicationService, TOAST_ALERTS_TOKEN, AudioSpeed as AudioSpeed$1, LoadingBarService, EModelQuality, getLangDesc, AudioSpeedReverse, formatCamelCaseString, getSupportedLanguageOptions, AudioNotificationService, MoodState, SUPPORTED_LANGUAGES, FormUtilsService, EntityBaseFormComponent, DcManageableFormComponent, DcLearnableFormComponent, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, EmptyStateComponent } from '@dataclouder/ngx-core';
 import { UserService } from '@dataclouder/ngx-users';
 import * as i2$1 from '@angular/common';
-import { DOCUMENT, CommonModule, DecimalPipe } from '@angular/common';
+import { DOCUMENT, CommonModule, DecimalPipe, KeyValuePipe } from '@angular/common';
 import { nanoid } from 'nanoid';
-import { TtsService, NgxVertexService, VoiceSelectorComponent } from '@dataclouder/ngx-vertex';
+import { TtsService, NgxVertexService, GeneratedAssetsService, VoiceSelectorComponent } from '@dataclouder/ngx-vertex';
 import { DynamicDialogRef, DynamicDialogConfig, DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
 import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
@@ -18,7 +18,7 @@ import * as i2$2 from 'primeng/api';
 import * as i1$2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormBuilder, FormsModule, FormArray, FormGroup, Validators } from '@angular/forms';
 import { DCMicComponent, MicVadComponent } from '@dataclouder/ngx-mic';
-import * as i4 from 'primeng/textarea';
+import * as i3 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent, filter } from 'rxjs';
@@ -28,25 +28,27 @@ import * as i2$4 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
 import * as i1$3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i4$1 from 'primeng/checkbox';
+import * as i4 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import * as i1$4 from 'primeng/slider';
 import { SliderModule } from 'primeng/slider';
-import * as i3$1 from 'primeng/radiobutton';
+import * as i3$2 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { RatingModule } from 'primeng/rating';
 import { BadgeModule } from 'primeng/badge';
 import * as i5 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i3 from 'primeng/select';
+import * as i3$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i4$2 from 'primeng/divider';
+import * as i4$1 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
+import { ChipModule } from 'primeng/chip';
+import { MarkdownComponent } from 'ngx-markdown';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { PortalModule } from '@angular/cdk/portal';
-import * as i3$2 from 'primeng/inputtext';
+import * as i3$3 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i5$2 from 'primeng/message';
+import * as i6 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
 import * as i5$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
@@ -55,37 +57,121 @@ import { InputNumberModule } from 'primeng/inputnumber';
 import { FileUploadModule } from 'primeng/fileupload';
 import * as i2$5 from 'primeng/card';
 import { CardModule } from 'primeng/card';
-import { ResolutionType, AspectType, AssetsLoaderComponent, SimpleUploaderComponent } from '@dataclouder/ngx-cloud-storage';
+import { AspectRatioOptions, SafeHtmlPipe, ResolutionType, AspectType, AssetsLoaderComponent, SimpleUploaderComponent } from '@dataclouder/ngx-cloud-storage';
 import { DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';
+import { AccordionModule } from 'primeng/accordion';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ChipModule } from 'primeng/chip';
-import * as i3$3 from 'primeng/toggleswitch';
+import * as i3$4 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
-import * as i6 from 'primeng/togglebutton';
+import * as i6$1 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
-import * as i3$4 from 'primeng/inputgroup';
+import * as i2$6 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
+import * as i3$5 from 'primeng/inputgroup';
 import { InputGroupModule } from 'primeng/inputgroup';
-import * as i4$3 from 'primeng/inputgroupaddon';
+import * as i4$2 from 'primeng/inputgroupaddon';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import * as i1$5 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i2$6 from 'primeng/speeddial';
+import * as i2$7 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
-import * as i4$4 from 'primeng/tag';
+import * as i4$3 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import { isEmpty } from 'lodash';
 
 const characterCardStringDataDefinition = `
 interface CharacterCardData {
-  name: string;                      // Character's name
-  description: string;               // General character description
-  scenario: string;                  // The setting or context where the character exists
-  first_mes: string;                 // First message the character will say
-  mes_example: string;               // Example of character's typical message/dialogue
-  alternate_greetings: string[];     // Array of alternative greeting messages
-  tags: string[];                    // Array of descriptive tags
-  appearance: string;                // Physical description including height, build, hair color/style, eye color, skin tone, distinctive marks, clothing style, current outfit
-}`;
+  name: string;                       // Character's name
+  gender: string;                     // male, female or other
+  scenario: string;                   // 2-3 sentences: of the world, environment, time of day, weather, etc. where the character is.
+  greetings: string[];                // 2-3 Character's opening message to start a conversation, less than 50 words. 
+  appearance: string;                // current description for image generation less than 50 words.
+  persona: {
+    identity: string;                  // Name, Age, Gender, Species, Sexuality, Role, Appearance
+    physical: string;                  // physical description including height, build, hairColor, hairStyle, eyeColor, skinTone, distinctiveMarks, clothing style, currentOutfit
+    personality: string;               // personality description surface traits, Temperament, Values, Beliefs, Observable traits
+    communication: string;              // (How They Express) Speech Pattern, Style Common Phrases, Language Habits
+    psychology: string;                 // Motivations, Desires, Goals, Traumas, Conflicts, Weaknesses
+    background: string;                 // Background, History, origin, formative, secrets.
+    capabilities: string;               // skills, knowledge, abilities, expertise, limitations, Tools, Strengths
+    social: string;                     // Relationships, reputation, allies, enemies, social role.
+    preferences: string;                // likes, dislikes, hobbies, interests, hates
+    situation: string;                  // Current context for the character, immediate goal or challenge and constraints.
+  };
+  tags: string[];                     // Array of 6-8 descriptive tags
+  hook: string;                       // 40 to 60 words for readable hook, why play this character, what makes them compelling, add some questions for challenges, make it engaging.
+}
+  
+Description format for PERSONA core data (compact, information-dense):
+
+## IDENTITY (Core Identification)
+Name: [full name]
+Age: [age or age range]
+Gender: [male, female, non-binary, other]
+Species: [human, elf, android, etc.]
+Sexuality: [heterosexual, homosexual, bisexual, asexual, etc.]
+Role: [primary role/occupation] • [additional context about their position]
+
+## PHYSICAL - Observable Traits
+Appearance: [height, build, hair (color, length, style), eyes (color, shape), skin (tone, texture), distinctive features (scars, tattoos, markings), typical clothing/style]
+Voice: [tone (deep, high, raspy), pitch, accent, volume habits]
+Mannerisms: [gestures, nervous habits, tics, body language, facial expressions, movement style]
+Expressions: [facial expressions, gestures, body language]
+
+## PERSONALITY - Internal Traits 
+Core Traits: [4-6 main personality traits, comma-separated]
+Temperament: [overall emotional disposition - calm, volatile, melancholic, optimistic, etc.]
+Values: [what they believe in, moral principles, what matters most to them]
+Fears: [what scares them, anxieties, phobias]
+Quirks: [unusual behaviors, idiosyncrasies, unique characteristics]
+
+## COMMUNICATION - How They Express
+Speech Pattern: [formal/casual/slang, vocabulary level, sentence structure]
+Speech Style: [verbose, terse, poetic, blunt, eloquent, rambling, etc.]
+Common Phrases: [catchphrases, frequent expressions, signature words]
+Language Habits: [stutters, pauses, filler words, speaking speed, accent quirks]
+
+## PSYCHOLOGY - Deep Internal 
+Motivations: [what drives them, internal forces pushing them forward]
+Desires: [what they want, both conscious and unconscious wants]
+Goals: [what they're actively trying to achieve, short and long-term]
+Traumas: [past wounds, painful experiences, unresolved hurt]
+Conflicts: [internal struggles, competing desires, moral dilemmas]
+Weaknesses: [psychological vulnerabilities, emotional blind spots, mental limitations]
+
+## BACKGROUND - History
+History: [life story, major events that shaped them, timeline of important moments]
+Origin: [where they're from, family background, cultural context]
+Formative Events: [specific experiences that defined who they became]
+Secrets: [hidden past elements, things they don't share, buried truths]
+
+## CAPABILITIES - What They Can Do
+Skills: [learned abilities, trained competencies]
+Abilities: [natural talents, supernatural powers, innate gifts]
+Specialties: [areas of expertise, what they're known for]
+Tools: [equipment, weapons, signature items they use]
+Strengths: [what they excel at, advantages, powerful traits]
+
+## SOCIAL - Connections
+Relationships: [key people in their life - family, friends, romantic interests with brief descriptions]
+Reputation: [how others see them, what they're known for publicly]
+Social Role: [position in society/group/organization]
+Allies: [friends, supporters, people who help them]
+Enemies: [opponents, rivals, antagonists]
+
+## PREFERENCES - Likes/Dislikes
+Likes: [things they enjoy, separated by |]
+Dislikes: [things they avoid or hate, separated by |]
+Hobbies: [activities they do for fun or relaxation]
+Habits: [routines, rituals, repeated behaviors]
+
+## SITUATION - Current Context
+Scenario: [current setting, where they are now, what's happening around them]
+Immediate Goal: [what they want right now, current objective]
+Current State: [emotional state, physical condition, mental state]
+Constraints: [current limitations, obstacles, restrictions they're facing]
+
+`;
 var ConditionType;
 (function (ConditionType) {
     ConditionType["Goal"] = "goal";
@@ -169,6 +255,8 @@ var ConversationEvents;
 var ChatEventType;
 (function (ChatEventType) {
     ChatEventType["WordClicked"] = "wordClicked";
+    ChatEventType["MoodDetected"] = "moodDetected";
+    ChatEventType["AudioStarted"] = "audioStarted";
     // Add other potential event types here as needed
     // e.g., MessageSent = 'messageSent', SettingsChanged = 'settingsChanged', GoalCompleted = 'goalCompleted'
 })(ChatEventType || (ChatEventType = {}));
@@ -459,15 +547,18 @@ function extractJsonFromResponse(content) {
 const getMoodStateLabelsAsString = () => {
     return MoodStateOptions.map((option) => option.value).join('\n');
 };
-const MOOD_STATE_PROMPT = `
+const getMoodStatePrompt = (validMoodStates = null) => {
+    const valid = validMoodStates ? `Valid mood states: ${validMoodStates}` : getMoodStateLabelsAsString();
+    return `
 Analyze the provided conversation to identify the Assistant's mood, feelings, and emotions.
 Return an array of 1 to 3 strings representing the Assistant's mood states, ordered from most to least relevant.
 Each string must be one of the mood states listed below.
-
 Example: ['guilty', 'ashamed', 'jealous']
+if no mood state apply return ['default']
 
-${getMoodStateLabelsAsString()}
+${valid}
 `;
+};
 
 var EDoActionType;
 (function (EDoActionType) {
@@ -512,6 +603,16 @@ var SystemPromptType;
     SystemPromptType["ScenarioDescription"] = "scenarioDescription";
     SystemPromptType["MessageExamples"] = "messageExamples";
     SystemPromptType["JailBreak"] = "jailBreak";
+    SystemPromptType["CharacterIdentity"] = "characterIdentity";
+    SystemPromptType["CharacterAppearance"] = "characterAppearance";
+    SystemPromptType["CharacterPersonality"] = "characterPersonality";
+    SystemPromptType["CharacterCommunication"] = "characterCommunication";
+    SystemPromptType["CharacterPsychology"] = "characterPsychology";
+    SystemPromptType["CharacterBackground"] = "characterBackground";
+    SystemPromptType["CharacterCapabilities"] = "characterCapabilities";
+    SystemPromptType["CharacterSocial"] = "characterSocial";
+    SystemPromptType["CharacterPreferences"] = "characterPreferences";
+    SystemPromptType["CharacterSituation"] = "characterSituation";
 })(SystemPromptType || (SystemPromptType = {}));
 
 // Not using this function
@@ -882,15 +983,15 @@ You are roleplaying as {{char}} in a conversation with {{user}}. This is a dynam
 ### Response Format:
 
 * Write only {{char}}'s direct speech and actions
-* Use simple, clean text with no markdown formatting
+* Use simple, clean text with no markdown formatting, NO Asterisks *
 * No inner thoughts, narration, or descriptive text
 * Only what {{char}} says and does
 
 ### Character Authority:
 
 * {{char}} can change locations by saying things like "Let's go to [place]" or "We're at [location] now"
-* {{char}} can introduce new scenarios with statements like "Look, there's [something happening]" or "Suddenly [event occurs]"
-* {{char}} can assert scene changes as fact: "We just arrived at the coffee shop" or "The meeting is starting now"
+* {{char}} can introduce new scenarios with statements like "you see that?, there's [something happening]" or "Oh, no, why [event occurs]"
+* {{char}} can assert scene changes as fact using casual phrases "Lets go, what you think we just arrived at the coffee shop" or "The meeting is starting now"
 * {{char}} has agency to drive the story direction through their words and actions
 * {{char}} dont force scene changes, let the conversation flow naturally, but propuse go to a new place or scenario if it makes sense.
 
@@ -983,6 +1084,7 @@ class ConversationPromptBuilderService {
         return converstionSettings;
     }
     buildConversationMessages(agentCard, parseDict = null) {
+        console.log('buildConversationMessages', agentCard.lang);
         const initialConversation = this.buildInitialConversation(agentCard.characterCard, agentCard?.lang, agentCard?.conversationSettings?.conversationType);
         parseDict = this.getDefaultParseDict(parseDict, agentCard);
         // Si quiero agregar todo tipo de info, el parse dict es algo que debe hacer el cliente.
@@ -1004,23 +1106,15 @@ class ConversationPromptBuilderService {
             return dataForParseConversation;
         }
     }
+    estimateTokens(text) {
+        const CHARACTERS_PER_TOKEN_RATIO = 3.35;
+        return Math.ceil(text.length / CHARACTERS_PER_TOKEN_RATIO);
+    }
     getDefaultCardParseDict(card) {
         // bot so far i don't use more than the character name.
         // this is what silly tavern call macros https://docs.sillytavern.app/usage/core-concepts/macros/#general-macros
         return { char: card.characterCard.data.name || 'Bot' };
     }
-    convertConversationToHtml(messages, jailBrake = '') {
-        let finalPrompt = '';
-        for (const message of messages) {
-            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) {
-            finalPrompt += `<h5>JailBrake Instructions </h5>`;
-            finalPrompt += `<p>${jailBrake} </p>`;
-        }
-        return finalPrompt;
-    }
     parseConversation(messages, parseDict) {
         for (const message of messages) {
             message.content = this.applyReplacements(message.content, parseDict);
@@ -1049,6 +1143,7 @@ class ConversationPromptBuilderService {
         if (this.userService.getUserDataInformation()) {
             chat.push({ role: ChatRole.System, content: this.userService.getUserDataInformation(), messageId: SystemPromptType.UserInformation });
         }
+        // TODO: i need to do something with this!
         if (lang) {
             chat.push({
                 role: ChatRole.System,
@@ -1056,15 +1151,43 @@ class ConversationPromptBuilderService {
                 messageId: SystemPromptType.Language,
             });
         }
-        if (characterCard.data.picture_description) {
-            chat.push({
-                role: ChatRole.System,
-                content: 'This is the image description for the character and is the same that user can see: ' + characterCard.data.picture_description,
-                messageId: SystemPromptType.PictureDescription,
-            });
+        if (characterCard.data?.persona) {
+            // Persona means new update, not need to add information. since is used for old cards.
+            if (characterCard.data.persona?.identity) {
+                chat.push({ role: ChatRole.System, content: characterCard.data.persona.identity, messageId: SystemPromptType.CharacterIdentity });
+            }
+            if (characterCard.data.persona?.physical) {
+                chat.push({ role: ChatRole.System, content: characterCard.data.persona.physical, messageId: SystemPromptType.CharacterAppearance });
+            }
+            if (characterCard.data.persona?.personality) {
+                chat.push({ role: ChatRole.System, content: characterCard.data.persona.personality, messageId: SystemPromptType.CharacterPersonality });
+            }
+            if (characterCard.data.persona?.communication) {
+                chat.push({ role: ChatRole.System, content: characterCard.data.persona.communication, messageId: SystemPromptType.CharacterCommunication });
+            }
+            if (characterCard.data.persona?.psychology) {
+                chat.push({ role: ChatRole.System, content: characterCard.data.persona.psychology, messageId: SystemPromptType.CharacterPsychology });
+            }
+            if (characterCard.data.persona?.background) {
+                chat.push({ role: ChatRole.System, content: characterCard.data.persona.background, messageId: SystemPromptType.CharacterBackground });
+            }
+            if (characterCard.data.persona?.capabilities) {
+                chat.push({ role: ChatRole.System, content: characterCard.data.persona.capabilities, messageId: SystemPromptType.CharacterCapabilities });
+            }
+            if (characterCard.data.persona?.social) {
+                chat.push({ role: ChatRole.System, content: characterCard.data.persona.social, messageId: SystemPromptType.CharacterSocial });
+            }
+            if (characterCard.data.persona?.preferences) {
+                chat.push({ role: ChatRole.System, content: characterCard.data.persona.preferences, messageId: SystemPromptType.CharacterPreferences });
+            }
+            if (characterCard.data.persona?.situation) {
+                chat.push({ role: ChatRole.System, content: characterCard.data.persona.situation, messageId: SystemPromptType.CharacterSituation });
+            }
         }
-        if (characterCard.data.description) {
-            chat.push({ role: ChatRole.System, content: characterCard.data.description, messageId: SystemPromptType.CharacterDescription });
+        else {
+            if (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;
@@ -1074,16 +1197,23 @@ class ConversationPromptBuilderService {
             const examples = 'Here are some examples of how {{char}} could response to {{user}}: ' + characterCard.data.mes_example;
             chat.push({ role: ChatRole.System, content: examples, messageId: SystemPromptType.MessageExamples });
         }
-        const gretting = this.selectOneRandomGreeting(characterCard.data.first_mes, characterCard.data.alternate_greetings);
+        let gretting;
+        if (characterCard.data.greetings) {
+            // New field for all greetings.
+            gretting = this.sampleSize(characterCard.data.greetings, 1)[0];
+        }
+        else {
+            gretting = this.selectOneRandomGreeting(characterCard.data.first_mes, characterCard.data.greetings);
+        }
         chat.push({ role: ChatRole.System, content: '[Start a new Chat]' });
         if (gretting) {
             chat.push({ role: ChatRole.Assistant, content: gretting });
         }
         return chat;
     }
-    selectOneRandomGreeting(first_mes = '', alternate_greetings = []) {
-        if (alternate_greetings && alternate_greetings.length > 0) {
-            const options = [...alternate_greetings, first_mes];
+    selectOneRandomGreeting(first_mes = '', greetings = []) {
+        if (greetings && greetings.length > 0) {
+            const options = [...greetings, first_mes];
             const randomGretting = this.sampleSize(options, 1)[0];
             return randomGretting;
         }
@@ -1683,15 +1813,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }] });
 
 class ChatMonitorService {
+    // Se requiere comunicar el chat-engine con la app afuera, va a ver 2 formas de hacerlo.
+    // Mediante eventos del chat, o estar subscrito al chat-monitor.
+    // La complejidad del chat monitor es menor porque puedo injectarlo en cualquier lugar.
+    // Los eventos estan bien pero si el vento viene muy interno tengo que propagarlo bastante.
     constructor() {
         this.messageAudioWillPlay = signal(null, ...(ngDevMode ? [{ debugName: "messageAudioWillPlay" }] : []));
         this.messageAudioWillPlay$ = this.messageAudioWillPlay.asReadonly();
+        this.currentMood = signal(null, ...(ngDevMode ? [{ debugName: "currentMood" }] : []));
+        this.isConversationActive = signal(false, ...(ngDevMode ? [{ debugName: "isConversationActive" }] : []));
         console.log(`%c ChatMonitorService instantiated: ${Math.random()}`, 'color: #00ff00; font-weight: bold; padding: 2px 4px; border: 1px solid #00ff00;');
     }
     logMessageAudioWillPlay(message) {
         // console.log('Audio will play....', message);
         this.messageAudioWillPlay.set(message);
     }
+    logCurrentMood(mood) {
+        this.currentMood.set(mood);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatMonitorService, providedIn: 'root' }); }
 }
@@ -1703,87 +1842,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }], ctorParameters: () => [] });
 
 class MessageProcessingService {
-    // Process message for display
     processMessage(message, conversationSettings, extraData = {}) {
-        let processedMessage = { ...message };
-        // Add ID if not present
-        if (!processedMessage.messageId) {
-            processedMessage.messageId = nanoid();
-        }
-        if (message.role === ChatRole.User && extraData.userImg) {
-            processedMessage.imgUrl = extraData.userImg; // Add  default image
-        }
-        else if (message.role === ChatRole.Assistant && extraData.assistantImg) {
-            // TODO i think lessons send voice in voice, but should be in tts
-            const mainVoice = conversationSettings?.mainVoice?.voice || conversationSettings?.tts?.voice;
-            processedMessage.voice = this.getVoice(mainVoice);
-            processedMessage.imgUrl = extraData.assistantImg;
-            // I think Process Text Engine should only apply to assistant messages not user
-            // Process based on text engine
-            if (conversationSettings.textEngine === TextEngines.MarkdownMultiMessages) {
-                this.processMultiMessages(processedMessage, conversationSettings);
-            }
-            else if (conversationSettings.textEngine === TextEngines.MarkdownSSML) {
-                if (!conversationSettings?.tts?.secondaryVoice) {
-                    throw new Error('Secondary voice is required for SSML');
-                }
-                const content = this.subsItalicsByTag(processedMessage.content, conversationSettings.tts.secondaryVoice);
-                processedMessage.ssml = '<speak>' + content + '</speak>';
-            }
+        const processedMessage = {
+            ...message,
+            messageId: message.messageId || nanoid(),
+        };
+        if (processedMessage.role === ChatRole.User) {
+            return this.processUserMessage(processedMessage, extraData);
+        }
+        if (processedMessage.role === ChatRole.Assistant) {
+            return this.processAssistantMessage(processedMessage, conversationSettings, extraData);
         }
         return processedMessage;
     }
-    // Process multi-messages from markdown
+    processUserMessage(message, extraData) {
+        if (extraData.userImg) {
+            message.imgUrl = extraData.userImg;
+        }
+        return message;
+    }
+    processAssistantMessage(message, settings, extraData) {
+        if (extraData.assistantImg) {
+            message.imgUrl = extraData.assistantImg;
+        }
+        const mainVoice = settings?.mainVoice?.voice || settings?.tts?.voice;
+        message.voice = this.getVoice(mainVoice);
+        switch (settings.textEngine) {
+            case TextEngines.MarkdownMultiMessages:
+                this.processMultiMessages(message, settings);
+                break;
+            case TextEngines.MarkdownSSML:
+                this.processSSML(message, settings);
+                break;
+        }
+        return message;
+    }
     processMultiMessages(message, settings) {
-        // Convert markdown to HTML segments
-        const mdToHtml = convertToHTML(message.content);
-        // Map segments to multi-messages
-        message.multiMessages = mdToHtml.map((val) => {
-            // TODO: tts is deprecated settings?.tts?.secondaryVoice
+        let htmlSegments = convertToHTML(message.content);
+        if (htmlSegments.length === 1 && htmlSegments[0].content.length > 200) {
+            // Only if is only one single message, becouse i dont want affect the currente, narrator/char feacture
+            // Try to split in 200 characters
+            const chunks = this.splitContent(message.content, 190);
+            htmlSegments = chunks.flatMap((chunk) => convertToHTML(chunk));
+        }
+        message.multiMessages = htmlSegments.map((segment) => {
             const secondaryVoice = settings?.secondaryVoice?.voice || settings?.tts?.secondaryVoice || 'en-US-News-L';
-            // Determine if this is italicized text (narrator)
-            const isItalics = val.tag === 'em';
+            const isItalics = segment.tag === 'em';
             const voice = isItalics ? secondaryVoice : message.voice;
             return {
                 voice,
-                content: val.content,
+                content: segment.content,
                 audioUrl: null,
                 audioPromise: null,
-                text: val.text,
-                tag: val.tag,
+                text: segment.text,
+                tag: segment.tag,
             };
         });
     }
-    // Replace italics with voice tags for SSML
+    processSSML(message, settings) {
+        if (!settings?.tts?.secondaryVoice) {
+            throw new Error('Secondary voice is required for SSML');
+        }
+        const content = this.subsItalicsByTag(message.content, settings.tts.secondaryVoice);
+        message.ssml = `<speak>${content}</speak>`;
+    }
+    splitContent(content, maxLength) {
+        const chunks = [];
+        let currentPos = 0;
+        while (currentPos < content.length) {
+            let endPos = currentPos + maxLength;
+            if (endPos >= content.length) {
+                endPos = content.length;
+            }
+            else {
+                const slice = content.substring(currentPos, endPos);
+                const lastSentenceEnd = slice.search(/[.!?\n](?=[^.!?\n]*$)/);
+                if (lastSentenceEnd !== -1) {
+                    endPos = currentPos + lastSentenceEnd + 1;
+                }
+                else {
+                    const lastSpace = content.lastIndexOf(' ', endPos);
+                    if (lastSpace > currentPos) {
+                        endPos = lastSpace;
+                    }
+                }
+            }
+            const newContent = content.substring(currentPos, endPos).trim();
+            if (newContent) {
+                chunks.push(newContent);
+            }
+            currentPos = endPos;
+        }
+        return chunks;
+    }
     subsItalicsByTag(text, voiceId = 'it-IT-Neural2-A', tagName = 'voice') {
         const regex = /\*(.*?)\*/g;
-        return text.replace(regex, (match, p1) => `<${tagName} name="${voiceId}">${p1}</${tagName}>`);
+        return text.replace(regex, (_, p1) => `<${tagName} name="${voiceId}">${p1}</${tagName}>`);
     }
-    // Get appropriate voice based on settings
-    getVoice(voice_value, targetLang = 'en') {
-        if ([null, '', 'random'].includes(voice_value)) {
+    getVoice(voiceValue, targetLang = 'en') {
+        if (!voiceValue || voiceValue === 'random') {
             const voiceCodes = VoiceTTSOptions.map((val) => val.id);
             return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
         }
-        if (voice_value === 'randomMan') {
-            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender === 'male' && voice.lang.includes(targetLang)).map((val) => val.id);
-            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
-        }
-        else if (voice_value === 'randomWoman') {
-            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender === 'female' && voice.lang.includes(targetLang)).map((val) => val.id);
+        if (voiceValue === 'randomMan' || voiceValue === 'randomWoman') {
+            const gender = voiceValue === 'randomMan' ? 'male' : 'female';
+            const voiceCodes = VoiceTTSOptions.filter((voice) => voice.gender === gender && voice.lang.includes(targetLang)).map((val) => val.id);
             return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
         }
-        else {
-            return voice_value;
-            // voice should exist, there wont be validation.
-            // const voice = VoiceTTSOptions.find((voice) => voice.id === voice_value);
-            // if (voice) {
-            //   return voice.id;
-            // } else {
-            //   console.error('Voice not found getting something random', voice_value);
-            //   return VoiceTTSOptions.find((voice) => voice.lang.includes(targetLang))?.id || '';
-            // }
-        }
+        return voiceValue;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MessageProcessingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MessageProcessingService, providedIn: 'root' }); }
@@ -1869,6 +2035,7 @@ class DynamicCriteriaService {
         this.defaultAgentCardService = inject(DefaultAgentCardsService);
         this.globalToolsService = inject(GlobalToolsService);
         this.messageState = inject(MessagesStateService);
+        this.chatMonitorService = inject(ChatMonitorService);
     }
     async evaluateUsingTools() {
         const tools = this.dynamicFlowService.conversationFlowState()?.tools || [];
@@ -1913,18 +2080,26 @@ class DynamicCriteriaService {
         const moodState = MoodStateOptions.find((option) => option.value === mood);
         return moodState?.emoji;
     }
-    async evaluateMoodState() {
+    async evaluateMoodState(validMoodStates) {
         // Se asume que esto ocurré después de  que el asistente responde. entonces el ultimo mensaje debe ser del asistente.
         const last2Dialog = this.contextEngineService.getContextMessages(ContextType.Last2Messages);
         const conversationContext = last2Dialog.map((message) => `${message.role}: ${message.content}`).join('\n');
         const assistantMessage = last2Dialog.find((message) => message.role === ChatRole.Assistant);
-        const prompt = `${MOOD_STATE_PROMPT}\n\n<Context>${conversationContext}</Context>`;
+        let moodStatePrompt = null;
+        if (this.dynamicFlowService.conversationFlowState()?.moodState.useAssetStatesOnly) {
+            moodStatePrompt = getMoodStatePrompt(validMoodStates.join(', '));
+        }
+        else {
+            moodStatePrompt = getMoodStatePrompt();
+        }
+        const prompt = `${moodStatePrompt}\n\n<Context>\n${conversationContext}\n</Context>`;
         const result = await this.defaultAgentCardService.callChatCompletion({
             messages: [{ role: ChatRole.User, content: prompt }],
             returnJson: true,
             type: 'mood-state',
         });
         if (Array.isArray(result.content)) {
+            this.chatMonitorService.logCurrentMood(result.content);
             console.log('Mood state result:', result.content, assistantMessage);
             if (assistantMessage?.messageId) {
                 const moodEmojis = result.content.map((mood) => this.getMoodEmoji(mood)).filter((emoji) => !!emoji);
@@ -2356,8 +2531,8 @@ class DynamicFlowTaskService {
         this.userService = inject(UserService);
     }
     async evaluateAssistantTaskTrigger(message) {
-        const userChatSettings = this.userService.user()?.settings?.conversation?.assistantMessageTask;
-        if (!userChatSettings) {
+        const canTriggerAssistant = this.userService.user()?.settings?.conversation?.assistantMessageTask;
+        if (!canTriggerAssistant) {
             return;
         }
         const conversationFlow = this.dynamicFlowService.conversationFlowState();
@@ -2469,63 +2644,34 @@ class ConversationService {
             conversationSettings.model = userSettings.model;
         }
     }
-    setupConversationWithAgentCard(agentCard, parseDict = null, appConversationFlow = null) {
+    setupConversationWithAgentCard(agentCard, parseDict = null, defaultAppConversationFlow = null) {
         this.agentCardSignal.set(agentCard);
-        // 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
-        // Aqui es la parte crucial de los settings definir prioridad.
+        this.avatarImages.assistantImg = agentCard?.assets?.image?.url || this.avatarImages.assistantImg;
         const conversationSettings = this.conversationBuilder.buildConversationSettings(agentCard, parseDict);
-        // Here i need some rules to see when i will override and what.
         this.overrideSettingsByUserSettings(conversationSettings);
         this.conversationSettingsState.set(conversationSettings);
-        // 🙄 Puede que no me sirva esta estrategía, mezcla agentCard.conversationFlow con appConversationFlow, pero le da prioridad a agent card, si no existe toma el default
-        // La otra estretegía es: tomar solo agentCard o appConversationFlow, pero no ambos
-        const agentCardConversationFlow = agentCard.conversationFlow;
-        // Delete properties if not exists so my merge contains only properties set
-        if (!agentCardConversationFlow?.goal?.task) {
-            delete agentCardConversationFlow.goal;
-        }
-        if (!agentCardConversationFlow?.triggerTasks?.onUserMessage?.task) {
-            delete agentCardConversationFlow.triggerTasks.onUserMessage;
-        }
-        if (!agentCardConversationFlow?.triggerTasks?.onAssistantMessage?.task) {
-            delete agentCardConversationFlow.triggerTasks.onAssistantMessage;
-        }
-        const mergedConversationFlow = { ...appConversationFlow, ...agentCardConversationFlow };
-        // Only if exits agentCard.conversationFlow, that will override the defaults
-        // NOTE: ill comment for now, but check if a need manual verification later.
-        // if (!agentCard.conversationFlow.goal.task && appConversationFlow.goal.task) {
-        //   // Monstly of the time
-        //   mergedConversationFlow.goal = appConversationFlow.goal;
-        // }
-        // if (appConversationFlow) {
-        //   // Just replace the default if agent card has a value
-        //   if (agentCard.conversationFlow) {
-        //     if (agentCard.conversationFlow?.goal?.task) {
-        //       appConversationFlow.goal = agentCard.conversationFlow.goal;
-        //     }
-        //     if (agentCard.conversationFlow?.dynamicConditions) {
-        //       appConversationFlow.dynamicConditions = agentCard.conversationFlow.dynamicConditions;
-        //     }
-        //     if (agentCard.conversationFlow?.triggerTasks) {
-        //       // Leave default if a concreate task is not provided.
-        //       if (appConversationFlow.triggerTasks?.onUserMessage?.task) {
-        //         appConversationFlow.triggerTasks.onUserMessage = agentCard.conversationFlow.triggerTasks.onUserMessage;
-        //       }
-        //       if (agentCard.conversationFlow.triggerTasks?.onUserMessage?.task) {
-        //         appConversationFlow.triggerTasks.onUserMessage = agentCard.conversationFlow.triggerTasks.onUserMessage;
-        //       }
-        //       appConversationFlow.triggerTasks = { ...agentCard.conversationFlow.triggerTasks, ...appConversationFlow.triggerTasks };
-        //     }
-        //     if (agentCard.conversationFlow?.challenges) {
-        //       appConversationFlow.challenges = agentCard.conversationFlow.challenges;
-        //     }
-        //     if (agentCard.conversationFlow?.tools?.length) {
-        //       appConversationFlow.tools = agentCard.conversationFlow.tools;
-        //     }
-        //   }
-        this.dynamicFlowService.setConversationFlow(mergedConversationFlow);
-        // }
+        const conversationFlow = this.mergeConversationFlows(agentCard.conversationFlow, defaultAppConversationFlow);
+        this.dynamicFlowService.setConversationFlow(conversationFlow);
+    }
+    mergeConversationFlows(agentFlow, defaultFlow) {
+        if (!defaultFlow) {
+            return agentFlow;
+        }
+        const mergedFlow = { ...agentFlow };
+        mergedFlow.goal = agentFlow?.goal?.task ? agentFlow.goal : defaultFlow.goal;
+        mergedFlow.dynamicConditions = agentFlow?.dynamicConditions?.length > 0 ? agentFlow.dynamicConditions : defaultFlow.dynamicConditions;
+        mergedFlow.challenges = agentFlow?.challenges?.length > 0 ? agentFlow.challenges : defaultFlow.challenges;
+        mergedFlow.tools = agentFlow?.tools?.length > 0 ? agentFlow.tools : defaultFlow.tools;
+        if (!mergedFlow.triggerTasks) {
+            mergedFlow.triggerTasks = {};
+        }
+        mergedFlow.triggerTasks.onUserMessage = agentFlow?.triggerTasks?.onUserMessage?.task
+            ? agentFlow.triggerTasks.onUserMessage
+            : defaultFlow.triggerTasks?.onUserMessage;
+        mergedFlow.triggerTasks.onAssistantMessage = agentFlow?.triggerTasks?.onAssistantMessage?.task
+            ? agentFlow.triggerTasks.onAssistantMessage
+            : defaultFlow.triggerTasks?.onAssistantMessage;
+        return mergedFlow;
     }
     async initConversationWithSettings(conversationSettings, conversationFlow) {
         this.overrideSettingsByUserSettings(conversationSettings);
@@ -2659,8 +2805,15 @@ class ConversationService {
         // Run Dynamic Flow Evaluations
         this.dynamicFlowTaskService.evaluateAssistantTaskTrigger(newMessage); // Not waiting should be parallel.
         // this.dynamicCriteriaService.evaluateUsingTools();
-        if (this.dynamicFlowService.conversationFlowState()?.moodStateEnabled) {
-            this.dynamicCriteriaService.evaluateMoodState();
+        if (this.dynamicFlowService.conversationFlowState()?.moodState.enabled) {
+            let assetsMoodStates = null;
+            if (this.dynamicFlowService.conversationFlowState()?.moodState.useAssetStatesOnly) {
+                // Extract mood states from assets.
+                const motionStates = this.agentCardSignal().assets.motions || [];
+                assetsMoodStates = motionStates.map((motion) => motion.metadata?.moodState);
+                assetsMoodStates.push('default');
+            }
+            this.dynamicCriteriaService.evaluateMoodState(assetsMoodStates);
         }
         return newMessage.messageId;
     }
@@ -2692,7 +2845,7 @@ class AIGenerationService {
     }
     async generateImage(chatMessage, chatText) {
         const agentCard = this.conversationService.agentCard$();
-        const pictureDescription = agentCard?.characterCard?.data?.picture_description;
+        const pictureDescription = agentCard?.characterCard?.data?.appearance;
         const urlImage = await this.vertexService.generateComfyImage({ prompt: `${pictureDescription} ${chatText}` });
         this.messagesStateService.updateMessage(chatMessage.messageId, { generatedImg: urlImage });
         return urlImage;
@@ -2970,7 +3123,7 @@ class ChatFooterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ChatFooterComponent, isStandalone: true, selector: "dc-chat-footer", inputs: { isAIThinking: { classPropertyName: "isAIThinking", publicName: "isAIThinking", 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(dynamicFlowService.conversationFlowState()?.goal?.enabled) {\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$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2$3.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["targetOrBase", "micSettings", "isDone"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ChatFooterComponent, isStandalone: true, selector: "dc-chat-footer", inputs: { isAIThinking: { classPropertyName: "isAIThinking", publicName: "isAIThinking", 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(dynamicFlowService.conversationFlowState()?.goal?.enabled) {\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$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2$3.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["targetOrBase", "micSettings", "isDone"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatFooterComponent, decorators: [{
             type: Component,
@@ -3302,11 +3455,11 @@ class MessageContentDisplayer {
         console.log('debug', this.wordWithMeta());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MessageContentDisplayer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: MessageContentDisplayer, isStandalone: true, selector: "message-content-displayer", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, markWord: { classPropertyName: "markWord", publicName: "markWord", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted", wordClicked: "wordClicked" }, ngImport: i0, template: "<div class=\"audio-text-sync-container\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n    @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } @case ('playable') { <dc-icon name=\"play\"></dc-icon> } }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#6495ed}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:#6495ed}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"], dependencies: [{ kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: MessageContentDisplayer, isStandalone: true, selector: "message-content-displayer", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, markWord: { classPropertyName: "markWord", publicName: "markWord", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted", wordClicked: "wordClicked" }, ngImport: i0, template: "<div class=\"audio-text-sync-container\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n    @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } @case ('playable') { <dc-icon name=\"play\"></dc-icon> } }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#2e68d4}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:#0d5cf0}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"], dependencies: [{ kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: MessageContentDisplayer, decorators: [{
             type: Component,
-            args: [{ selector: 'message-content-displayer', standalone: true, imports: [IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n    @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } @case ('playable') { <dc-icon name=\"play\"></dc-icon> } }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#6495ed}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:#6495ed}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"] }]
+            args: [{ selector: 'message-content-displayer', standalone: true, imports: [IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n    @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } @case ('playable') { <dc-icon name=\"play\"></dc-icon> } }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#2e68d4}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:#0d5cf0}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"] }]
         }], ctorParameters: () => [] });
 
 class MessageOrchestrationService {
@@ -3466,11 +3619,11 @@ class ChatMessageOrchestratorComponent {
         this.orchestrationService.wordClicked(wordData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatMessageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ChatMessageOrchestratorComponent, isStandalone: true, selector: "dc-message-orchestrator", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, messageRole: { classPropertyName: "messageRole", publicName: "messageRole", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { audioCompleted: "audioCompleted" }, providers: [MessageOrchestrationService], ngImport: i0, template: "<div class=\"message-orchestrator-container\">\n  @for (message of messagesSignal(); track $index) {\n  <message-content-displayer [message]=\"message\" (audioCompleted)=\"onAudioCompleted($event)\" (wordClicked)=\"onWordClicked($event)\" />\n  }\n</div>\n", styles: [":host{display:block}.word-options-popup{position:absolute;border:1px solid #ccc;background:#fff;padding:5px;z-index:1000}\n"], dependencies: [{ kind: "component", type: MessageContentDisplayer, selector: "message-content-displayer", inputs: ["message", "markWord"], outputs: ["playAudio", "audioCompleted", "wordClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ChatMessageOrchestratorComponent, isStandalone: true, selector: "dc-message-orchestrator", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, messageRole: { classPropertyName: "messageRole", publicName: "messageRole", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { audioCompleted: "audioCompleted" }, providers: [MessageOrchestrationService], ngImport: i0, template: "<div class=\"message-orchestrator-container\">\n  @for (message of messagesSignal(); track $index) {\n  <message-content-displayer [message]=\"message\" (audioCompleted)=\"onAudioCompleted($event)\" (wordClicked)=\"onWordClicked($event)\" />\n  }\n</div>\n", styles: [":host{display:block}.word-options-popup{position:absolute;border:1px solid #ccc;background:#fff;padding:5px;z-index:1000}message-content-displayer{text-shadow:1px 1px 4px rgba(255,255,255,.4)}\n"], dependencies: [{ kind: "component", type: MessageContentDisplayer, selector: "message-content-displayer", inputs: ["message", "markWord"], outputs: ["playAudio", "audioCompleted", "wordClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatMessageOrchestratorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-message-orchestrator', imports: [MessageContentDisplayer], changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageOrchestrationService], template: "<div class=\"message-orchestrator-container\">\n  @for (message of messagesSignal(); track $index) {\n  <message-content-displayer [message]=\"message\" (audioCompleted)=\"onAudioCompleted($event)\" (wordClicked)=\"onWordClicked($event)\" />\n  }\n</div>\n", styles: [":host{display:block}.word-options-popup{position:absolute;border:1px solid #ccc;background:#fff;padding:5px;z-index:1000}\n"] }]
+            args: [{ selector: 'dc-message-orchestrator', imports: [MessageContentDisplayer], changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageOrchestrationService], template: "<div class=\"message-orchestrator-container\">\n  @for (message of messagesSignal(); track $index) {\n  <message-content-displayer [message]=\"message\" (audioCompleted)=\"onAudioCompleted($event)\" (wordClicked)=\"onWordClicked($event)\" />\n  }\n</div>\n", styles: [":host{display:block}.word-options-popup{position:absolute;border:1px solid #ccc;background:#fff;padding:5px;z-index:1000}message-content-displayer{text-shadow:1px 1px 4px rgba(255,255,255,.4)}\n"] }]
         }] });
 
 const EVALUATION_EMOJIS = {
@@ -3488,7 +3641,7 @@ class ChatMessageComponent {
         this.chatMessage = input.required(...(ngDevMode ? [{ debugName: "chatMessage" }] : []));
         this.chatUserSettings = input(null, ...(ngDevMode ? [{ debugName: "chatUserSettings" }] : []));
         // Signal States
-        this.audioMessage = signal(null, ...(ngDevMode ? [{ debugName: "audioMessage" }] : []));
+        this.messageContent = signal(null, ...(ngDevMode ? [{ debugName: "messageContent" }] : []));
         // Computed properties for easier access to signal values
         this.hasMultiMessages = computed(() => !!this.chatMessage()?.multiMessages, ...(ngDevMode ? [{ debugName: "hasMultiMessages" }] : []));
         this.multiMessages = computed(() => this.chatMessage()?.multiMessages || [], ...(ngDevMode ? [{ debugName: "multiMessages" }] : []));
@@ -3503,7 +3656,7 @@ class ChatMessageComponent {
             if (!message || message.role === ChatRole.AssistantHelper)
                 return;
             if (message.role === ChatRole.User || (message.role === ChatRole.Assistant && !this.hasMultiMessages())) {
-                this.audioMessage.set({ ...message });
+                this.messageContent.set({ ...message });
             }
         });
     }
@@ -3519,11 +3672,11 @@ class ChatMessageComponent {
         console.log(res);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ChatMessageComponent, isStandalone: true, selector: "dc-chat-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: true, transformFunction: null }, chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar -->\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\" (click)=\"printData()\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"AI\" class=\"avatar-image\" />\n      </div>\n    </div>\n    } @if (isUserMessage()) {\n    <div class=\"avatar-container-right\" (click)=\"printData()\">\n      <div class=\"avatar user-avatar\">\n        <img [src]=\"chatMessage()?.imgUrl || '/assets/defaults/avatar_user.jpg'\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message Bubble -->\n    <div class=\"message-bubble\">\n      @if (chatMessage().generatedImg) {\n      <img class=\"generated-img\" [src]=\"chatMessage().generatedImg\" alt=\"Generated Image\" />\n      } @if (hasMultiMessages()) {\n      <dc-message-orchestrator [messages]=\"multiMessages()\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      } @else {\n      <dc-message-orchestrator [messages]=\"[audioMessage()]\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      }\n\n      <!-- Translation -->\n      @if (isAssistantMessage() && chatMessage().evaluation?.['text']) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      } @if (isUserMessage() && chatMessage().evaluation) {\n      <div class=\"translation\" style=\"color: white\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      <div class=\"evaluation-footer\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n      } @if (userService.isAdmin()) {\n      <div class=\"options-footer\">\n        <i #popoverTarget class=\"pi pi-ellipsis-h\" style=\"font-size: 1rem\" (click)=\"op.toggle($event)\"></i>\n        <p-popover #op>\n          <ul class=\"list-none p-0 m-0 flex flex-col\">\n            <li class=\"flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border\" (click)=\"generateImage()\">\n              <span>Generate image</span>\n            </li>\n          </ul>\n        </p-popover>\n      </div>\n      }\n    </div>\n\n    <!-- Tags -->\n    @if (chatMessage().tags?.length) {\n    <div class=\"tags\">\n      @for (tag of chatMessage().tags; track tag) {\n      <span class=\"tag\">{{ tag }}</span>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{--user-message-bg: rgba(13, 88, 120, .8);--assistant-message-bg: rgba(240, 240, 240, .8);--user-text-color: white;--assistant-text-color: #333;--avatar-user-bg: #ffa77e;--divider-color: #ffa77e;--border-radius: 18px;--avatar-size: 36px;--shadow: 0 2px 8px rgba(0, 0, 0, .15);display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:98%;line-height:1.5;position:relative}.user-message{justify-content:flex-end}.user-message .message-bubble{background-color:var(--user-message-bg);color:var(--user-text-color);border-radius:var(--border-radius) var(--border-radius) 0 var(--border-radius);margin-left:8px;min-width:150px}.user-message dc-message-orchestrator{margin-right:19px}.assistant-message{justify-content:flex-start}.assistant-message .message-bubble{background-color:var(--assistant-message-bg);color:var(--assistant-text-color);border-radius:var(--border-radius) var(--border-radius) var(--border-radius) 0;margin-left:8px}.message-bubble{padding:9px;box-shadow:var(--shadow);max-width:98%;min-width:0;position:relative;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.avatar-container,.avatar-container-right{position:absolute;bottom:-20px}.avatar-container{left:-7px;z-index:1}.avatar-container-right{right:-5px;z-index:1}.avatar{width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;background-color:var(--user-message-bg);display:flex;align-items:center;justify-content:center;color:var(--user-text-color);font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:var(--avatar-user-bg)}::ng-deep .em{color:inherit;font-style:italic}::ng-deep .strong{font-weight:700;color:inherit}::ng-deep .em_strong{font-weight:700;font-style:italic;color:inherit}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid var(--divider-color)}.evaluation-footer{position:absolute;bottom:-10px;left:20px;display:flex;align-items:center;gap:8px}.options-footer{position:absolute;bottom:5px;right:20px;display:flex;align-items:center;gap:8px}.pointer{cursor:pointer}.tags{position:absolute;top:-10px;right:15px;display:flex;gap:5px;z-index:1}.tag{font-size:16px;transition:transform .3s ease-in-out;animation:float 6s ease-in-out infinite;cursor:default}.tag:hover{transform:scale(1.2)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-2px)}to{transform:translateY(0)}}.generated-img{width:100%;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatMessageOrchestratorComponent, selector: "dc-message-orchestrator", inputs: ["messages", "messageRole"], outputs: ["audioCompleted"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ChatMessageComponent, isStandalone: true, selector: "dc-chat-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: true, transformFunction: null }, chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar -->\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\" (click)=\"printData()\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"AI\" class=\"avatar-image\" />\n      </div>\n    </div>\n    } @if (isUserMessage()) {\n    <div class=\"avatar-container-right\" (click)=\"printData()\">\n      <div class=\"avatar user-avatar\">\n        <img [src]=\"chatMessage()?.imgUrl || '/assets/defaults/avatar_user.jpg'\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message Bubble -->\n    <div class=\"message-bubble\">\n      @if (chatMessage().generatedImg) {\n      <img class=\"generated-img\" [src]=\"chatMessage().generatedImg\" alt=\"Generated Image\" />\n      } @if (hasMultiMessages()) {\n      <dc-message-orchestrator [messages]=\"multiMessages()\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      } @else {\n      <dc-message-orchestrator [messages]=\"[messageContent()]\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      }\n\n      <!-- Translation -->\n      @if (isAssistantMessage() && chatMessage().evaluation?.['text']) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      } @if (isUserMessage() && chatMessage().evaluation) {\n      <div class=\"translation\" style=\"color: white\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      <div class=\"evaluation-footer\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n      } @if (userService.isAdmin()) {\n      <div class=\"options-footer\">\n        <i #popoverTarget class=\"pi pi-ellipsis-h\" style=\"font-size: 1rem\" (click)=\"op.toggle($event)\"></i>\n        <p-popover #op>\n          <ul class=\"list-none p-0 m-0 flex flex-col\">\n            <li class=\"flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border\" (click)=\"generateImage()\">\n              <span>Generate image</span>\n            </li>\n          </ul>\n        </p-popover>\n      </div>\n      }\n    </div>\n\n    <!-- Tags -->\n    @if (chatMessage().tags?.length) {\n    <div class=\"tags\">\n      @for (tag of chatMessage().tags; track tag) {\n      <span class=\"tag\">{{ tag }}</span>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{--user-message-bg: rgba(13, 88, 120, .5);--assistant-message-bg: rgba(240, 240, 240, .5);--user-text-color: white;--assistant-text-color: #333;--avatar-user-bg: #ffa77e;--divider-color: #ffa77e;--border-radius: 18px;--avatar-size: 36px;--shadow: 0 2px 8px rgba(0, 0, 0, .15);display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:98%;line-height:1.5;position:relative}.user-message{justify-content:flex-end}.user-message .message-bubble{background-color:var(--user-message-bg);color:var(--user-text-color);border-radius:var(--border-radius) var(--border-radius) 0 var(--border-radius);margin-left:8px;min-width:150px}.user-message dc-message-orchestrator{margin-right:19px}.assistant-message{justify-content:flex-start}.assistant-message .message-bubble{background-color:var(--assistant-message-bg);color:var(--assistant-text-color);border-radius:var(--border-radius) var(--border-radius) var(--border-radius) 0;margin-left:8px}.message-bubble{padding:9px;box-shadow:var(--shadow);max-width:98%;min-width:0;position:relative;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.avatar-container,.avatar-container-right{position:absolute;bottom:-20px}.avatar-container{left:-7px;z-index:1}.avatar-container-right{right:-5px;z-index:1}.avatar{width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;background-color:var(--user-message-bg);display:flex;align-items:center;justify-content:center;color:var(--user-text-color);font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:var(--avatar-user-bg)}::ng-deep .em{color:inherit;font-style:italic}::ng-deep .strong{font-weight:700;color:inherit}::ng-deep .em_strong{font-weight:700;font-style:italic;color:inherit}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid var(--divider-color)}.evaluation-footer{position:absolute;bottom:-10px;left:20px;display:flex;align-items:center;gap:8px}.options-footer{position:absolute;bottom:5px;right:20px;display:flex;align-items:center;gap:8px}.pointer{cursor:pointer}.tags{position:absolute;top:-10px;right:15px;display:flex;gap:5px;z-index:1}.tag{font-size:16px;transition:transform .3s ease-in-out;animation:float 6s ease-in-out infinite;cursor:default}.tag:hover{transform:scale(1.2)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-2px)}to{transform:translateY(0)}}.generated-img{width:100%;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatMessageOrchestratorComponent, selector: "dc-message-orchestrator", inputs: ["messages", "messageRole"], outputs: ["audioCompleted"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ChatMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, ChatMessageOrchestratorComponent, PopoverModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar -->\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\" (click)=\"printData()\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"AI\" class=\"avatar-image\" />\n      </div>\n    </div>\n    } @if (isUserMessage()) {\n    <div class=\"avatar-container-right\" (click)=\"printData()\">\n      <div class=\"avatar user-avatar\">\n        <img [src]=\"chatMessage()?.imgUrl || '/assets/defaults/avatar_user.jpg'\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message Bubble -->\n    <div class=\"message-bubble\">\n      @if (chatMessage().generatedImg) {\n      <img class=\"generated-img\" [src]=\"chatMessage().generatedImg\" alt=\"Generated Image\" />\n      } @if (hasMultiMessages()) {\n      <dc-message-orchestrator [messages]=\"multiMessages()\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      } @else {\n      <dc-message-orchestrator [messages]=\"[audioMessage()]\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      }\n\n      <!-- Translation -->\n      @if (isAssistantMessage() && chatMessage().evaluation?.['text']) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      } @if (isUserMessage() && chatMessage().evaluation) {\n      <div class=\"translation\" style=\"color: white\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      <div class=\"evaluation-footer\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n      } @if (userService.isAdmin()) {\n      <div class=\"options-footer\">\n        <i #popoverTarget class=\"pi pi-ellipsis-h\" style=\"font-size: 1rem\" (click)=\"op.toggle($event)\"></i>\n        <p-popover #op>\n          <ul class=\"list-none p-0 m-0 flex flex-col\">\n            <li class=\"flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border\" (click)=\"generateImage()\">\n              <span>Generate image</span>\n            </li>\n          </ul>\n        </p-popover>\n      </div>\n      }\n    </div>\n\n    <!-- Tags -->\n    @if (chatMessage().tags?.length) {\n    <div class=\"tags\">\n      @for (tag of chatMessage().tags; track tag) {\n      <span class=\"tag\">{{ tag }}</span>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{--user-message-bg: rgba(13, 88, 120, .8);--assistant-message-bg: rgba(240, 240, 240, .8);--user-text-color: white;--assistant-text-color: #333;--avatar-user-bg: #ffa77e;--divider-color: #ffa77e;--border-radius: 18px;--avatar-size: 36px;--shadow: 0 2px 8px rgba(0, 0, 0, .15);display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:98%;line-height:1.5;position:relative}.user-message{justify-content:flex-end}.user-message .message-bubble{background-color:var(--user-message-bg);color:var(--user-text-color);border-radius:var(--border-radius) var(--border-radius) 0 var(--border-radius);margin-left:8px;min-width:150px}.user-message dc-message-orchestrator{margin-right:19px}.assistant-message{justify-content:flex-start}.assistant-message .message-bubble{background-color:var(--assistant-message-bg);color:var(--assistant-text-color);border-radius:var(--border-radius) var(--border-radius) var(--border-radius) 0;margin-left:8px}.message-bubble{padding:9px;box-shadow:var(--shadow);max-width:98%;min-width:0;position:relative;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.avatar-container,.avatar-container-right{position:absolute;bottom:-20px}.avatar-container{left:-7px;z-index:1}.avatar-container-right{right:-5px;z-index:1}.avatar{width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;background-color:var(--user-message-bg);display:flex;align-items:center;justify-content:center;color:var(--user-text-color);font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:var(--avatar-user-bg)}::ng-deep .em{color:inherit;font-style:italic}::ng-deep .strong{font-weight:700;color:inherit}::ng-deep .em_strong{font-weight:700;font-style:italic;color:inherit}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid var(--divider-color)}.evaluation-footer{position:absolute;bottom:-10px;left:20px;display:flex;align-items:center;gap:8px}.options-footer{position:absolute;bottom:5px;right:20px;display:flex;align-items:center;gap:8px}.pointer{cursor:pointer}.tags{position:absolute;top:-10px;right:15px;display:flex;gap:5px;z-index:1}.tag{font-size:16px;transition:transform .3s ease-in-out;animation:float 6s ease-in-out infinite;cursor:default}.tag:hover{transform:scale(1.2)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-2px)}to{transform:translateY(0)}}.generated-img{width:100%;border-radius:var(--border-radius)}\n"] }]
+            args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, ChatMessageOrchestratorComponent, PopoverModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar -->\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\" (click)=\"printData()\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"AI\" class=\"avatar-image\" />\n      </div>\n    </div>\n    } @if (isUserMessage()) {\n    <div class=\"avatar-container-right\" (click)=\"printData()\">\n      <div class=\"avatar user-avatar\">\n        <img [src]=\"chatMessage()?.imgUrl || '/assets/defaults/avatar_user.jpg'\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message Bubble -->\n    <div class=\"message-bubble\">\n      @if (chatMessage().generatedImg) {\n      <img class=\"generated-img\" [src]=\"chatMessage().generatedImg\" alt=\"Generated Image\" />\n      } @if (hasMultiMessages()) {\n      <dc-message-orchestrator [messages]=\"multiMessages()\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      } @else {\n      <dc-message-orchestrator [messages]=\"[messageContent()]\" [messageRole]=\"chatMessage().role\"></dc-message-orchestrator>\n      }\n\n      <!-- Translation -->\n      @if (isAssistantMessage() && chatMessage().evaluation?.['text']) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      } @if (isUserMessage() && chatMessage().evaluation) {\n      <div class=\"translation\" style=\"color: white\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['text'] }}\n      </div>\n      <div class=\"evaluation-footer\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n      } @if (userService.isAdmin()) {\n      <div class=\"options-footer\">\n        <i #popoverTarget class=\"pi pi-ellipsis-h\" style=\"font-size: 1rem\" (click)=\"op.toggle($event)\"></i>\n        <p-popover #op>\n          <ul class=\"list-none p-0 m-0 flex flex-col\">\n            <li class=\"flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border\" (click)=\"generateImage()\">\n              <span>Generate image</span>\n            </li>\n          </ul>\n        </p-popover>\n      </div>\n      }\n    </div>\n\n    <!-- Tags -->\n    @if (chatMessage().tags?.length) {\n    <div class=\"tags\">\n      @for (tag of chatMessage().tags; track tag) {\n      <span class=\"tag\">{{ tag }}</span>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{--user-message-bg: rgba(13, 88, 120, .5);--assistant-message-bg: rgba(240, 240, 240, .5);--user-text-color: white;--assistant-text-color: #333;--avatar-user-bg: #ffa77e;--divider-color: #ffa77e;--border-radius: 18px;--avatar-size: 36px;--shadow: 0 2px 8px rgba(0, 0, 0, .15);display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:98%;line-height:1.5;position:relative}.user-message{justify-content:flex-end}.user-message .message-bubble{background-color:var(--user-message-bg);color:var(--user-text-color);border-radius:var(--border-radius) var(--border-radius) 0 var(--border-radius);margin-left:8px;min-width:150px}.user-message dc-message-orchestrator{margin-right:19px}.assistant-message{justify-content:flex-start}.assistant-message .message-bubble{background-color:var(--assistant-message-bg);color:var(--assistant-text-color);border-radius:var(--border-radius) var(--border-radius) var(--border-radius) 0;margin-left:8px}.message-bubble{padding:9px;box-shadow:var(--shadow);max-width:98%;min-width:0;position:relative;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.avatar-container,.avatar-container-right{position:absolute;bottom:-20px}.avatar-container{left:-7px;z-index:1}.avatar-container-right{right:-5px;z-index:1}.avatar{width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;background-color:var(--user-message-bg);display:flex;align-items:center;justify-content:center;color:var(--user-text-color);font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:var(--avatar-user-bg)}::ng-deep .em{color:inherit;font-style:italic}::ng-deep .strong{font-weight:700;color:inherit}::ng-deep .em_strong{font-weight:700;font-style:italic;color:inherit}.translation{margin-top:8px;font-size:small;line-height:1.6;color:#393744;font-style:italic}.divider{margin:.5rem 40px;border-top:1px solid var(--divider-color)}.evaluation-footer{position:absolute;bottom:-10px;left:20px;display:flex;align-items:center;gap:8px}.options-footer{position:absolute;bottom:5px;right:20px;display:flex;align-items:center;gap:8px}.pointer{cursor:pointer}.tags{position:absolute;top:-10px;right:15px;display:flex;gap:5px;z-index:1}.tag{font-size:16px;transition:transform .3s ease-in-out;animation:float 6s ease-in-out infinite;cursor:default}.tag:hover{transform:scale(1.2)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-2px)}to{transform:translateY(0)}}.generated-img{width:100%;border-radius:var(--border-radius)}\n"] }]
         }], ctorParameters: () => [] });
 
 class ChatMessagesListComponent {
@@ -3659,7 +3812,7 @@ class ModelSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ModelSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ModelSelectorComponent, isStandalone: true, selector: "dc-model-selector", inputs: { modelForm: "modelForm", shortForm: "shortForm" }, ngImport: i0, template: "<div>\n  <b>Selecci\u00F3n de modelo</b>\n\n  <div class=\"form-field\">\n    <label for=\"modelQuality\" class=\"block text-sm font-medium text-gray-700\">Model Quality</label>\n    <p-select\n      id=\"modelQuality\"\n      [options]=\"modelQualityOptions\"\n      [formControl]=\"modelForm.controls.quality\"\n      placeholder=\"Select a Quality\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      class=\"w-full\"></p-select>\n  </div>\n\n  @if(!shortForm) {\n  <div class=\"form-field\">\n    <label for=\"modelQuality\" class=\"block text-sm font-medium text-gray-700\">Provider</label>\n    <p-select\n      id=\"modelQuality\"\n      [options]=\"providersOptions\"\n      [formControl]=\"modelForm.controls.provider\"\n      placeholder=\"Select a Quality\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      class=\"w-full\"></p-select>\n  </div>\n  }\n\n  <!-- <div style=\"display: flex; gap: 10px\" [formGroup]=\"modelForm\">\n    <div class=\"space\">\n      <p-radioButton value=\"groq\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Groq</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openai\" formControlName=\"provider\"></p-radioButton>\n      <label>Open AI</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"google\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Google</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openrouter\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Open Router</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"ollama\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Ollama</label>\n    </div>\n  </div> -->\n\n  <!-- <b>Modelo: </b>\n  <span pTooltip=\"Modelo Seleccionado\">{{ modelForm.controls.modelName.value }}</span>\n  @if (modelForm.controls.provider.value) { @if(isLoadingModels) {\n  <p-skeleton height=\"200px\" width=\"100%\"></p-skeleton>\n  } @else {\n  <p-table [value]=\"modelnames\" stripedRows [size]=\"'small'\" [paginator]=\"true\" [rows]=\"12\" [formGroup]=\"modelForm\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th></th>\n        <th>Name</th>\n        <th>$$Prompt M</th>\n        <th>$$Completion M</th>\n        <th>$$Cost 90/10 M</th>\n        <th>Created</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-model>\n      <tr [pTooltip]=\"model.description | truncate : 200\" tooltipPosition=\"top\">\n        <td><p-radioButton [value]=\"model.id\" formControlName=\"modelName\"></p-radioButton></td>\n        <td>{{ model.name || model.id }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.completion * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 * 0.9 + +model.pricing?.completion * 1000000 * 0.1 | number : '1.2-2' }}</td>\n        <td>{{ model.created * 1000 | date : 'dd/MM/yyyy' }}</td>\n      </tr>\n    </ng-template>\n  </p-table>\n  } }\n</div> -->\n</div>\n", styles: [":host{display:block}.space{display:flex;gap:2px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ModelSelectorComponent, isStandalone: true, selector: "dc-model-selector", inputs: { modelForm: "modelForm", shortForm: "shortForm" }, ngImport: i0, template: "<div>\n  <b>Selecci\u00F3n de modelo</b>\n\n  <div class=\"form-field\">\n    <label for=\"modelQuality\" class=\"block text-sm font-medium text-gray-700\">Model Quality</label>\n    <p-select\n      id=\"modelQuality\"\n      [options]=\"modelQualityOptions\"\n      [formControl]=\"modelForm.controls.quality\"\n      placeholder=\"Select a Quality\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      class=\"w-full\"></p-select>\n  </div>\n\n  @if(!shortForm) {\n  <div class=\"form-field\">\n    <label for=\"modelQuality\" class=\"block text-sm font-medium text-gray-700\">Provider</label>\n    <p-select\n      id=\"modelQuality\"\n      [options]=\"providersOptions\"\n      [formControl]=\"modelForm.controls.provider\"\n      placeholder=\"Select a Quality\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      class=\"w-full\"></p-select>\n  </div>\n  }\n\n  <!-- <div style=\"display: flex; gap: 10px\" [formGroup]=\"modelForm\">\n    <div class=\"space\">\n      <p-radioButton value=\"groq\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Groq</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openai\" formControlName=\"provider\"></p-radioButton>\n      <label>Open AI</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"google\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Google</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"openrouter\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Open Router</label>\n    </div>\n\n    <div class=\"space\">\n      <p-radioButton value=\"ollama\" formControlName=\"provider\"></p-radioButton>\n      <label class=\"space\">Ollama</label>\n    </div>\n  </div> -->\n\n  <!-- <b>Modelo: </b>\n  <span pTooltip=\"Modelo Seleccionado\">{{ modelForm.controls.modelName.value }}</span>\n  @if (modelForm.controls.provider.value) { @if(isLoadingModels) {\n  <p-skeleton height=\"200px\" width=\"100%\"></p-skeleton>\n  } @else {\n  <p-table [value]=\"modelnames\" stripedRows [size]=\"'small'\" [paginator]=\"true\" [rows]=\"12\" [formGroup]=\"modelForm\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th></th>\n        <th>Name</th>\n        <th>$$Prompt M</th>\n        <th>$$Completion M</th>\n        <th>$$Cost 90/10 M</th>\n        <th>Created</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-model>\n      <tr [pTooltip]=\"model.description | truncate : 200\" tooltipPosition=\"top\">\n        <td><p-radioButton [value]=\"model.id\" formControlName=\"modelName\"></p-radioButton></td>\n        <td>{{ model.name || model.id }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.completion * 1000000 | number : '1.2-2' }}</td>\n        <td>${{ +model.pricing?.prompt * 1000000 * 0.9 + +model.pricing?.completion * 1000000 * 0.1 | number : '1.2-2' }}</td>\n        <td>{{ model.created * 1000 | date : 'dd/MM/yyyy' }}</td>\n      </tr>\n    </ng-template>\n  </p-table>\n  } }\n</div> -->\n</div>\n", styles: [":host{display:block}.space{display:flex;gap:2px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ModelSelectorComponent, decorators: [{
             type: Component,
@@ -3743,7 +3896,7 @@ class DCConversationUserChatSettingsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCConversationUserChatSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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(userService.isAdmin()) {\n    <div>\n      <hr />\n      <b> <i style=\"color: rgb(255, 149, 0)\" class=\"pi pi-key\"></i> 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;max-height:80vh;overflow-y:auto}.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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i3$1.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], 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", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: SpeedDescPipe, name: "speedDisplay" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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(userService.isAdmin()) {\n    <div>\n      <hr />\n      <b> <i style=\"color: rgb(255, 149, 0)\" class=\"pi pi-key\"></i> 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;max-height:80vh;overflow-y:auto}.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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i3$2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], 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", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: SpeedDescPipe, name: "speedDisplay" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCConversationUserChatSettingsComponent, decorators: [{
             type: Component,
@@ -3819,6 +3972,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
+class PromptPreviewComponent {
+    constructor() {
+        this.promptBuilder = inject(ConversationPromptBuilderService);
+        this.messages = input.required(...(ngDevMode ? [{ debugName: "messages" }] : []));
+        this.jailBrake = input(...(ngDevMode ? [undefined, { debugName: "jailBrake" }] : []));
+        this.formatCamelCaseString = formatCamelCaseString;
+    }
+    estimateTokens(text) {
+        return this.promptBuilder.estimateTokens(text);
+    }
+    get totalTokens() {
+        let totalTokens = 0;
+        for (const message of this.messages()) {
+            totalTokens += this.estimateTokens(message.content || '');
+        }
+        if (this.jailBrake()) {
+            totalTokens += this.estimateTokens(this.jailBrake());
+        }
+        return totalTokens;
+    }
+    ngOnInit() {
+        console.log(this.messages());
+        console.log(this.jailBrake());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: PromptPreviewComponent, isStandalone: true, selector: "dc-prompt-preview", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, jailBrake: { classPropertyName: "jailBrake", publicName: "jailBrake", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h3\n  >Total Tokens: <b class=\"text-green-700\">{{ totalTokens }}</b></h3\n>\n\n@for (message of messages(); track message) {\n<div>\n  <h5>\n    <b style=\"margin: 3px\" class=\"text-blue-700\">{{ formatCamelCaseString(message.role) }}</b>\n    <b style=\"margin: 3px\" class=\"text-red-700\">{{ formatCamelCaseString(message.messageId) }}</b>\n    <b style=\"margin: 3px\" class=\"text-green-700\">({{ estimateTokens(message.content || '') }} tokens)</b>\n  </h5>\n  <markdown>{{ message.content }}</markdown>\n</div>\n} @if (jailBrake()) {\n<div>\n  <h5\n    >JailBrake Instructions <b class=\"text-green-700\">({{ estimateTokens(jailBrake()!) }} tokens)</b></h5\n  >\n  <p>{{ jailBrake() }}</p>\n</div>\n}\n", styles: [":host{display:block;font-family:sans-serif;padding:1rem}h3,h5{margin-top:0}p{white-space:pre-wrap;word-break:break-word;margin-bottom:1rem;padding:.5rem;background-color:#f5f5f5;border-radius:4px}.text-blue-700{color:#1d4ed8}.text-red-700{color:#b91c1c}.text-green-700{color:#15803d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-prompt-preview', standalone: true, imports: [CommonModule, ChipModule, MarkdownComponent], template: "<h3\n  >Total Tokens: <b class=\"text-green-700\">{{ totalTokens }}</b></h3\n>\n\n@for (message of messages(); track message) {\n<div>\n  <h5>\n    <b style=\"margin: 3px\" class=\"text-blue-700\">{{ formatCamelCaseString(message.role) }}</b>\n    <b style=\"margin: 3px\" class=\"text-red-700\">{{ formatCamelCaseString(message.messageId) }}</b>\n    <b style=\"margin: 3px\" class=\"text-green-700\">({{ estimateTokens(message.content || '') }} tokens)</b>\n  </h5>\n  <markdown>{{ message.content }}</markdown>\n</div>\n} @if (jailBrake()) {\n<div>\n  <h5\n    >JailBrake Instructions <b class=\"text-green-700\">({{ estimateTokens(jailBrake()!) }} tokens)</b></h5\n  >\n  <p>{{ jailBrake() }}</p>\n</div>\n}\n", styles: [":host{display:block;font-family:sans-serif;padding:1rem}h3,h5{margin-top:0}p{white-space:pre-wrap;word-break:break-word;margin-bottom:1rem;padding:.5rem;background-color:#f5f5f5;border-radius:4px}.text-blue-700{color:#1d4ed8}.text-red-700{color:#b91c1c}.text-green-700{color:#15803d}\n"] }]
+        }] });
+
 class ConversationInspector {
     constructor() {
         this.evaluationService = inject(EvaluationService);
@@ -3849,11 +4034,11 @@ class ConversationInspector {
         navigator.clipboard.writeText(exportString);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConversationInspector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ConversationInspector, isStandalone: true, selector: "dc-conversation-info", ngImport: i0, template: "<p-button label=\"Call Agent\" (click)=\"callAgent()\" />\n<div class=\"info-content\">\n  <p-divider>Score</p-divider>\n\n  <label for=\"slider\">Current Score : {{ evaluationService.scoreSignal() }}</label>\n\n  <div class=\"flex flex gap-3\">\n    <p-slider [(ngModel)]=\"value\" [step]=\"10\" class=\"w-56\" />\n    <p-button label=\"Set Score to {{ value }}\" (onClick)=\"setScore()\" />\n  </div>\n\n  <p-divider>Conversation Flow</p-divider>\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.goal?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Goal</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.goal?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Trigger User Message</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Trigger Assistant Message</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <h3>Herramientas</h3>\n  @for (tool of dynamicFlowService.conversationFlowState()?.tools; track tool.name) {\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (tool.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">{{ tool.name }}</p>\n    </div>\n    @if(tool.description) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ tool.description }} </div>\n    }\n  </div>\n  }\n\n  <h3>Challenges Retos</h3>\n  @for (challenge of dynamicFlowService.conversationFlowState()?.challenges; track challenge.name) {\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (challenge.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n\n      <p class=\"font-semibold\"> {{ challenge.emoji }} {{ challenge.name }}</p>\n    </div>\n    @if(challenge.description) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ challenge.description }} </div>\n    }\n  </div>\n  }\n  <h5>Conditions</h5>\n\n  @for (condition of dynamicFlowService.conversationFlowState()?.dynamicConditions; track $index) {\n  <div class=\"pl-2 mt-1 text-sm text-gray-600 italic\"> When the {{ condition.what }} is {{ condition.when }} than {{ condition.value }} Do </div>\n  <ol>\n    @for (doAction of condition.do; track $index) {\n    <li class=\"pl-5 mt-1 text-sm text-gray-600 italic\">\n      {{ $index }})\n      <span style=\"color: brown\"> {{ doAction.actionType }}</span>\n      <span style=\"color: green\"> {{ doAction.systemPromptType }}</span>\n      <span style=\"color: green\"> {{ doAction.dynamicFlowTaskType }}</span>\n\n      to\n      <span style=\"color: rgb(49, 23, 177)\"> {{ doAction.enabled }}</span>\n      \"{{ doAction.prompt }}\"\n    </li>\n    }\n  </ol>\n  }\n\n  <p>Challenges</p>\n  <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n\n  <details>\n    <summary>Messages</summary>\n    <div>\n      <p-button label=\"Exportar todo\" (click)=\"exportChat('all')\" />\n      <p-button label=\"Exportar conversaci\u00F3n\" (click)=\"exportChat('conversation')\" />\n    </div>\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>Estado Global Conversation Flow</summary>\n    <p>Goal</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.goal | safeJson }}</pre>\n    <p>Trigger User Message</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage | safeJson }}</pre>\n    <p>Trigger Assistant Message</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage | safeJson }}</pre>\n    <p>Conditions</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.dynamicConditions | safeJson }}</pre>\n    <p>Tools</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.tools | safeJson }}</pre>\n    <p>Challenges</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n  </details>\n\n  <details>\n    <summary>Agent Card</summary>\n    <pre>{{ agentCard | safeJson }}</pre>\n  </details>\n\n  <details>\n    <summary>User Settings</summary>\n    <pre>{{ chatUserSettings | safeJson }}</pre>\n  </details>\n</div>\n", styles: [":host{overflow-y:scroll}.info-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i1$4.Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ConversationInspector, isStandalone: true, selector: "dc-conversation-info", ngImport: i0, template: "<p-button label=\"Call Agent\" (click)=\"callAgent()\" />\n<div class=\"info-content\">\n  <p-divider>Score</p-divider>\n\n  <label for=\"slider\">Current Score : {{ evaluationService.scoreSignal() }}</label>\n\n  <div class=\"flex flex gap-3\">\n    <p-slider [(ngModel)]=\"value\" [step]=\"10\" class=\"w-56\" />\n    <p-button label=\"Set Score to {{ value }}\" (onClick)=\"setScore()\" />\n  </div>\n\n  <p-divider>Conversation Flow</p-divider>\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.goal?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Goal</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.goal?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Trigger User Message</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Trigger Assistant Message</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <h3>Herramientas</h3>\n  @for (tool of dynamicFlowService.conversationFlowState()?.tools; track tool.name) {\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (tool.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">{{ tool.name }}</p>\n    </div>\n    @if(tool.description) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ tool.description }} </div>\n    }\n  </div>\n  }\n\n  <h3>Challenges Retos</h3>\n  @for (challenge of dynamicFlowService.conversationFlowState()?.challenges; track challenge.name) {\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (challenge.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n\n      <p class=\"font-semibold\"> {{ challenge.emoji }} {{ challenge.name }}</p>\n    </div>\n    @if(challenge.description) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ challenge.description }} </div>\n    }\n  </div>\n  }\n  <h5>Conditions</h5>\n\n  @for (condition of dynamicFlowService.conversationFlowState()?.dynamicConditions; track $index) {\n  <div class=\"pl-2 mt-1 text-sm text-gray-600 italic\"> When the {{ condition.what }} is {{ condition.when }} than {{ condition.value }} Do </div>\n  <ol>\n    @for (doAction of condition.do; track $index) {\n    <li class=\"pl-5 mt-1 text-sm text-gray-600 italic\">\n      {{ $index }})\n      <span style=\"color: brown\"> {{ doAction.actionType }}</span>\n      <span style=\"color: green\"> {{ doAction.systemPromptType }}</span>\n      <span style=\"color: green\"> {{ doAction.dynamicFlowTaskType }}</span>\n\n      to\n      <span style=\"color: rgb(49, 23, 177)\"> {{ doAction.enabled }}</span>\n      \"{{ doAction.prompt }}\"\n    </li>\n    }\n  </ol>\n  }\n\n  <p>Challenges</p>\n  <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n\n  <details>\n    <summary>Messages</summary>\n    <div>\n      <p-button label=\"Exportar todo\" (click)=\"exportChat('all')\" />\n      <p-button label=\"Exportar conversaci\u00F3n\" (click)=\"exportChat('conversation')\" />\n    </div>\n    <dc-prompt-preview [messages]=\"messageStateService.getMessagesSignal()()\"></dc-prompt-preview>\n  </details>\n\n  <details>\n    <summary>Estado Global Conversation Flow</summary>\n    <p>Goal</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.goal | safeJson }}</pre>\n    <p>Trigger User Message</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage | safeJson }}</pre>\n    <p>Trigger Assistant Message</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage | safeJson }}</pre>\n    <p>Conditions</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.dynamicConditions | safeJson }}</pre>\n    <p>Tools</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.tools | safeJson }}</pre>\n    <p>Challenges</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n  </details>\n\n  <details>\n    <summary>Agent Card</summary>\n    <pre>{{ agentCard | safeJson }}</pre>\n  </details>\n\n  <details>\n    <summary>User Settings</summary>\n    <pre>{{ chatUserSettings | safeJson }}</pre>\n  </details>\n</div>\n", styles: [":host{overflow-y:scroll}.info-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i1$4.Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$1.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: PromptPreviewComponent, selector: "dc-prompt-preview", inputs: ["messages", "jailBrake"] }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConversationInspector, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-conversation-info', standalone: true, imports: [CommonModule, SafeJsonPipe, SliderModule, ButtonModule, FormsModule, DividerModule], template: "<p-button label=\"Call Agent\" (click)=\"callAgent()\" />\n<div class=\"info-content\">\n  <p-divider>Score</p-divider>\n\n  <label for=\"slider\">Current Score : {{ evaluationService.scoreSignal() }}</label>\n\n  <div class=\"flex flex gap-3\">\n    <p-slider [(ngModel)]=\"value\" [step]=\"10\" class=\"w-56\" />\n    <p-button label=\"Set Score to {{ value }}\" (onClick)=\"setScore()\" />\n  </div>\n\n  <p-divider>Conversation Flow</p-divider>\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.goal?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Goal</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.goal?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Trigger User Message</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Trigger Assistant Message</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <h3>Herramientas</h3>\n  @for (tool of dynamicFlowService.conversationFlowState()?.tools; track tool.name) {\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (tool.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">{{ tool.name }}</p>\n    </div>\n    @if(tool.description) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ tool.description }} </div>\n    }\n  </div>\n  }\n\n  <h3>Challenges Retos</h3>\n  @for (challenge of dynamicFlowService.conversationFlowState()?.challenges; track challenge.name) {\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (challenge.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n\n      <p class=\"font-semibold\"> {{ challenge.emoji }} {{ challenge.name }}</p>\n    </div>\n    @if(challenge.description) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ challenge.description }} </div>\n    }\n  </div>\n  }\n  <h5>Conditions</h5>\n\n  @for (condition of dynamicFlowService.conversationFlowState()?.dynamicConditions; track $index) {\n  <div class=\"pl-2 mt-1 text-sm text-gray-600 italic\"> When the {{ condition.what }} is {{ condition.when }} than {{ condition.value }} Do </div>\n  <ol>\n    @for (doAction of condition.do; track $index) {\n    <li class=\"pl-5 mt-1 text-sm text-gray-600 italic\">\n      {{ $index }})\n      <span style=\"color: brown\"> {{ doAction.actionType }}</span>\n      <span style=\"color: green\"> {{ doAction.systemPromptType }}</span>\n      <span style=\"color: green\"> {{ doAction.dynamicFlowTaskType }}</span>\n\n      to\n      <span style=\"color: rgb(49, 23, 177)\"> {{ doAction.enabled }}</span>\n      \"{{ doAction.prompt }}\"\n    </li>\n    }\n  </ol>\n  }\n\n  <p>Challenges</p>\n  <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n\n  <details>\n    <summary>Messages</summary>\n    <div>\n      <p-button label=\"Exportar todo\" (click)=\"exportChat('all')\" />\n      <p-button label=\"Exportar conversaci\u00F3n\" (click)=\"exportChat('conversation')\" />\n    </div>\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>Estado Global Conversation Flow</summary>\n    <p>Goal</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.goal | safeJson }}</pre>\n    <p>Trigger User Message</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage | safeJson }}</pre>\n    <p>Trigger Assistant Message</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage | safeJson }}</pre>\n    <p>Conditions</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.dynamicConditions | safeJson }}</pre>\n    <p>Tools</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.tools | safeJson }}</pre>\n    <p>Challenges</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n  </details>\n\n  <details>\n    <summary>Agent Card</summary>\n    <pre>{{ agentCard | safeJson }}</pre>\n  </details>\n\n  <details>\n    <summary>User Settings</summary>\n    <pre>{{ chatUserSettings | safeJson }}</pre>\n  </details>\n</div>\n", styles: [":host{overflow-y:scroll}.info-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}\n"] }]
+            args: [{ selector: 'dc-conversation-info', standalone: true, imports: [CommonModule, SafeJsonPipe, SliderModule, ButtonModule, FormsModule, DividerModule, PromptPreviewComponent], template: "<p-button label=\"Call Agent\" (click)=\"callAgent()\" />\n<div class=\"info-content\">\n  <p-divider>Score</p-divider>\n\n  <label for=\"slider\">Current Score : {{ evaluationService.scoreSignal() }}</label>\n\n  <div class=\"flex flex gap-3\">\n    <p-slider [(ngModel)]=\"value\" [step]=\"10\" class=\"w-56\" />\n    <p-button label=\"Set Score to {{ value }}\" (onClick)=\"setScore()\" />\n  </div>\n\n  <p-divider>Conversation Flow</p-divider>\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.goal?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Goal</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.goal?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Trigger User Message</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">Trigger Assistant Message</p>\n    </div>\n    @if(dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage?.task; as task) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n    }\n  </div>\n\n  <h3>Herramientas</h3>\n  @for (tool of dynamicFlowService.conversationFlowState()?.tools; track tool.name) {\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (tool.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n      <p class=\"font-semibold\">{{ tool.name }}</p>\n    </div>\n    @if(tool.description) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ tool.description }} </div>\n    }\n  </div>\n  }\n\n  <h3>Challenges Retos</h3>\n  @for (challenge of dynamicFlowService.conversationFlowState()?.challenges; track challenge.name) {\n  <div class=\"mb-2\">\n    <div class=\"flex items-center gap-2\">\n      @if (challenge.enabled) {\n      <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n      } @else {\n      <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n      }\n\n      <p class=\"font-semibold\"> {{ challenge.emoji }} {{ challenge.name }}</p>\n    </div>\n    @if(challenge.description) {\n    <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ challenge.description }} </div>\n    }\n  </div>\n  }\n  <h5>Conditions</h5>\n\n  @for (condition of dynamicFlowService.conversationFlowState()?.dynamicConditions; track $index) {\n  <div class=\"pl-2 mt-1 text-sm text-gray-600 italic\"> When the {{ condition.what }} is {{ condition.when }} than {{ condition.value }} Do </div>\n  <ol>\n    @for (doAction of condition.do; track $index) {\n    <li class=\"pl-5 mt-1 text-sm text-gray-600 italic\">\n      {{ $index }})\n      <span style=\"color: brown\"> {{ doAction.actionType }}</span>\n      <span style=\"color: green\"> {{ doAction.systemPromptType }}</span>\n      <span style=\"color: green\"> {{ doAction.dynamicFlowTaskType }}</span>\n\n      to\n      <span style=\"color: rgb(49, 23, 177)\"> {{ doAction.enabled }}</span>\n      \"{{ doAction.prompt }}\"\n    </li>\n    }\n  </ol>\n  }\n\n  <p>Challenges</p>\n  <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n\n  <details>\n    <summary>Messages</summary>\n    <div>\n      <p-button label=\"Exportar todo\" (click)=\"exportChat('all')\" />\n      <p-button label=\"Exportar conversaci\u00F3n\" (click)=\"exportChat('conversation')\" />\n    </div>\n    <dc-prompt-preview [messages]=\"messageStateService.getMessagesSignal()()\"></dc-prompt-preview>\n  </details>\n\n  <details>\n    <summary>Estado Global Conversation Flow</summary>\n    <p>Goal</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.goal | safeJson }}</pre>\n    <p>Trigger User Message</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onUserMessage | safeJson }}</pre>\n    <p>Trigger Assistant Message</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.triggerTasks?.onAssistantMessage | safeJson }}</pre>\n    <p>Conditions</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.dynamicConditions | safeJson }}</pre>\n    <p>Tools</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.tools | safeJson }}</pre>\n    <p>Challenges</p>\n    <pre>{{ dynamicFlowService.conversationFlowState()?.challenges | safeJson }}</pre>\n  </details>\n\n  <details>\n    <summary>Agent Card</summary>\n    <pre>{{ agentCard | safeJson }}</pre>\n  </details>\n\n  <details>\n    <summary>User Settings</summary>\n    <pre>{{ chatUserSettings | safeJson }}</pre>\n  </details>\n</div>\n", styles: [":host{overflow-y:scroll}.info-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}\n"] }]
         }], ctorParameters: () => [] });
 
 class ConversationInfoService {
@@ -3864,6 +4049,7 @@ class ConversationInfoService {
         this.dialogService.open(ConversationInspector, {
             header: 'Conversation Inspection',
             width: '90vw',
+            maximizable: true,
             modal: true,
             draggable: false,
             closable: true,
@@ -3924,6 +4110,7 @@ class DCChatComponent {
     }
     async ngOnInit() {
         this.conversationService.setDestroyed(false);
+        this.chatMonitorService.isConversationActive.set(true);
         if (this.conversationSettings) {
             await this.conversationService.initConversationWithSettings(this.conversationSettings, this.conversationFlow);
         }
@@ -3936,10 +4123,12 @@ class DCChatComponent {
     ngOnDestroy() {
         // Mark conversation as destroyed to prevent async operations
         this.conversationService.setDestroyed(true);
+        this.chatMonitorService.isConversationActive.set(false);
         // Ensure the microphone is stopped when the chat component is destroyed
         this.chatFooterComponent?.stopMic();
         this.evaluationService.analylizePerformance();
         this.evaluationService.resetEvaluation();
+        // this.conversationService.resetConversation(); // Not sure if i need this? last update not even exits the line and was working.
     }
     /**
      * Open chat settings dialog
@@ -4139,21 +4328,22 @@ class PromptPreviewDialogComponent {
     constructor() {
         this.dynamicDialogConfig = inject(DynamicDialogConfig);
         this.dialogRef = inject(DynamicDialogRef);
-        this.data = this.dynamicDialogConfig.data;
+        this.messages = this.dynamicDialogConfig.data.messages;
+        this.jailBrake = this.dynamicDialogConfig.data.jailBrake;
     }
     close() {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptPreviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: PromptPreviewDialogComponent, isStandalone: true, selector: "dc-prompt-preview-dialog", ngImport: i0, template: ` <div class="prompt-preview-content" [innerHTML]="data.html"></div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: DialogModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: PromptPreviewDialogComponent, isStandalone: true, selector: "dc-prompt-preview-dialog", ngImport: i0, template: ` <dc-prompt-preview [messages]="messages" [jailBrake]="jailBrake"></dc-prompt-preview> `, isInline: true, dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: PromptPreviewComponent, selector: "dc-prompt-preview", inputs: ["messages", "jailBrake"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptPreviewDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dc-prompt-preview-dialog',
                     standalone: true,
-                    imports: [DialogModule],
-                    template: ` <div class="prompt-preview-content" [innerHTML]="data.html"></div> `,
+                    imports: [DialogModule, PromptPreviewComponent],
+                    template: ` <dc-prompt-preview [messages]="messages" [jailBrake]="jailBrake"></dc-prompt-preview> `,
                 }]
         }], ctorParameters: () => [] });
 
@@ -4220,6 +4410,420 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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: () => [] });
 
+class ACCDataGenerationComponent {
+    constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.audioNotificationService = inject(AudioNotificationService);
+        this.cardImprovementsChange = new EventEmitter();
+        this.cardImprovements = signal(null, ...(ngDevMode ? [{ debugName: "cardImprovements" }] : []));
+        this.idea = '';
+        this.prompt = signal('', ...(ngDevMode ? [{ debugName: "prompt" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.generationStep = signal('idea', ...(ngDevMode ? [{ debugName: "generationStep" }] : []));
+    }
+    generatePrompt() {
+        const currentCharacterCard = this.agentCard?.characterCard?.data;
+        if (!currentCharacterCard) {
+            return;
+        }
+        delete currentCharacterCard?.langTranslation;
+        delete currentCharacterCard?.post_history_instructions;
+        delete currentCharacterCard?.system_prompt;
+        let langPromtp = '';
+        if (this.agentCard.lang) {
+            langPromtp = `Despite language instructions, Return the requested data in ${getLangDesc(this.agentCard.lang)}`;
+        }
+        const prompt_user = `Mejora la ficha de personaje y devuelve la estructura JSON solicitada siguiendo las siguientes ideas: ${this.idea}`;
+        const currentCardJson = JSON.stringify(currentCharacterCard, null, 2);
+        const prompt_for_generation = `
+Generate a character profile with ultra-compact, information-dense descriptions.
+Use concise language: eliminate articles (a, the), use abbreviations, bullet points, 
+and pipe separators (|) where possible. Prioritize essential details only.
+
+COMPACT FORMAT RULES:
+- Drop articles: "tall man" not "a tall man"
+- Use abbreviations: "approx." "w/" "vs"
+- Pipe separators for lists: "reading | chess | cooking"
+- Comma lists: "brave, cynical, loyal"
+- Parentheses for context: "soldier (retired)" "eyes blue (cold when angry)"
+- Minimal adjectives, maximum information density
+- Example: "1.70m, lean, silver hair (long), blue eyes (sharp), pale skin. Black dress w/magic embroidery, pointed hat. Voice melodic/cutting. Crosses arms (annoyed), touches rings (thinking), erect posture. Raised brow (disdain), icy stare (fury)."
+
+- More examples: 
+Speech Style: Concise/direct, becomes sarcastic/grandiose when intimidating, double meanings
+Common Phrases: "Insolent mortals" | "Do you know what you've done?" | "The price will be steep" | "You test my patience" | "Perhaps... just perhaps..." | ""
+Language Habits: Dramatic pauses before threats/conditions
+Fillers: "umhuu", "naaah", "you see", "yara yara"
+
+    ${characterCardStringDataDefinition}
+    
+## My current character card data (May not be the right format) is:
+\`\`\`json
+${currentCardJson}
+\`\`\`
+
+${langPromtp}
+
+## Your Task is:
+${prompt_user}
+    `;
+        this.prompt.set(prompt_for_generation);
+        this.generationStep.set('prompt');
+    }
+    async generate() {
+        this.loading.set(true);
+        const conversation = {
+            messages: [{ role: ChatRole.User, content: this.prompt() }],
+            model: { quality: EModelQuality.BALANCED },
+            returnJson: true,
+        };
+        try {
+            const response = await this.agentCardService.callChatCompletion(conversation);
+            let improvements;
+            if (typeof response.content === 'string') {
+                improvements = JSON.parse(response.content);
+            }
+            else {
+                improvements = response.content;
+            }
+            this.cardImprovements.set(improvements);
+            this.cardImprovementsChange.emit(improvements);
+            this.generationStep.set('result');
+            this.audioNotificationService.playFinishNotification();
+        }
+        catch (error) {
+            console.error('Error generating character card:', error);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCDataGenerationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ACCDataGenerationComponent, isStandalone: true, selector: "dc-acc-data-generation", inputs: { agentCard: "agentCard" }, outputs: { cardImprovementsChange: "cardImprovementsChange" }, ngImport: i0, template: "<div>\n  @if (agentCard?.characterCard?.data?.name) {\n  <h2>{{ agentCard.characterCard.data.name }}</h2>\n  } @switch (generationStep()) { @case ('idea') {\n  <div class=\"form-field\">\n    <label for=\"idea\">Escribe tus ideas para mejorar tu personaje</label>\n    <br />\n    <textarea class=\"w-full\" pTextarea id=\"idea\" [(ngModel)]=\"idea\" rows=\"2\"></textarea>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate Prompt\" (click)=\"generatePrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Generated Character Improvements:</h3>\n    @if (cardImprovements(); as card) {\n    <div class=\"grid\">\n      <div class=\"col-12\">\n        <strong>Name:</strong>\n        <p>{{ card.name }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Gender:</strong>\n        <p>{{ card.gender }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Scenario:</strong>\n        <p>{{ card.scenario }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Hook:</strong>\n        <p>{{ card.hook }}</p>\n      </div>\n      @if(card.persona) {\n      <div class=\"col-12\">\n        <strong>Identity:</strong>\n        <p>{{ card.persona.identity }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Physical:</strong>\n        <p>{{ card.persona.physical }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Personality:</strong>\n        <p>{{ card.persona.personality }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Communication:</strong>\n        <p>{{ card.persona.communication }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Psychology:</strong>\n        <p>{{ card.persona.psychology }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Background:</strong>\n        <p>{{ card.persona.background }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Capabilities:</strong>\n        <p>{{ card.persona.capabilities }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Social:</strong>\n        <p>{{ card.persona.social }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Preferences:</strong>\n        <p>{{ card.persona.preferences }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Situation:</strong>\n        <p>{{ card.persona.situation }}</p>\n      </div>\n      }\n      <div class=\"col-12\">\n        <strong>Greetings:</strong>\n        <ul>\n          @for (greeting of card.greetings; track $index) {\n          <li>{{ greeting }}</li>\n          }\n        </ul>\n      </div>\n      <div class=\"col-12\">\n        <strong>Tags:</strong>\n        <p>{{ card.tags.join(', ') }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Appearance:</strong>\n        <p>{{ card.appearance }}</p>\n      </div>\n    </div>\n    }\n  </div>\n  } }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCDataGenerationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-acc-data-generation', standalone: true, imports: [CommonModule, ButtonModule, FormsModule, TextareaModule], template: "<div>\n  @if (agentCard?.characterCard?.data?.name) {\n  <h2>{{ agentCard.characterCard.data.name }}</h2>\n  } @switch (generationStep()) { @case ('idea') {\n  <div class=\"form-field\">\n    <label for=\"idea\">Escribe tus ideas para mejorar tu personaje</label>\n    <br />\n    <textarea class=\"w-full\" pTextarea id=\"idea\" [(ngModel)]=\"idea\" rows=\"2\"></textarea>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate Prompt\" (click)=\"generatePrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Generated Character Improvements:</h3>\n    @if (cardImprovements(); as card) {\n    <div class=\"grid\">\n      <div class=\"col-12\">\n        <strong>Name:</strong>\n        <p>{{ card.name }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Gender:</strong>\n        <p>{{ card.gender }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Scenario:</strong>\n        <p>{{ card.scenario }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Hook:</strong>\n        <p>{{ card.hook }}</p>\n      </div>\n      @if(card.persona) {\n      <div class=\"col-12\">\n        <strong>Identity:</strong>\n        <p>{{ card.persona.identity }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Physical:</strong>\n        <p>{{ card.persona.physical }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Personality:</strong>\n        <p>{{ card.persona.personality }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Communication:</strong>\n        <p>{{ card.persona.communication }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Psychology:</strong>\n        <p>{{ card.persona.psychology }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Background:</strong>\n        <p>{{ card.persona.background }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Capabilities:</strong>\n        <p>{{ card.persona.capabilities }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Social:</strong>\n        <p>{{ card.persona.social }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Preferences:</strong>\n        <p>{{ card.persona.preferences }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Situation:</strong>\n        <p>{{ card.persona.situation }}</p>\n      </div>\n      }\n      <div class=\"col-12\">\n        <strong>Greetings:</strong>\n        <ul>\n          @for (greeting of card.greetings; track $index) {\n          <li>{{ greeting }}</li>\n          }\n        </ul>\n      </div>\n      <div class=\"col-12\">\n        <strong>Tags:</strong>\n        <p>{{ card.tags.join(', ') }}</p>\n      </div>\n      <div class=\"col-12\">\n        <strong>Appearance:</strong>\n        <p>{{ card.appearance }}</p>\n      </div>\n    </div>\n    }\n  </div>\n  } }\n</div>\n" }]
+        }], propDecorators: { agentCard: [{
+                type: Input
+            }], cardImprovementsChange: [{
+                type: Output
+            }] } });
+
+const VIDEO_PROMPT_EMOTIONS = {
+    [MoodState.HAPPY]: 'Generate a video with then main subject showing a happy expression. focus on face details and body movements The corners of the mouth are pulled up and back, the cheeks are raised, and the eyes are narrowed with crow’s feet wrinkles at the corners. The eyebrows are relaxed, and the overall expression is one of genuine joy and contentment.',
+    [MoodState.SAD]: 'Generate a video with then main subject showing a sad expression. focus on face details and body movements The inner corners of the eyebrows are drawn up, the eyelids droop, and the corners of the mouth are turned down. The lower lip may tremble slightly, and the gaze is often directed downwards, conveying a sense of sorrow and melancholy.',
+    [MoodState.ANGRY]: 'Generate a video with then main subject showing an angry expression. focus on face details and body movements The eyebrows are lowered and drawn together, creating vertical wrinkles between them. The eyes are narrowed in a hard stare, and the lips are pressed firmly together or slightly open to bare the teeth. The jaw is clenched, and the face is tense with fury.',
+    [MoodState.FEAR]: 'Generate a video with then main subject showing a fearful expression. focus on face details and body movements The eyebrows are raised and pulled together, the upper eyelids are lifted, and the lower eyelids are tensed. The mouth is often open with the lips stretched horizontally, and the person may gasp for air. The eyes are wide open, showing the whites above the iris, reflecting a state of alarm.',
+    [MoodState.SURPRISED]: 'Generate a video with then main subject showing a surprised expression. focus on face details and body movements The eyebrows are raised high, the eyes are wide open, and the jaw drops, parting the lips. This expression is brief and captures a moment of astonishment or disbelief, with the face completely open and receptive to the unexpected event.',
+    [MoodState.DISGUSTED]: 'Generate a- video showing a disgusted expression. focus on face details and body movements The nose is wrinkled, the upper lip is raised, and the corners of the mouth are turned down. The eyebrows are lowered, and the person may slightly stick out their tongue, as if expelling something unpleasant. This expression conveys a strong aversion or revulsion.',
+    [MoodState.PROUD]: 'Generate a video with then main subject showing a proud expression. focus on face details and body movements The head is tilted slightly back, with a small smile on the lips. The eyes have a confident and satisfied look, and the posture is upright and expanded. This expression communicates a sense of accomplishment and self-esteem.',
+    [MoodState.ASHAMED]: 'Generate a video with then main subject showing an ashamed expression. focus on face details and body movements The head is lowered, and the gaze is averted downwards. The corners of the mouth are turned down, and there might be a slight blush on the cheeks. This expression conveys a feeling of embarrassment and remorse.',
+    [MoodState.GUILTY]: 'Generate a video with then main subject showing a guilty expression. focus on face details and body movements The eyes are downcast, avoiding direct contact, and the eyebrows are drawn together in a worried frown. The lips are pressed together or turned downwards, and the head may be bowed, reflecting a sense of regret and responsibility for a wrongdoing.',
+    [MoodState.JEALOUS]: 'Generate a video with then main subject showing a jealous expression. focus on face details and body movements The eyes are narrowed and may dart sideways, with a look of suspicion. The lips are tightened into a thin line, and there might be a slight sneer or a contemptuous curl at one corner of the mouth. The expression is a mix of anger, sadness, and fear.',
+    [MoodState.LOVE]: 'Generate a video with then main subject showing a loving expression. focus on face details and body movements The face is relaxed with a soft, gentle smile. The eyes are warm and focused on the object of affection, often with slightly raised eyebrows and dilated pupils. This expression radiates tenderness, care, and deep emotional connection.',
+    [MoodState.CONTEMPT]: 'Generate a video with then main subject showing a contemptuous expression. focus on face details and body movements One corner of the mouth is raised in a unilateral sneer. The eyes may have a slight glare, and the head is often tilted back slightly, conveying a sense of superiority and disdain.',
+    [MoodState.COMIC]: 'Generate a video with then main subject showing a comical, laughing expression. focus on face details and body movements The mouth is wide open, the cheeks are raised, and the eyes are crinkled at the corners. The person may be shown in a full-throated laugh, with their head thrown back, expressing immense amusement and joy.',
+    [MoodState.BLUSHING]: 'Generate a video with then main subject showing a blushing expression. focus on face details and body movements The cheeks are flushed with a reddish tint, and the person may have a shy, embarrassed smile. The gaze is often averted, and the body language is reserved, indicating a feeling of self-consciousness or modesty.',
+    [MoodState.CONFUSED]: 'Generate a video with then main subject showing a confused expression. focus on face details and body movements The eyebrows are drawn together and lowered, the forehead is wrinkled, and the lips are pursed. The head may be tilted to one side, and the eyes are narrowed as the person tries to understand something puzzling.',
+    [MoodState.CURIOUS]: 'Generate a video with then main subject showing a curious expression. focus on face details and body movements The eyebrows are slightly raised, the eyes are wide and focused, and the head is tilted forward. The lips may be slightly parted, and the expression is one of intense interest and inquisitiveness.',
+    [MoodState.BORED]: 'Generate a video with then main subject showing a bored expression. focus on face details and body movements The head is often propped up by a hand, the eyelids are droopy, and the gaze is unfocused. The mouth is slightly open and relaxed, and the overall expression conveys a lack of interest and mental fatigue.',
+    [MoodState.FRUSTRATED]: 'Generate a video with then main subject showing a frustrated expression. focus on face details and body movements The lips are pressed tightly together, the jaw is clenched, and the eyebrows are drawn together in a frown. The person may sigh or puff out their cheeks, showing a sense of exasperation and defeat.',
+    [MoodState.OVERWHELMED]: 'Generate a video with then main subject showing an overwhelmed expression. focus on face details and body movements The eyes are wide and possibly teary, the forehead is wrinkled with worry, and the mouth is slightly agape. The person may have their hands on their head, conveying a feeling of being swamped by stress and pressure.',
+    [MoodState.FOCUSED]: 'Generate a video with then main subject showing a focused expression. focus on face details and body movements The eyes are narrowed and directed intently on a task, the eyebrows are slightly lowered in concentration, and the lips are pressed together. The face is still and shows deep mental engagement.',
+    [MoodState.CHALLENGE]: 'Generate a video with then main subject showing a challenging expression. focus on face details and body movements A confident smirk plays on the lips, the eyebrows are slightly raised, and the eyes have a direct, unwavering gaze. The chin is lifted, and the expression conveys a sense of daring and readiness to compete.',
+    [MoodState.SERIOUS]: 'Generate a video with then main subject showing a serious expression. focus on face details and body movements The facial muscles are neutral and composed, the lips are in a straight line, and the gaze is steady and direct. The eyebrows are in a neutral position, and the overall expression is one of solemnity and thoughtfulness.',
+    [MoodState.SLEEPY]: 'Generate a video with then main subject showing a sleepy expression. focus on face details and body movements The eyelids are heavy and drooping, the person may be yawning with a wide-open mouth, and their movements are slow and sluggish. The eyes are unfocused, and the head may nod forward, indicating a strong desire to sleep.',
+    [MoodState.HORNY]: 'Generate a video with then main subject showing a horny or lustful expression. focus on face details and body movements The pupils are dilated, the lips are slightly parted and may be licked, and the gaze is intense and direct. The breathing may be slightly faster, and the expression conveys strong sexual desire and arousal.',
+    [MoodState.ANXIOUS]: 'Generate a video with then main subject showing an anxious expression. focus on face details and body movements The forehead is wrinkled with worry, the eyebrows are raised and drawn together, and the eyes are wide and vigilant. The lips are either pressed together or slightly parted, and the person may be biting their lip, reflecting a state of nervousness and unease.',
+    [MoodState.RELAXED]: 'Generate a video with then main subject showing a relaxed expression. focus on face details and body movements The facial muscles are loose and tension-free, the lips have a gentle, closed-mouth smile, and the breathing is slow and steady. The eyes are soft, and the overall expression is one of calmness and tranquility.',
+};
+
+class ACCMotionGenerationComponent {
+    constructor() {
+        this.generatedAsset = signal(null, ...(ngDevMode ? [{ debugName: "generatedAsset" }] : []));
+        this.assetService = inject(GeneratedAssetsService);
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.toastService = inject(TOAST_ALERTS_TOKEN);
+        this.audioNotificationService = inject(AudioNotificationService);
+        this.MoodStateOptions = MoodStateOptions;
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : []));
+        this.aspectRatioOptions = AspectRatioOptions;
+        this.resolutionOptions = [];
+        this.height = 700;
+        this.width = 400;
+        this.storageMotion = signal(null, ...(ngDevMode ? [{ debugName: "storageMotion" }] : []));
+    }
+    async generateVideoWithCharacterImage() {
+        if (!this.resolutionSelected) {
+            alert('Please select a resolution');
+            return;
+        }
+        const emptyAsset = {
+            name: 'Character Video',
+            type: 'video',
+            url: '',
+            provider: 'comfy',
+            prompt: this.videoPrompt,
+            request: {
+                height: this.resolutionSelected.h,
+                width: this.resolutionSelected.w,
+                seconds: 4,
+                storagePath: `agent_char_cards/${this.agentCard.id}/motions`,
+                fileName: `${this.emotionSelected}.mp4`,
+            },
+            assets: {
+                firstFrame: this.agentCard.assets.image,
+            },
+        };
+        if (!emptyAsset.prompt || !emptyAsset.assets.firstFrame.url) {
+            alert('Please enter a video prompt or no image to generate the video');
+            return;
+        }
+        this.isLoading.set(true);
+        console.log(emptyAsset);
+        this.toastService.info({ title: 'Generando video NO Cierres esta ventana', subtitle: 'Esto puede tomar unos momentos' });
+        const dataAsset = await this.assetService.saveGeneratedAssets(emptyAsset);
+        const videoGen = await this.assetService.generateVideoFromAsset(dataAsset.id);
+        this.generatedAsset.set(videoGen);
+        const storageMotion = { ...videoGen.result, metadata: { moodState: this.emotionSelected } };
+        this.storageMotion.set(storageMotion);
+        this.isLoading.set(false);
+        this.audioNotificationService.playFinishNotification();
+    }
+    ngOnInit() {
+        console.log(this.agentCard);
+    }
+    addEmotion(emotion) {
+        if (emotion) {
+            this.videoPrompt = VIDEO_PROMPT_EMOTIONS[emotion];
+        }
+        const motion = this.agentCard.assets?.motions?.find((motion) => motion?.metadata?.moodState === emotion);
+        if (motion) {
+            this.message.set(`Ya existe un motion para esta emocion: "${emotion.toUpperCase()}", si generas otro se sobreescribirá`);
+        }
+        else {
+            this.message.set('');
+        }
+    }
+    changeRatio(option) {
+        this.ratioSelected = option;
+        this.resolutionOptions = Object.entries(option.resolution).map(([key, value]) => ({
+            key: `${key} (${value.w}x${value.h})`,
+            w: value.w,
+            h: value.h,
+        }));
+        this.resolutionSelected = null;
+    }
+    onResolutionChange(resolution) {
+        if (resolution) {
+            this.width = resolution.w;
+            this.height = resolution.h;
+        }
+    }
+    async saveMotion() {
+        const storageMotion = this.storageMotion();
+        console.log(storageMotion);
+        const motionPath = `assets.motions`;
+        const currentMotions = this.agentCard?.assets?.motions || [];
+        const motion = currentMotions.find((motion) => motion?.metadata?.moodState === this.emotionSelected);
+        if (motion) {
+            this.message.set(`Ya existe un motion para esta emocion: "${this.emotionSelected.toUpperCase()}", si generas otro se sobreescribirá`);
+        }
+        else {
+            this.message.set('');
+        }
+        currentMotions.push(storageMotion);
+        const operationUpdate = { 'assets.motions': currentMotions };
+        await this.agentCardService.update(this.agentCard.id, operationUpdate);
+        this.toastService.success({ title: 'Listo', subtitle: 'Se guardo el movimiento' });
+        console.log(this.agentCard.assets.motions, 'agentCard');
+        this.storageMotion.set(null);
+        this.generatedAsset.set(null);
+        this.emotionSelected = null;
+        this.videoPrompt = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCMotionGenerationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ACCMotionGenerationComponent, isStandalone: true, selector: "dc-acc-motion-generation", inputs: { agentCard: "agentCard" }, ngImport: i0, template: "<div class=\"motion-generation-container\">\n  <img class=\"character-image\" [src]=\"agentCard.assets.image.url\" alt=\"Character Image\" />\n\n  <div class=\"form-container\">\n    <p-select\n      [options]=\"MoodStateOptions\"\n      [(ngModel)]=\"emotionSelected\"\n      (ngModelChange)=\"addEmotion($event)\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      placeholder=\"Select an emotion\" />\n    <p-select\n      [options]=\"aspectRatioOptions\"\n      [ngModel]=\"ratioSelected\"\n      (ngModelChange)=\"changeRatio($event)\"\n      optionLabel=\"description\"\n      placeholder=\"Select a ratio\">\n      <ng-template pTemplate=\"selectedItem\" let-selectedOption>\n        @if(selectedOption) {\n        <div class=\"flex items-center gap-2\">\n          <div [innerHTML]=\"selectedOption.icon | safeHtml\"></div>\n          <div>{{ selectedOption.description }}</div>\n        </div>\n        }\n      </ng-template>\n      <ng-template let-ratio pTemplate=\"item\">\n        <div class=\"flex items-center gap-2\">\n          <div [innerHTML]=\"ratio.icon | safeHtml\"></div>\n          <div>{{ ratio.description }}</div>\n        </div>\n      </ng-template>\n    </p-select>\n    @if (ratioSelected) {\n    <p-select\n      [options]=\"resolutionOptions\"\n      [(ngModel)]=\"resolutionSelected\"\n      (ngModelChange)=\"onResolutionChange($event)\"\n      optionLabel=\"key\"\n      placeholder=\"Select a resolution\" />\n    }\n    <textarea rows=\"5\" cols=\"30\" pTextarea [(ngModel)]=\"videoPrompt\"></textarea>\n\n    <div class=\"flex gap-2\">\n      <p-button label=\"Generar\" icon=\"pi pi-video\" [loading]=\"isLoading()\" [disabled]=\"isLoading()\" (onClick)=\"generateVideoWithCharacterImage()\" />\n      <div> {{this.agentCard?.assets?.motions?.length}} Motions </div>\n      @if(storageMotion()) {\n      <p-button label=\"Guardar\" severity=\"success\" icon=\"pi pi-save\" (onClick)=\"saveMotion()\" />\n      }\n    </div>\n\n    @if (message()) {\n    <p-message [severity]=\"'warn'\"> \u2757\uFE0F {{ message() }}</p-message>\n    }\n  </div>\n\n  @if (generatedAsset()) {\n  <video controls autoplay width=\"150\" [src]=\"generatedAsset()?.result?.url\"></video>\n  }\n</div>\n", styles: [".motion-generation-container{display:flex;gap:20px;align-items:flex-start}.character-image{width:150px;flex-shrink:0}.form-container{display:flex;flex-direction:column;gap:10px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCMotionGenerationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-acc-motion-generation', standalone: true, imports: [CommonModule, SelectModule, FormsModule, TextareaModule, ButtonModule, MessageModule, SafeHtmlPipe], template: "<div class=\"motion-generation-container\">\n  <img class=\"character-image\" [src]=\"agentCard.assets.image.url\" alt=\"Character Image\" />\n\n  <div class=\"form-container\">\n    <p-select\n      [options]=\"MoodStateOptions\"\n      [(ngModel)]=\"emotionSelected\"\n      (ngModelChange)=\"addEmotion($event)\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      placeholder=\"Select an emotion\" />\n    <p-select\n      [options]=\"aspectRatioOptions\"\n      [ngModel]=\"ratioSelected\"\n      (ngModelChange)=\"changeRatio($event)\"\n      optionLabel=\"description\"\n      placeholder=\"Select a ratio\">\n      <ng-template pTemplate=\"selectedItem\" let-selectedOption>\n        @if(selectedOption) {\n        <div class=\"flex items-center gap-2\">\n          <div [innerHTML]=\"selectedOption.icon | safeHtml\"></div>\n          <div>{{ selectedOption.description }}</div>\n        </div>\n        }\n      </ng-template>\n      <ng-template let-ratio pTemplate=\"item\">\n        <div class=\"flex items-center gap-2\">\n          <div [innerHTML]=\"ratio.icon | safeHtml\"></div>\n          <div>{{ ratio.description }}</div>\n        </div>\n      </ng-template>\n    </p-select>\n    @if (ratioSelected) {\n    <p-select\n      [options]=\"resolutionOptions\"\n      [(ngModel)]=\"resolutionSelected\"\n      (ngModelChange)=\"onResolutionChange($event)\"\n      optionLabel=\"key\"\n      placeholder=\"Select a resolution\" />\n    }\n    <textarea rows=\"5\" cols=\"30\" pTextarea [(ngModel)]=\"videoPrompt\"></textarea>\n\n    <div class=\"flex gap-2\">\n      <p-button label=\"Generar\" icon=\"pi pi-video\" [loading]=\"isLoading()\" [disabled]=\"isLoading()\" (onClick)=\"generateVideoWithCharacterImage()\" />\n      <div> {{this.agentCard?.assets?.motions?.length}} Motions </div>\n      @if(storageMotion()) {\n      <p-button label=\"Guardar\" severity=\"success\" icon=\"pi pi-save\" (onClick)=\"saveMotion()\" />\n      }\n    </div>\n\n    @if (message()) {\n    <p-message [severity]=\"'warn'\"> \u2757\uFE0F {{ message() }}</p-message>\n    }\n  </div>\n\n  @if (generatedAsset()) {\n  <video controls autoplay width=\"150\" [src]=\"generatedAsset()?.result?.url\"></video>\n  }\n</div>\n", styles: [".motion-generation-container{display:flex;gap:20px;align-items:flex-start}.character-image{width:150px;flex-shrink:0}.form-container{display:flex;flex-direction:column;gap:10px;width:100%}\n"] }]
+        }], propDecorators: { agentCard: [{
+                type: Input
+            }] } });
+
+class ACCTranslationGenerationComponent {
+    constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.toastService = inject(TOAST_ALERTS_TOKEN);
+        this.audioNotificationService = inject(AudioNotificationService);
+        this.cardImprovementsChange = new EventEmitter();
+        this.cardImprovements = signal(null, ...(ngDevMode ? [{ debugName: "cardImprovements" }] : []));
+        this.prompt = signal('', ...(ngDevMode ? [{ debugName: "prompt" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.generationStep = signal('idea', ...(ngDevMode ? [{ debugName: "generationStep" }] : []));
+        this.greetings = signal([], ...(ngDevMode ? [{ debugName: "greetings" }] : []));
+        this.top10Languages = ['en', 'zh', 'es', 'ar', 'fr', 'hi', 'pt', 'ru', 'de', 'ja'];
+    }
+    ngOnInit() {
+        const allGrettings = this.agentCard?.characterCard?.data?.greetings || [];
+        allGrettings.push(this.agentCard?.characterCard?.data.first_mes);
+        this.greetings.set(allGrettings);
+    }
+    getLanguageText(languages = null) {
+        if (languages) {
+            let text = '';
+            for (const lang of languages) {
+                text += `${getLangDesc(lang, 'en')} (${lang}), `;
+            }
+            return text;
+        }
+        return SUPPORTED_LANGUAGES.map((lang) => `${getLangDesc(lang, 'en')} (${lang})`).join(', ');
+    }
+    generatePrompt(languages) {
+        const currentCharacterCard = this.agentCard?.characterCard?.data;
+        if (!currentCharacterCard) {
+            return;
+        }
+        const { hook, mes_example } = currentCharacterCard;
+        const characterData = {
+            greetings: this.greetings(),
+            hook: hook,
+            communication: currentCharacterCard?.persona?.communication || mes_example,
+        };
+        const instructions = `These are message of my character card, Translate the following data while preserving the exact tone, register, and speaking style of the original:
+    * Preserve personality traits: Match the character's way of speaking (friendly, sarcastic, energetic, reserved, etc.)
+    * Use equivalent expressions: Don't translate literally. Find natural equivalents that convey the same feeling and cultural context
+    * Use idioms and colloquialisms: Translate idioms and colloquialisms to their natural equivalents in the target language
+    * Maintain intensity: If something is "esta chido" (cool/awesome), use the equivalent casual enthusiasm in the target language, not formal terms like "excellent" or "satisfactory."
+    * Keep speech patterns: If the character uses short sentences, slang, or specific verbal tics, replicate similar patterns in the target language.
+    `;
+        const prompt_user = `
+${instructions}
+Translate the following character data to the following languages: ${this.getLanguageText(languages)} 
+and return the result in the following JSON structure example:
+ 
+    export interface MultiLanguage {
+      es: CardTranslation;
+      en: CardTranslation;
+      fr: CardTranslation;
+      de: CardTranslation;
+    }
+    
+    export interface CardTranslation {
+      greetings: string[];
+      hook: string;
+      communication: string;
+    }
+    `;
+        const currentCardJson = JSON.stringify(characterData, null, 2);
+        const prompt_for_generation = `
+    My current character card data is:
+${currentCardJson}
+ 
+your Task is:
+${prompt_user}
+    `;
+        this.prompt.set(prompt_for_generation);
+        this.generationStep.set('prompt');
+    }
+    generateTop10Prompt() {
+        this.generatePrompt(this.top10Languages);
+    }
+    generateEnEsPrompt() {
+        this.generatePrompt(['en', 'es']);
+    }
+    async generate() {
+        this.loading.set(true);
+        this.toastService.info({
+            title: 'Generating character card',
+            subtitle: 'This is a hard task, will take a while...',
+        });
+        const conversation = {
+            messages: [{ role: ChatRole.User, content: this.prompt() }],
+            model: { quality: EModelQuality.BALANCED },
+            returnJson: true,
+        };
+        try {
+            const response = await this.agentCardService.callChatCompletion(conversation);
+            let improvements;
+            if (typeof response.content === 'string') {
+                improvements = JSON.parse(response.content);
+            }
+            else {
+                improvements = response.content;
+            }
+            this.cardImprovements.set(improvements);
+            this.cardImprovementsChange.emit(improvements);
+            this.generationStep.set('result');
+            this.audioNotificationService.playFinishNotification();
+        }
+        catch (error) {
+            console.error('Error generating character card:', error);
+            this.toastService.error({
+                title: 'Error generating character card',
+                subtitle: 'Something went wrong',
+            });
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    objectKeys(obj) {
+        return Object.keys(obj);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCTranslationGenerationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ACCTranslationGenerationComponent, isStandalone: true, selector: "dc-acc-translation-generation", inputs: { agentCard: "agentCard" }, outputs: { cardImprovementsChange: "cardImprovementsChange" }, ngImport: i0, template: "<div>\n  @switch (generationStep()) { @case ('idea') {\n\n  <p-message severity=\"warn\">Antes de Traducir asegurate que los campos de Greetings, Notes y Message Example esten completados</p-message>\n\n  <!-- Todos los Inicios de conversaci\u00F3n -->\n  <h5 pTooltip=\"Todos los inicios de conversaci\u00F3n\" tooltipPosition=\"left\"> Inicios de conversaci\u00F3n </h5>\n\n  @for (greeting of greetings(); track $index) {\n  <li> {{ greeting }} </li>\n  }\n\n  <!-- Ejemplo de mensaje -->\n  <h5 pTooltip=\"Ejemplo de mensaje\" tooltipPosition=\"left\"> Ejemplo de mensaje </h5>\n  <p> {{ agentCard.characterCard.data.mes_example }} </p>\n\n  <!-- Notas del creador -->\n  <h5 pTooltip=\"Texto corto para incitar a la interacci\u00F3n\" tooltipPosition=\"left\"> Gancho para Interacci\u00F3n </h5>\n  @if (agentCard.characterCard.data.hook) {\n  <p> {{ agentCard.characterCard.data.hook }} </p>\n  } @else {\n  <p-message severity=\"error\">No hay gancho para interacci\u00F3n </p-message>\n  }\n\n  <div class=\"flex justify-end gap-2\">\n    <p-button label=\"Translate to 10 most important lang\" (click)=\"generateTop10Prompt()\"></p-button>\n    <p-button label=\"Translate to English and Spanish\" (click)=\"generateEnEsPrompt()\"></p-button>\n    <p-button label=\"Translate to all languages\" (click)=\"generatePrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Generated Character Translations:</h3>\n    @if (cardImprovements(); as card) {\n    <div>\n      @for (lang of objectKeys(card); track lang) {\n      <div class=\"mb-3\">\n        <h4>{{ lang }}</h4>\n        <div class=\"grid\">\n          <div class=\"col-12\">\n            <strong>Greetings:</strong>\n            <ul>\n              @for (greeting of card[lang].greetings; track $index) {\n              <li>{{ greeting }}</li>\n              }\n            </ul>\n          </div>\n          <div class=\"col-12\">\n            <strong>Hook:</strong>\n            <p>{{ card[lang]?.hook }}</p>\n          </div>\n          <div class=\"col-12\">\n            <strong>Communication:</strong>\n            <p>{{ card[lang]?.communication }}</p>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n  } }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ACCTranslationGenerationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-acc-translation-generation', standalone: true, imports: [CommonModule, ButtonModule, FormsModule, AccordionModule, TooltipModule, MessageModule], template: "<div>\n  @switch (generationStep()) { @case ('idea') {\n\n  <p-message severity=\"warn\">Antes de Traducir asegurate que los campos de Greetings, Notes y Message Example esten completados</p-message>\n\n  <!-- Todos los Inicios de conversaci\u00F3n -->\n  <h5 pTooltip=\"Todos los inicios de conversaci\u00F3n\" tooltipPosition=\"left\"> Inicios de conversaci\u00F3n </h5>\n\n  @for (greeting of greetings(); track $index) {\n  <li> {{ greeting }} </li>\n  }\n\n  <!-- Ejemplo de mensaje -->\n  <h5 pTooltip=\"Ejemplo de mensaje\" tooltipPosition=\"left\"> Ejemplo de mensaje </h5>\n  <p> {{ agentCard.characterCard.data.mes_example }} </p>\n\n  <!-- Notas del creador -->\n  <h5 pTooltip=\"Texto corto para incitar a la interacci\u00F3n\" tooltipPosition=\"left\"> Gancho para Interacci\u00F3n </h5>\n  @if (agentCard.characterCard.data.hook) {\n  <p> {{ agentCard.characterCard.data.hook }} </p>\n  } @else {\n  <p-message severity=\"error\">No hay gancho para interacci\u00F3n </p-message>\n  }\n\n  <div class=\"flex justify-end gap-2\">\n    <p-button label=\"Translate to 10 most important lang\" (click)=\"generateTop10Prompt()\"></p-button>\n    <p-button label=\"Translate to English and Spanish\" (click)=\"generateEnEsPrompt()\"></p-button>\n    <p-button label=\"Translate to all languages\" (click)=\"generatePrompt()\"></p-button>\n  </div>\n  } @case ('prompt') {\n  <div>\n    <h3>Final Prompt:</h3>\n    <pre class=\"surface-100 p-2 border-round-sm\">{{ prompt() }}</pre>\n  </div>\n  <div class=\"flex justify-end\">\n    <p-button label=\"Generate\" (click)=\"generate()\" [loading]=\"loading()\"></p-button>\n  </div>\n  } @case ('result') {\n  <div>\n    <h3>Generated Character Translations:</h3>\n    @if (cardImprovements(); as card) {\n    <div>\n      @for (lang of objectKeys(card); track lang) {\n      <div class=\"mb-3\">\n        <h4>{{ lang }}</h4>\n        <div class=\"grid\">\n          <div class=\"col-12\">\n            <strong>Greetings:</strong>\n            <ul>\n              @for (greeting of card[lang].greetings; track $index) {\n              <li>{{ greeting }}</li>\n              }\n            </ul>\n          </div>\n          <div class=\"col-12\">\n            <strong>Hook:</strong>\n            <p>{{ card[lang]?.hook }}</p>\n          </div>\n          <div class=\"col-12\">\n            <strong>Communication:</strong>\n            <p>{{ card[lang]?.communication }}</p>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n  } }\n</div>\n" }]
+        }], propDecorators: { agentCard: [{
+                type: Input
+            }], cardImprovementsChange: [{
+                type: Output
+            }] } });
+
+class GenerateCharacterDialogComponent {
+    constructor() {
+        this.ref = inject(DynamicDialogRef);
+        this.config = inject(DynamicDialogConfig);
+        this.cardImprovements = {};
+        if (this.config.data?.agentCard) {
+            this.agentCard = this.config.data.agentCard;
+        }
+    }
+    onCardImprovementsChange(improvements) {
+        this.cardImprovements = improvements;
+    }
+    onTranslationImprovementsChange(translations) {
+        console.log(translations);
+        this.cardImprovements.langTranslation = translations;
+    }
+    accept() {
+        this.ref.close(this.cardImprovements);
+    }
+    close(result) {
+        this.ref.close(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GenerateCharacterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: GenerateCharacterDialogComponent, isStandalone: true, selector: "dc-generate-character-dialog", ngImport: i0, template: "<p-divider align=\"center\" type=\"dotted\"><b>Informaci\u00F3n del personaje</b></p-divider>\n<dc-acc-data-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onCardImprovementsChange($event)\"></dc-acc-data-generation>\n@if(cardImprovements.persona){\n<p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n}\n<p-divider align=\"center\" type=\"dotted\"><b>Movimientos</b></p-divider>\n<dc-acc-motion-generation [agentCard]=\"agentCard\"></dc-acc-motion-generation>\n<p-divider align=\"center\" type=\"dotted\"><b>Traducciones</b></p-divider>\n<dc-acc-translation-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onTranslationImprovementsChange($event)\"></dc-acc-translation-generation>\n@if(cardImprovements.langTranslation){\n<p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n}\n<p-divider align=\"center\" type=\"dotted\"><b>__</b></p-divider>\n\n<!-- <div class=\"flex justify-end\">\n  <p-button label=\"Cancel\" styleClass=\"p-button-text\" (click)=\"close(false)\"></p-button>\n  <p-button label=\"Accept\" (click)=\"accept()\"></p-button>\n</div> -->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ACCDataGenerationComponent, selector: "dc-acc-data-generation", inputs: ["agentCard"], outputs: ["cardImprovementsChange"] }, { kind: "component", type: ACCMotionGenerationComponent, selector: "dc-acc-motion-generation", inputs: ["agentCard"] }, { kind: "component", type: ACCTranslationGenerationComponent, selector: "dc-acc-translation-generation", inputs: ["agentCard"], outputs: ["cardImprovementsChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$1.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GenerateCharacterDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-generate-character-dialog', standalone: true, imports: [
+                        CommonModule,
+                        ButtonModule,
+                        FormsModule,
+                        ACCDataGenerationComponent,
+                        ACCMotionGenerationComponent,
+                        ACCTranslationGenerationComponent,
+                        DividerModule,
+                    ], template: "<p-divider align=\"center\" type=\"dotted\"><b>Informaci\u00F3n del personaje</b></p-divider>\n<dc-acc-data-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onCardImprovementsChange($event)\"></dc-acc-data-generation>\n@if(cardImprovements.persona){\n<p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n}\n<p-divider align=\"center\" type=\"dotted\"><b>Movimientos</b></p-divider>\n<dc-acc-motion-generation [agentCard]=\"agentCard\"></dc-acc-motion-generation>\n<p-divider align=\"center\" type=\"dotted\"><b>Traducciones</b></p-divider>\n<dc-acc-translation-generation [agentCard]=\"agentCard\" (cardImprovementsChange)=\"onTranslationImprovementsChange($event)\"></dc-acc-translation-generation>\n@if(cardImprovements.langTranslation){\n<p-button class=\"w-full\" label=\"Guardar Datos\" (click)=\"accept()\"></p-button>\n}\n<p-divider align=\"center\" type=\"dotted\"><b>__</b></p-divider>\n\n<!-- <div class=\"flex justify-end\">\n  <p-button label=\"Cancel\" styleClass=\"p-button-text\" (click)=\"close(false)\"></p-button>\n  <p-button label=\"Accept\" (click)=\"accept()\"></p-button>\n</div> -->\n" }]
+        }], ctorParameters: () => [] });
+
 class AccountPlatformForm {
     constructor() {
         this.route = inject(ActivatedRoute);
@@ -4281,7 +4885,7 @@ class AccountPlatformForm {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AccountPlatformForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-select>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-select>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AccountPlatformForm, decorators: [{
             type: Component,
@@ -4290,7 +4894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 type: Input
             }] } });
 
-class FormGroupService {
+class CharacterFormGroupService {
     constructor() {
         this.fb = inject(FormBuilder);
         this.formUtils = inject(FormUtilsService);
@@ -4326,15 +4930,53 @@ class FormGroupService {
         const dynamicConditionsFormArray = form.get('conversationFlow.dynamicConditions');
         dynamicConditionsFormArray.clear(); // Clear any existing default items
     }
-    handleArrayForms(form, agentCard) {
-        // If not possible to patch arrays if control does not exist, that why they are created dinamycally depending on the data.
-        const alternateGreetingsFormArray = form.get('characterCard.data.alternate_greetings');
+    clearTranslationForm(form) {
+        const langTranslationForm = form.get('characterCard.data.langTranslation');
+        if (langTranslationForm) {
+            Object.keys(langTranslationForm.controls).forEach((lang) => {
+                langTranslationForm.removeControl(lang);
+            });
+        }
+    }
+    handleTranslationForm(form, agentCard) {
+        const langTranslation = agentCard.characterCard?.data?.langTranslation;
+        if (langTranslation) {
+            this.clearTranslationForm(form);
+            Object.keys(langTranslation).forEach((lang) => {
+                const langTranslationForm = form.get('characterCard.data.langTranslation');
+                const data = langTranslation[lang];
+                const translationControl = this.createCardTranslationFormGroup();
+                if (data?.greetings?.length) {
+                    // Add the translations if exits for the greetings.
+                    const greetingsFormArray = translationControl.get('greetings');
+                    data.greetings.forEach((greeting) => {
+                        greetingsFormArray.push(this.fb.control(greeting));
+                    });
+                }
+                langTranslationForm.addControl(lang, translationControl);
+                langTranslationForm.get(lang).patchValue(data);
+            });
+        }
+    }
+    createAndPatchCharacterArrayForm(form, agentCard) {
+        const alternateGreetingsFormArray = form.get('characterCard.data.greetings');
         alternateGreetingsFormArray.clear();
-        if (agentCard.characterCard?.data?.alternate_greetings?.length) {
-            agentCard.characterCard.data.alternate_greetings.forEach((greeting) => {
+        if (agentCard.characterCard?.data?.greetings?.length) {
+            agentCard.characterCard.data.greetings.forEach((greeting) => {
                 alternateGreetingsFormArray.push(this.fb.control(greeting));
             });
         }
+        const cardTagsFormArray = form.get('characterCard.data.tags');
+        cardTagsFormArray.clear();
+        if (agentCard.characterCard?.data?.tags?.length) {
+            agentCard.characterCard.data.tags.forEach((tag) => {
+                cardTagsFormArray.push(this.fb.control(tag));
+            });
+        }
+    }
+    handleArrayForms(form, agentCard) {
+        // If not possible to patch arrays if control does not exist, that why they are created dinamycally depending on the data.
+        this.createAndPatchCharacterArrayForm(form, agentCard);
         if (agentCard.conversationFlow?.dynamicConditions?.length) {
             const dynamicConditionsFormArray = form.get('conversationFlow.dynamicConditions');
             agentCard.conversationFlow.dynamicConditions.forEach((condition) => {
@@ -4363,7 +5005,7 @@ class FormGroupService {
             });
         }
     }
-    createCharacterCardFormGroup() {
+    createCharacterCardFormGroup(characterCard) {
         return this.fb.group({
             data: this.fb.group({
                 name: [''],
@@ -4372,14 +5014,45 @@ class FormGroupService {
                 first_mes: [''],
                 creator_notes: [''],
                 mes_example: [''],
-                alternate_greetings: this.fb.array([]),
+                greetings: this.fb.array([]),
                 tags: this.fb.array([]),
-                picture_description: [''],
                 system_prompt: [''],
                 post_history_instructions: [''],
+                gender: [''],
+                hook: [''],
+                langTranslation: this.createMultiLanguageFormGroup(),
+                persona: this.createPersonaFormGroup(),
             }),
         });
     }
+    createPersonaFormGroup() {
+        return this.fb.group({
+            identity: [''], // 1) Name, Age, Gender, Species, Sexuality, Role
+            physical: [''], // 2) Appearance, physique, height, build, hair, eyes, skin tone, distinctive marks, clothing, currentOutfit styles and colors.
+            personality: [''], // 3) personality description surface traits, Temperament, Values, Beliefs, Observable traits
+            communication: [''], // 4) (How They Express) Speech Pattern, Style Common Phrases, Language Habits
+            psychology: [''], // 5) Motivations, Desires, Goals, Traumas, Conflicts, Weaknesses
+            background: [''], // 6) Background, History, origin, formative, secrets.
+            capabilities: [''], // 7) skills, knowledge, abilities, expertise, limitations, Tools, Strengths
+            social: [''], // 8) Relationships, reputation, allies, enemies, social role.
+            preferences: [''], // 9) likes, dislikes, hobbies, interests, hates
+            situation: [''], // 10) Current context for the character, immediate goal or challenge and constraints.
+        });
+    }
+    createMultiLanguageFormGroup() {
+        const group = this.fb.group({});
+        // SUPPORTED_LANGUAGES.forEach((lang) => {
+        //   group.addControl(lang, this.createCardTranslationFormGroup());
+        // });
+        return group;
+    }
+    createCardTranslationFormGroup() {
+        return this.fb.group({
+            greetings: this.fb.array([]),
+            hook: [''],
+            communication: [''],
+        });
+    }
     createConversationSettingFormGroup() {
         return this.fb.group({
             textEngine: [TextEngines.SimpleText],
@@ -4421,7 +5094,14 @@ class FormGroupService {
             challenges: this.fb.array([]),
             tools: this.fb.array([]),
             dynamicConditions: this.fb.array([]),
-            moodStateEnabled: [false],
+            moodState: this.createMoodStateFormGroup(),
+        });
+    }
+    createMoodStateFormGroup() {
+        return this.fb.group({
+            enabled: [false],
+            useAssetStatesOnly: [false],
+            detectableStates: this.fb.array([]),
         });
     }
     createDynamicConditionFormGroup(condition) {
@@ -4518,10 +5198,10 @@ class FormGroupService {
     getItemFromFormArray(formArray, index) {
         return formArray.at(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FormGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FormGroupService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CharacterFormGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CharacterFormGroupService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FormGroupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CharacterFormGroupService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4543,12 +5223,12 @@ function createAgentTaskFormGroup(task) {
 }
 class AgentTaskFormComponent {
     constructor() {
-        this.formGroupService = inject(FormGroupService);
-        this.formGroup = this.formGroupService.createSimpleAgentTaskFormGroup();
+        this.characterFormGroupService = inject(CharacterFormGroupService);
+        this.formGroup = this.characterFormGroupService.createSimpleAgentTaskFormGroup();
         this.shortForm = false; // is short means AITask else SimpleAgentTask AiTaks is shorter
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AgentTaskFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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    <div> <p-checkbox id=\"enabled\" [formControl]=\"formGroup.controls.enabled\" binary=\"true\" class=\"w-full\" /> Activada </div>\n\n    <label for=\"task\" class=\"block text-sm font-medium text-gray-700\">Descripci\u00F3n de la evaluaci\u00F3n para el objetivo</label>\n\n    <textarea pTextarea [autoResize]=\"true\" class=\"w-full\" [formControl]=\"formGroup.controls?.task\"></textarea>\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: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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    <div> <p-checkbox id=\"enabled\" [formControl]=\"formGroup.controls.enabled\" binary=\"true\" class=\"w-full\" /> Activada </div>\n\n    <label for=\"task\" class=\"block text-sm font-medium text-gray-700\">Descripci\u00F3n de la evaluaci\u00F3n para el objetivo</label>\n\n    <textarea pTextarea [autoResize]=\"true\" class=\"w-full\" [formControl]=\"formGroup.controls?.task\"></textarea>\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: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AgentTaskFormComponent, decorators: [{
             type: Component,
@@ -4570,7 +5250,7 @@ class DcDoActionFormComponent {
         this.removeItem.emit({ conditionIndex: this.conditionIndex, doItemIndex: this.doItemIndex });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDoActionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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-5 mb-4 border border-gray-200\">\n  <div class=\"flex justify-between items-center\">\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=\"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    @switch (formGroup.get('actionType')?.value) { @case (EDoActionType.ChangePrompt) {\n    <!-- System Prompt Type -->\n    <div class=\"flex flex-col\">\n      <label [for]=\"'systemPromptType_' + conditionIndex + '_' + doItemIndex\" class=\"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=\"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    } @case (EDoActionType.ChangeDynamicFlowTask) {\n    <!-- Dynamic Flow Task Type -->\n    <div class=\"flex flex-col\">\n      <label [for]=\"'dynamicFlowTaskType_' + conditionIndex + '_' + doItemIndex\" class=\"mb-1 text-sm font-medium text-gray-600\">Dynamic Flow Task Type</label>\n      <p-select\n        [options]=\"dynamicFlowTaskTypeOptions\"\n        formControlName=\"dynamicFlowTaskType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Dynamic Flow Task Type'\"\n        [id]=\"'dynamicFlowTaskType_' + 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=\"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\n    <!-- Enabled -->\n    <div class=\"flex items-center\">\n      <p-checkbox [formControlName]=\"'enabled'\" [binary]=\"true\" [inputId]=\"'enabled_' + conditionIndex + '_' + doItemIndex\"></p-checkbox>\n      <label [for]=\"'enabled_' + conditionIndex + '_' + doItemIndex\" class=\"ml-2 text-sm font-medium text-gray-700\">Enabled</label>\n    </div>\n    } }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 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: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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-5 mb-4 border border-gray-200\">\n  <div class=\"flex justify-between items-center\">\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=\"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    @switch (formGroup.get('actionType')?.value) { @case (EDoActionType.ChangePrompt) {\n    <!-- System Prompt Type -->\n    <div class=\"flex flex-col\">\n      <label [for]=\"'systemPromptType_' + conditionIndex + '_' + doItemIndex\" class=\"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=\"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    } @case (EDoActionType.ChangeDynamicFlowTask) {\n    <!-- Dynamic Flow Task Type -->\n    <div class=\"flex flex-col\">\n      <label [for]=\"'dynamicFlowTaskType_' + conditionIndex + '_' + doItemIndex\" class=\"mb-1 text-sm font-medium text-gray-600\">Dynamic Flow Task Type</label>\n      <p-select\n        [options]=\"dynamicFlowTaskTypeOptions\"\n        formControlName=\"dynamicFlowTaskType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Dynamic Flow Task Type'\"\n        [id]=\"'dynamicFlowTaskType_' + 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=\"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\n    <!-- Enabled -->\n    <div class=\"flex items-center\">\n      <p-checkbox [formControlName]=\"'enabled'\" [binary]=\"true\" [inputId]=\"'enabled_' + conditionIndex + '_' + doItemIndex\"></p-checkbox>\n      <label [for]=\"'enabled_' + conditionIndex + '_' + doItemIndex\" class=\"ml-2 text-sm font-medium text-gray-700\">Enabled</label>\n    </div>\n    } }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 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: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDoActionFormComponent, decorators: [{
             type: Component,
@@ -4593,34 +5273,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class DcDynamicConditionsFormComponent {
     constructor() {
-        this.formGroupService = inject(FormGroupService);
+        this.characterFormGroupService = inject(CharacterFormGroupService);
     }
     addDynamicCondition() {
-        this.formGroupService.addItemToFormArray(this.dynamicConditionsArray, () => this.formGroupService.createDynamicConditionFormGroup());
+        this.characterFormGroupService.addItemToFormArray(this.dynamicConditionsArray, () => this.characterFormGroupService.createDynamicConditionFormGroup());
     }
     removeDynamicCondition(index) {
-        this.formGroupService.removeItemFromFormArray(this.dynamicConditionsArray, index);
+        this.characterFormGroupService.removeItemFromFormArray(this.dynamicConditionsArray, index);
     }
     getDoArray(conditionIndex) {
         const conditionPath = `${this.dynamicConditionsPath}.${conditionIndex}.do`;
-        return this.formGroupService.getItemFromFormArray(this.dynamicConditionsArray, conditionIndex);
+        return this.characterFormGroupService.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);
+        return this.characterFormGroupService.getItemFromFormArray(this.dynamicConditionsArray, doItemIndex);
     }
     addDoControl(doArray) {
-        doArray.push(this.formGroupService.createDoActionFormGroup());
+        doArray.push(this.characterFormGroupService.createDoActionFormGroup());
         // conditionControl.controls.do;
         // this.dynamicConditio
-        // this.formGroupService.addItemToFormArray(conditionIndex, () => this.formGroupService.createDoActionFormGroup());
+        // this.characterFormGroupService.addItemToFormArray(conditionIndex, () => this.characterFormGroupService.createDoActionFormGroup());
     }
     removeDoItem(conditionIndex, doItemIndex) {
         // this.dynamicConditionsArray
-        this.formGroupService.removeItemFromFormArray(this.dynamicConditionsArray, doItemIndex);
+        this.characterFormGroupService.removeItemFromFormArray(this.dynamicConditionsArray, doItemIndex);
     }
     // Helper to safely cast to FormControl for the template
     getFormControl(control) {
@@ -4631,7 +5311,7 @@ class DcDynamicConditionsFormComponent {
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDynamicConditionsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcDynamicConditionsFormComponent, isStandalone: true, selector: "dc-dynamic-conditions-form", inputs: { dynamicConditionsArray: "dynamicConditionsArray", dynamicConditionsPath: "dynamicConditionsPath", entityWhatOptions: "entityWhatOptions", entityWhenOptions: "entityWhenOptions", systemPromptTypeOptions: "systemPromptTypeOptions" }, ngImport: i0, template: "<div class=\"group\">\n  <h4>Dynamic Conditions <span pTooltip=\"Conditions that trigger tasks based on conversation state\">\u2139\uFE0F</span></h4>\n  @for (conditionControl of dynamicConditionsArray.controls; track conditionControl; let i = $index) {\n  <div class=\"group nested-group dynamic-condition-item\">\n    <div class=\"flex justify-between items-center mb-4\">\n      <h5>Condition {{ i + 1 }}</h5>\n      <button\n        pTooltip=\"Remove Condition\"\n        variant=\"outlined\"\n        [raised]=\"true\"\n        pButton\n        severity=\"danger\"\n        icon=\"pi pi-trash\"\n        (click)=\"removeDynamicCondition(i)\"></button>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhat' + i\">What <span pTooltip=\"Identifier for this condition (optional)\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhat' + i\"\n        [options]=\"entityWhatOptions\"\n        [formControl]=\"conditionControl.controls.what\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select What'\"></p-select>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhen' + i\">When <span pTooltip=\"Field or variable to check\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhen' + i\"\n        [options]=\"entityWhenOptions\"\n        [formControl]=\"conditionControl.controls.when\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select When'\"></p-select>\n    </div>\n    <div class=\"form-field\">\n      <label [for]=\"'conditionValue' + i\">Value <span pTooltip=\"Value to compare against\">\u2139\uFE0F</span></label>\n      <input pInputText [id]=\"'conditionValue' + i\" type=\"text\" [formControl]=\"conditionControl.controls.value\" />\n    </div>\n\n    <div class=\"group very-nested-group\">\n      <h6>DO THIS <span pTooltip=\"Tasks to execute if this condition is met\">\u2139\uFE0F</span></h6>\n      @for (doControl of conditionControl.controls.do.controls; track doControl; let j = $index) {\n      <dc-do-action-form\n        [formGroup]=\"doControl\"\n        [conditionIndex]=\"i\"\n        [doItemIndex]=\"j\"\n        [systemPromptTypeOptions]=\"systemPromptTypeOptions\"\n        (removeItem)=\"removeDoItem(i, j)\">\n      </dc-do-action-form>\n      }\n      <button\n        pButton\n        type=\"button\"\n        label=\"Add 'Do' Task\"\n        icon=\"pi pi-plus\"\n        (click)=\"addDoControl(conditionControl.controls.do)\"\n        class=\"p-button-outlined p-button-sm\"\n        style=\"margin-top: 10px\"></button>\n    </div>\n  </div>\n  }\n  <button pButton type=\"button\" severity=\"info\" label=\"Add Dynamic Condition\" (click)=\"addDynamicCondition()\"></button>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DcDoActionFormComponent, selector: "dc-do-action-form", inputs: ["formGroup", "conditionIndex", "doItemIndex", "systemPromptTypeOptions"], outputs: ["removeItem"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcDynamicConditionsFormComponent, isStandalone: true, selector: "dc-dynamic-conditions-form", inputs: { dynamicConditionsArray: "dynamicConditionsArray", dynamicConditionsPath: "dynamicConditionsPath", entityWhatOptions: "entityWhatOptions", entityWhenOptions: "entityWhenOptions", systemPromptTypeOptions: "systemPromptTypeOptions" }, ngImport: i0, template: "<div class=\"group\">\n  <h4>Dynamic Conditions <span pTooltip=\"Conditions that trigger tasks based on conversation state\">\u2139\uFE0F</span></h4>\n  @for (conditionControl of dynamicConditionsArray.controls; track conditionControl; let i = $index) {\n  <div class=\"group nested-group dynamic-condition-item\">\n    <div class=\"flex justify-between items-center mb-4\">\n      <h5>Condition {{ i + 1 }}</h5>\n      <button\n        pTooltip=\"Remove Condition\"\n        variant=\"outlined\"\n        [raised]=\"true\"\n        pButton\n        severity=\"danger\"\n        icon=\"pi pi-trash\"\n        (click)=\"removeDynamicCondition(i)\"></button>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhat' + i\">What <span pTooltip=\"Identifier for this condition (optional)\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhat' + i\"\n        [options]=\"entityWhatOptions\"\n        [formControl]=\"conditionControl.controls.what\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select What'\"></p-select>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhen' + i\">When <span pTooltip=\"Field or variable to check\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhen' + i\"\n        [options]=\"entityWhenOptions\"\n        [formControl]=\"conditionControl.controls.when\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select When'\"></p-select>\n    </div>\n    <div class=\"form-field\">\n      <label [for]=\"'conditionValue' + i\">Value <span pTooltip=\"Value to compare against\">\u2139\uFE0F</span></label>\n      <input pInputText [id]=\"'conditionValue' + i\" type=\"text\" [formControl]=\"conditionControl.controls.value\" />\n    </div>\n\n    <div class=\"group very-nested-group\">\n      <h6>DO THIS <span pTooltip=\"Tasks to execute if this condition is met\">\u2139\uFE0F</span></h6>\n      @for (doControl of conditionControl.controls.do.controls; track doControl; let j = $index) {\n      <dc-do-action-form\n        [formGroup]=\"doControl\"\n        [conditionIndex]=\"i\"\n        [doItemIndex]=\"j\"\n        [systemPromptTypeOptions]=\"systemPromptTypeOptions\"\n        (removeItem)=\"removeDoItem(i, j)\">\n      </dc-do-action-form>\n      }\n      <button\n        pButton\n        type=\"button\"\n        label=\"Add 'Do' Task\"\n        icon=\"pi pi-plus\"\n        (click)=\"addDoControl(conditionControl.controls.do)\"\n        class=\"p-button-outlined p-button-sm\"\n        style=\"margin-top: 10px\"></button>\n    </div>\n  </div>\n  }\n  <button pButton type=\"button\" severity=\"info\" label=\"Add Dynamic Condition\" (click)=\"addDynamicCondition()\"></button>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "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$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DcDoActionFormComponent, selector: "dc-do-action-form", inputs: ["formGroup", "conditionIndex", "doItemIndex", "systemPromptTypeOptions"], outputs: ["removeItem"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDynamicConditionsFormComponent, decorators: [{
             type: Component,
@@ -4655,7 +5335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class DcDynamicCriteriaFormComponent {
     constructor() {
-        this.formGroupService = inject(FormGroupService);
+        this.characterFormGroupService = inject(CharacterFormGroupService);
         this.mode = 'free-text';
         this.availableItems = [];
         this.displayDialog = false;
@@ -4670,7 +5350,7 @@ class DcDynamicCriteriaFormComponent {
     }
     addItem(item) {
         // In 'select' mode, an item is passed. In 'free-text', it's a new empty group.
-        const newItem = this.formGroupService.createDynamicCriteriaFormGroup(item);
+        const newItem = this.characterFormGroupService.createDynamicCriteriaFormGroup(item);
         this.formArray.push(newItem);
         this.displayDialog = false; // Close dialog if it was open
     }
@@ -4689,7 +5369,7 @@ class DcDynamicCriteriaFormComponent {
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDynamicCriteriaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcDynamicCriteriaFormComponent, isStandalone: true, selector: "dc-dynamic-criteria-form", inputs: { formArray: "formArray", title: "title", mode: "mode", availableItems: "availableItems" }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"flex justify-content-between align-items-center mb-4\">\n    <h4 class=\"m-0 text-xl font-semibold\">{{ title }}</h4>\n    <button pButton type=\"button\" (click)=\"openDialog()\" [label]=\"'Add ' + title\" class=\"p-button-sm\"></button>\n  </div>\n\n  @for (item of formArray.controls; track $index) {\n  <div [formGroup]=\"getItemFormGroup($index)\" class=\"border-1 surface-border border-round p-4 mb-3\">\n    <div class=\"grid formgrid\">\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"name-{{ $index }}\" class=\"block mb-2\">Name</label>\n        <input id=\"name-{{ $index }}\" type=\"text\" pInputText formControlName=\"name\" class=\"w-full\" />\n      </div>\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"emoji-{{ $index }}\" class=\"block mb-2\">Emoji</label>\n        <input id=\"emoji-{{ $index }}\" type=\"text\" pInputText formControlName=\"emoji\" class=\"w-full\" />\n      </div>\n\n      <div class=\"col-12\">\n        <label for=\"description-{{ $index }}\" class=\"block mb-2\">Description</label>\n        <input id=\"description-{{ $index }}\" type=\"text\" pInputText formControlName=\"description\" class=\"w-full\" />\n      </div>\n    </div>\n\n    <div class=\"col-12 flex justify-content-between items-center mt-2\">\n      <div class=\"field-checkbox flex items-center\">\n        <p-checkbox formControlName=\"enabled\" [binary]=\"true\" inputId=\"enabled-{{ $index }}\"></p-checkbox>\n        <label for=\"enabled-{{ $index }}\" class=\"ml-2\">Enabled</label>\n      </div>\n      <button pButton type=\"button\" icon=\"pi pi-trash\" (click)=\"removeItem($index)\" class=\"p-button-danger p-button-sm\"></button>\n    </div>\n  </div>\n  }\n\n  <p-dialog [header]=\"'Select ' + title\" [(visible)]=\"displayDialog\" [modal]=\"true\" [style]=\"{ width: '50vw' }\">\n    <div class=\"flex flex-col gap-3\">\n      @for (item of availableItems; track $index) {\n      <div class=\"flex justify-content-between align-items-center py-2 border-bottom-1 surface-border\">\n        <div>\n          <span class=\"font-semibold\">{{ item.emoji }} {{ item.name }}:</span>\n          {{ item.description }}\n        </div>\n        <button pButton type=\"button\" label=\"Add\" (click)=\"addItem(item)\" class=\"p-button-sm\"></button>\n      </div>\n      }\n    </div>\n  </p-dialog>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcDynamicCriteriaFormComponent, isStandalone: true, selector: "dc-dynamic-criteria-form", inputs: { formArray: "formArray", title: "title", mode: "mode", availableItems: "availableItems" }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"flex justify-content-between align-items-center mb-4\">\n    <h4 class=\"m-0 text-xl font-semibold\">{{ title }}</h4>\n    <button pButton type=\"button\" (click)=\"openDialog()\" [label]=\"'Add ' + title\" class=\"p-button-sm\"></button>\n  </div>\n\n  @for (item of formArray.controls; track $index) {\n  <div [formGroup]=\"getItemFormGroup($index)\" class=\"border-1 surface-border border-round p-4 mb-3\">\n    <div class=\"grid formgrid\">\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"name-{{ $index }}\" class=\"block mb-2\">Name</label>\n        <input id=\"name-{{ $index }}\" type=\"text\" pInputText formControlName=\"name\" class=\"w-full\" />\n      </div>\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"emoji-{{ $index }}\" class=\"block mb-2\">Emoji</label>\n        <input id=\"emoji-{{ $index }}\" type=\"text\" pInputText formControlName=\"emoji\" class=\"w-full\" />\n      </div>\n\n      <div class=\"col-12\">\n        <label for=\"description-{{ $index }}\" class=\"block mb-2\">Description</label>\n        <input id=\"description-{{ $index }}\" type=\"text\" pInputText formControlName=\"description\" class=\"w-full\" />\n      </div>\n    </div>\n\n    <div class=\"col-12 flex justify-content-between items-center mt-2\">\n      <div class=\"field-checkbox flex items-center\">\n        <p-checkbox formControlName=\"enabled\" [binary]=\"true\" inputId=\"enabled-{{ $index }}\"></p-checkbox>\n        <label for=\"enabled-{{ $index }}\" class=\"ml-2\">Enabled</label>\n      </div>\n      <button pButton type=\"button\" icon=\"pi pi-trash\" (click)=\"removeItem($index)\" class=\"p-button-danger p-button-sm\"></button>\n    </div>\n  </div>\n  }\n\n  <p-dialog [header]=\"'Select ' + title\" [(visible)]=\"displayDialog\" [modal]=\"true\" [style]=\"{ width: '50vw' }\">\n    <div class=\"flex flex-col gap-3\">\n      @for (item of availableItems; track $index) {\n      <div class=\"flex justify-content-between align-items-center py-2 border-bottom-1 surface-border\">\n        <div>\n          <span class=\"font-semibold\">{{ item.emoji }} {{ item.name }}:</span>\n          {{ item.description }}\n        </div>\n        <button pButton type=\"button\" label=\"Add\" (click)=\"addItem(item)\" class=\"p-button-sm\"></button>\n      </div>\n      }\n    </div>\n  </p-dialog>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 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$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDynamicCriteriaFormComponent, decorators: [{
             type: Component,
@@ -4729,7 +5409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 class DCConversationFlowFormComponent {
     constructor() {
         // Services
-        this.formGroupService = inject(FormGroupService);
+        this.characterFormGroupService = inject(CharacterFormGroupService);
         // Options vars
         this.entityWhatOptions = EntityWhatOptions;
         this.entityWhenOptions = EntityWhenOptions;
@@ -4746,7 +5426,7 @@ class DCConversationFlowFormComponent {
             },
         ];
         // FORM GROUP
-        this.formGroup = this.formGroupService.createConversationFlowFormGroup();
+        this.formGroup = this.characterFormGroupService.createConversationFlowFormGroup();
         this.conversationEvents = ConversationEvents;
         this.objectKeys = Object.keys;
         this.doActionTypeOptions = Object.values(EDoActionType).map((value) => ({ label: value, value }));
@@ -4758,13 +5438,13 @@ class DCConversationFlowFormComponent {
         }
     }
     removeArrayItem(controlPath, index) {
-        this.formGroupService.removeArrayItem(this.formGroup, controlPath, index);
+        this.characterFormGroupService.removeArrayItem(this.formGroup, controlPath, index);
     }
     showData() {
         console.log(this.formGroup.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCConversationFlowFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCConversationFlowFormComponent, isStandalone: true, selector: "dc-conversation-flow-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"group\">\n  <h3>Conversation Flow <span pTooltip=\"Define the flow and logic of the conversation\">\u2139\uFE0F</span></h3>\n\n  <div class=\"form-field\">\n    <label for=\"moodStateEnabled\">Detectar estado de animico? \uD83D\uDE12 \uD83E\uDD22 \uD83D\uDE24 \uD83D\uDE08 \uD83D\uDE31 <span pTooltip=\"Enable mood state\">\u2139\uFE0F</span></label>\n    <br />\n    <p-toggleswitch formControlName=\"moodStateEnabled\"></p-toggleswitch>\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"Aqu\u00ED se especifican las reglas de como se progresa en la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n\n    <agent-task-form [formGroup]=\"formGroup.controls.goal\" [shortForm]=\"true\"></agent-task-form>\n  </div>\n\n  <details>\n    <summary>Trigger Task (Tareas autom\u00E1ticas que se activan al conversar)</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4\n        >Trigger Tasks\n        <span\n          (click)=\"showData()\"\n          pTooltip=\"Tareas que se ejecutan en eventos espec\u00EDficos de la conversaci\u00F3n como  cuando el usuario env\u00EDa un mensaje, cuando el agente responde, etc. se visualizan normalmente en la secci\u00F3n de retro\"\n          >\u2139\uFE0F</span\n        ></h4\n      >\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">\n          <b>{{ eventKey | formatKey }}</b>\n        </label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\" [shortForm]=\"true\"></agent-task-form>\n      </div>\n      }\n    </div>\n  </details>\n  <details>\n    <summary>Tools (Herramientas que usa la APP al ocurrir eventos)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.tools\" title=\"Tool\" mode=\"select\" [availableItems]=\"validTools\"> </dc-dynamic-criteria-form>\n  </details>\n  <details>\n    <summary>Challenges (Mini Desafios al conversar)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.challenges\" title=\"Challenge\" mode=\"free-text\"> </dc-dynamic-criteria-form>\n  </details>\n\n  <dc-dynamic-conditions-form\n    [dynamicConditionsArray]=\"formGroup.controls.dynamicConditions\"\n    [dynamicConditionsPath]=\"'formGroup.controls.dynamicConditions'\"\n    [entityWhatOptions]=\"entityWhatOptions\"\n    [entityWhenOptions]=\"entityWhenOptions\"\n    [systemPromptTypeOptions]=\"systemPromptTypeOptions\">\n  </dc-dynamic-conditions-form>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: AgentTaskFormComponent, selector: "agent-task-form", inputs: ["formGroup", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: DcDynamicConditionsFormComponent, selector: "dc-dynamic-conditions-form", inputs: ["dynamicConditionsArray", "dynamicConditionsPath", "entityWhatOptions", "entityWhenOptions", "systemPromptTypeOptions"] }, { kind: "component", type: DcDynamicCriteriaFormComponent, selector: "dc-dynamic-criteria-form", inputs: ["formArray", "title", "mode", "availableItems"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: FormatKeyPipe, name: "formatKey" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCConversationFlowFormComponent, isStandalone: true, selector: "dc-conversation-flow-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"group\">\n  <h3>Conversation Flow <span pTooltip=\"Define the flow and logic of the conversation\">\u2139\uFE0F</span></h3>\n\n  <div formGroupName=\"moodState\" class=\"group\">\n    <h4>Mood State <span pTooltip=\"Configure mood detection settings\">\u2139\uFE0F</span></h4>\n    <div class=\"form-field\">\n      <p-toggleswitch formControlName=\"enabled\"></p-toggleswitch>\n\n      <label for=\"enabled\">Detectar estado de animo? \uD83D\uDE12 \uD83E\uDD22 \uD83D\uDE24 \uD83D\uDE08 \uD83D\uDE31 <span pTooltip=\"Enable mood state detection\">\u2139\uFE0F</span></label>\n    </div>\n\n    @if (formGroup.controls.moodState.controls.enabled.value) {\n    <div class=\"form-field\">\n      <p-toggleswitch formControlName=\"useAssetStatesOnly\"></p-toggleswitch>\n\n      <label for=\"useAssetStatesOnly\"\n        >Use Asset States Only <span pTooltip=\"Depends on the motion assets, if you tag with moods, those will be the only ones detected\">\u2139\uFE0F</span></label\n      >\n    </div>\n\n    <div class=\"form-field\">\n      <label for=\"detectableStates\">Detectable States <span pTooltip=\"List of detectable mood states\">\u2139\uFE0F</span></label>\n      <i>Pending for development</i>\n    </div>\n    }\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"Aqu\u00ED se especifican las reglas de como se progresa en la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n\n    <agent-task-form [formGroup]=\"formGroup.controls.goal\" [shortForm]=\"true\"></agent-task-form>\n  </div>\n\n  <details>\n    <summary>Trigger Task (Tareas autom\u00E1ticas que se activan al conversar)</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4\n        >Trigger Tasks\n        <span\n          (click)=\"showData()\"\n          pTooltip=\"Tareas que se ejecutan en eventos espec\u00EDficos de la conversaci\u00F3n como  cuando el usuario env\u00EDa un mensaje, cuando el agente responde, etc. se visualizan normalmente en la secci\u00F3n de retro\"\n          >\u2139\uFE0F</span\n        ></h4\n      >\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">\n          <b>{{ eventKey | formatKey }}</b>\n        </label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\" [shortForm]=\"true\"></agent-task-form>\n      </div>\n      }\n    </div>\n  </details>\n  <details>\n    <summary>Tools (Herramientas que usa la APP al ocurrir eventos)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.tools\" title=\"Tool\" mode=\"select\" [availableItems]=\"validTools\"> </dc-dynamic-criteria-form>\n  </details>\n  <details>\n    <summary>Challenges (Mini Desafios al conversar)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.challenges\" title=\"Challenge\" mode=\"free-text\"> </dc-dynamic-criteria-form>\n  </details>\n\n  <dc-dynamic-conditions-form\n    [dynamicConditionsArray]=\"formGroup.controls.dynamicConditions\"\n    [dynamicConditionsPath]=\"'formGroup.controls.dynamicConditions'\"\n    [entityWhatOptions]=\"entityWhatOptions\"\n    [entityWhenOptions]=\"entityWhenOptions\"\n    [systemPromptTypeOptions]=\"systemPromptTypeOptions\">\n  </dc-dynamic-conditions-form>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: AgentTaskFormComponent, selector: "agent-task-form", inputs: ["formGroup", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: DcDynamicConditionsFormComponent, selector: "dc-dynamic-conditions-form", inputs: ["dynamicConditionsArray", "dynamicConditionsPath", "entityWhatOptions", "entityWhenOptions", "systemPromptTypeOptions"] }, { kind: "component", type: DcDynamicCriteriaFormComponent, selector: "dc-dynamic-criteria-form", inputs: ["formArray", "title", "mode", "availableItems"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: FormatKeyPipe, name: "formatKey" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCConversationFlowFormComponent, decorators: [{
             type: Component,
@@ -4781,7 +5461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         DcDynamicCriteriaFormComponent,
                         FormatKeyPipe,
                         ToggleSwitchModule,
-                    ], 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=\"moodStateEnabled\">Detectar estado de animico? \uD83D\uDE12 \uD83E\uDD22 \uD83D\uDE24 \uD83D\uDE08 \uD83D\uDE31 <span pTooltip=\"Enable mood state\">\u2139\uFE0F</span></label>\n    <br />\n    <p-toggleswitch formControlName=\"moodStateEnabled\"></p-toggleswitch>\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"Aqu\u00ED se especifican las reglas de como se progresa en la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n\n    <agent-task-form [formGroup]=\"formGroup.controls.goal\" [shortForm]=\"true\"></agent-task-form>\n  </div>\n\n  <details>\n    <summary>Trigger Task (Tareas autom\u00E1ticas que se activan al conversar)</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4\n        >Trigger Tasks\n        <span\n          (click)=\"showData()\"\n          pTooltip=\"Tareas que se ejecutan en eventos espec\u00EDficos de la conversaci\u00F3n como  cuando el usuario env\u00EDa un mensaje, cuando el agente responde, etc. se visualizan normalmente en la secci\u00F3n de retro\"\n          >\u2139\uFE0F</span\n        ></h4\n      >\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">\n          <b>{{ eventKey | formatKey }}</b>\n        </label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\" [shortForm]=\"true\"></agent-task-form>\n      </div>\n      }\n    </div>\n  </details>\n  <details>\n    <summary>Tools (Herramientas que usa la APP al ocurrir eventos)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.tools\" title=\"Tool\" mode=\"select\" [availableItems]=\"validTools\"> </dc-dynamic-criteria-form>\n  </details>\n  <details>\n    <summary>Challenges (Mini Desafios al conversar)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.challenges\" title=\"Challenge\" mode=\"free-text\"> </dc-dynamic-criteria-form>\n  </details>\n\n  <dc-dynamic-conditions-form\n    [dynamicConditionsArray]=\"formGroup.controls.dynamicConditions\"\n    [dynamicConditionsPath]=\"'formGroup.controls.dynamicConditions'\"\n    [entityWhatOptions]=\"entityWhatOptions\"\n    [entityWhenOptions]=\"entityWhenOptions\"\n    [systemPromptTypeOptions]=\"systemPromptTypeOptions\">\n  </dc-dynamic-conditions-form>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"] }]
+                    ], template: "<div [formGroup]=\"formGroup\" class=\"group\">\n  <h3>Conversation Flow <span pTooltip=\"Define the flow and logic of the conversation\">\u2139\uFE0F</span></h3>\n\n  <div formGroupName=\"moodState\" class=\"group\">\n    <h4>Mood State <span pTooltip=\"Configure mood detection settings\">\u2139\uFE0F</span></h4>\n    <div class=\"form-field\">\n      <p-toggleswitch formControlName=\"enabled\"></p-toggleswitch>\n\n      <label for=\"enabled\">Detectar estado de animo? \uD83D\uDE12 \uD83E\uDD22 \uD83D\uDE24 \uD83D\uDE08 \uD83D\uDE31 <span pTooltip=\"Enable mood state detection\">\u2139\uFE0F</span></label>\n    </div>\n\n    @if (formGroup.controls.moodState.controls.enabled.value) {\n    <div class=\"form-field\">\n      <p-toggleswitch formControlName=\"useAssetStatesOnly\"></p-toggleswitch>\n\n      <label for=\"useAssetStatesOnly\"\n        >Use Asset States Only <span pTooltip=\"Depends on the motion assets, if you tag with moods, those will be the only ones detected\">\u2139\uFE0F</span></label\n      >\n    </div>\n\n    <div class=\"form-field\">\n      <label for=\"detectableStates\">Detectable States <span pTooltip=\"List of detectable mood states\">\u2139\uFE0F</span></label>\n      <i>Pending for development</i>\n    </div>\n    }\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"Aqu\u00ED se especifican las reglas de como se progresa en la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n\n    <agent-task-form [formGroup]=\"formGroup.controls.goal\" [shortForm]=\"true\"></agent-task-form>\n  </div>\n\n  <details>\n    <summary>Trigger Task (Tareas autom\u00E1ticas que se activan al conversar)</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4\n        >Trigger Tasks\n        <span\n          (click)=\"showData()\"\n          pTooltip=\"Tareas que se ejecutan en eventos espec\u00EDficos de la conversaci\u00F3n como  cuando el usuario env\u00EDa un mensaje, cuando el agente responde, etc. se visualizan normalmente en la secci\u00F3n de retro\"\n          >\u2139\uFE0F</span\n        ></h4\n      >\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">\n          <b>{{ eventKey | formatKey }}</b>\n        </label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\" [shortForm]=\"true\"></agent-task-form>\n      </div>\n      }\n    </div>\n  </details>\n  <details>\n    <summary>Tools (Herramientas que usa la APP al ocurrir eventos)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.tools\" title=\"Tool\" mode=\"select\" [availableItems]=\"validTools\"> </dc-dynamic-criteria-form>\n  </details>\n  <details>\n    <summary>Challenges (Mini Desafios al conversar)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.challenges\" title=\"Challenge\" mode=\"free-text\"> </dc-dynamic-criteria-form>\n  </details>\n\n  <dc-dynamic-conditions-form\n    [dynamicConditionsArray]=\"formGroup.controls.dynamicConditions\"\n    [dynamicConditionsPath]=\"'formGroup.controls.dynamicConditions'\"\n    [entityWhatOptions]=\"entityWhatOptions\"\n    [entityWhenOptions]=\"entityWhenOptions\"\n    [systemPromptTypeOptions]=\"systemPromptTypeOptions\">\n  </dc-dynamic-conditions-form>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formGroup: [{
                 type: Input
             }] } });
@@ -4845,26 +5525,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
+class DcCharacterCardTranslationFormComponent {
+    constructor() {
+        this.formBuilder = inject(FormBuilder);
+    }
+    get greetings() {
+        return this.formGroup.get('greetings');
+    }
+    addGreeting() {
+        this.greetings.push(this.formBuilder.control(''));
+    }
+    removeGreeting(index) {
+        this.greetings.removeAt(index);
+    }
+    ngOnInit() {
+        console.log(this.formGroup);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardTranslationFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcCharacterCardTranslationFormComponent, isStandalone: true, selector: "dc-character-card-translation-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"form-container space-y-4\">\n  <div class=\"form-field\">\n    <label for=\"hook\" class=\"block text-sm font-medium text-gray-700\">Hook</label>\n    <textarea\n      pInputTextarea\n      id=\"hook\"\n      formControlName=\"hook\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label for=\"communication\" class=\"block text-sm font-medium text-gray-700\">Communication</label>\n    <textarea\n      pInputTextarea\n      id=\"communication\"\n      formControlName=\"communication\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label class=\"block text-sm font-medium text-gray-700\">Greetings</label>\n    <div formArrayName=\"greetings\" class=\"space-y-2\">\n      @for (greeting of greetings.controls; track greeting; let i = $index) {\n      <div class=\"flex items-center space-x-2\">\n        <input\n          pInputText\n          [formControlName]=\"i\"\n          class=\"flex-grow mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"removeGreeting(i)\" class=\"p-button-rounded p-button-danger p-button-sm\"></button>\n      </div>\n      }\n    </div>\n    <button pButton type=\"button\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addGreeting()\" class=\"p-button-sm mt-2\"></button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardTranslationFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-character-card-translation-form', standalone: true, imports: [ReactiveFormsModule, InputTextModule, TextareaModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"formGroup\" class=\"form-container space-y-4\">\n  <div class=\"form-field\">\n    <label for=\"hook\" class=\"block text-sm font-medium text-gray-700\">Hook</label>\n    <textarea\n      pInputTextarea\n      id=\"hook\"\n      formControlName=\"hook\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label for=\"communication\" class=\"block text-sm font-medium text-gray-700\">Communication</label>\n    <textarea\n      pInputTextarea\n      id=\"communication\"\n      formControlName=\"communication\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n  <div class=\"form-field\">\n    <label class=\"block text-sm font-medium text-gray-700\">Greetings</label>\n    <div formArrayName=\"greetings\" class=\"space-y-2\">\n      @for (greeting of greetings.controls; track greeting; let i = $index) {\n      <div class=\"flex items-center space-x-2\">\n        <input\n          pInputText\n          [formControlName]=\"i\"\n          class=\"flex-grow mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        <button pButton type=\"button\" icon=\"pi pi-times\" (click)=\"removeGreeting(i)\" class=\"p-button-rounded p-button-danger p-button-sm\"></button>\n      </div>\n      }\n    </div>\n    <button pButton type=\"button\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addGreeting()\" class=\"p-button-sm mt-2\"></button>\n  </div>\n</div>\n" }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }] } });
+
+class DcCharacterCardTranslationsTabsFormComponent {
+    constructor() {
+        this.characterFormGroupService = inject(CharacterFormGroupService);
+        this.displayAddLanguageDialog = false;
+        this.selectedLanguage = null;
+        this.availableLanguages = signal([], ...(ngDevMode ? [{ debugName: "availableLanguages" }] : []));
+    }
+    showAddLanguageDialog() {
+        const availableLanguages = SUPPORTED_LANGUAGES.filter((lang) => !this.formGroup.controls[lang]).map((langCode) => ({
+            code: langCode,
+            description: LANGUAGES[langCode]?.translations.es || langCode,
+        }));
+        this.availableLanguages.set(availableLanguages);
+        this.displayAddLanguageDialog = true;
+    }
+    addLanguage() {
+        if (this.selectedLanguage) {
+            const newLangControl = this.characterFormGroupService.createCardTranslationFormGroup();
+            this.formGroup.addControl(this.selectedLanguage, newLangControl);
+            this.selectedLanguage = null;
+            this.displayAddLanguageDialog = false;
+        }
+    }
+    removeLanguage(langCode) {
+        this.formGroup.removeControl(langCode);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardTranslationsTabsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcCharacterCardTranslationsTabsFormComponent, isStandalone: true, selector: "dc-character-card-translations-tabs-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div class=\"flex justify-between items-center mb-4\">\n  <h4 class=\"text-lg font-semibold\">Translations ({{ (formGroup?.controls | keyvalue)?.length }})</h4>\n  <p-button icon=\"pi pi-plus\" label=\"Add Language\" (click)=\"showAddLanguageDialog()\" />\n</div>\n\n<p-tabs value=\"0\" [scrollable]=\"true\">\n  <p-tablist>\n    @for (control of formGroup.controls | keyvalue; track control.key; let i = $index) {\n    <p-tab [value]=\"control.key\">\n      <div class=\"flex items-center\">\n        <span>{{ control.key }}</span>\n        <button\n          pButton\n          type=\"button\"\n          icon=\"pi pi-times\"\n          class=\"p-button-rounded p-button-danger p-button-text ml-2\"\n          (click)=\"removeLanguage(control.key)\"></button>\n      </div>\n    </p-tab>\n    }\n  </p-tablist>\n  <p-tabpanels>\n    @for (control of formGroup.controls | keyvalue; track control.key) {\n    <p-tabpanel [value]=\"control.key\">\n      @if (control.value) {\n      <dc-character-card-translation-form [formGroup]=\"control.value\" />\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>\n\n<p-dialog header=\"Add New Language\" [(visible)]=\"displayAddLanguageDialog\" [modal]=\"true\" [style]=\"{ width: '50vw', height: '50vh' }\">\n  <div style=\"height: 30vh\">\n    <label for=\"language\">Only Valid Languages and not added yet are displayed</label>\n    <br />\n    <p-select\n      [options]=\"availableLanguages()\"\n      [(ngModel)]=\"selectedLanguage\"\n      placeholder=\"Select a Language\"\n      optionLabel=\"description\"\n      optionValue=\"code\"\n      [filter]=\"true\"\n      filterBy=\"description\"\n      [showClear]=\"true\"></p-select>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-times\" label=\"Cancel\" styleClass=\"p-button-text\" (click)=\"displayAddLanguageDialog = false\" />\n    <p-button icon=\"pi pi-check\" label=\"Add\" (click)=\"addLanguage()\" [disabled]=\"!selectedLanguage\" />\n  </ng-template>\n</p-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$6.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2$6.TabList, selector: "p-tablist" }, { kind: "component", type: i2$6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: DcCharacterCardTranslationFormComponent, selector: "dc-character-card-translation-form", inputs: ["formGroup"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardTranslationsTabsFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-character-card-translations-tabs-form', standalone: true, imports: [ReactiveFormsModule, FormsModule, TabsModule, DcCharacterCardTranslationFormComponent, ButtonModule, DialogModule, SelectModule, KeyValuePipe], template: "<div class=\"flex justify-between items-center mb-4\">\n  <h4 class=\"text-lg font-semibold\">Translations ({{ (formGroup?.controls | keyvalue)?.length }})</h4>\n  <p-button icon=\"pi pi-plus\" label=\"Add Language\" (click)=\"showAddLanguageDialog()\" />\n</div>\n\n<p-tabs value=\"0\" [scrollable]=\"true\">\n  <p-tablist>\n    @for (control of formGroup.controls | keyvalue; track control.key; let i = $index) {\n    <p-tab [value]=\"control.key\">\n      <div class=\"flex items-center\">\n        <span>{{ control.key }}</span>\n        <button\n          pButton\n          type=\"button\"\n          icon=\"pi pi-times\"\n          class=\"p-button-rounded p-button-danger p-button-text ml-2\"\n          (click)=\"removeLanguage(control.key)\"></button>\n      </div>\n    </p-tab>\n    }\n  </p-tablist>\n  <p-tabpanels>\n    @for (control of formGroup.controls | keyvalue; track control.key) {\n    <p-tabpanel [value]=\"control.key\">\n      @if (control.value) {\n      <dc-character-card-translation-form [formGroup]=\"control.value\" />\n      }\n    </p-tabpanel>\n    }\n  </p-tabpanels>\n</p-tabs>\n\n<p-dialog header=\"Add New Language\" [(visible)]=\"displayAddLanguageDialog\" [modal]=\"true\" [style]=\"{ width: '50vw', height: '50vh' }\">\n  <div style=\"height: 30vh\">\n    <label for=\"language\">Only Valid Languages and not added yet are displayed</label>\n    <br />\n    <p-select\n      [options]=\"availableLanguages()\"\n      [(ngModel)]=\"selectedLanguage\"\n      placeholder=\"Select a Language\"\n      optionLabel=\"description\"\n      optionValue=\"code\"\n      [filter]=\"true\"\n      filterBy=\"description\"\n      [showClear]=\"true\"></p-select>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-times\" label=\"Cancel\" styleClass=\"p-button-text\" (click)=\"displayAddLanguageDialog = false\" />\n    <p-button icon=\"pi pi-check\" label=\"Add\" (click)=\"addLanguage()\" [disabled]=\"!selectedLanguage\" />\n  </ng-template>\n</p-dialog>\n" }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }] } });
+
+class DcPersonaFormComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcPersonaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DcPersonaFormComponent, isStandalone: true, selector: "dc-persona-form", inputs: { personaForm: "personaForm" }, ngImport: i0, template: "<div [formGroup]=\"personaForm\" class=\"space-y-6\">\n  <h3 class=\"text-xl font-semibold text-gray-700\">\n    Persona Details <span pTooltip=\"Detailed information about the character's persona\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n  </h3>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"identity\" class=\"block text-sm font-medium text-gray-700\"\n      >Identity <span pTooltip=\"Name, Age, Gender, Species, Sexuality, Role, Appearance\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"identity\"\n      formControlName=\"identity\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"physical\" class=\"block text-sm font-medium text-gray-700\"\n      >Physical\n      <span\n        pTooltip=\"physical description including height, build, hairColor, hairStyle, eyeColor, skinTone, distinctiveMarks, clothing style, currentOutfit\"\n        class=\"text-blue-500 cursor-pointer\"\n        >\u2139\uFE0F</span\n      ></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"physical\"\n      formControlName=\"physical\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"personality\" class=\"block text-sm font-medium text-gray-700\"\n      >Personality\n      <span pTooltip=\"personality description surface traits, Temperament, Values, Beliefs, Observable traits\" class=\"text-blue-500 cursor-pointer\"\n        >\u2139\uFE0F</span\n      ></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"personality\"\n      formControlName=\"personality\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"communication\" class=\"block text-sm font-medium text-gray-700\"\n      >Communication\n      <span pTooltip=\"(How They Express) Speech Pattern, Style Common Phrases, Language Habits\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"communication\"\n      formControlName=\"communication\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"psychology\" class=\"block text-sm font-medium text-gray-700\"\n      >Psychology <span pTooltip=\"Motivations, Desires, Goals, Traumas, Conflicts, Weaknesses\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"psychology\"\n      formControlName=\"psychology\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"background\" class=\"block text-sm font-medium text-gray-700\"\n      >Background <span pTooltip=\"Background, History, origin, formative, secrets\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"background\"\n      formControlName=\"background\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"capabilities\" class=\"block text-sm font-medium text-gray-700\"\n      >Capabilities\n      <span pTooltip=\"skills, knowledge, abilities, expertise, limitations, Tools, Strengths\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"capabilities\"\n      formControlName=\"capabilities\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"social\" class=\"block text-sm font-medium text-gray-700\"\n      >Social <span pTooltip=\"Relationships, reputation, allies, enemies, social role\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"social\"\n      formControlName=\"social\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"preferences\" class=\"block text-sm font-medium text-gray-700\"\n      >Preferences <span pTooltip=\"likes, dislikes, hobbies, interests, hates\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"preferences\"\n      formControlName=\"preferences\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"situation\" class=\"block text-sm font-medium text-gray-700\"\n      >Situation\n      <span pTooltip=\"Current context for the character, immediate goal or challenge and constraints\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"situation\"\n      formControlName=\"situation\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcPersonaFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-persona-form', standalone: true, imports: [ReactiveFormsModule, TextareaModule, TooltipModule], template: "<div [formGroup]=\"personaForm\" class=\"space-y-6\">\n  <h3 class=\"text-xl font-semibold text-gray-700\">\n    Persona Details <span pTooltip=\"Detailed information about the character's persona\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span>\n  </h3>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"identity\" class=\"block text-sm font-medium text-gray-700\"\n      >Identity <span pTooltip=\"Name, Age, Gender, Species, Sexuality, Role, Appearance\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"identity\"\n      formControlName=\"identity\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"physical\" class=\"block text-sm font-medium text-gray-700\"\n      >Physical\n      <span\n        pTooltip=\"physical description including height, build, hairColor, hairStyle, eyeColor, skinTone, distinctiveMarks, clothing style, currentOutfit\"\n        class=\"text-blue-500 cursor-pointer\"\n        >\u2139\uFE0F</span\n      ></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"physical\"\n      formControlName=\"physical\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"personality\" class=\"block text-sm font-medium text-gray-700\"\n      >Personality\n      <span pTooltip=\"personality description surface traits, Temperament, Values, Beliefs, Observable traits\" class=\"text-blue-500 cursor-pointer\"\n        >\u2139\uFE0F</span\n      ></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"personality\"\n      formControlName=\"personality\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"communication\" class=\"block text-sm font-medium text-gray-700\"\n      >Communication\n      <span pTooltip=\"(How They Express) Speech Pattern, Style Common Phrases, Language Habits\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"communication\"\n      formControlName=\"communication\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"psychology\" class=\"block text-sm font-medium text-gray-700\"\n      >Psychology <span pTooltip=\"Motivations, Desires, Goals, Traumas, Conflicts, Weaknesses\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"psychology\"\n      formControlName=\"psychology\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"background\" class=\"block text-sm font-medium text-gray-700\"\n      >Background <span pTooltip=\"Background, History, origin, formative, secrets\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"background\"\n      formControlName=\"background\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"capabilities\" class=\"block text-sm font-medium text-gray-700\"\n      >Capabilities\n      <span pTooltip=\"skills, knowledge, abilities, expertise, limitations, Tools, Strengths\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"capabilities\"\n      formControlName=\"capabilities\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"social\" class=\"block text-sm font-medium text-gray-700\"\n      >Social <span pTooltip=\"Relationships, reputation, allies, enemies, social role\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"social\"\n      formControlName=\"social\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"preferences\" class=\"block text-sm font-medium text-gray-700\"\n      >Preferences <span pTooltip=\"likes, dislikes, hobbies, interests, hates\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"preferences\"\n      formControlName=\"preferences\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n\n  <div class=\"form-field grid grid-cols-1 gap-2\">\n    <label for=\"situation\" class=\"block text-sm font-medium text-gray-700\"\n      >Situation\n      <span pTooltip=\"Current context for the character, immediate goal or challenge and constraints\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n    >\n    <textarea\n      rows=\"2\"\n      pTextarea\n      [autoResize]=\"true\"\n      id=\"situation\"\n      formControlName=\"situation\"\n      class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n  </div>\n</div>\n" }]
+        }], propDecorators: { personaForm: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 class DcCharacterCardFormComponent {
     constructor() {
         this.generateMissingDataRequest = new EventEmitter();
-        this.fb = inject(FormBuilder);
         this.cdr = inject(ChangeDetectorRef);
         this.agentCardService = inject(CONVERSATION_AI_TOKEN);
         this.toastService = inject(TOAST_ALERTS_TOKEN, { optional: true });
-        this.formGroupService = inject(FormGroupService);
+        this.characterFormGroupService = inject(CharacterFormGroupService);
         this.markdownForm = new FormGroup({ seeMarkdown: new FormControl(false) });
         this.isGenerating = false; // For improveFirstMessage loading state
+        this.genderOptions = [
+            { label: 'Female', value: 'female' },
+            { label: 'Male', value: 'male' },
+            { label: 'Other', value: 'other' },
+        ];
     }
     get dataGroup() {
         return this.characterCardForm.get('data');
     }
+    get personaGroup() {
+        return this.dataGroup.get('persona');
+    }
     get alternateGreetingsArray() {
-        return this.dataGroup.get('alternate_greetings');
+        return this.dataGroup.get('greetings');
     }
     get tagsArray() {
         return this.dataGroup.get('tags');
     }
+    get langTranslationGroup() {
+        return this.dataGroup.get('langTranslation');
+    }
     ngOnInit() {
         if (!this.characterCardForm) {
             console.error('CharacterCardFormComponent expects an FormGroup instance.');
@@ -4880,15 +5644,15 @@ class DcCharacterCardFormComponent {
         this.cdr.detectChanges();
     }
     addArrayItem(controlPath) {
-        this.formGroupService.addArrayItem(this.dataGroup, controlPath);
+        this.characterFormGroupService.addArrayItem(this.dataGroup, controlPath);
         this.cdr.detectChanges();
     }
     removeArrayItem(controlPath, index) {
-        this.formGroupService.removeArrayItem(this.dataGroup, controlPath, index);
+        this.characterFormGroupService.removeArrayItem(this.dataGroup, controlPath, index);
         this.cdr.detectChanges();
     }
     updateArrayField(controlPath, index, event) {
-        this.formGroupService.updateArrayField(this.dataGroup, controlPath, index, event);
+        this.characterFormGroupService.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.');
@@ -4950,11 +5714,24 @@ Improve the following first message:`;
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcCharacterCardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcCharacterCardFormComponent, isStandalone: true, selector: "dc-character-card-form", inputs: { characterCardForm: "characterCardForm" }, outputs: { generateMissingDataRequest: "generateMissingDataRequest" }, ngImport: i0, template: "<div [formGroup]=\"characterCardForm\" 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        >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <input\n        pInputText\n        id=\"cardName\"\n        type=\"text\"\n        formControlName=\"name\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n      @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n      }\n    </div>\n\n    <div class=\"form-field 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$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i6.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcCharacterCardFormComponent, isStandalone: true, selector: "dc-character-card-form", inputs: { characterCardForm: "characterCardForm" }, outputs: { generateMissingDataRequest: "generateMissingDataRequest" }, ngImport: i0, template: "<div [formGroup]=\"characterCardForm\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 bg-white p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold text-gray-700 mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"form-field\">\n        <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n          >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <input\n          pInputText\n          id=\"cardName\"\n          type=\"text\"\n          formControlName=\"name\"\n          class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"gender\" class=\"block text-sm font-medium text-gray-700\"\n          >Gender <span pTooltip=\"El genero del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <p-select\n          class=\"w-full\"\n          id=\"gender\"\n          [options]=\"genderOptions\"\n          formControlName=\"gender\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Gender'\"></p-select>\n        @if (dataGroup.controls['gender']?.errors?.['required'] && dataGroup.controls['gender']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Gender is required </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) 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=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >(\u2757\uFE0FObsoleto) First Message\n            <span pTooltip=\"Mensaje para iniciar la historia, OBSOLETO utilizar Greetings en su lugar, poner uno o varios.\" class=\"text-blue-500 cursor-pointer\"\n              >\u2139\uFE0F</span\n            ></span\n          >\n          <div class=\"flex items-center space-x-2\">\n            <p-togglebutton\n              [formControl]=\"markdownForm.controls.seeMarkdown\"\n              [onLabel]=\"'Editar'\"\n              [offLabel]=\"'Ver Markdown'\"\n              size=\"small\"\n              styleClass=\"min-w-16 p-button-sm\"\n              (onChange)=\"checkCdr()\" />\n            <p-button icon=\"pi pi-refresh\" (click)=\"improveFirstMessage()\" label=\"Mejorar\" styleClass=\"p-button-sm p-button-outlined\"></p-button>\n          </div>\n        </div>\n      </label>\n\n      @if(markdownForm.controls.seeMarkdown.value){\n      <div [innerHTML]=\"dataGroup.controls['first_mes'].value | mdToHtmlArray\" class=\"prose mt-1 p-3 border border-gray-200 rounded-md\"></div>\n      }@else{\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardFirstMessage\"\n        formControlName=\"first_mes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n      </textarea>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"mes_example\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) Mensajes de Ejemplo\n        <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n, agregar esta info dentro de comunication\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"mes_example\"\n        formControlName=\"mes_example\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Hook <span pTooltip=\"Texto gancho para atraer al usuario a interactuar con esta tarjeta\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardHook\"\n        formControlName=\"hook\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium text-gray-700\"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Greetings (Saludos Iniciales)<span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider> Persona </p-divider>\n\n    <dc-persona-form [personaForm]=\"personaGroup\" />\n\n    <p-divider> Avanzado </p-divider>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >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=\"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 pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium text-gray-700\">Tags \u2139\uFE0F</label>\n      <div class=\"array-field space-y-2\">\n        @for (tag of tagsArray.controls; track tag; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\">\n          <input\n            pInputText\n            [id]=\"'cardTag' + i\"\n            type=\"text\"\n            [formControl]=\"asFormControl(tag)\"\n            (input)=\"updateArrayField('tags', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\" />\n          <button pButton severity=\"danger\" label=\"Remove\" icon=\"pi pi-times\" (click)=\"removeArrayItem('tags', i)\" class=\"p-button-sm\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addArrayItem('tags')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider align=\"center\" type=\"dotted\">\n      <b>Traducciones a otros idiomas</b>\n    </p-divider>\n\n    @if(langTranslationGroup){\n    <dc-character-card-translations-tabs-form [formGroup]=\"langTranslationGroup\" />\n    }\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i6$1.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$1.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: DcCharacterCardTranslationsTabsFormComponent, selector: "dc-character-card-translations-tabs-form", inputs: ["formGroup"] }, { kind: "component", type: DcPersonaFormComponent, selector: "dc-persona-form", inputs: ["personaForm"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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-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        >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <input\n        pInputText\n        id=\"cardName\"\n        type=\"text\"\n        formControlName=\"name\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n      @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n      }\n    </div>\n\n    <div class=\"form-field 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"] }]
+            args: [{ selector: 'dc-character-card-form', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
+                        ButtonModule,
+                        InputTextModule,
+                        TextareaModule,
+                        TooltipModule,
+                        ToggleButtonModule,
+                        MdToHtmlArrayPipe,
+                        SelectModule,
+                        DividerModule,
+                        DcCharacterCardTranslationsTabsFormComponent,
+                        DcPersonaFormComponent,
+                    ], template: "<div [formGroup]=\"characterCardForm\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 bg-white p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold text-gray-700 mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"form-field\">\n        <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n          >Character Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <input\n          pInputText\n          id=\"cardName\"\n          type=\"text\"\n          formControlName=\"name\"\n          class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n        @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n        }\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"gender\" class=\"block text-sm font-medium text-gray-700\"\n          >Gender <span pTooltip=\"El genero del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n        >\n        <p-select\n          class=\"w-full\"\n          id=\"gender\"\n          [options]=\"genderOptions\"\n          formControlName=\"gender\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Gender'\"></p-select>\n        @if (dataGroup.controls['gender']?.errors?.['required'] && dataGroup.controls['gender']?.touched) {\n        <div class=\"error text-red-500 text-xs mt-1\"> Gender is required </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) 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=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >(\u2757\uFE0FObsoleto) First Message\n            <span pTooltip=\"Mensaje para iniciar la historia, OBSOLETO utilizar Greetings en su lugar, poner uno o varios.\" class=\"text-blue-500 cursor-pointer\"\n              >\u2139\uFE0F</span\n            ></span\n          >\n          <div class=\"flex items-center space-x-2\">\n            <p-togglebutton\n              [formControl]=\"markdownForm.controls.seeMarkdown\"\n              [onLabel]=\"'Editar'\"\n              [offLabel]=\"'Ver Markdown'\"\n              size=\"small\"\n              styleClass=\"min-w-16 p-button-sm\"\n              (onChange)=\"checkCdr()\" />\n            <p-button icon=\"pi pi-refresh\" (click)=\"improveFirstMessage()\" label=\"Mejorar\" styleClass=\"p-button-sm p-button-outlined\"></p-button>\n          </div>\n        </div>\n      </label>\n\n      @if(markdownForm.controls.seeMarkdown.value){\n      <div [innerHTML]=\"dataGroup.controls['first_mes'].value | mdToHtmlArray\" class=\"prose mt-1 p-3 border border-gray-200 rounded-md\"></div>\n      }@else{\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardFirstMessage\"\n        formControlName=\"first_mes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n      </textarea>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"mes_example\" class=\"block text-sm font-medium text-gray-700\"\n        >(\u2757\uFE0FObsoleto) Mensajes de Ejemplo\n        <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n, agregar esta info dentro de comunication\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"1\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"mes_example\"\n        formControlName=\"mes_example\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Hook <span pTooltip=\"Texto gancho para atraer al usuario a interactuar con esta tarjeta\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardHook\"\n        formControlName=\"hook\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium text-gray-700\"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Greetings (Saludos Iniciales)<span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider> Persona </p-divider>\n\n    <dc-persona-form [personaForm]=\"personaGroup\" />\n\n    <p-divider> Avanzado </p-divider>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >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=\"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 pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium text-gray-700\">Tags \u2139\uFE0F</label>\n      <div class=\"array-field space-y-2\">\n        @for (tag of tagsArray.controls; track tag; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\">\n          <input\n            pInputText\n            [id]=\"'cardTag' + i\"\n            type=\"text\"\n            [formControl]=\"asFormControl(tag)\"\n            (input)=\"updateArrayField('tags', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\" />\n          <button pButton severity=\"danger\" label=\"Remove\" icon=\"pi pi-times\" (click)=\"removeArrayItem('tags', i)\" class=\"p-button-sm\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addArrayItem('tags')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <p-divider align=\"center\" type=\"dotted\">\n      <b>Traducciones a otros idiomas</b>\n    </p-divider>\n\n    @if(langTranslationGroup){\n    <dc-character-card-translations-tabs-form [formGroup]=\"langTranslationGroup\" />\n    }\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"] }]
         }], propDecorators: { characterCardForm: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4975,6 +5752,7 @@ class DcVoiceTtsFormComponent {
         const dialogRef = this.dialogService.open(VoiceSelectorComponent, {
             header: 'Select Voice',
             width: '50vw',
+            maximizable: true,
             height: '500px',
             contentStyle: { 'max-height': '90vh', overflow: 'auto', 'min-height': '500px' },
             baseZIndex: 10000,
@@ -4990,7 +5768,7 @@ class DcVoiceTtsFormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcVoiceTtsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcVoiceTtsFormComponent, isStandalone: true, selector: "dc-voice-tts-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, voiceTTSOptions: { classPropertyName: "voiceTTSOptions", publicName: "voiceTTSOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<h3> {{ title() }}</h3>\n<div [formGroup]=\"form()\" class=\"form-grid\">\n  <div class=\"form-field\">\n    <label for=\"voice\">Voice <span pTooltip=\"Select the voice for text-to-speech\">\u2139\uFE0F</span></label>\n    <p-inputgroup>\n      <p-inputgroup-addon>\n        <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector()\" />\n      </p-inputgroup-addon>\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'\" />\n    </p-inputgroup>\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    <br />\n    <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3$4.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i4$3.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CardModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcVoiceTtsFormComponent, isStandalone: true, selector: "dc-voice-tts-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, voiceTTSOptions: { classPropertyName: "voiceTTSOptions", publicName: "voiceTTSOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<h3> {{ title() }}</h3>\n<div [formGroup]=\"form()\" class=\"form-grid\">\n  <div class=\"form-field\">\n    <label for=\"voice\">Voice <span pTooltip=\"Select the voice for text-to-speech\">\u2139\uFE0F</span></label>\n    <p-inputgroup>\n      <p-inputgroup-addon>\n        <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector()\" />\n      </p-inputgroup-addon>\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'\" />\n    </p-inputgroup>\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    <br />\n    <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3$5.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i4$2.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CardModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcVoiceTtsFormComponent, decorators: [{
             type: Component,
@@ -5066,7 +5844,7 @@ class DcConversationSettingsFormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcConversationSettingsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DcConversationSettingsFormComponent, isStandalone: true, selector: "dc-conversation-settings-form", inputs: { form: "form", textEngineOptions: "textEngineOptions", conversationOptions: "conversationOptions", voiceTTSOptions: "voiceTTSOptions" }, providers: [DialogService], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"p-6 bg-white rounded-lg shadow-md space-y-6\">\n  <h3 class=\"text-xl font-bold text-gray-900 border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium text-gray-700\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        styleClass=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium text-gray-700\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        styleClass=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium text-gray-700\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-voice-tts-form [form]=\"mainVoiceFormGroup\" [title]=\"'Main Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <dc-voice-tts-form [form]=\"secondaryVoiceFormGroup\" [title]=\"'Secondary Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DcConversationSettingsFormComponent, isStandalone: true, selector: "dc-conversation-settings-form", inputs: { form: "form", textEngineOptions: "textEngineOptions", conversationOptions: "conversationOptions", voiceTTSOptions: "voiceTTSOptions" }, providers: [DialogService], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"p-6 bg-white rounded-lg shadow-md space-y-6\">\n  <h3 class=\"text-xl font-bold text-gray-900 border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium text-gray-700\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        styleClass=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium text-gray-700\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        styleClass=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium text-gray-700\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-voice-tts-form [form]=\"mainVoiceFormGroup\" [title]=\"'Main Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <dc-voice-tts-form [form]=\"secondaryVoiceFormGroup\" [title]=\"'Secondary Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcConversationSettingsFormComponent, decorators: [{
             type: Component,
@@ -5100,7 +5878,7 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.entityCommunicationService = inject(CONVERSATION_AI_TOKEN);
         this.dialogService = inject(DialogService);
         this.promptBuilder = inject(ConversationPromptBuilderService);
-        this.formGroupService = inject(FormGroupService);
+        this.characterFormGroupService = inject(CharacterFormGroupService);
         // select options
         this.conversationOptions = ConversationTypeOptions;
         this.voiceTTSOptions = Object.values(VoiceTTSOptions);
@@ -5111,7 +5889,7 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.onSave = output();
         this.onGoDetails = output();
         this.onTranslate = output();
-        this.form = this.formGroupService.createAgentCardForm();
+        this.form = this.characterFormGroupService.createAgentCardForm();
         this.isGenerating = signal(false, ...(ngDevMode ? [{ debugName: "isGenerating" }] : []));
     }
     getSettings() {
@@ -5123,8 +5901,9 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         return imageSettings;
     }
     patchForm(agentCard) {
-        this.formGroupService.patchFormWithConversationData(this.form, agentCard);
-        this.formGroupService.handleArrayForms(this.form, agentCard);
+        this.characterFormGroupService.patchFormWithConversationData(this.form, agentCard);
+        this.characterFormGroupService.handleArrayForms(this.form, agentCard);
+        this.characterFormGroupService.handleTranslationForm(this.form, agentCard);
         this.storageSettings().path = 'conversation-cards/' + this.entityId();
     }
     async save() {
@@ -5137,40 +5916,57 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         }
         return result;
     }
+    inspect() {
+        console.log(this.form.value);
+    }
     async onImageSelected(file) {
         // const file = (event.target as HTMLInputElement).files?.[0];
         if (file) {
             // You might want to handle the file upload here
             // For now, we'll just store the file in the form
             const jsonData = await getCharacterData(file);
+            // STRATEGY TO IMPORT 1) mes_example and personality moves to description
+            // 2) first_mes and alternate_greetings merged into greetings
+            // 3) Rest keep as it is
             if (jsonData) {
                 // alert('metadata was found');
                 if (this.toastService) {
                     this.toastService.info({ title: 'Image Loaded', subtitle: 'Metadata was found' });
                 }
+                if (jsonData?.data?.first_mes) {
+                    this.form.get('characterCard.data.greetings').push(this.fb.control(jsonData.data.first_mes));
+                    delete jsonData.data.first_mes;
+                }
                 // check that property exists and is an array
                 if (jsonData?.data?.alternate_greetings && Array.isArray(jsonData.data.alternate_greetings)) {
                     jsonData.data.alternate_greetings.forEach((_) => {
-                        this.form.get('characterCard.data.alternate_greetings').push(this.fb.control(''));
+                        this.form.get('characterCard.data.greetings').push(this.fb.control(''));
                     });
                     this.form.get('conversationSettings.conversationType')?.setValue(ConversationType.RolePlay);
                     this.form.get('conversationSettings.textEngine')?.setValue(TextEngines.MarkdownMultiMessages);
                 }
+                if (jsonData?.data?.personality) {
+                    jsonData.data.description += '### Personality\n\n' + jsonData.data.personality;
+                    delete jsonData.data.personality;
+                }
+                if (jsonData?.data?.mes_example) {
+                    jsonData.data.description += '### Message Example: \n\n' + jsonData.data.mes_example;
+                    delete jsonData.data.mes_example;
+                }
                 this.form.patchValue({ characterCard: jsonData });
                 console.log(this.form.value);
-                // this.saveScenario();
             }
         }
     }
     checkPrompt() {
         const messages = this.promptBuilder.buildConversationMessages(this.form.value);
         const jailBrake = this.promptBuilder.getJailBrakePrompt(this.form.value);
-        const messagesHtml = this.promptBuilder.convertConversationToHtml(messages, jailBrake);
         this.dialogService.open(PromptPreviewDialogComponent, {
-            data: { html: messagesHtml },
+            data: { messages, jailBrake },
             width: '80vw',
             height: '80vh',
             closable: true,
+            maximizable: true,
             header: 'Prompt Preview',
         });
     }
@@ -5202,7 +5998,8 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
     }
     downloadConversation() {
         const data = this.form.value;
-        const jsonData = JSON.stringify(data, null, 2);
+        const cardData = this.entity();
+        const jsonData = JSON.stringify(cardData, null, 2);
         const blob = new Blob([jsonData], { type: 'application/json' });
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
@@ -5224,11 +6021,14 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
                     try {
                         const jsonData = JSON.parse(e.target?.result);
                         delete jsonData['id'];
+                        delete jsonData['_id'];
                         this.form.patchValue(jsonData);
+                        this.entity.set(jsonData);
+                        this.entityCommunicationService.partialUpdate(this.entityId(), jsonData);
                         if (this.toastService) {
                             this.toastService.success({
                                 title: 'Import Successful',
-                                subtitle: 'Conversation data has been loaded',
+                                subtitle: 'Conversation data has been loaded and Saved',
                             });
                         }
                     }
@@ -5248,46 +6048,44 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         fileInput.click();
     }
     async generateCharacter() {
-        // Que aprendí de la generación desde frontend:
-        // 1) tener el prompt system con un variable que define la interfaz en un string, characterCardDataDefinition
-        // 2) Genear el prompt de usuario con instrucciones finales y parser el json a la interfaz o form.
-        // 3) Listo puedo generar cualquier cosas desde frontend.
-        const idea = prompt('Qué idea tienes para tu personaje?');
-        if (idea === null) {
-            return;
-        }
-        console.log(idea);
-        const prompt_system = `Genera una ficha de personaje, haz que toda la información sea coherente y que el personaje tenga sentido.
-    en la descripcción detalla su comportamiento y sus habilidades y estilo de comunicación, frases típicas que dice, sus intereses, su perfil sicológico e información adicional que ayude a complementar la ficha de personaje.
-    regresa el resultado en formato json siguiendo la siguiente interfaz:
-    ${characterCardStringDataDefinition}`;
-        const prompt_user = `Dame la ficha de personaje para la siguiente idea: ${idea}`;
-        const messages = [
-            { role: ChatRole.System, content: prompt_system },
-            { role: ChatRole.User, content: prompt_user },
-        ];
-        this.isGenerating.set(true);
-        this.toastService.info({ title: 'Generando personaje', subtitle: 'Puede tardar varios minutos, Por favor espera...' });
-        const response = await this.entityCommunicationService.callChatCompletion({
-            messages,
-            textEngine: TextEngines.SimpleText,
-            conversationType: ConversationType.General,
-            returnJson: true,
-            type: 'character-generation',
+        const dialogRef = this.dialogService.open(GenerateCharacterDialogComponent, {
+            header: 'Generate Character',
+            width: '70vw',
+            maximizable: true,
+            data: {
+                agentCard: this.entity(),
+            },
+            modal: true,
+            closable: true,
+        });
+        dialogRef.onClose.subscribe(async (result) => {
+            console.log(result);
+            if (result?.langTranslation) {
+                this.toastService.info({ title: 'Character generated', subtitle: 'No te olvides de guardar cambios si estas seguro' });
+                // this.form.controls.characterCard.patchValue({ data: result });
+                const card = this.entity();
+                card.characterCard.data.langTranslation = result.langTranslation;
+                this.entity.update((card) => ({ ...card }));
+                console.log('new chard', this.entity());
+                debugger;
+                if (card && card.characterCard?.data?.langTranslation) {
+                    this.characterFormGroupService.handleTranslationForm(this.form, card);
+                }
+            }
+            else if (result) {
+                this.toastService.success({ title: 'Character generated', subtitle: 'No te olvides de guardar cambios si estas seguro' });
+                this.entity.update((card) => ({ ...card, characterCard: { ...card.characterCard, data: result } }));
+                this.form.controls.characterCard.patchValue({ data: result });
+                this.characterFormGroupService.createAndPatchCharacterArrayForm(this.form, this.entity());
+            }
+            else {
+                this.toastService.error({
+                    title: 'Algo salió mal :/',
+                    subtitle: 'La información no pudo ser extraída correcamente, pero no te preocupes, puedes intentar de nuevo',
+                });
+            }
+            this.isGenerating.set(false);
         });
-        // const jsonData = extractJsonFromResponse(response.content);
-        const jsonData = response.content;
-        if (jsonData) {
-            this.toastService.success({ title: 'Character generated', subtitle: 'No te olvides de guardar cambios si estas seguro' });
-            this.form.controls.characterCard.patchValue({ data: jsonData });
-        }
-        else {
-            this.toastService.error({
-                title: 'Algo salió mal :/',
-                subtitle: 'La información no pudo ser extraída correcamente, pero no te preocupes, puedes intentar de nuevo',
-            });
-        }
-        this.isGenerating.set(false);
     }
     async generateMissingData() {
         this.entityCommunicationService.completeAgentCard(this.entityId());
@@ -5306,7 +6104,7 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.form.controls.voiceCloning.patchValue({ sample: event });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCAgentCardFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts) {\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled", "metadata"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSave: "onSave", onGoDetails: "onGoDetails", onTranslate: "onTranslate" }, providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts) {\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled", "metadata"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
             type: Component,
@@ -5335,7 +6133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         DcLearnableFormComponent,
                         SimpleUploaderComponent,
                         TextareaModule,
-                    ], template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts) {\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
+                    ], template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" style=\"border: 1px dashed #0c138e1f; padding: 4px; border-radius: 15px\">\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n          <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n          <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"form.controls.conversationSettings\"\n          [textEngineOptions]=\"textEngineOptions\"\n          [conversationOptions]=\"conversationOptions\"\n          [voiceTTSOptions]=\"voiceTTSOptions\">\n        </dc-conversation-settings-form>\n\n        <details>\n          <summary>Meta Information</summary>\n          <div formGroupName=\"metaApp\" class=\"group\">\n            <h3>Meta Information <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n            <div class=\"form-field\">\n              <label for=\"authorId\">Author ID <span pTooltip=\"Unique identifier for the conversation author\">\u2139\uFE0F</span></label>\n              <input pInputText id=\"authorId\" type=\"text\" formControlName=\"authorId\" />\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"authorEmail\">Author Email \u2139\uFE0F</label>\n              <input pInputText id=\"authorEmail\" type=\"email\" formControlName=\"authorEmail\" />\n              @if (form.get('metaApp.authorEmail')?.errors?.['email'] && form.get('metaApp.authorEmail')?.touched) {\n              <div class=\"error\"> Please enter a valid email address </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n              >\n              <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts) {\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        <details>\n          <summary>Clonaci\u00F3n de voz</summary>\n          <div class=\"group\" formGroupName=\"voiceCloning\">\n            <h4>Clonaci\u00F3n de voz de herramientas</h4>\n            <div class=\"form-field\">\n              <label for=\"transcription\">Transcription</label>\n              <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <!-- <p-button label=\"Upload Audio Sample\" icon=\"pi pi-upload\" (onClick)=\"uploadAudioSample()\"></p-button> -->\n              <!-- Display audio sample info if available -->\n              <dc-simple-uploader\n                buttonLabel=\"Subir audio\"\n                [storagePath]=\"'conversation-cards/' + entityId()\"\n                (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n              @if(form.get('voiceCloning.sample').value?.url){\n              <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n              }\n            </div>\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group rounded-lg shadow-lg\">\n          <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n        </div>\n        }\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media (max-width: 768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
         }] });
 
 class TruncatePipe {
@@ -5377,6 +6175,8 @@ class AgentCardUI {
             { label: 'Clonar', icon: 'pi pi-copy', command: () => this.eventCard(EventCard.Clone) },
             { label: 'Delete', icon: 'pi pi-trash', title: 'delete', severity: 'danger', command: () => this.eventCard(EventCard.Delete) },
         ];
+        this.finalDescription = signal('', ...(ngDevMode ? [{ debugName: "finalDescription" }] : []));
+        this.name = signal('', ...(ngDevMode ? [{ debugName: "name" }] : []));
         this.card = input(undefined, ...(ngDevMode ? [{ debugName: "card" }] : []));
         this.showOptions = input(true, ...(ngDevMode ? [{ debugName: "showOptions" }] : []));
         this.onAction = output();
@@ -5386,10 +6186,20 @@ class AgentCardUI {
         });
     }
     ngOnInit() {
-        const description = this.card()?.characterCard?.data?.description;
-        if (description) {
-            // this.card()?.characterCard?.data?.description = description?.replace(/{{char}}/g, name);
+        let description = '';
+        const baseLang = this.userService.getBaseLanguage();
+        if (this.card()?.characterCard?.data?.langTranslation?.[baseLang]) {
+            const cardTranslation = this.card()?.characterCard?.data?.langTranslation[baseLang];
+            console.log(cardTranslation);
+            description = cardTranslation?.hook || this.card()?.description || this.card()?.characterCard?.data?.creator_notes || '';
+            this.name.set(this.card()?.characterCard?.data?.name);
         }
+        else {
+            description = this.card()?.characterCard?.data?.hook || this.card()?.characterCard?.data?.creator_notes || this.card()?.description || '';
+            this.name.set(this.card()?.name || this.card()?.title);
+        }
+        description = description?.replace(/{{char}}/g, this.card()?.name).replace(/{{user}}/g, this.userService.userName());
+        this.finalDescription.set(description);
     }
     eventCard(eventType) {
         this.onAction.emit({ action: eventType, item: this.card() });
@@ -5403,11 +6213,11 @@ class AgentCardUI {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AgentCardUI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AgentCardUI, isStandalone: true, selector: "dc-agent-card-ui", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(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      [tooltipOptions]=\"{ tooltipPosition: 'top' }\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/defaults/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"eventCard(eventType.Select)\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ card()?.name || card()?.title }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card()?.description || card()?.characterCard?.data?.creator_notes | truncate : 200\"></span>\n    </p>\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      @if(isTaken()){\n      <p-tag icon=\"pi pi-check-circle\" severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n      } @if(userService.isAdmin()){\n\n      <p-tag icon=\"pi pi-eye\" severity=\"secondary\" [value]=\"card()?.manageable?.status || 'Sin estado'\" [rounded]=\"true\" />\n      }\n    </div>\n\n    <p-button\n      (click)=\"eventCard(eventType.Select); $event.stopPropagation()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$6.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$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AgentCardUI, isStandalone: true, selector: "dc-agent-card-ui", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(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      [tooltipOptions]=\"{ tooltipPosition: 'top' }\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/defaults/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"eventCard(eventType.Select)\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ name() }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"finalDescription() | truncate : 200\"></span>\n    </p>\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      @if(isTaken()){\n      <p-tag icon=\"pi pi-check-circle\" severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n      } @if(userService.isAdmin()){\n\n      <p-tag icon=\"pi pi-eye\" severity=\"secondary\" [value]=\"card()?.manageable?.status || 'Sin estado'\" [rounded]=\"true\" />\n      }\n    </div>\n\n    <p-button\n      (click)=\"eventCard(eventType.Select); $event.stopPropagation()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$7.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$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$3.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AgentCardUI, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-ui', imports: [PopoverModule, TruncatePipe, ButtonModule, SpeedDialModule, CardModule, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [tooltipOptions]=\"{ tooltipPosition: 'top' }\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/defaults/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"eventCard(eventType.Select)\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ card()?.name || card()?.title }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card()?.description || card()?.characterCard?.data?.creator_notes | truncate : 200\"></span>\n    </p>\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      @if(isTaken()){\n      <p-tag icon=\"pi pi-check-circle\" severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n      } @if(userService.isAdmin()){\n\n      <p-tag icon=\"pi pi-eye\" severity=\"secondary\" [value]=\"card()?.manageable?.status || 'Sin estado'\" [rounded]=\"true\" />\n      }\n    </div>\n\n    <p-button\n      (click)=\"eventCard(eventType.Select); $event.stopPropagation()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"] }]
+            args: [{ selector: 'dc-agent-card-ui', imports: [PopoverModule, TruncatePipe, ButtonModule, SpeedDialModule, CardModule, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [tooltipOptions]=\"{ tooltipPosition: 'top' }\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/defaults/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"eventCard(eventType.Select)\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ name() }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"finalDescription() | truncate : 200\"></span>\n    </p>\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      @if(isTaken()){\n      <p-tag icon=\"pi pi-check-circle\" severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n      } @if(userService.isAdmin()){\n\n      <p-tag icon=\"pi pi-eye\" severity=\"secondary\" [value]=\"card()?.manageable?.status || 'Sin estado'\" [rounded]=\"true\" />\n      }\n    </div>\n\n    <p-button\n      (click)=\"eventCard(eventType.Select); $event.stopPropagation()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"] }]
         }], ctorParameters: () => [] });
 
 // This component contains a really avanced strategy to dinamically render Conversation Cards Details so every app can implement it with their own Style and Behavior
@@ -5436,17 +6246,14 @@ class AgentCardListComponent extends EntityBaseListComponent {
         this.filterConfig.returnProps = {
             _id: 1,
             name: 1,
-            title: 1,
-            assets: 1,
             description: 1,
-            'characterCard.data.description': 1,
+            'assets.image': 1,
             'characterCard.data.name': 1,
             'characterCard.data.creator_notes': 1,
+            'characterCard.data.hook': 1,
             manageable: 1,
         };
         this.agentCardsMasterStateService.getUserState();
-        // this.filterConfig.seed = this.entityCommunicationService.randomSeed;
-        // console.log(this.filterConfig.seed);
     }
     getCustomButtons(item) {
         if (this.customGetButtons()) {
@@ -5553,24 +6360,35 @@ class DcAgentCardDetailsComponent {
         this.agentCardService = inject(CONVERSATION_AI_TOKEN);
         this.route = inject(ActivatedRoute);
         this.toastService = inject(TOAST_ALERTS_TOKEN);
+        this.chatMonitorService = inject(ChatMonitorService);
+        this.userService = inject(UserService);
         this.agentCardId = '';
         this.onStartConversation = output();
         this.agentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "agentCard" }] : []));
+        this.currentMotionUrl = signal(undefined, ...(ngDevMode ? [{ debugName: "currentMotionUrl" }] : []));
         this.showInfoLayer = signal(false, ...(ngDevMode ? [{ debugName: "showInfoLayer" }] : []));
-        this.mediaType = computed(() => {
+        this.isVideoReady = signal(false, ...(ngDevMode ? [{ debugName: "isVideoReady" }] : []));
+        this.isIntroPlaying = signal(false, ...(ngDevMode ? [{ debugName: "isIntroPlaying" }] : []));
+        effect(() => {
+            if (this.isIntroPlaying())
+                return;
+            const mood = this.chatMonitorService.currentMood();
             const card = this.agentCard();
-            if (card?.assets?.motion?.url) {
-                return 'video';
+            if (mood && card?.assets?.motions) {
+                const currentMood = mood[0];
+                const motion = card.assets.motions.find((m) => m.metadata?.moodState === currentMood);
+                if (motion?.url !== this.currentMotionUrl()) {
+                    this.isVideoReady.set(false);
+                    this.currentMotionUrl.set(motion.url);
+                }
             }
-            return 'image';
-        }, ...(ngDevMode ? [{ debugName: "mediaType" }] : []));
-        this.mediaUrl = computed(() => {
-            const card = this.agentCard();
-            if (this.mediaType() === 'video') {
-                return card?.assets?.motion?.url;
+        });
+        effect(() => {
+            const isConversationActive = this.chatMonitorService.isConversationActive();
+            if (isConversationActive) {
+                this.showInfoLayer.set(false);
             }
-            return card?.assets?.image?.url || 'assets/defaults/images/default_conversation_card.webp';
-        }, ...(ngDevMode ? [{ debugName: "mediaUrl" }] : []));
+        });
     }
     async ngOnInit() {
         const id = this.route.snapshot.paramMap.get('id');
@@ -5590,21 +6408,98 @@ class DcAgentCardDetailsComponent {
             card.conversationSettings = {};
         }
         this.agentCard.set(card);
+        if (card.assets?.motion?.url) {
+            this.isVideoReady.set(false);
+            this.currentMotionUrl.set(card.assets.motion.url);
+        }
+        else {
+            this.currentMotionUrl.set(undefined);
+        }
+    }
+    transformToLanguage(agentCard, targetLang) {
+        const translation = agentCard.characterCard?.data?.langTranslation?.[targetLang];
+        const cardTranslated = { ...agentCard };
+        cardTranslated.characterCard.data = { ...agentCard.characterCard?.data, ...translation };
+        cardTranslated.lang = targetLang;
+        console.log('cambiando idioma', agentCard.lang);
+        const locale = LANGUAGES[targetLang].defaultLocale;
+        if (!locale)
+            return cardTranslated;
+        const transformedMainVoice = this._transformVoice(agentCard.conversationSettings.mainVoice?.voice, locale);
+        if (transformedMainVoice) {
+            agentCard.conversationSettings.mainVoice.voice = transformedMainVoice;
+        }
+        const transformedSecondaryVoice = this._transformVoice(agentCard.conversationSettings.secondaryVoice?.voice, locale);
+        if (transformedSecondaryVoice) {
+            agentCard.conversationSettings.secondaryVoice.voice = transformedSecondaryVoice;
+        }
+        return cardTranslated;
+    }
+    _transformVoice(voice, locale) {
+        if (!voice)
+            return undefined;
+        const voiceParts = voice.split('-');
+        const newVoiceParts = voiceParts.slice(2);
+        return [locale.replace('_', '-'), ...newVoiceParts].join('-');
     }
     startConversation() {
-        this.onStartConversation.emit(this.agentCard());
+        const introMotion = this.agentCard()?.assets?.motions?.find((m) => m.metadata?.event === 'intro');
+        if (introMotion?.url) {
+            this.isIntroPlaying.set(true);
+            this.isVideoReady.set(false);
+            this.currentMotionUrl.set(introMotion.url);
+            if (this.videoPlayer?.nativeElement) {
+                this.videoPlayer.nativeElement.loop = false;
+            }
+        }
+        else {
+            this.currentMotionUrl.set(this.agentCard()?.assets?.motion?.url);
+        }
+        const targetLang = this.userService.getTargetLanguage();
+        const translation = this.agentCard()?.characterCard?.data?.langTranslation?.[targetLang];
+        if (this.agentCard()?.lang === targetLang) {
+            this.onStartConversation.emit(this.agentCard());
+        }
+        else if (translation) {
+            const transformedCard = this.transformToLanguage(this.agentCard(), targetLang);
+            this.onStartConversation.emit(transformedCard);
+        }
+        else {
+            this.onStartConversation.emit(this.agentCard());
+        }
     }
     toggleInfoLayer() {
         this.showInfoLayer.update((value) => !value);
     }
+    onVideoReady() {
+        this.isVideoReady.set(true);
+    }
+    onIntroVideoEnd() {
+        if (this.isIntroPlaying()) {
+            this.isIntroPlaying.set(false);
+            this.isVideoReady.set(false);
+            this.currentMotionUrl.set(this.agentCard()?.assets?.motion?.url);
+            if (this.videoPlayer?.nativeElement) {
+                this.videoPlayer.nativeElement.loop = true;
+            }
+        }
+        else {
+            if (this.videoPlayer?.nativeElement) {
+                this.videoPlayer.nativeElement.play();
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      @switch (mediaType()) { @case ('video') {\n      <video class=\"card-image\" [src]=\"mediaUrl()\" autoplay loop muted playsinline></video>\n      } @case ('image') {\n      <img class=\"card-image\" [src]=\"mediaUrl()\" alt=\"\" />\n      } }\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <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", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" [hidden]=\"isVideoReady()\" />\n      @if(currentMotionUrl()) {\n      <video\n        #videoPlayer\n        class=\"card-image\"\n        [src]=\"currentMotionUrl()\"\n        autoplay\n        muted\n        playsinline\n        (loadeddata)=\"onVideoReady()\"\n        [hidden]=\"!isVideoReady()\"\n        (ended)=\"onIntroVideoEnd()\"></video>\n      }\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      @if(!chatMonitorService.isConversationActive()) {\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n      }\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.title }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      @switch (mediaType()) { @case ('video') {\n      <video class=\"card-image\" [src]=\"mediaUrl()\" autoplay loop muted playsinline></video>\n      } @case ('image') {\n      <img class=\"card-image\" [src]=\"mediaUrl()\" alt=\"\" />\n      } }\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.title }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
-        }], propDecorators: { agentCardId: [{
+            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" [hidden]=\"isVideoReady()\" />\n      @if(currentMotionUrl()) {\n      <video\n        #videoPlayer\n        class=\"card-image\"\n        [src]=\"currentMotionUrl()\"\n        autoplay\n        muted\n        playsinline\n        (loadeddata)=\"onVideoReady()\"\n        [hidden]=\"!isVideoReady()\"\n        (ended)=\"onIntroVideoEnd()\"></video>\n      }\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      @if(!chatMonitorService.isConversationActive()) {\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n      }\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard()?.title }}</strong></h1\n          >\n          <p>{{ agentCard()?.characterCard?.data?.name }}</p>\n\n          @if (agentCard()?.characterCard?.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard()?.characterCard?.data?.scenario | parseCard : agentCard() }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { agentCardId: [{
                 type: Input
+            }], videoPlayer: [{
+                type: ViewChild,
+                args: ['videoPlayer']
             }] } });
 
 var GenerationType;
@@ -5644,7 +6539,6 @@ class CardsCreatorComponent {
         this.result.set(null);
         try {
             let response;
-            debugger;
             switch (options.type) {
                 case GenerationType.GenerateConversationCard:
                     // response = await this.agentCardsGenerationService.generateConversationCard(options);
@@ -5720,7 +6614,7 @@ class CardsCreatorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CardsCreatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CardsCreatorComponent, isStandalone: true, selector: "app-cards-creator", ngImport: i0, template: "<div>\n  <h2 class=\"text-2xl font-bold mb-4\">Card Generation</h2>\n  <p-message severity=\"secondary\"\n    >Paso 1: Genearar una o varias tarjetas vacias con solo la idea, estas tiene estatus de pending. no lo cambies ser\u00E1 necesario en el paso 2.\n  </p-message>\n\n  <div class=\"grid\">\n    <div class=\"col-12\">\n      <form [formGroup]=\"cardsForm\" (ngSubmit)=\"generateCards()\">\n        <div class=\"p-panel p-4\">\n          <h3 class=\"text-xl font-semibold mb-3\">Generate Cards</h3>\n          <p-message severity=\"info\">Generate one or more cards with an idea. Cards will be created with a 'pending' status.</p-message>\n\n          <div class=\"field mt-4\">\n            <label for=\"idea\">Idea</label>\n            <input id=\"idea\" type=\"text\" pInputText formControlName=\"idea\" placeholder=\"e.g., 'Ordering food at a restaurant'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"form-field mt-4\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"langCode\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"\n              styleClass=\"w-full\"></p-select>\n          </div>\n\n          <div class=\"field mt-4\">\n            <label for=\"num-cards\">Number of Cards</label>\n            <input id=\"num-cards\" type=\"number\" pInputText formControlName=\"numCards\" placeholder=\"e.g., '10'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"flex flex-wrap gap-4 mt-4\">\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"autosave\" inputId=\"autosave-switch\"></p-toggleSwitch>\n              <label for=\"autosave-switch\" class=\"ml-2\"> Auto-save?</label>\n            </div>\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"doNotRepeat\" inputId=\"repeat-switch\"></p-toggleSwitch>\n              <label for=\"repeat-switch\" class=\"ml-2\"> Do not repeat topics?</label>\n            </div>\n          </div>\n\n          <div class=\"mt-4\">\n            <p-button label=\"Generate Cards\" icon=\"pi pi-bolt\" type=\"submit\" [loading]=\"loading()\" [disabled]=\"cardsForm.invalid\"></p-button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <p-divider align=\"center\" styleClass=\"my-5\">\n    <span class=\"p-tag\">Maintenance</span>\n  </p-divider>\n\n  <!-- Maintenance Section -->\n  <div class=\"grid\">\n    <!-- Card Specific Maintenance -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Card Specific Maintenance</h3>\n        <div class=\"field\">\n          <label for=\"cardId\">Card ID</label>\n          <input\n            id=\"cardId\"\n            type=\"text\"\n            pInputText\n            [value]=\"cardId()\"\n            (input)=\"cardId.set($any($event.target).value)\"\n            placeholder=\"Enter Card ID\"\n            class=\"w-full\" />\n        </div>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Generate Image\" icon=\"pi pi-image\" (onClick)=\"generateImageForCard()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Missing Data\"\n            icon=\"pi pi-database\"\n            (onClick)=\"generateMissingData()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Batch Operations -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Batch Operations</h3>\n        <p>Run maintenance tasks on all pending cards.</p>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Complete Pending Cards\" icon=\"pi pi-check-square\" (onClick)=\"completePendingCards()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Pending Images\"\n            icon=\"pi pi-images\"\n            (onClick)=\"generatePendingImages()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Result Section -->\n  @if (result()) {\n  <div class=\"col-12 mt-4\">\n    <div class=\"p-panel p-4\">\n      <h3 class=\"text-xl font-semibold mb-3\">Result</h3>\n      <pre>{{ result() | json }}</pre>\n    </div>\n  </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i5$2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CardsCreatorComponent, isStandalone: true, selector: "app-cards-creator", ngImport: i0, template: "<div>\n  <h2 class=\"text-2xl font-bold mb-4\">Card Generation</h2>\n  <p-message severity=\"secondary\"\n    >Paso 1: Genearar una o varias tarjetas vacias con solo la idea, estas tiene estatus de pending. no lo cambies ser\u00E1 necesario en el paso 2.\n  </p-message>\n\n  <div class=\"grid\">\n    <div class=\"col-12\">\n      <form [formGroup]=\"cardsForm\" (ngSubmit)=\"generateCards()\">\n        <div class=\"p-panel p-4\">\n          <h3 class=\"text-xl font-semibold mb-3\">Generate Cards</h3>\n          <p-message severity=\"info\">Generate one or more cards with an idea. Cards will be created with a 'pending' status.</p-message>\n\n          <div class=\"field mt-4\">\n            <label for=\"idea\">Idea</label>\n            <input id=\"idea\" type=\"text\" pInputText formControlName=\"idea\" placeholder=\"e.g., 'Ordering food at a restaurant'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"form-field mt-4\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"langCode\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"\n              styleClass=\"w-full\"></p-select>\n          </div>\n\n          <div class=\"field mt-4\">\n            <label for=\"num-cards\">Number of Cards</label>\n            <input id=\"num-cards\" type=\"number\" pInputText formControlName=\"numCards\" placeholder=\"e.g., '10'\" class=\"w-full\" />\n          </div>\n\n          <div class=\"flex flex-wrap gap-4 mt-4\">\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"autosave\" inputId=\"autosave-switch\"></p-toggleSwitch>\n              <label for=\"autosave-switch\" class=\"ml-2\"> Auto-save?</label>\n            </div>\n            <div class=\"flex align-items-center\">\n              <p-toggleSwitch formControlName=\"doNotRepeat\" inputId=\"repeat-switch\"></p-toggleSwitch>\n              <label for=\"repeat-switch\" class=\"ml-2\"> Do not repeat topics?</label>\n            </div>\n          </div>\n\n          <div class=\"mt-4\">\n            <p-button label=\"Generate Cards\" icon=\"pi pi-bolt\" type=\"submit\" [loading]=\"loading()\" [disabled]=\"cardsForm.invalid\"></p-button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <p-divider align=\"center\" styleClass=\"my-5\">\n    <span class=\"p-tag\">Maintenance</span>\n  </p-divider>\n\n  <!-- Maintenance Section -->\n  <div class=\"grid\">\n    <!-- Card Specific Maintenance -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Card Specific Maintenance</h3>\n        <div class=\"field\">\n          <label for=\"cardId\">Card ID</label>\n          <input\n            id=\"cardId\"\n            type=\"text\"\n            pInputText\n            [value]=\"cardId()\"\n            (input)=\"cardId.set($any($event.target).value)\"\n            placeholder=\"Enter Card ID\"\n            class=\"w-full\" />\n        </div>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Generate Image\" icon=\"pi pi-image\" (onClick)=\"generateImageForCard()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Missing Data\"\n            icon=\"pi pi-database\"\n            (onClick)=\"generateMissingData()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Batch Operations -->\n    <div class=\"col-12 md:col-6\">\n      <div class=\"p-panel p-4\">\n        <h3 class=\"text-xl font-semibold mb-3\">Batch Operations</h3>\n        <p>Run maintenance tasks on all pending cards.</p>\n        <div class=\"mt-4 flex gap-2\">\n          <p-button label=\"Complete Pending Cards\" icon=\"pi pi-check-square\" (onClick)=\"completePendingCards()\" [loading]=\"loading()\"></p-button>\n          <p-button\n            label=\"Generate Pending Images\"\n            icon=\"pi pi-images\"\n            (onClick)=\"generatePendingImages()\"\n            [loading]=\"loading()\"\n            styleClass=\"p-button-secondary\"></p-button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Result Section -->\n  @if (result()) {\n  <div class=\"col-12 mt-4\">\n    <div class=\"p-panel p-4\">\n      <h3 class=\"text-xl font-semibold mb-3\">Result</h3>\n      <pre>{{ result() | json }}</pre>\n    </div>\n  </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$1.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i6.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CardsCreatorComponent, decorators: [{
             type: Component,
@@ -5736,5 +6630,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AGENT_CARDS_STATE_SERVICE, AIGenerationService, AgentCardListComponent, AgentCardUI, AgentCardsGenerationService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, CardsCreatorComponent, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardDetailsComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EAgentType, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, MOOD_STATE_PROMPT, MessageContent, MessageContentDisplayer, MessagesStateService, ModelSelectorComponent, PopupService, SystemPromptType, TextEngineOptions, TextEngines, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, markdownToHtml, matchTranscription, provideAgentCardService, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
+export { ACCDataGenerationComponent, AGENT_CARDS_STATE_SERVICE, AIGenerationService, AgentCardListComponent, AgentCardUI, AgentCardsGenerationService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, CardsCreatorComponent, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardDetailsComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EAgentType, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, MessageContent, MessageContentDisplayer, MessagesStateService, ModelSelectorComponent, PopupService, SystemPromptType, TextEngineOptions, TextEngines, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, getMoodStatePrompt, markdownToHtml, matchTranscription, provideAgentCardService, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map