@dataclouder/ngx-agent-cards 0.1.32 → 0.1.34

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

@@ -1,15 +1,19 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, RendererFactory2, ApplicationRef, Injector, EnvironmentInjector, signal, createComponent, ChangeDetectionStrategy, Component, input, output, Input, effect, ViewChild, computed, DestroyRef, ElementRef, Pipe, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
-import { MoodStateOptions, formatCamelCaseString, LANGUAGES, EntityCommunicationService, TOAST_ALERTS_TOKEN, LoadingBarService, EModelQuality, AudioSpeed as AudioSpeed$1, AudioSpeedReverse, getSupportedLanguageOptions, EntityBaseFormComponent, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
+import { InjectionToken, Injectable, inject, signal, computed, RendererFactory2, ApplicationRef, Injector, EnvironmentInjector, createComponent, ChangeDetectionStrategy, Component, input, output, Input, effect, ViewChild, DestroyRef, ElementRef, Pipe, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
+import { MoodStateOptions, formatCamelCaseString, LANGUAGES, EntityCommunicationService, AudioSpeed as AudioSpeed$1, TOAST_ALERTS_TOKEN, LoadingBarService, EModelQuality, AudioSpeedReverse, getSupportedLanguageOptions, EntityBaseFormComponent, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, EmptyStateComponent } from '@dataclouder/ngx-core';
 import * as i1 from '@angular/common';
-import { DOCUMENT, CommonModule, DatePipe, DecimalPipe } from '@angular/common';
+import { DOCUMENT, CommonModule, DecimalPipe, CurrencyPipe, DatePipe } from '@angular/common';
 import { nanoid } from 'nanoid';
 import { UserService } from '@dataclouder/ngx-users';
-import * as i2$1 from 'primeng/progressbar';
-import { ProgressBarModule } from 'primeng/progressbar';
+import { TtsService, NgxVertexService, VoiceSelectorComponent } from '@dataclouder/ngx-vertex';
+import { DynamicDialogRef, DynamicDialogConfig, DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
 import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import { DynamicDialogRef, DynamicDialogConfig, DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
+import * as i2$2 from 'primeng/progressbar';
+import { ProgressBarModule } from 'primeng/progressbar';
+import * as i2$1 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import * as i3 from 'primeng/api';
 import * as i1$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormBuilder, FormsModule, FormArray, FormGroup } from '@angular/forms';
 import { DCMicComponent, MicVadComponent } from '@dataclouder/ngx-mic';
@@ -25,33 +29,32 @@ import * as i4$1 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import * as i1$3 from 'primeng/slider';
 import { SliderModule } from 'primeng/slider';
-import * as i3 from 'primeng/radiobutton';
+import * as i3$2 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { RatingModule } from 'primeng/rating';
-import { TableModule } from 'primeng/table';
 import { BadgeModule } from 'primeng/badge';
-import * as i5$1 from 'primeng/tooltip';
+import * as i5 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i5 from 'primeng/select';
+import * as i3$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i4$2 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { PortalModule } from '@angular/cdk/portal';
-import * as i3$2 from 'primeng/inputtext';
+import * as i3$4 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import { MessageModule } from 'primeng/message';
 import { ResolutionType, AspectType, AssetsLoaderComponent } from '@dataclouder/ngx-cloud-storage';
-import * as i5$2 from 'primeng/dialog';
+import * as i5$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i8 from 'primeng/inputnumber';
+import * as i7 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { FileUploadModule } from 'primeng/fileupload';
 import { DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as i2$2 from 'primeng/card';
+import * as i2$3 from 'primeng/card';
 import { CardModule } from 'primeng/card';
-import * as i3$1 from 'primeng/dropdown';
+import * as i3$3 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import { ChipModule } from 'primeng/chip';
 import * as i6 from 'primeng/togglebutton';
@@ -60,12 +63,10 @@ import * as i4$4 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
 import * as i6$1 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
-import { VoiceSelectorComponent } from '@dataclouder/ngx-vertex';
-import * as i3$3 from 'primeng/inputgroup';
+import * as i3$5 from 'primeng/inputgroup';
 import { InputGroupModule } from 'primeng/inputgroup';
 import * as i4$3 from 'primeng/inputgroupaddon';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
-import * as i2$3 from 'primeng/api';
 import * as i1$4 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i2$4 from 'primeng/speeddial';
@@ -116,6 +117,12 @@ var EntityThen;
 (function (EntityThen) {
     EntityThen["ChangePrompt"] = "changePrompt";
 })(EntityThen || (EntityThen = {}));
+var EAgentType;
+(function (EAgentType) {
+    EAgentType[EAgentType["None"] = null] = "None";
+    EAgentType["Social"] = "social";
+    EAgentType["Character"] = "character";
+})(EAgentType || (EAgentType = {}));
 // Creo que esta @Deprecated porque feedback ahora es text.
 const EvalResultStringDefinition = `
 interface SimpleEvalResult {
@@ -447,6 +454,18 @@ function extractJsonFromResponse(content) {
     }
 }
 
+const USER_DATA_EXCHANGE = new InjectionToken('user.data.exchange');
+function provideUserDataExchange(serviceImplementation) {
+    return [
+        {
+            provide: USER_DATA_EXCHANGE,
+            useExisting: serviceImplementation,
+        },
+    ];
+}
+class UserDataExchangeAbstractService {
+}
+
 const getMoodStateLabelsAsString = () => {
     return MoodStateOptions.map((option) => option.value).join('\n');
 };
@@ -505,6 +524,217 @@ var SystemPromptType;
     SystemPromptType["JailBreak"] = "jailBreak";
 })(SystemPromptType || (SystemPromptType = {}));
 
+function markdownToHtml(markdown) {
+    const htmlArray = [];
+    const lines = markdown.split('\n');
+    for (const line of lines) {
+        let currentText = '';
+        let prevChar = '';
+        for (let i = 0; i < line.length; i++) {
+            const char = line[i];
+            if (char === '*' && prevChar !== '\\') {
+                if (currentText) {
+                    htmlArray.push(currentText);
+                    currentText = '';
+                }
+                const endIndex = line.indexOf('*', i + 1);
+                if (endIndex !== -1) {
+                    const text = line.slice(i + 1, endIndex);
+                    htmlArray.push(`<em>${text}</em>`);
+                    i = endIndex;
+                }
+            }
+            else if (char === '_' && prevChar !== '\\') {
+                if (currentText) {
+                    htmlArray.push(currentText);
+                    currentText = '';
+                }
+                const endIndex = line.indexOf('_', i + 1);
+                if (endIndex !== -1) {
+                    const text = line.slice(i + 1, endIndex);
+                    htmlArray.push(`<em>${text}</em>`);
+                    i = endIndex;
+                }
+            }
+            else if (char === '`' && prevChar !== '\\') {
+                if (currentText) {
+                    htmlArray.push(currentText);
+                    currentText = '';
+                }
+                const endIndex = line.indexOf('`', i + 1);
+                if (endIndex !== -1) {
+                    const text = line.slice(i + 1, endIndex);
+                    htmlArray.push(`<code>${text}</code>`);
+                    i = endIndex;
+                }
+            }
+            else if (char === '[') {
+                if (currentText) {
+                    htmlArray.push(currentText);
+                    currentText = '';
+                }
+                const endIndex = line.indexOf(']', i + 1);
+                if (endIndex !== -1) {
+                    const text = line.slice(i + 1, endIndex);
+                    const linkStart = line.indexOf('(', endIndex);
+                    const linkEnd = line.indexOf(')', linkStart + 1);
+                    if (linkStart !== -1 && linkEnd !== -1) {
+                        const link = line.slice(linkStart + 1, linkEnd);
+                        htmlArray.push(`<a href="${link}">${text}</a>`);
+                        i = linkEnd;
+                    }
+                    else {
+                        currentText += `[${text}]`;
+                    }
+                }
+            }
+            else if (char === '#') {
+                if (currentText) {
+                    htmlArray.push(currentText);
+                    currentText = '';
+                }
+                const headerLevel = line.indexOf(' ', i);
+                const text = line.slice(headerLevel + 1);
+                const level = headerLevel - i;
+                htmlArray.push(`<h${level}>${text}</h${level}>`);
+                i = line.length;
+            }
+            else {
+                currentText += char;
+            }
+            prevChar = char;
+        }
+        if (currentText) {
+            htmlArray.push(currentText);
+        }
+    }
+    return htmlArray;
+}
+function extractTextWithAsteriskCount(markdown) {
+    const regex = /(\*{1,3})(.*?)\1|([^*]+)/g;
+    let match;
+    const extractedText = [];
+    while ((match = regex.exec(markdown)) !== null) {
+        if (match[2]) {
+            // Text enclosed in asterisks
+            extractedText.push({
+                text: match[2].trim(),
+                tag: match[1], // Capture the asterisks used
+            });
+        }
+        else {
+            // Text not enclosed in asterisks
+            extractedText.push({
+                text: match[3].trim(),
+                tag: '', // No asterisks
+            });
+        }
+    }
+    return extractedText.filter((element) => element.text);
+}
+function convertToHTML(text) {
+    const markdownArray = extractTextWithAsteriskCount(text);
+    const htmlArray = [];
+    for (const element of markdownArray) {
+        let content = '';
+        let tag = '';
+        switch (element.tag) {
+            case '*':
+                content = `<em>${element.text}</em>`;
+                tag = 'em';
+                break;
+            case '**':
+                content = `<strong>${element.text}</strong>`;
+                tag = 'strong';
+                break;
+            case '***':
+                content = `<em><strong>${element.text}</strong></em>`;
+                tag = 'em_strong';
+                break;
+            default:
+                content = `<p>${element.text}</p>`;
+                tag = 'p';
+        }
+        htmlArray.push({ content, tag, text: element.text });
+    }
+    return htmlArray;
+}
+function markdownToHTML$1(markdownText) {
+    // Convert italics-bold (***text***)
+    let htmlText = markdownText.replace(/\*\*\*(.+?)\*\*\*/g, '<em><strong>$1</strong></em>');
+    // Convert bold (**text**)
+    htmlText = htmlText.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    // Convert italics (*text*)
+    htmlText = htmlText.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    // Convert text enclosed by double quotes ("text")
+    // htmlText = htmlText.replace(/"(.+?)"/g, '<cite>$1</cite>');
+    return htmlText;
+}
+function markdownBasicToHTML(markdownText) {
+    // Convert italics-bold (***text***)
+    let htmlText = markdownText.replace(/\*\*\*(.+?)\*\*\*/g, '<div><em><strong>$1</strong></em></div>');
+    // Convert bold (**text**)
+    htmlText = htmlText.replace(/\*\*(.+?)\*\*/g, '<div><strong>$1</strong></div>');
+    // Convert italics (*text*)
+    htmlText = htmlText.replace(/\*(.+?)\*/g, '<div><em>$1</em></div>');
+    // Convert text enclosed by double quotes ("text")
+    htmlText = htmlText.replace(/"(.+?)"/g, '<cite>$1</cite>');
+    return htmlText;
+}
+// TODO remove functinos i dont use
+function markdownToHTML2(markdown) {
+    const lines = markdown.split('\n\n');
+    const result = [];
+    for (const line of lines) {
+        if (line.startsWith('*') && line.endsWith('*')) {
+            // Emphasis
+            const text = line.slice(1, -1);
+            result.push({ content: `<em>${text}</em>`, tag: 'em', text });
+        }
+        else if (line.startsWith('**') && line.endsWith('**')) {
+            // Strong emphasis
+            const text = line.slice(2, -2);
+            result.push({ content: `<strong>${text}</strong>`, tag: 'strong', text });
+        }
+        else if (line.startsWith('***') && line.endsWith('***')) {
+            // Combined emphasis and strong
+            const text = line.slice(3, -3);
+            result.push({ content: `<strong><em>${text}</em></strong>`, tag: 'strong em', text });
+        }
+        else {
+            // Quote (handling quotes within the text)
+            const quoteText = line.replace(/"/g, ''); // Remove existing quotes
+            result.push({ content: `<q>${quoteText}</q>`, tag: 'q', text: quoteText });
+        }
+    }
+    return result;
+}
+function removeEmojisAndSpecialCharacters(text) {
+    return removeEmojis(removeSpecialCharacters(text));
+}
+function removeEmojis(text) {
+    // This regex pattern matches emoji characters
+    return text.replace(/[\u{1F000}-\u{1F6FF}|\u{1F900}-\u{1F9FF}|\u{2600}-\u{26FF}|\u{2700}-\u{27BF}|\u{1F300}-\u{1F5FF}|\u{1F680}-\u{1F6FF}|\u{1F1E0}-\u{1F1FF}|\u{1F900}-\u{1F9FF}|\u{1F100}-\u{1F1FF}|\u{1F200}-\u{1F2FF}|\u{2100}-\u{26FF}]/gu, '');
+}
+function removeAllEmojis(text) {
+    // More comprehensive regex that catches:
+    // 1. Standard emojis
+    // 2. Emoji variations and modifiers
+    // 3. Symbol characters
+    // 4. Pictographs
+    // 5. Emoticons
+    // 6. Regional indicators
+    // 7. Flags
+    return text.replace(/[\p{Emoji_Presentation}\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{E0020}-\u{E007F}\u{FE00}-\u{FE0F}\u{1F900}-\u{1F9FF}\u{1F1E6}-\u{1F1FF}]/gu, '');
+}
+function removeSpecialCharacters(inputText) {
+    // Remove special characters (*, _, [ and ])
+    if (!inputText) {
+        return '';
+    }
+    return inputText.replace(/[*_\[\]]/g, '');
+}
+
 class AudioService {
     playFinishRecordingAudio() {
         const audio = new Audio('assets/sounds/circuitbreaker.mp3');
@@ -660,18 +890,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const USER_DATA_EXCHANGE = new InjectionToken('user.data.exchange');
-function provideUserDataExchange(serviceImplementation) {
-    return [
-        {
-            provide: USER_DATA_EXCHANGE,
-            useExisting: serviceImplementation,
-        },
-    ];
-}
-class UserDataExchangeAbstractService {
-}
-
 const ROLE_PLAY = `
 Write {{char}}'s next reply in a fictional chat between {{char}} and {{user}}. Write 1 reply only in internet Role Play style, 
 
@@ -985,25 +1203,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }] });
 
-const Endpoints = {
-    // Existing
-    GenerateImage: 'api/agent-cards-generate/generate-image-card', // For completeAgentCard, generateImageForCard, generateMainImage
-    AgentChat: 'api/agent-cards/chat', // For callChatCompletion, callInstruction
-    UpdateAgentCard: 'api/agent-cards/partial-update', // For findById, getAll, save (POST/PUT), delete
-    // New
-    AgentCard: 'api/agent-cards', // For findById, getAll, save (POST/PUT), delete
-    AgentCardQuery: 'api/agent-cards/query', // For filterConversationCards, findAgentCardByTitle
-    UserCards: 'api/agent-cards/user-cards', // For findFilteredAgentCards
-    VertexTTS: 'api/vertex-adapter/tts/synthesize',
-    ListModels: 'api/agent-cards/models', // For getListModels
-    TranslateConversation: 'api/agent-cards/translate', // For translateConversation
-    TranscribeAudio: 'api/audio/transcribe/whisper', // For getAudioTranscriptions
-    // UserChatSettings: 'api/users/chat-settings', // Example for get/saveConversationUserChatSettings if not throwing error
-};
+class ConversationCostService {
+    constructor() {
+        this.usageByTagSignal = signal({});
+        this.totalInputTokens = computed(() => {
+            const usage = this.usageByTagSignal();
+            return Object.values(usage).reduce((acc, tagCost) => acc + tagCost.tokenUsage.input, 0);
+        });
+        this.totalOutputTokens = computed(() => {
+            const usage = this.usageByTagSignal();
+            return Object.values(usage).reduce((acc, tagCost) => acc + tagCost.tokenUsage.output, 0);
+        });
+        this.totalTokens = computed(() => {
+            const usage = this.usageByTagSignal();
+            return Object.values(usage).reduce((acc, tagCost) => acc + tagCost.tokenUsage.total, 0);
+        });
+        this.totalApiCalls = computed(() => {
+            const usage = this.usageByTagSignal();
+            return Object.values(usage).reduce((acc, tagCost) => acc + tagCost.apiCalls, 0);
+        });
+        this.totalInputCost = computed(() => this.totalInputTokens() * 0.0000001);
+        this.totalOutputCost = computed(() => this.totalOutputTokens() * 0.0000004);
+        this.totalCost = computed(() => this.totalInputCost() + this.totalOutputCost());
+        this.usageByTag = this.usageByTagSignal.asReadonly();
+    }
+    updateTokenUsage(tokens, tag) {
+        this.usageByTagSignal.update((currentUsage) => {
+            const newUsage = { ...currentUsage };
+            const tagUsage = newUsage[tag] ?? { tokenUsage: { input: 0, output: 0, total: 0 }, apiCalls: 0 };
+            tagUsage.tokenUsage.input += tokens.input;
+            tagUsage.tokenUsage.output += tokens.output;
+            tagUsage.tokenUsage.total += tokens.total;
+            tagUsage.apiCalls += 1;
+            newUsage[tag] = tagUsage;
+            return newUsage;
+        });
+    }
+    getCostForTag(tag) {
+        return computed(() => {
+            const tagUsage = this.usageByTagSignal()[tag];
+            if (!tagUsage) {
+                return {
+                    inputTokens: 0,
+                    outputTokens: 0,
+                    totalTokens: 0,
+                    apiCalls: 0,
+                    inputCost: 0,
+                    outputCost: 0,
+                    totalCost: 0,
+                };
+            }
+            const inputCost = tagUsage.tokenUsage.input * 0.0000001;
+            const outputCost = tagUsage.tokenUsage.output * 0.0000004;
+            return {
+                inputTokens: tagUsage.tokenUsage.input,
+                outputTokens: tagUsage.tokenUsage.output,
+                totalTokens: tagUsage.tokenUsage.total,
+                apiCalls: tagUsage.apiCalls,
+                inputCost,
+                outputCost,
+                totalCost: inputCost + outputCost,
+            };
+        });
+    }
+    reset() {
+        this.usageByTagSignal.set({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationCostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationCostService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationCostService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const Endpoints = {
+    // Existing
+    GenerateImage: 'api/agent-cards-generate/generate-image-card', // For completeAgentCard, generateImageForCard, generateMainImage
+    AgentChat: 'api/agent-cards/chat', // For callChatCompletion, callInstruction
+    UpdateAgentCard: 'api/agent-cards/partial-update', // For findById, getAll, save (POST/PUT), delete
+    // New
+    AgentCard: 'api/agent-cards', // For findById, getAll, save (POST/PUT), delete
+    AgentCardQuery: 'api/agent-cards/query', // For filterConversationCards, findAgentCardByTitle
+    UserCards: 'api/agent-cards/user-cards', // For findFilteredAgentCards
+    VertexTTS: 'api/vertex-adapter/tts/synthesize',
+    ListModels: 'api/agent-cards/models', // For getListModels
+    TranslateConversation: 'api/agent-cards/translate', // For translateConversation
+    TranscribeAudio: 'api/audio/transcribe/whisper', // For getAudioTranscriptions
+    // UserChatSettings: 'api/users/chat-settings', // Example for get/saveConversationUserChatSettings if not throwing error
+};
 // ♦️ Finish this will be the default so i dont need to create a new one everytime
 class DefaultAgentCardsService extends EntityCommunicationService {
     constructor() {
         super('agent-cards');
+        this.conversationCostService = inject(ConversationCostService);
     }
     partialUpdateAgentCard(agentCard) {
         return this.httpService.put(`${Endpoints.UpdateAgentCard}`, agentCard, 'primary');
@@ -1015,16 +1310,17 @@ class DefaultAgentCardsService extends EntityCommunicationService {
         // TODO: i need a default method to do this.
         return this.httpService.get(`${Endpoints.GenerateImage}/${idCard}`, 'primary');
     }
-    async callChatCompletion(conversation) {
+    async callChatCompletion(conversation, tag) {
         let messages = conversation.messages.map((m) => ({ content: m.content, role: m.role }));
         messages = messages.filter((m) => m.role != ChatRole.AssistantHelper);
         const conversationFiltered = { ...conversation, messages };
-        if (conversation.returnJson) {
-            return await this.httpService.post(`${Endpoints.AgentChat}?returnJson=true`, conversationFiltered, 'primary');
-        }
-        else {
-            return await this.httpService.post(`${Endpoints.AgentChat}`, conversationFiltered, 'primary');
+        const response = conversation.returnJson
+            ? await this.httpService.post(`${Endpoints.AgentChat}?returnJson=true`, conversationFiltered, 'primary')
+            : await this.httpService.post(`${Endpoints.AgentChat}`, conversationFiltered, 'primary');
+        if (response?.metadata?.tokens) {
+            this.conversationCostService.updateTokenUsage(response.metadata.tokens, tag ?? 'uncategorized');
         }
+        return response;
     }
     async filterConversationCards(filters) {
         return this.httpService.post(`${Endpoints.AgentCardQuery}`, filters, 'primary');
@@ -1045,26 +1341,25 @@ class DefaultAgentCardsService extends EntityCommunicationService {
         // HttpCoreService.delete by default returns Promise<DeletedData>.
         await this.httpService.delete(`${Endpoints.AgentCard}/${id}`, 'primary');
     }
-    async getTextAudioFile(tts) {
-        // Note: Original service in agent-cards.service.ts used 'node' as host.
-        // HttpCoreService manages hosts via its configuration or per-call parameter. Using 'primary'.
-        const httpResponse = await this.httpService.postFileAndGetBlob(`${Endpoints.VertexTTS}`, tts, 'primary');
-        const audioData = { blobUrl: '', transcription: null };
-        const transcriptionHeader = httpResponse.headers.get('transcription');
-        if (transcriptionHeader) {
-            try {
-                audioData.transcription = JSON.parse(transcriptionHeader);
-            }
-            catch (e) {
-                console.error('Failed to parse transcription header:', e, transcriptionHeader);
-                // Optionally handle or log this error more robustly
-            }
-        }
-        if (httpResponse.body) {
-            audioData.blobUrl = window.URL.createObjectURL(httpResponse.body);
-        }
-        return audioData;
-    }
+    // async getTextAudioFile(tts: TTSRequest): Promise<AudioGenerated> {
+    //   // Note: Original service in agent-cards.service.ts used 'node' as host.
+    //   // HttpCoreService manages hosts via its configuration or per-call parameter. Using 'primary'.
+    //   const httpResponse = await this.httpService.postFileAndGetBlob(`${Endpoints.VertexTTS}`, tts, 'primary');
+    //   const audioData: AudioGenerated = { blobUrl: '', transcription: null };
+    //   const transcriptionHeader = httpResponse.headers.get('transcription');
+    //   if (transcriptionHeader) {
+    //     try {
+    //       audioData.transcription = JSON.parse(transcriptionHeader);
+    //     } catch (e) {
+    //       console.error('Failed to parse transcription header:', e, transcriptionHeader);
+    //       // Optionally handle or log this error more robustly
+    //     }
+    //   }
+    //   if (httpResponse.body) {
+    //     audioData.blobUrl = window.URL.createObjectURL(httpResponse.body);
+    //   }
+    //   return audioData;
+    // }
     async getConversationUserChatSettings() {
         throw new Error('Method getConversationUserChatSettings cannot be implemented in DefaultAgentCardsService without User  or an alternative settings source.');
     }
@@ -1474,7 +1769,7 @@ class ChatMonitorService {
         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);
+        // console.log('Audio will play....', message);
         this.messageAudioWillPlay.set(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1487,79 +1782,317 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class FeedbackEvaluationComponent {
-    constructor() {
-        this.ref = inject(DynamicDialogRef);
-        this.config = inject(DynamicDialogConfig);
+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>';
+            }
+        }
+        return processedMessage;
     }
-    ngOnInit() {
-        if (this.config.data) {
-            this.evaluationData = this.config.data;
+    // Process multi-messages from markdown
+    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
+            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 voice = isItalics ? secondaryVoice : message.voice;
+            return {
+                voice,
+                content: val.content,
+                audioUrl: null,
+                audioPromise: null,
+                text: val.text,
+                tag: val.tag,
+            };
+        });
+    }
+    // Replace italics with voice tags for SSML
+    subsItalicsByTag(text, voiceId = 'it-IT-Neural2-A', tagName = 'voice') {
+        const regex = /\*(.*?)\*/g;
+        return text.replace(regex, (match, p1) => `<${tagName} name="${voiceId}">${p1}</${tagName}>`);
+    }
+    // Get appropriate voice based on settings
+    getVoice(voice_value, targetLang = 'en') {
+        if ([null, '', 'random'].includes(voice_value)) {
+            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);
+            return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
         }
         else {
-            this.evaluationData = this.getDummyEvaluationData();
+            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 || '';
+            // }
         }
     }
-    getDummyEvaluationData() {
-        return {
-            overall_score: {
-                rating: 85,
-                level: 4,
-            },
-            assessments: {
-                grammar: {
-                    score: 90,
-                    level: 5,
-                    feedback: 'Excellent grammar, with very few mistakes. Your sentence structures are complex and accurate.',
-                    suggestions: ['Review the use of subjunctive mood for hypothetical situations.'],
-                },
-                vocabulary: {
-                    score: 88,
-                    level: 4,
-                    feedback: 'You have a wide range of vocabulary and use it appropriately. You could try to incorporate more idiomatic expressions.',
-                    suggestions: ['Learn phrasal verbs related to business.', 'Practice using synonyms for common words.'],
-                },
-                communication_effectiveness: {
-                    score: 82,
-                    level: 'Advanced',
-                    feedback: 'Your communication is clear and effective. You are able to convey your ideas with precision.',
-                    suggestions: ['Work on your turn-taking skills in fast-paced conversations.'],
-                },
-                pragmatic_competence: {
-                    score: 80,
-                    level: 'Advanced',
-                    feedback: 'You show good awareness of social and cultural norms in communication.',
-                    suggestions: ['Study how humor is used in professional contexts.'],
-                },
-            },
-            conversation_analysis: {
-                dominant_register: 'formal',
-                conversation_type: 'professional',
-                key_observations: ['You maintained a professional tone throughout the conversation.', 'You used appropriate language for the context.'],
-                notable_patterns: ['Consistent use of complex sentences.', 'Tendency to use direct questions.'],
-            },
-            actionable_feedback: {
-                immediate_focus_areas: ['Using more varied intonation.'],
-                practice_recommendations: [
-                    'Record yourself speaking and listen for intonation patterns.',
-                    'Engage in role-playing scenarios that require different emotional expressions.',
-                ],
-                next_steps: ['Have a conversation with a native speaker focusing on expressing excitement and disappointment.'],
-            },
-        };
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageProcessingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageProcessingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageProcessingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+function matchTranscription(originalText, transcription) {
+    const result = [];
+    const transcriptionMap = new Map();
+    // Create a map of lowercase words to an array of their corresponding objects in transcription
+    for (const obj of transcription) {
+        const lowercaseWord = obj.word.trim().toLowerCase();
+        if (transcriptionMap.has(lowercaseWord)) {
+            transcriptionMap.get(lowercaseWord).push(obj);
+        }
+        else {
+            transcriptionMap.set(lowercaseWord, [obj]);
+        }
     }
-    closeDialog() {
-        this.ref.close();
+    // Split the original text into an array of words
+    const words = originalText.split(' ');
+    let currentTime = 0;
+    for (const word of words) {
+        const lowercaseWord = word.toLowerCase();
+        const matchedObjs = transcriptionMap.get(lowercaseWord);
+        if (matchedObjs && matchedObjs.length > 0) {
+            const matchedObj = matchedObjs.shift();
+            result.push({
+                word: word,
+                start: Number(matchedObj.start.toFixed(3)),
+                end: Number(matchedObj.end.toFixed(3)),
+            });
+            currentTime = matchedObj.end;
+        }
+        else {
+            result.push({
+                word: word,
+                start: Number(currentTime.toFixed(3)),
+                end: Number(currentTime.toFixed(3)),
+            });
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FeedbackEvaluationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: FeedbackEvaluationComponent, isStandalone: true, selector: "dc-feedback-evaluation", ngImport: i0, template: "<div class=\"feedback-container\">\n  @if (evaluationData) {\n  <h2 class=\"feedback-title\">Performance Evaluation</h2>\n\n  <div class=\"feedback-content\">\n    <div class=\"general-score\">\n      <h3>Overall Score</h3>\n      <p class=\"score\">{{ evaluationData.overall_score.rating }} / 100 (Level: {{ evaluationData.overall_score.level }})</p>\n    </div>\n\n    <div class=\"feedback-details\">\n      <h3>Detailed Assessments</h3>\n      @for (assessment of evaluationData.assessments | keyvalue; track assessment.key) {\n      <div>\n        <h4>{{ assessment.key.replace('_', ' ') | titlecase }}</h4>\n        <p>\n          <span class=\"score\">Score: {{ assessment.value.score }} / 100</span> |\n          <span class=\"level\">Level: {{ assessment.value.level }}</span>\n        </p>\n        <p class=\"comment\"><strong>Feedback:</strong> {{ assessment.value.feedback }}</p>\n        @if (assessment.value.suggestions?.length > 0) {\n        <div>\n          <strong>Suggestions:</strong>\n          <ul>\n            @for (suggestion of assessment.value.suggestions; track $index) {\n            <li>{{ suggestion }}</li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <div class=\"conversation-analysis\">\n      <h3>Conversation Analysis</h3>\n      <p><strong>Dominant Register:</strong> {{ evaluationData.conversation_analysis.dominant_register }}</p>\n      <p><strong>Conversation Type:</strong> {{ evaluationData.conversation_analysis.conversation_type }}</p>\n      @if (evaluationData.conversation_analysis.key_observations?.length > 0) {\n      <div>\n        <strong>Key Observations:</strong>\n        <ul>\n          @for (observation of evaluationData.conversation_analysis.key_observations; track $index) {\n          <li>{{ observation }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.conversation_analysis.notable_patterns?.length > 0) {\n      <div>\n        <strong>Notable Patterns:</strong>\n        <ul>\n          @for (pattern of evaluationData.conversation_analysis.notable_patterns; track $index) {\n          <li>{{ pattern }}</li>\n          }\n        </ul>\n      </div>\n      }\n    </div>\n\n    <div class=\"actionable-feedback\">\n      <h3>Actionable Feedback</h3>\n      @if (evaluationData.actionable_feedback.immediate_focus_areas?.length > 0) {\n      <div>\n        <strong>Immediate Focus Areas:</strong>\n        <ul>\n          @for (area of evaluationData.actionable_feedback.immediate_focus_areas; track $index) {\n          <li>{{ area }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.actionable_feedback.practice_recommendations?.length > 0) {\n      <div>\n        <strong>Practice Recommendations:</strong>\n        <ul>\n          @for (recommendation of evaluationData.actionable_feedback.practice_recommendations; track $index) {\n          <li>{{ recommendation }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.actionable_feedback.next_steps?.length > 0) {\n      <div>\n        <strong>Next Steps:</strong>\n        <ul>\n          @for (step of evaluationData.actionable_feedback.next_steps; track $index) {\n          <li>{{ step }}</li>\n          }\n        </ul>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class.bind=\"'feedback-footer'\">\n    <p-button label=\"Close\" (onClick)=\"closeDialog()\"></p-button>\n  </div>\n\n  } @else {\n  <div class=\"loading-container\">\n    <p>Loading feedback...</p>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;max-height:85vh;overflow:auto}.feedback-container{display:flex;flex-direction:column;height:100%;background-color:#f9f9f9;border-radius:8px}.feedback-title{padding:1.5rem 1.5rem 0;font-size:1.5rem;font-weight:600;text-align:center;flex-shrink:0;color:#333}.feedback-content{flex:1 1 auto;overflow-y:auto;padding:1.5rem}.feedback-footer{flex-shrink:0;padding:1rem 1.5rem;text-align:right;border-top:1px solid #e9ecef;background-color:#fff;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.general-score{text-align:center;margin-bottom:20px;background-color:#fff;padding:1rem;border-radius:6px;border:1px solid #e9ecef}.general-score .score{font-size:2em;font-weight:700;color:#4caf50}.feedback-details>div,.conversation-analysis>div,.actionable-feedback>div{margin-bottom:1rem}.feedback-details h4{margin-bottom:.75rem}.feedback-details p,.conversation-analysis p,.actionable-feedback ul{margin-bottom:.5rem}.comment{font-style:italic;color:#555}ul{list-style-position:inside;padding-left:0}h3{font-size:1.25rem;border-bottom:2px solid #eee;padding-bottom:.5rem;margin-top:1.5rem;margin-bottom:1rem;color:#333}h4{font-size:1.1rem;margin-top:1rem;margin-bottom:.5rem;color:#555}li{margin-bottom:.5rem}strong{color:#333}.loading-container{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    return result;
+}
+function extractAudioAndTranscription(message, audio) {
+    message.audioUrl = audio.blobUrl;
+    message.transcription = audio.transcription;
+    if (message.transcription) {
+        message.transcriptionTimestamps = matchTranscription(message.text || message.content, message.transcription.words);
+    }
+    return message;
+}
+function buildObjectTTSRequest(message, settings = {}) {
+    const generateTranscription = settings?.highlightWords ?? false;
+    const speedRate = settings?.speedRate || 0;
+    const speed = typeof settings?.speed === 'string' ? settings.speed : AudioSpeed$1.Regular;
+    const text = removeEmojisAndSpecialCharacters(message.text || message.content);
+    const ssml = message.ssml ? removeEmojisAndSpecialCharacters(message.ssml) : null;
+    return {
+        text,
+        voice: message.voice || settings.voice,
+        generateTranscription,
+        speedRate,
+        speed,
+        ssml: ssml,
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FeedbackEvaluationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-feedback-evaluation', standalone: true, imports: [CommonModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"feedback-container\">\n  @if (evaluationData) {\n  <h2 class=\"feedback-title\">Performance Evaluation</h2>\n\n  <div class=\"feedback-content\">\n    <div class=\"general-score\">\n      <h3>Overall Score</h3>\n      <p class=\"score\">{{ evaluationData.overall_score.rating }} / 100 (Level: {{ evaluationData.overall_score.level }})</p>\n    </div>\n\n    <div class=\"feedback-details\">\n      <h3>Detailed Assessments</h3>\n      @for (assessment of evaluationData.assessments | keyvalue; track assessment.key) {\n      <div>\n        <h4>{{ assessment.key.replace('_', ' ') | titlecase }}</h4>\n        <p>\n          <span class=\"score\">Score: {{ assessment.value.score }} / 100</span> |\n          <span class=\"level\">Level: {{ assessment.value.level }}</span>\n        </p>\n        <p class=\"comment\"><strong>Feedback:</strong> {{ assessment.value.feedback }}</p>\n        @if (assessment.value.suggestions?.length > 0) {\n        <div>\n          <strong>Suggestions:</strong>\n          <ul>\n            @for (suggestion of assessment.value.suggestions; track $index) {\n            <li>{{ suggestion }}</li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <div class=\"conversation-analysis\">\n      <h3>Conversation Analysis</h3>\n      <p><strong>Dominant Register:</strong> {{ evaluationData.conversation_analysis.dominant_register }}</p>\n      <p><strong>Conversation Type:</strong> {{ evaluationData.conversation_analysis.conversation_type }}</p>\n      @if (evaluationData.conversation_analysis.key_observations?.length > 0) {\n      <div>\n        <strong>Key Observations:</strong>\n        <ul>\n          @for (observation of evaluationData.conversation_analysis.key_observations; track $index) {\n          <li>{{ observation }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.conversation_analysis.notable_patterns?.length > 0) {\n      <div>\n        <strong>Notable Patterns:</strong>\n        <ul>\n          @for (pattern of evaluationData.conversation_analysis.notable_patterns; track $index) {\n          <li>{{ pattern }}</li>\n          }\n        </ul>\n      </div>\n      }\n    </div>\n\n    <div class=\"actionable-feedback\">\n      <h3>Actionable Feedback</h3>\n      @if (evaluationData.actionable_feedback.immediate_focus_areas?.length > 0) {\n      <div>\n        <strong>Immediate Focus Areas:</strong>\n        <ul>\n          @for (area of evaluationData.actionable_feedback.immediate_focus_areas; track $index) {\n          <li>{{ area }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.actionable_feedback.practice_recommendations?.length > 0) {\n      <div>\n        <strong>Practice Recommendations:</strong>\n        <ul>\n          @for (recommendation of evaluationData.actionable_feedback.practice_recommendations; track $index) {\n          <li>{{ recommendation }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.actionable_feedback.next_steps?.length > 0) {\n      <div>\n        <strong>Next Steps:</strong>\n        <ul>\n          @for (step of evaluationData.actionable_feedback.next_steps; track $index) {\n          <li>{{ step }}</li>\n          }\n        </ul>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class.bind=\"'feedback-footer'\">\n    <p-button label=\"Close\" (onClick)=\"closeDialog()\"></p-button>\n  </div>\n\n  } @else {\n  <div class=\"loading-container\">\n    <p>Loading feedback...</p>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;max-height:85vh;overflow:auto}.feedback-container{display:flex;flex-direction:column;height:100%;background-color:#f9f9f9;border-radius:8px}.feedback-title{padding:1.5rem 1.5rem 0;font-size:1.5rem;font-weight:600;text-align:center;flex-shrink:0;color:#333}.feedback-content{flex:1 1 auto;overflow-y:auto;padding:1.5rem}.feedback-footer{flex-shrink:0;padding:1rem 1.5rem;text-align:right;border-top:1px solid #e9ecef;background-color:#fff;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.general-score{text-align:center;margin-bottom:20px;background-color:#fff;padding:1rem;border-radius:6px;border:1px solid #e9ecef}.general-score .score{font-size:2em;font-weight:700;color:#4caf50}.feedback-details>div,.conversation-analysis>div,.actionable-feedback>div{margin-bottom:1rem}.feedback-details h4{margin-bottom:.75rem}.feedback-details p,.conversation-analysis p,.actionable-feedback ul{margin-bottom:.5rem}.comment{font-style:italic;color:#555}ul{list-style-position:inside;padding-left:0}h3{font-size:1.25rem;border-bottom:2px solid #eee;padding-bottom:.5rem;margin-top:1.5rem;margin-bottom:1rem;color:#333}h4{font-size:1.1rem;margin-top:1rem;margin-bottom:.5rem;color:#555}li{margin-bottom:.5rem}strong{color:#333}.loading-container{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
-        }], ctorParameters: () => [] });
 
-const performanceAnalysisPromptTemplate = (language) => `
+class DynamicCriteriaService {
+    constructor() {
+        this.dynamicFlowService = inject(DynamicFlowService);
+        this.contextEngineService = inject(ContextEngineService);
+        this.defaultAgentCardService = inject(DefaultAgentCardsService);
+        this.globalToolsService = inject(GlobalToolsService);
+        this.messageState = inject(MessagesStateService);
+    }
+    async evaluateUsingTools() {
+        const tools = this.dynamicFlowService.conversationFlowState()?.tools || [];
+        const enabledTools = tools.filter((tool) => tool?.enabled || false);
+        if (!enabledTools.length) {
+            return;
+        }
+        let listString = '';
+        for (const tool of enabledTools) {
+            listString += `${tool.name}: ${tool.description}\n`;
+        }
+        const conversationContext = this.contextEngineService.getConversationContext(ContextType.Last2Messages);
+        const finalPrompt = `
+        Evaluate using the context and return only JSON if condition is met similar to this:
+        {
+        "tool1": true,
+        "tool2": false,
+        }
+        <Context>
+        ${conversationContext}
+        </Context>
+        <Tools>
+        ${listString}
+        </Tools>
+        return only JSON with true or false for the tools
+        `;
+        const result = await this.defaultAgentCardService.callChatCompletion({
+            messages: [{ role: ChatRole.User, content: finalPrompt }],
+            returnJson: true,
+        });
+        if (result.content?.['ends']) {
+            console.log('Tools result:', result.content);
+            console.log('Using tool ends');
+            this.globalToolsService.useTool('ends', result.content);
+        }
+    }
+    getMoodEmoji(mood) {
+        if (!mood) {
+            return undefined;
+        }
+        const moodState = MoodStateOptions.find((option) => option.value === mood);
+        return moodState?.emoji;
+    }
+    async evaluateMoodState() {
+        // 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>`;
+        const result = await this.defaultAgentCardService.callChatCompletion({
+            messages: [{ role: ChatRole.User, content: prompt }],
+            returnJson: true,
+        });
+        if (Array.isArray(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);
+                this.messageState.updateMessage(assistantMessage.messageId, { tags: moodEmojis });
+            }
+            return result.content;
+        }
+        else {
+            console.error('Something is wrong with mood state result:', result.content);
+            return [];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicCriteriaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicCriteriaService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicCriteriaService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class FeedbackEvaluationComponent {
+    constructor() {
+        this.ref = inject(DynamicDialogRef);
+        this.config = inject(DynamicDialogConfig);
+    }
+    ngOnInit() {
+        if (this.config.data) {
+            this.evaluationData = this.config.data;
+        }
+        else {
+            this.evaluationData = this.getDummyEvaluationData();
+        }
+    }
+    getDummyEvaluationData() {
+        return {
+            overall_score: {
+                rating: 85,
+                level: 4,
+            },
+            assessments: {
+                grammar: {
+                    score: 90,
+                    level: 5,
+                    feedback: 'Excellent grammar, with very few mistakes. Your sentence structures are complex and accurate.',
+                    suggestions: ['Review the use of subjunctive mood for hypothetical situations.'],
+                },
+                vocabulary: {
+                    score: 88,
+                    level: 4,
+                    feedback: 'You have a wide range of vocabulary and use it appropriately. You could try to incorporate more idiomatic expressions.',
+                    suggestions: ['Learn phrasal verbs related to business.', 'Practice using synonyms for common words.'],
+                },
+                communication_effectiveness: {
+                    score: 82,
+                    level: 'Advanced',
+                    feedback: 'Your communication is clear and effective. You are able to convey your ideas with precision.',
+                    suggestions: ['Work on your turn-taking skills in fast-paced conversations.'],
+                },
+                pragmatic_competence: {
+                    score: 80,
+                    level: 'Advanced',
+                    feedback: 'You show good awareness of social and cultural norms in communication.',
+                    suggestions: ['Study how humor is used in professional contexts.'],
+                },
+            },
+            conversation_analysis: {
+                dominant_register: 'formal',
+                conversation_type: 'professional',
+                key_observations: ['You maintained a professional tone throughout the conversation.', 'You used appropriate language for the context.'],
+                notable_patterns: ['Consistent use of complex sentences.', 'Tendency to use direct questions.'],
+            },
+            actionable_feedback: {
+                immediate_focus_areas: ['Using more varied intonation.'],
+                practice_recommendations: [
+                    'Record yourself speaking and listen for intonation patterns.',
+                    'Engage in role-playing scenarios that require different emotional expressions.',
+                ],
+                next_steps: ['Have a conversation with a native speaker focusing on expressing excitement and disappointment.'],
+            },
+        };
+    }
+    closeDialog() {
+        this.ref.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FeedbackEvaluationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: FeedbackEvaluationComponent, isStandalone: true, selector: "dc-feedback-evaluation", ngImport: i0, template: "<div class=\"feedback-container\">\n  @if (evaluationData) {\n  <h2 class=\"feedback-title\">Performance Evaluation</h2>\n\n  <div class=\"feedback-content\">\n    <div class=\"general-score\">\n      <h3>Overall Score</h3>\n      <p class=\"score\">{{ evaluationData.overall_score.rating }} / 100 (Level: {{ evaluationData.overall_score.level }})</p>\n    </div>\n\n    <div class=\"feedback-details\">\n      <h3>Detailed Assessments</h3>\n      @for (assessment of evaluationData.assessments | keyvalue; track assessment.key) {\n      <div>\n        <h4>{{ assessment.key.replace('_', ' ') | titlecase }}</h4>\n        <p>\n          <span class=\"score\">Score: {{ assessment.value.score }} / 100</span> |\n          <span class=\"level\">Level: {{ assessment.value.level }}</span>\n        </p>\n        <p class=\"comment\"><strong>Feedback:</strong> {{ assessment.value.feedback }}</p>\n        @if (assessment.value.suggestions?.length > 0) {\n        <div>\n          <strong>Suggestions:</strong>\n          <ul>\n            @for (suggestion of assessment.value.suggestions; track $index) {\n            <li>{{ suggestion }}</li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <div class=\"conversation-analysis\">\n      <h3>Conversation Analysis</h3>\n      <p><strong>Dominant Register:</strong> {{ evaluationData.conversation_analysis.dominant_register }}</p>\n      <p><strong>Conversation Type:</strong> {{ evaluationData.conversation_analysis.conversation_type }}</p>\n      @if (evaluationData.conversation_analysis.key_observations?.length > 0) {\n      <div>\n        <strong>Key Observations:</strong>\n        <ul>\n          @for (observation of evaluationData.conversation_analysis.key_observations; track $index) {\n          <li>{{ observation }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.conversation_analysis.notable_patterns?.length > 0) {\n      <div>\n        <strong>Notable Patterns:</strong>\n        <ul>\n          @for (pattern of evaluationData.conversation_analysis.notable_patterns; track $index) {\n          <li>{{ pattern }}</li>\n          }\n        </ul>\n      </div>\n      }\n    </div>\n\n    <div class=\"actionable-feedback\">\n      <h3>Actionable Feedback</h3>\n      @if (evaluationData.actionable_feedback.immediate_focus_areas?.length > 0) {\n      <div>\n        <strong>Immediate Focus Areas:</strong>\n        <ul>\n          @for (area of evaluationData.actionable_feedback.immediate_focus_areas; track $index) {\n          <li>{{ area }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.actionable_feedback.practice_recommendations?.length > 0) {\n      <div>\n        <strong>Practice Recommendations:</strong>\n        <ul>\n          @for (recommendation of evaluationData.actionable_feedback.practice_recommendations; track $index) {\n          <li>{{ recommendation }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.actionable_feedback.next_steps?.length > 0) {\n      <div>\n        <strong>Next Steps:</strong>\n        <ul>\n          @for (step of evaluationData.actionable_feedback.next_steps; track $index) {\n          <li>{{ step }}</li>\n          }\n        </ul>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class.bind=\"'feedback-footer'\">\n    <p-button label=\"Close\" (onClick)=\"closeDialog()\"></p-button>\n  </div>\n\n  } @else {\n  <div class=\"loading-container\">\n    <p>Loading feedback...</p>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;max-height:85vh;overflow:auto}.feedback-container{display:flex;flex-direction:column;height:100%;background-color:#f9f9f9;border-radius:8px}.feedback-title{padding:1.5rem 1.5rem 0;font-size:1.5rem;font-weight:600;text-align:center;flex-shrink:0;color:#333}.feedback-content{flex:1 1 auto;overflow-y:auto;padding:1.5rem}.feedback-footer{flex-shrink:0;padding:1rem 1.5rem;text-align:right;border-top:1px solid #e9ecef;background-color:#fff;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.general-score{text-align:center;margin-bottom:20px;background-color:#fff;padding:1rem;border-radius:6px;border:1px solid #e9ecef}.general-score .score{font-size:2em;font-weight:700;color:#4caf50}.feedback-details>div,.conversation-analysis>div,.actionable-feedback>div{margin-bottom:1rem}.feedback-details h4{margin-bottom:.75rem}.feedback-details p,.conversation-analysis p,.actionable-feedback ul{margin-bottom:.5rem}.comment{font-style:italic;color:#555}ul{list-style-position:inside;padding-left:0}h3{font-size:1.25rem;border-bottom:2px solid #eee;padding-bottom:.5rem;margin-top:1.5rem;margin-bottom:1rem;color:#333}h4{font-size:1.1rem;margin-top:1rem;margin-bottom:.5rem;color:#555}li{margin-bottom:.5rem}strong{color:#333}.loading-container{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FeedbackEvaluationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-feedback-evaluation', standalone: true, imports: [CommonModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"feedback-container\">\n  @if (evaluationData) {\n  <h2 class=\"feedback-title\">Performance Evaluation</h2>\n\n  <div class=\"feedback-content\">\n    <div class=\"general-score\">\n      <h3>Overall Score</h3>\n      <p class=\"score\">{{ evaluationData.overall_score.rating }} / 100 (Level: {{ evaluationData.overall_score.level }})</p>\n    </div>\n\n    <div class=\"feedback-details\">\n      <h3>Detailed Assessments</h3>\n      @for (assessment of evaluationData.assessments | keyvalue; track assessment.key) {\n      <div>\n        <h4>{{ assessment.key.replace('_', ' ') | titlecase }}</h4>\n        <p>\n          <span class=\"score\">Score: {{ assessment.value.score }} / 100</span> |\n          <span class=\"level\">Level: {{ assessment.value.level }}</span>\n        </p>\n        <p class=\"comment\"><strong>Feedback:</strong> {{ assessment.value.feedback }}</p>\n        @if (assessment.value.suggestions?.length > 0) {\n        <div>\n          <strong>Suggestions:</strong>\n          <ul>\n            @for (suggestion of assessment.value.suggestions; track $index) {\n            <li>{{ suggestion }}</li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <div class=\"conversation-analysis\">\n      <h3>Conversation Analysis</h3>\n      <p><strong>Dominant Register:</strong> {{ evaluationData.conversation_analysis.dominant_register }}</p>\n      <p><strong>Conversation Type:</strong> {{ evaluationData.conversation_analysis.conversation_type }}</p>\n      @if (evaluationData.conversation_analysis.key_observations?.length > 0) {\n      <div>\n        <strong>Key Observations:</strong>\n        <ul>\n          @for (observation of evaluationData.conversation_analysis.key_observations; track $index) {\n          <li>{{ observation }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.conversation_analysis.notable_patterns?.length > 0) {\n      <div>\n        <strong>Notable Patterns:</strong>\n        <ul>\n          @for (pattern of evaluationData.conversation_analysis.notable_patterns; track $index) {\n          <li>{{ pattern }}</li>\n          }\n        </ul>\n      </div>\n      }\n    </div>\n\n    <div class=\"actionable-feedback\">\n      <h3>Actionable Feedback</h3>\n      @if (evaluationData.actionable_feedback.immediate_focus_areas?.length > 0) {\n      <div>\n        <strong>Immediate Focus Areas:</strong>\n        <ul>\n          @for (area of evaluationData.actionable_feedback.immediate_focus_areas; track $index) {\n          <li>{{ area }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.actionable_feedback.practice_recommendations?.length > 0) {\n      <div>\n        <strong>Practice Recommendations:</strong>\n        <ul>\n          @for (recommendation of evaluationData.actionable_feedback.practice_recommendations; track $index) {\n          <li>{{ recommendation }}</li>\n          }\n        </ul>\n      </div>\n      } @if (evaluationData.actionable_feedback.next_steps?.length > 0) {\n      <div>\n        <strong>Next Steps:</strong>\n        <ul>\n          @for (step of evaluationData.actionable_feedback.next_steps; track $index) {\n          <li>{{ step }}</li>\n          }\n        </ul>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class.bind=\"'feedback-footer'\">\n    <p-button label=\"Close\" (onClick)=\"closeDialog()\"></p-button>\n  </div>\n\n  } @else {\n  <div class=\"loading-container\">\n    <p>Loading feedback...</p>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;max-height:85vh;overflow:auto}.feedback-container{display:flex;flex-direction:column;height:100%;background-color:#f9f9f9;border-radius:8px}.feedback-title{padding:1.5rem 1.5rem 0;font-size:1.5rem;font-weight:600;text-align:center;flex-shrink:0;color:#333}.feedback-content{flex:1 1 auto;overflow-y:auto;padding:1.5rem}.feedback-footer{flex-shrink:0;padding:1rem 1.5rem;text-align:right;border-top:1px solid #e9ecef;background-color:#fff;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.general-score{text-align:center;margin-bottom:20px;background-color:#fff;padding:1rem;border-radius:6px;border:1px solid #e9ecef}.general-score .score{font-size:2em;font-weight:700;color:#4caf50}.feedback-details>div,.conversation-analysis>div,.actionable-feedback>div{margin-bottom:1rem}.feedback-details h4{margin-bottom:.75rem}.feedback-details p,.conversation-analysis p,.actionable-feedback ul{margin-bottom:.5rem}.comment{font-style:italic;color:#555}ul{list-style-position:inside;padding-left:0}h3{font-size:1.25rem;border-bottom:2px solid #eee;padding-bottom:.5rem;margin-top:1.5rem;margin-bottom:1rem;color:#333}h4{font-size:1.1rem;margin-top:1rem;margin-bottom:.5rem;color:#555}li{margin-bottom:.5rem}strong{color:#333}.loading-container{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+const performanceAnalysisPromptTemplate = (language) => `
 You are an expert ${language} language evaluator. Analyze the following conversation and provide a detailed assessment focusing on these four key areas. 
 Return your analysis in the exact JSON format specified below.
 
@@ -1815,537 +2348,51 @@ This is the conversation history:
     setScore(newScore) {
         this.dynamicFlowService.checkDynamicConditions(this.scoreSignal(), newScore);
         this.scoreSignal.set(newScore);
-        if (newScore >= 100) {
-            this.scoreSignal.set(100);
-            this.analylizePerformance();
-        }
-        else {
-            this.scoreSignal.set(newScore);
-        }
-    }
-    resetScore() {
-        this.scoreSignal.set(0);
-    }
-    async analylizePerformance() {
-        console.log('Analylizing performance...');
-        const conversationMessages = this.contextEngineService.getContextMessages(ContextType.AllConversation);
-        if (conversationMessages.length < 6) {
-            return;
-        }
-        const conversationContext = this.contextEngineService.getConversationContext(ContextType.AllConversation);
-        // TODO change the english!
-        let prompt = performanceAnalysisPromptTemplate('English');
-        prompt += `\n\nHere the user conversation: <Context>${conversationContext}</Context>`;
-        this.loadingBarService.showIndeterminate();
-        const response = await this.defaultAgentCardService.callChatCompletion({
-            messages: [{ role: ChatRole.User, content: prompt }],
-            returnJson: true,
-        });
-        this.loadingBarService.successAndHide();
-        this.openFeedbackEvaluation(response.content);
-        console.log('Performance analysis response:', response);
-        return response;
-    }
-    openFeedbackEvaluation(data) {
-        this.dialogService.open(FeedbackEvaluationComponent, {
-            data,
-            header: 'Evaluation Feedback',
-            width: '70%',
-            contentStyle: { height: '80vh', overflow: 'auto' },
-            baseZIndex: 10000,
-            closable: true,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class ChatHeaderComponent {
-    constructor() {
-        this.isAdmin = input(false);
-        this.alternativeConversation = [];
-        this.evaluationService = inject(EvaluationService);
-        this.restartConversationEvent = output();
-        this.showInfoEvent = output();
-        this.settingsClickEvent = output();
-        this.completeEvent = output();
-    }
-    restartConversation(conversation = null) {
-        this.restartConversationEvent.emit(conversation);
-    }
-    showInfo() {
-        this.showInfoEvent.emit();
-    }
-    settingsClick() {
-        this.settingsClickEvent.emit();
-    }
-    complete() {
-        this.completeEvent.emit();
-    }
-    openFeedback() {
-        this.evaluationService.openFeedbackEvaluation();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatHeaderComponent, isStandalone: true, selector: "dc-chat-header", inputs: { isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, alternativeConversation: { classPropertyName: "alternativeConversation", publicName: "alternativeConversation", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { restartConversationEvent: "restartConversationEvent", showInfoEvent: "showInfoEvent", settingsClickEvent: "settingsClickEvent", completeEvent: "completeEvent" }, ngImport: i0, template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n    {{ agentCard.title }}\n    } @else { Reiniciar conversaci\u00F3n }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (isAdmin()){\n    <div class=\"admin-controls\">\n      <i style=\"color: rgb(255, 149, 0)\" class=\"pi pi-key\"></i>\n\n      <i (click)=\"complete()\">\u26A1\uFE0F </i>\n\n      <p-button variant=\"text\" [raised]=\"true\" icon=\"pi pi-id-card\" (click)=\"showInfo()\"></p-button>\n\n      <!-- <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span> -->\n    </div>\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"openFeedback()\"> \uD83D\uDCDD </span>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-chat-header', standalone: true, imports: [ButtonModule], template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n    {{ agentCard.title }}\n    } @else { Reiniciar conversaci\u00F3n }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (isAdmin()){\n    <div class=\"admin-controls\">\n      <i style=\"color: rgb(255, 149, 0)\" class=\"pi pi-key\"></i>\n\n      <i (click)=\"complete()\">\u26A1\uFE0F </i>\n\n      <p-button variant=\"text\" [raised]=\"true\" icon=\"pi pi-id-card\" (click)=\"showInfo()\"></p-button>\n\n      <!-- <span class=\"pointer\" (click)=\"showInfo()\"> \u26A1\uFE0F </span> -->\n    </div>\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"openFeedback()\"> \uD83D\uDCDD </span>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"] }]
-        }], propDecorators: { alternativeConversation: [{
-                type: Input
-            }], agentCard: [{
-                type: Input
-            }] } });
-
-function markdownToHtml(markdown) {
-    const htmlArray = [];
-    const lines = markdown.split('\n');
-    for (const line of lines) {
-        let currentText = '';
-        let prevChar = '';
-        for (let i = 0; i < line.length; i++) {
-            const char = line[i];
-            if (char === '*' && prevChar !== '\\') {
-                if (currentText) {
-                    htmlArray.push(currentText);
-                    currentText = '';
-                }
-                const endIndex = line.indexOf('*', i + 1);
-                if (endIndex !== -1) {
-                    const text = line.slice(i + 1, endIndex);
-                    htmlArray.push(`<em>${text}</em>`);
-                    i = endIndex;
-                }
-            }
-            else if (char === '_' && prevChar !== '\\') {
-                if (currentText) {
-                    htmlArray.push(currentText);
-                    currentText = '';
-                }
-                const endIndex = line.indexOf('_', i + 1);
-                if (endIndex !== -1) {
-                    const text = line.slice(i + 1, endIndex);
-                    htmlArray.push(`<em>${text}</em>`);
-                    i = endIndex;
-                }
-            }
-            else if (char === '`' && prevChar !== '\\') {
-                if (currentText) {
-                    htmlArray.push(currentText);
-                    currentText = '';
-                }
-                const endIndex = line.indexOf('`', i + 1);
-                if (endIndex !== -1) {
-                    const text = line.slice(i + 1, endIndex);
-                    htmlArray.push(`<code>${text}</code>`);
-                    i = endIndex;
-                }
-            }
-            else if (char === '[') {
-                if (currentText) {
-                    htmlArray.push(currentText);
-                    currentText = '';
-                }
-                const endIndex = line.indexOf(']', i + 1);
-                if (endIndex !== -1) {
-                    const text = line.slice(i + 1, endIndex);
-                    const linkStart = line.indexOf('(', endIndex);
-                    const linkEnd = line.indexOf(')', linkStart + 1);
-                    if (linkStart !== -1 && linkEnd !== -1) {
-                        const link = line.slice(linkStart + 1, linkEnd);
-                        htmlArray.push(`<a href="${link}">${text}</a>`);
-                        i = linkEnd;
-                    }
-                    else {
-                        currentText += `[${text}]`;
-                    }
-                }
-            }
-            else if (char === '#') {
-                if (currentText) {
-                    htmlArray.push(currentText);
-                    currentText = '';
-                }
-                const headerLevel = line.indexOf(' ', i);
-                const text = line.slice(headerLevel + 1);
-                const level = headerLevel - i;
-                htmlArray.push(`<h${level}>${text}</h${level}>`);
-                i = line.length;
-            }
-            else {
-                currentText += char;
-            }
-            prevChar = char;
-        }
-        if (currentText) {
-            htmlArray.push(currentText);
-        }
-    }
-    return htmlArray;
-}
-function extractTextWithAsteriskCount(markdown) {
-    const regex = /(\*{1,3})(.*?)\1|([^*]+)/g;
-    let match;
-    const extractedText = [];
-    while ((match = regex.exec(markdown)) !== null) {
-        if (match[2]) {
-            // Text enclosed in asterisks
-            extractedText.push({
-                text: match[2].trim(),
-                tag: match[1], // Capture the asterisks used
-            });
-        }
-        else {
-            // Text not enclosed in asterisks
-            extractedText.push({
-                text: match[3].trim(),
-                tag: '', // No asterisks
-            });
-        }
-    }
-    return extractedText.filter((element) => element.text);
-}
-function convertToHTML(text) {
-    const markdownArray = extractTextWithAsteriskCount(text);
-    const htmlArray = [];
-    for (const element of markdownArray) {
-        let content = '';
-        let tag = '';
-        switch (element.tag) {
-            case '*':
-                content = `<em>${element.text}</em>`;
-                tag = 'em';
-                break;
-            case '**':
-                content = `<strong>${element.text}</strong>`;
-                tag = 'strong';
-                break;
-            case '***':
-                content = `<em><strong>${element.text}</strong></em>`;
-                tag = 'em_strong';
-                break;
-            default:
-                content = `<p>${element.text}</p>`;
-                tag = 'p';
-        }
-        htmlArray.push({ content, tag, text: element.text });
-    }
-    return htmlArray;
-}
-function markdownToHTML$1(markdownText) {
-    // Convert italics-bold (***text***)
-    let htmlText = markdownText.replace(/\*\*\*(.+?)\*\*\*/g, '<em><strong>$1</strong></em>');
-    // Convert bold (**text**)
-    htmlText = htmlText.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-    // Convert italics (*text*)
-    htmlText = htmlText.replace(/\*(.+?)\*/g, '<em>$1</em>');
-    // Convert text enclosed by double quotes ("text")
-    // htmlText = htmlText.replace(/"(.+?)"/g, '<cite>$1</cite>');
-    return htmlText;
-}
-function markdownBasicToHTML(markdownText) {
-    // Convert italics-bold (***text***)
-    let htmlText = markdownText.replace(/\*\*\*(.+?)\*\*\*/g, '<div><em><strong>$1</strong></em></div>');
-    // Convert bold (**text**)
-    htmlText = htmlText.replace(/\*\*(.+?)\*\*/g, '<div><strong>$1</strong></div>');
-    // Convert italics (*text*)
-    htmlText = htmlText.replace(/\*(.+?)\*/g, '<div><em>$1</em></div>');
-    // Convert text enclosed by double quotes ("text")
-    htmlText = htmlText.replace(/"(.+?)"/g, '<cite>$1</cite>');
-    return htmlText;
-}
-// TODO remove functinos i dont use
-function markdownToHTML2(markdown) {
-    const lines = markdown.split('\n\n');
-    const result = [];
-    for (const line of lines) {
-        if (line.startsWith('*') && line.endsWith('*')) {
-            // Emphasis
-            const text = line.slice(1, -1);
-            result.push({ content: `<em>${text}</em>`, tag: 'em', text });
-        }
-        else if (line.startsWith('**') && line.endsWith('**')) {
-            // Strong emphasis
-            const text = line.slice(2, -2);
-            result.push({ content: `<strong>${text}</strong>`, tag: 'strong', text });
-        }
-        else if (line.startsWith('***') && line.endsWith('***')) {
-            // Combined emphasis and strong
-            const text = line.slice(3, -3);
-            result.push({ content: `<strong><em>${text}</em></strong>`, tag: 'strong em', text });
-        }
-        else {
-            // Quote (handling quotes within the text)
-            const quoteText = line.replace(/"/g, ''); // Remove existing quotes
-            result.push({ content: `<q>${quoteText}</q>`, tag: 'q', text: quoteText });
-        }
-    }
-    return result;
-}
-function removeEmojisAndSpecialCharacters(text) {
-    return removeEmojis(removeSpecialCharacters(text));
-}
-function removeEmojis(text) {
-    // This regex pattern matches emoji characters
-    return text.replace(/[\u{1F000}-\u{1F6FF}|\u{1F900}-\u{1F9FF}|\u{2600}-\u{26FF}|\u{2700}-\u{27BF}|\u{1F300}-\u{1F5FF}|\u{1F680}-\u{1F6FF}|\u{1F1E0}-\u{1F1FF}|\u{1F900}-\u{1F9FF}|\u{1F100}-\u{1F1FF}|\u{1F200}-\u{1F2FF}|\u{2100}-\u{26FF}]/gu, '');
-}
-function removeAllEmojis(text) {
-    // More comprehensive regex that catches:
-    // 1. Standard emojis
-    // 2. Emoji variations and modifiers
-    // 3. Symbol characters
-    // 4. Pictographs
-    // 5. Emoticons
-    // 6. Regional indicators
-    // 7. Flags
-    return text.replace(/[\p{Emoji_Presentation}\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{E0020}-\u{E007F}\u{FE00}-\u{FE0F}\u{1F900}-\u{1F9FF}\u{1F1E6}-\u{1F1FF}]/gu, '');
-}
-function removeSpecialCharacters(inputText) {
-    // Remove special characters (*, _, [ and ])
-    if (!inputText) {
-        return '';
-    }
-    return inputText.replace(/[*_\[\]]/g, '');
-}
-
-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>';
-            }
-        }
-        return processedMessage;
-    }
-    // Process multi-messages from markdown
-    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
-            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 voice = isItalics ? secondaryVoice : message.voice;
-            return {
-                voice,
-                content: val.content,
-                audioUrl: null,
-                audioPromise: null,
-                text: val.text,
-                tag: val.tag,
-            };
-        });
-    }
-    // Replace italics with voice tags for SSML
-    subsItalicsByTag(text, voiceId = 'it-IT-Neural2-A', tagName = 'voice') {
-        const regex = /\*(.*?)\*/g;
-        return text.replace(regex, (match, p1) => `<${tagName} name="${voiceId}">${p1}</${tagName}>`);
-    }
-    // Get appropriate voice based on settings
-    getVoice(voice_value, targetLang = 'en') {
-        if ([null, '', 'random'].includes(voice_value)) {
-            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);
-            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 || '';
-            // }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageProcessingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageProcessingService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageProcessingService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-function matchTranscription(originalText, transcription) {
-    const result = [];
-    const transcriptionMap = new Map();
-    // Create a map of lowercase words to an array of their corresponding objects in transcription
-    for (const obj of transcription) {
-        const lowercaseWord = obj.word.trim().toLowerCase();
-        if (transcriptionMap.has(lowercaseWord)) {
-            transcriptionMap.get(lowercaseWord).push(obj);
-        }
-        else {
-            transcriptionMap.set(lowercaseWord, [obj]);
-        }
-    }
-    // Split the original text into an array of words
-    const words = originalText.split(' ');
-    let currentTime = 0;
-    for (const word of words) {
-        const lowercaseWord = word.toLowerCase();
-        const matchedObjs = transcriptionMap.get(lowercaseWord);
-        if (matchedObjs && matchedObjs.length > 0) {
-            const matchedObj = matchedObjs.shift();
-            result.push({
-                word: word,
-                start: Number(matchedObj.start.toFixed(3)),
-                end: Number(matchedObj.end.toFixed(3)),
-            });
-            currentTime = matchedObj.end;
+        if (newScore >= 100) {
+            this.scoreSignal.set(100);
+            this.analylizePerformance();
         }
         else {
-            result.push({
-                word: word,
-                start: Number(currentTime.toFixed(3)),
-                end: Number(currentTime.toFixed(3)),
-            });
+            this.scoreSignal.set(newScore);
         }
     }
-    return result;
-}
-function extractAudioAndTranscription(message, audio) {
-    message.audioUrl = audio.blobUrl;
-    message.transcription = audio.transcription;
-    if (message.transcription) {
-        message.transcriptionTimestamps = matchTranscription(message.text || message.content, message.transcription.words);
-    }
-    return message;
-}
-function buildObjectTTSRequest(message, settings = {}) {
-    const generateTranscription = settings?.highlightWords ?? false;
-    const speedRate = settings?.speedRate || 0;
-    const speed = typeof settings?.speed === 'string' ? settings.speed : AudioSpeed$1.Regular;
-    const text = removeEmojisAndSpecialCharacters(message.text || message.content);
-    const ssml = message.ssml ? removeEmojisAndSpecialCharacters(message.ssml) : null;
-    return {
-        text,
-        voice: message.voice || settings.voice,
-        generateTranscription,
-        speedRate,
-        speed,
-        ssml: ssml,
-    };
-}
-
-class DynamicCriteriaService {
-    constructor() {
-        this.dynamicFlowService = inject(DynamicFlowService);
-        this.contextEngineService = inject(ContextEngineService);
-        this.defaultAgentCardService = inject(DefaultAgentCardsService);
-        this.globalToolsService = inject(GlobalToolsService);
-        this.messageState = inject(MessagesStateService);
+    resetScore() {
+        this.scoreSignal.set(0);
     }
-    async evaluateUsingTools() {
-        const tools = this.dynamicFlowService.conversationFlowState()?.tools || [];
-        const enabledTools = tools.filter((tool) => tool?.enabled || false);
-        if (!enabledTools.length) {
+    async analylizePerformance() {
+        console.log('Analylizing performance...');
+        const conversationMessages = this.contextEngineService.getContextMessages(ContextType.AllConversation);
+        if (conversationMessages.length < 6) {
             return;
         }
-        let listString = '';
-        for (const tool of enabledTools) {
-            listString += `${tool.name}: ${tool.description}\n`;
-        }
-        const conversationContext = this.contextEngineService.getConversationContext(ContextType.Last2Messages);
-        const finalPrompt = `
-        Evaluate using the context and return only JSON if condition is met similar to this:
-        {
-        "tool1": true,
-        "tool2": false,
-        }
-        <Context>
-        ${conversationContext}
-        </Context>
-        <Tools>
-        ${listString}
-        </Tools>
-        return only JSON with true or false for the tools
-        `;
-        const result = await this.defaultAgentCardService.callChatCompletion({
-            messages: [{ role: ChatRole.User, content: finalPrompt }],
+        const conversationContext = this.contextEngineService.getConversationContext(ContextType.AllConversation);
+        // TODO change the english!
+        let prompt = performanceAnalysisPromptTemplate('English');
+        prompt += `\n\nHere the user conversation: <Context>${conversationContext}</Context>`;
+        this.loadingBarService.showIndeterminate();
+        const response = await this.defaultAgentCardService.callChatCompletion({
+            messages: [{ role: ChatRole.User, content: prompt }],
             returnJson: true,
         });
-        if (result.content?.['ends']) {
-            console.log('Tools result:', result.content);
-            console.log('Using tool ends');
-            this.globalToolsService.useTool('ends', result.content);
-        }
-    }
-    getMoodEmoji(mood) {
-        if (!mood) {
-            return undefined;
-        }
-        const moodState = MoodStateOptions.find((option) => option.value === mood);
-        return moodState?.emoji;
+        this.loadingBarService.successAndHide();
+        this.openFeedbackEvaluation(response.content);
+        console.log('Performance analysis response:', response);
+        return response;
     }
-    async evaluateMoodState() {
-        // 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>`;
-        const result = await this.defaultAgentCardService.callChatCompletion({
-            messages: [{ role: ChatRole.User, content: prompt }],
-            returnJson: true,
+    openFeedbackEvaluation(data) {
+        this.dialogService.open(FeedbackEvaluationComponent, {
+            data,
+            header: 'Evaluation Feedback',
+            width: '70%',
+            contentStyle: { height: '80vh', overflow: 'auto' },
+            baseZIndex: 10000,
+            closable: true,
         });
-        if (Array.isArray(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);
-                this.messageState.updateMessage(assistantMessage.messageId, { tags: moodEmojis });
-            }
-            return result.content;
-        }
-        else {
-            console.error('Something is wrong with mood state result:', result.content);
-            return [];
-        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicCriteriaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicCriteriaService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DynamicCriteriaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EvaluationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2417,6 +2464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 class ConversationService {
     constructor() {
         this.defaultAgentCardService = inject(DefaultAgentCardsService);
+        this.ttsService = inject(TtsService);
         // Services
         this.toastAlerts = inject(TOAST_ALERTS_TOKEN);
         this.messageProcessingService = inject(MessageProcessingService);
@@ -2433,6 +2481,8 @@ class ConversationService {
         this.micStatusSignal = signal('ready');
         this.currentAudioStatus = signal(null); // Orchestrator notifies about audio state
         this.wordClickedSignal = signal(null); // Signal for clicked word
+        this.agentCardSignal = signal(null);
+        this.agentCard$ = this.agentCardSignal.asReadonly();
         // Var State
         this.avatarImages = { userImg: 'assets/defaults/avatar_user.png', assistantImg: 'assets/defaults/avatar_ai.webp' };
     }
@@ -2471,6 +2521,7 @@ class ConversationService {
         }
     }
     setupConversationWithAgentCard(agentCard, parseDict = null, appConversationFlow = 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.
@@ -2651,7 +2702,7 @@ class ConversationService {
     async getTTSFile(message) {
         const userChatSettings = await this.userDataExchange.getUserChatSettings();
         const ttsRequest = buildObjectTTSRequest(message, userChatSettings);
-        return this.defaultAgentCardService.getTextAudioFile(ttsRequest);
+        return this.ttsService.getTextAudioFile(ttsRequest);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, providedIn: 'root' }); }
@@ -2663,6 +2714,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }] });
 
+class AIGenerationService {
+    constructor() {
+        this.vertexService = inject(NgxVertexService);
+        this.messagesStateService = inject(MessagesStateService);
+        this.conversationService = inject(ConversationService);
+    }
+    async generateImage(chatMessage, chatText) {
+        const agentCard = this.conversationService.agentCard$();
+        const pictureDescription = agentCard?.characterCard?.data?.picture_description;
+        const urlImage = await this.vertexService.generateComfyImage({ prompt: `${pictureDescription} ${chatText}` });
+        this.messagesStateService.updateMessage(chatMessage.messageId, { generatedImg: urlImage });
+        return urlImage;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AIGenerationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AIGenerationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AIGenerationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CostDetailsComponent {
+    constructor() {
+        this.conversationCostService = inject(ConversationCostService);
+        this.usageByTag = this.conversationCostService.usageByTag;
+    }
+    get usageArray() {
+        const usage = this.usageByTag();
+        return Object.entries(usage).map(([tag, cost]) => ({
+            tag,
+            ...cost,
+            inputCost: cost.tokenUsage.input * 0.0000001,
+            outputCost: cost.tokenUsage.output * 0.0000004,
+            totalCost: cost.tokenUsage.input * 0.0000001 + cost.tokenUsage.output * 0.0000004,
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CostDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CostDetailsComponent, isStandalone: true, selector: "dc-cost-details", ngImport: i0, template: "<p-table [value]=\"usageArray\" [tableStyle]=\"{ 'min-width': '50rem' }\">\n  <ng-template pTemplate=\"header\">\n    <tr>\n      <th>Tag</th>\n      <th>Input Tokens</th>\n      <th>Output Tokens</th>\n      <th>Total Tokens</th>\n      <th>API Calls</th>\n      <th>Input Cost</th>\n      <th>Output Cost</th>\n      <th>Total Cost</th>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"body\" let-item>\n    <tr>\n      <td>{{ item.tag }}</td>\n      <td>{{ item.tokenUsage.input }}</td>\n      <td>{{ item.tokenUsage.output }}</td>\n      <td>{{ item.tokenUsage.total }}</td>\n      <td>{{ item.apiCalls }}</td>\n      <td>{{ item.inputCost | number : '1.4-4' }}</td>\n      <td>{{ item.outputCost | number : '1.4-4' }}</td>\n      <td>{{ item.totalCost | number : '1.4-4' }}</td>\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CostDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-cost-details', standalone: true, imports: [CommonModule, TableModule], template: "<p-table [value]=\"usageArray\" [tableStyle]=\"{ 'min-width': '50rem' }\">\n  <ng-template pTemplate=\"header\">\n    <tr>\n      <th>Tag</th>\n      <th>Input Tokens</th>\n      <th>Output Tokens</th>\n      <th>Total Tokens</th>\n      <th>API Calls</th>\n      <th>Input Cost</th>\n      <th>Output Cost</th>\n      <th>Total Cost</th>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"body\" let-item>\n    <tr>\n      <td>{{ item.tag }}</td>\n      <td>{{ item.tokenUsage.input }}</td>\n      <td>{{ item.tokenUsage.output }}</td>\n      <td>{{ item.tokenUsage.total }}</td>\n      <td>{{ item.apiCalls }}</td>\n      <td>{{ item.inputCost | number : '1.4-4' }}</td>\n      <td>{{ item.outputCost | number : '1.4-4' }}</td>\n      <td>{{ item.totalCost | number : '1.4-4' }}</td>\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class CostDetailsService {
+    constructor() {
+        this.dialogService = inject(DialogService);
+    }
+    openCostDetails() {
+        this.dialogService.open(CostDetailsComponent, {
+            header: 'Cost Details',
+            width: '70%',
+            contentStyle: { 'max-height': '500px', overflow: 'auto' },
+            baseZIndex: 10000,
+            closable: true,
+            draggable: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CostDetailsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CostDetailsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CostDetailsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ChatHeaderComponent {
+    constructor() {
+        this.isAdmin = input(false);
+        this.alternativeConversation = [];
+        this.evaluationService = inject(EvaluationService);
+        this.conversationCostService = inject(ConversationCostService);
+        this.costDetailsService = inject(CostDetailsService);
+        this.restartConversationEvent = output();
+        this.showInfoEvent = output();
+        this.settingsClickEvent = output();
+        this.completeEvent = output();
+    }
+    restartConversation(conversation = null) {
+        this.restartConversationEvent.emit(conversation);
+    }
+    showInfo() {
+        this.showInfoEvent.emit();
+    }
+    settingsClick() {
+        this.settingsClickEvent.emit();
+    }
+    complete() {
+        this.completeEvent.emit();
+    }
+    openFeedback() {
+        this.evaluationService.openFeedbackEvaluation();
+    }
+    openCostDetails() {
+        this.costDetailsService.openCostDetails();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatHeaderComponent, isStandalone: true, selector: "dc-chat-header", inputs: { isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, alternativeConversation: { classPropertyName: "alternativeConversation", publicName: "alternativeConversation", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { restartConversationEvent: "restartConversationEvent", showInfoEvent: "showInfoEvent", settingsClickEvent: "settingsClickEvent", completeEvent: "completeEvent" }, ngImport: i0, template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n    {{ agentCard.title }}\n    } @else { Reiniciar conversaci\u00F3n }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (isAdmin()){\n    <div class=\"admin-controls\">\n      <i style=\"color: rgb(255, 149, 0)\" class=\"pi pi-key\"></i>\n\n      <i (click)=\"complete()\">\u26A1\uFE0F </i>\n\n      <p-button variant=\"text\" [raised]=\"true\" icon=\"pi pi-id-card\" (click)=\"showInfo()\"></p-button>\n\n      <span class=\"pointer\" (click)=\"openFeedback()\"> \uD83D\uDCDD </span>\n      <span class=\"pointer\" (click)=\"openCostDetails()\"> \uD83D\uDCB0 </span>\n      @if (conversationCostService.totalTokens() > 0) {\n      <div class=\"token-counter\">\n        <span>\n          \uD83D\uDCE5 {{ conversationCostService.totalInputTokens() }}\n          <span style=\"font-size: small; color: rgb(74, 74, 74)\">${{ conversationCostService.totalInputCost() | number : '1.4-4' }}</span>\n        </span>\n        <span>\n          \uD83D\uDCE4 {{ conversationCostService.totalOutputTokens() }}\n          <span style=\"font-size: small; color: rgb(74, 74, 74)\">${{ conversationCostService.totalOutputCost() | number : '1.4-4' }}</span>\n        </span>\n        <span>\n          \uD83E\uDDEE {{ conversationCostService.totalTokens() }}\n          <span style=\"font-size: small; color: rgb(74, 74, 74)\">${{ conversationCostService.totalCost() | number : '1.4-4' }}</span>\n        </span>\n        <span> <i class=\"pi pi-cloud-upload\"></i> {{ conversationCostService.totalApiCalls() }} </span>\n      </div>\n      }\n    </div>\n\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-chat-header', standalone: true, imports: [ButtonModule, CurrencyPipe, DecimalPipe], template: "<div class=\"chat-header\">\n  <span class=\"pointer\" (click)=\"restartConversation()\">\n    @if (agentCard?.title) {\n    {{ agentCard.title }}\n    } @else { Reiniciar conversaci\u00F3n }\n  </span>\n\n  @for (conversation of alternativeConversation; track conversation._id) {\n  <span class=\"pointer\" (click)=\"restartConversation(conversation)\"> {{ conversation.title }} </span>\n  }\n\n  <div class=\"header-controls\">\n    @if (isAdmin()){\n    <div class=\"admin-controls\">\n      <i style=\"color: rgb(255, 149, 0)\" class=\"pi pi-key\"></i>\n\n      <i (click)=\"complete()\">\u26A1\uFE0F </i>\n\n      <p-button variant=\"text\" [raised]=\"true\" icon=\"pi pi-id-card\" (click)=\"showInfo()\"></p-button>\n\n      <span class=\"pointer\" (click)=\"openFeedback()\"> \uD83D\uDCDD </span>\n      <span class=\"pointer\" (click)=\"openCostDetails()\"> \uD83D\uDCB0 </span>\n      @if (conversationCostService.totalTokens() > 0) {\n      <div class=\"token-counter\">\n        <span>\n          \uD83D\uDCE5 {{ conversationCostService.totalInputTokens() }}\n          <span style=\"font-size: small; color: rgb(74, 74, 74)\">${{ conversationCostService.totalInputCost() | number : '1.4-4' }}</span>\n        </span>\n        <span>\n          \uD83D\uDCE4 {{ conversationCostService.totalOutputTokens() }}\n          <span style=\"font-size: small; color: rgb(74, 74, 74)\">${{ conversationCostService.totalOutputCost() | number : '1.4-4' }}</span>\n        </span>\n        <span>\n          \uD83E\uDDEE {{ conversationCostService.totalTokens() }}\n          <span style=\"font-size: small; color: rgb(74, 74, 74)\">${{ conversationCostService.totalCost() | number : '1.4-4' }}</span>\n        </span>\n        <span> <i class=\"pi pi-cloud-upload\"></i> {{ conversationCostService.totalApiCalls() }} </span>\n      </div>\n      }\n    </div>\n\n    }\n\n    <div>\n      <span class=\"pointer\" (click)=\"settingsClick()\"> \u2699\uFE0F </span>\n    </div>\n  </div>\n</div>\n", styles: [".chat-header{display:flex;justify-content:space-between;align-items:center;width:100%}.pointer{cursor:pointer}.header-controls{font-size:large;display:flex;justify-content:space-between;gap:10px}.admin-controls{background-color:bisque;padding:2px 5px;border-radius:4px}\n"] }]
+        }], propDecorators: { alternativeConversation: [{
+                type: Input
+            }], agentCard: [{
+                type: Input
+            }] } });
+
 class ChatFooterComponent {
     constructor() {
         // Services
@@ -2794,7 +2957,7 @@ class ChatFooterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatFooterComponent, isStandalone: true, selector: "dc-chat-footer", inputs: { isAIThinking: { classPropertyName: "isAIThinking", publicName: "isAIThinking", isSignal: true, isRequired: false, transformFunction: null }, flow: { classPropertyName: "flow", publicName: "flow", isSignal: true, isRequired: false, transformFunction: null }, micSettings: { classPropertyName: "micSettings", publicName: "micSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", textInputChanged: "textInputChanged" }, viewQueries: [{ propertyName: "micComponent", first: true, predicate: MicVadComponent, descendants: true }], ngImport: i0, template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <dc-mic (onFinished)=\"handleAudioRecorded($event)\"></dc-mic>\n    <!--     \n    <app-mic-vad\n      (audioRecorded)=\"handleAudioRecorded($event)\"\n      (statusChanged)=\"handleMicStatusChanged($event)\"\n      [continueListening]=\"shouldContinueListening()\" /> -->\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"prepareUserMsnAndSend()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"prepareUserMsnAndSend()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  @if(flow()?.goal) {\n  <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  }\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["targetOrBase", "micSettings", "isDone"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatFooterComponent, isStandalone: true, selector: "dc-chat-footer", inputs: { isAIThinking: { classPropertyName: "isAIThinking", publicName: "isAIThinking", isSignal: true, isRequired: false, transformFunction: null }, flow: { classPropertyName: "flow", publicName: "flow", isSignal: true, isRequired: false, transformFunction: null }, micSettings: { classPropertyName: "micSettings", publicName: "micSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", textInputChanged: "textInputChanged" }, viewQueries: [{ propertyName: "micComponent", first: true, predicate: MicVadComponent, descendants: true }], ngImport: i0, template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <dc-mic (onFinished)=\"handleAudioRecorded($event)\"></dc-mic>\n    <!--     \n    <app-mic-vad\n      (audioRecorded)=\"handleAudioRecorded($event)\"\n      (statusChanged)=\"handleMicStatusChanged($event)\"\n      [continueListening]=\"shouldContinueListening()\" /> -->\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"prepareUserMsnAndSend()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"prepareUserMsnAndSend()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  @if(flow()?.goal) {\n  <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  }\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2$2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["targetOrBase", "micSettings", "isDone"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatFooterComponent, decorators: [{
             type: Component,
@@ -3266,7 +3429,7 @@ class ChatMessageOrchestratorComponent {
         this.messages = input.required();
         this.messageRole = input.required();
         // Outputs
-        this.audioCompleted = output();
+        // audioCompleted = output<MessageContent>();
         // Signals
         this.messagesSignal = this.orchestrationService.messagesSignal;
     }
@@ -3275,13 +3438,13 @@ class ChatMessageOrchestratorComponent {
     }
     onAudioCompleted(message) {
         this.orchestrationService.audioCompleted(message);
-        this.audioCompleted.emit(message);
+        // this.audioCompleted.emit(message);
     }
     onWordClicked(wordData) {
         this.orchestrationService.wordClicked(wordData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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"], outputs: ["playAudio", "audioCompleted", "wordClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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 } }, 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"], outputs: ["playAudio", "audioCompleted", "wordClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessageOrchestratorComponent, decorators: [{
             type: Component,
@@ -3296,6 +3459,8 @@ const EVALUATION_EMOJIS = {
 };
 class ChatMessageComponent {
     constructor() {
+        // Services
+        this.aiGenerationService = inject(AIGenerationService);
         // Inputs
         this.chatMessage = input.required();
         this.chatUserSettings = input(null);
@@ -3326,12 +3491,16 @@ class ChatMessageComponent {
     printData() {
         console.log(this.chatMessage());
     }
+    async generateImage() {
+        const res = await this.aiGenerationService.generateImage(this.chatMessage(), 'test');
+        console.log(res);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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 (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      }\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}.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)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatMessageOrchestratorComponent, selector: "dc-message-orchestrator", inputs: ["messages", "messageRole"], outputs: ["audioCompleted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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      }\n\n      <div class=\"evaluation-footer\">\n        <span (click)=\"generateImage()\"> \uD83E\uDE7B </span>\n      </div>\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}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatMessageOrchestratorComponent, selector: "dc-message-orchestrator", inputs: ["messages", "messageRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, ChatMessageOrchestratorComponent], 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 (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      }\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}.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)}}\n"] }]
+            args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, ChatMessageOrchestratorComponent], 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      }\n\n      <div class=\"evaluation-footer\">\n        <span (click)=\"generateImage()\"> \uD83E\uDE7B </span>\n      </div>\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}.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 {
@@ -3487,7 +3656,7 @@ class ModelSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ModelSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ModelSelectorComponent, decorators: [{
             type: Component,
@@ -3571,7 +3740,7 @@ class DCConversationUserChatSettingsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationUserChatSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationUserChatSettingsComponent, isStandalone: true, selector: "dc-chat-settings-dialog", inputs: { showFeature: { classPropertyName: "showFeature", publicName: "showFeature", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSettingsChange: "onSettingsChange", closeClicked: "closeClicked", settingsApplied: "settingsApplied" }, viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], ngImport: i0, template: "<div class=\"dialog-container\">\n  <form [formGroup]=\"form\">\n    @if (showFeature().synthVoice) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"synthVoice\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.synthVoice.disabled\">Escuchar Voz</span>\n        <br />\n        <small>Desmarca si solo quieres leer texto</small>\n      </p>\n    </div>\n    } @if (showFeature().highlightWords) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"highlightWords\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Narraci\u00F3n de texto</span>\n        <br />\n        <small>Remarca las palabras como se van pronuncionando</small>\n      </p>\n    </div>\n    } @if (showFeature().speed) {\n    <div class=\"settings-section\">\n      <p>\n        Velocidad ({{ form.controls.speed.value | speedDisplay }})\n        <br />\n\n        <!-- <p-rating formControlName=\"speed\" iconOnClass=\"pi pi-step-forward\" iconOffClass=\"pi pi-minus\" /> -->\n\n        <p-select\n          id=\"speed\"\n          [options]=\"speedOptions\"\n          formControlName=\"speed\"\n          [placeholder]=\"'Select Language'\"\n          optionLabel=\"label\"\n          optionValue=\"value\"></p-select>\n      </p>\n    </div>\n    } @if (showFeature().realTime) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"realTime\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.realTime.disabled\">Tiempo real</span>\n        <br />\n        <small>No tienes que presionar el microphono, comenzar\u00E1 a grabar en cuanto la AI termine de hablar, cierra el chat para finalizar conversaci\u00F3n.</small>\n      </p>\n    </div>\n    } @if (showFeature().realTime) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"repeatRecording\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Reproducir mi grabaci\u00F3n</span>\n        <br />\n        <small>Escucha tu dialogo, despu\u00E9s de grabar, te ayudar\u00E1 a notar tus errores.</small>\n      </p>\n    </div>\n    } @if (showFeature().superHearing) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"superHearing\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Super O\u00EDdo \uD83E\uDDBE</span>\n        <br />\n        <small>Tu audio se procesa en el servidor para mejor efectividad, si no usa el navegador.</small>\n      </p>\n    </div>\n    }\n\n    <!-- @if (showFeature().fixGrammar) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"fixGrammar\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.fixGrammar.disabled\">Corregir gram\u00E1tica</span>\n        <br />\n        <small>La ai corrige tu forma de hablar/escribir y te retrolimenta de tus errores</small>\n      </p>\n    </div>\n    }  -->\n\n    <!-- @if (showFeature().autoTranslate) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"autoTranslate\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.autoTranslate.disabled\">Mostrar Traducciones </span>\n        <br />\n        <small>Texto adicional con la traducci\u00F3n</small>\n      </p>\n    </div>\n    }  -->\n\n    @if (showFeature().autoTranslate) {\n    <div class=\"voice-selection\">\n      <span>Voz Preferencial:</span>\n      <br />\n      <p-radioButton value=\"random\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Aleatorio</label>\n      <p-radioButton value=\"randomMan\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Hombre</label>\n      <p-radioButton value=\"randomWoman\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Mujer</label>\n    </div>\n    }\n\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"userMessageTask\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.userMessageTask.disabled\">Procesar mensajes de usuario</span>\n        <br />\n        <small>Correcciones, mejoras, retroalimentaci\u00F3n y sugerencias en el texto del usuario </small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"assistantMessageTask\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.assistantMessageTask.disabled\">Procesar mensajes de asistente</span>\n        <br />\n        <small>Correcciones, traducciones, pensamientos adicionales y m\u00E1s ayuda en el texto del asistente </small>\n      </p>\n    </div>\n\n    @if(isAdmin) {\n    <div>\n      <hr />\n      <b>Admin Section</b>\n      <br />\n\n      <b>Modelo:</b>\n\n      <dc-model-selector [modelForm]=\"form.controls.model\"></dc-model-selector>\n    </div>\n    }\n\n    <div class=\"button-group\">\n      <p-button (click)=\"saveSettings()\" label=\"Guardar cambios\"></p-button>\n      <p-button (click)=\"close()\" label=\"Cancelar\" styleClass=\"p-button-secondary\"></p-button>\n    </div>\n  </form>\n</div>\n", styles: [".dialog-container{padding:20px;background:#fff;border-radius:8px;min-width:300px;max-width:500px;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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i3.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: SpeedDescPipe, name: "speedDisplay" }, { kind: "ngmodule", type: RatingModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationUserChatSettingsComponent, isStandalone: true, selector: "dc-chat-settings-dialog", inputs: { showFeature: { classPropertyName: "showFeature", publicName: "showFeature", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSettingsChange: "onSettingsChange", closeClicked: "closeClicked", settingsApplied: "settingsApplied" }, viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], ngImport: i0, template: "<div class=\"dialog-container\">\n  <form [formGroup]=\"form\">\n    @if (showFeature().synthVoice) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"synthVoice\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.synthVoice.disabled\">Escuchar Voz</span>\n        <br />\n        <small>Desmarca si solo quieres leer texto</small>\n      </p>\n    </div>\n    } @if (showFeature().highlightWords) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"highlightWords\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Narraci\u00F3n de texto</span>\n        <br />\n        <small>Remarca las palabras como se van pronuncionando</small>\n      </p>\n    </div>\n    } @if (showFeature().speed) {\n    <div class=\"settings-section\">\n      <p>\n        Velocidad ({{ form.controls.speed.value | speedDisplay }})\n        <br />\n\n        <!-- <p-rating formControlName=\"speed\" iconOnClass=\"pi pi-step-forward\" iconOffClass=\"pi pi-minus\" /> -->\n\n        <p-select\n          id=\"speed\"\n          [options]=\"speedOptions\"\n          formControlName=\"speed\"\n          [placeholder]=\"'Select Language'\"\n          optionLabel=\"label\"\n          optionValue=\"value\"></p-select>\n      </p>\n    </div>\n    } @if (showFeature().realTime) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"realTime\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.realTime.disabled\">Tiempo real</span>\n        <br />\n        <small>No tienes que presionar el microphono, comenzar\u00E1 a grabar en cuanto la AI termine de hablar, cierra el chat para finalizar conversaci\u00F3n.</small>\n      </p>\n    </div>\n    } @if (showFeature().realTime) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"repeatRecording\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Reproducir mi grabaci\u00F3n</span>\n        <br />\n        <small>Escucha tu dialogo, despu\u00E9s de grabar, te ayudar\u00E1 a notar tus errores.</small>\n      </p>\n    </div>\n    } @if (showFeature().superHearing) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"superHearing\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span>Super O\u00EDdo \uD83E\uDDBE</span>\n        <br />\n        <small>Tu audio se procesa en el servidor para mejor efectividad, si no usa el navegador.</small>\n      </p>\n    </div>\n    }\n\n    <!-- @if (showFeature().fixGrammar) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"fixGrammar\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.fixGrammar.disabled\">Corregir gram\u00E1tica</span>\n        <br />\n        <small>La ai corrige tu forma de hablar/escribir y te retrolimenta de tus errores</small>\n      </p>\n    </div>\n    }  -->\n\n    <!-- @if (showFeature().autoTranslate) {\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"autoTranslate\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.autoTranslate.disabled\">Mostrar Traducciones </span>\n        <br />\n        <small>Texto adicional con la traducci\u00F3n</small>\n      </p>\n    </div>\n    }  -->\n\n    @if (showFeature().autoTranslate) {\n    <div class=\"voice-selection\">\n      <span>Voz Preferencial:</span>\n      <br />\n      <p-radioButton value=\"random\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Aleatorio</label>\n      <p-radioButton value=\"randomMan\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Hombre</label>\n      <p-radioButton value=\"randomWoman\" formControlName=\"voice\"></p-radioButton>\n      <label class=\"space\">Mujer</label>\n    </div>\n    }\n\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"userMessageTask\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.userMessageTask.disabled\">Procesar mensajes de usuario</span>\n        <br />\n        <small>Correcciones, mejoras, retroalimentaci\u00F3n y sugerencias en el texto del usuario </small>\n      </p>\n    </div>\n\n    <div class=\"settings-section\">\n      <p>\n        <p-checkbox class=\"mr-2\" formControlName=\"assistantMessageTask\" [binary]=\"true\" inputId=\"binary\"></p-checkbox>\n        <span [class.cross]=\"form.controls.assistantMessageTask.disabled\">Procesar mensajes de asistente</span>\n        <br />\n        <small>Correcciones, traducciones, pensamientos adicionales y m\u00E1s ayuda en el texto del asistente </small>\n      </p>\n    </div>\n\n    @if(isAdmin) {\n    <div>\n      <hr />\n      <b>Admin Section</b>\n      <br />\n\n      <b>Modelo:</b>\n\n      <dc-model-selector [modelForm]=\"form.controls.model\"></dc-model-selector>\n    </div>\n    }\n\n    <div class=\"button-group\">\n      <p-button (click)=\"saveSettings()\" label=\"Guardar cambios\"></p-button>\n      <p-button (click)=\"close()\" label=\"Cancelar\" styleClass=\"p-button-secondary\"></p-button>\n    </div>\n  </form>\n</div>\n", styles: [".dialog-container{padding:20px;background:#fff;border-radius:8px;min-width:300px;max-width:500px;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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i3$2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: SpeedDescPipe, name: "speedDisplay" }, { kind: "ngmodule", type: RatingModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationUserChatSettingsComponent, decorators: [{
             type: Component,
@@ -3664,12 +3833,24 @@ class ConversationInspector {
     callAgent() {
         this.globalToolsService.useTool('closeChatDrawer');
     }
+    exportChat(type) {
+        const chat = this.messageStateService.getMessagesSignal()();
+        const conversation = chat.filter((message) => message.role !== 'system');
+        let exportString = '';
+        if (type === 'conversation') {
+            exportString = conversation.map((message) => `${message.role}: ${message.content.replace(/\n+/g, '\n')}`).join('\n\n');
+        }
+        else {
+            exportString = chat.map((message) => `${message.role}: ${message.content.replace(/\n+/g, '\n')}`).join('\n\n');
+        }
+        navigator.clipboard.writeText(exportString);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationInspector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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    @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>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: "pipe", type: SafeJsonPipe, name: "safeJson" }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i1$3.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$2.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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>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: "pipe", type: SafeJsonPipe, name: "safeJson" }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i1$3.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$2.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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    @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>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], 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>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 {
@@ -3712,7 +3893,7 @@ class DCChatComponent {
         // 📤 Input Signals
         this.parseDict = input({});
         // 📤 Outputs
-        this.sendMessage = output(); // Notifies about various events happening inside the chat
+        this.chatEvent = output(); // Notifies about various events happening inside the chat
         this.goalCompleted = output(); // notifies when user completes goal (score reaches 100)
         // readonly wordClicked = output<WordData>(); // Replaced by sendMessage with ChatEventType.WordClicked
         // Signals States
@@ -3732,17 +3913,11 @@ class DCChatComponent {
             const clickedWordData = this.conversationService.getWordClickedSignal()();
             if (clickedWordData) {
                 // Emit through the consolidated sendMessage output
-                this.sendMessage.emit({ type: ChatEventType.WordClicked, payload: clickedWordData });
+                this.chatEvent.emit({ type: ChatEventType.WordClicked, payload: clickedWordData });
                 // Optional: Reset the signal in the service if you only want to emit once per click
                 // this.conversationService.notifyWordClicked(null);
             }
         });
-        effect(() => {
-            const message = this.chatMonitorService.messageAudioWillPlay$();
-            if (message) {
-                console.log('DCChatComponent: Audio will play for message:', message);
-            }
-        });
     }
     async ngOnInit() {
         this.conversationService.setDestroyed(false);
@@ -3800,11 +3975,11 @@ class DCChatComponent {
         this.goalCompleted.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationSettings: { classPropertyName: "conversationSettings", publicName: "conversationSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationFlow: { classPropertyName: "conversationFlow", publicName: "conversationFlow", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", goalCompleted: "goalCompleted" }, viewQueries: [{ propertyName: "chatFooterComponent", first: true, predicate: ChatFooterComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\"\n    (completeEvent)=\"complete()\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [flow]=\"conversationFlow\"> </dc-chat-footer>\n\n  <!-- Info Dialog -->\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["isAdmin", "alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent", "completeEvent"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "flow", "micSettings"], outputs: ["sendMessage", "textInputChanged"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings", "inputMessages"] }, { kind: "ngmodule", type: ProgressBarModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationSettings: { classPropertyName: "conversationSettings", publicName: "conversationSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationFlow: { classPropertyName: "conversationFlow", publicName: "conversationFlow", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chatEvent: "chatEvent", goalCompleted: "goalCompleted" }, viewQueries: [{ propertyName: "chatFooterComponent", first: true, predicate: ChatFooterComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat-container\">\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\"\n    (completeEvent)=\"complete()\">\n  </dc-chat-header>\n\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <dc-chat-footer [micSettings]=\"micSettings\" [flow]=\"conversationFlow\"> </dc-chat-footer>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["isAdmin", "alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent", "completeEvent"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "flow", "micSettings"], outputs: ["sendMessage", "textInputChanged"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings", "inputMessages"] }, { kind: "ngmodule", type: ProgressBarModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, ChatHeaderComponent, ChatFooterComponent, ChatMessagesListComponent, ProgressBarModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\"\n    (completeEvent)=\"complete()\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [flow]=\"conversationFlow\"> </dc-chat-footer>\n\n  <!-- Info Dialog -->\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
+            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, ChatHeaderComponent, ChatFooterComponent, ChatMessagesListComponent, ProgressBarModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chat-container\">\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\"\n    (completeEvent)=\"complete()\">\n  </dc-chat-header>\n\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <dc-chat-footer [micSettings]=\"micSettings\" [flow]=\"conversationFlow\"> </dc-chat-footer>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chatFooterComponent: [{
                 type: ViewChild,
                 args: [ChatFooterComponent]
@@ -4101,7 +4276,7 @@ class AccountPlatformForm {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AccountPlatformForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AccountPlatformForm, decorators: [{
             type: Component,
@@ -4121,14 +4296,22 @@ class FormGroupService {
             title: [''],
             description: [''],
             lang: [''],
+            agentType: [EAgentType.None],
             characterCard: this.createCharacterCardFormGroup(),
             conversationSettings: this.createConversationSettingFormGroup(),
             metaApp: this.createMetaFormGroup(),
             accounts: this.fb.array([]),
             conversationFlow: this.createConversationFlowFormGroup(),
+            manageable: this.createManageableFormGroup(),
         });
     }
     patchFormWithConversationData(form, agentCard) {
+        if (agentCard.metaApp && agentCard.metaApp.isPublished) {
+            agentCard.manageable = {
+                isPublic: agentCard.metaApp.isPublic,
+                status: agentCard.metaApp.isPublished ? 'published' : 'draft',
+            };
+        }
         form.patchValue(agentCard);
         // Patch dynamicConditions FormArray after the main form is patched
         const dynamicConditionsFormArray = form.get('conversationFlow.dynamicConditions');
@@ -4205,14 +4388,18 @@ class FormGroupService {
     }
     createMetaFormGroup() {
         return this.fb.group({
-            isPublished: [false],
-            isPublic: [false],
             authorId: [''],
             authorEmail: [''],
             takenCount: [0],
             level: [0],
         });
     }
+    createManageableFormGroup() {
+        return this.fb.group({
+            isPublic: [false],
+            status: ['draft'],
+        });
+    }
     createModelFormGroup(model) {
         return this.fb.group({
             id: this.fb.control(model?.id || ''),
@@ -4359,7 +4546,7 @@ class AgentTaskFormComponent {
         this.shortForm = false; // is short means AITask else SimpleAgentTask AiTaks is shorter
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentTaskFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AgentTaskFormComponent, isStandalone: true, selector: "agent-task-form", inputs: { formGroup: "formGroup", shortForm: "shortForm" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"space-y-6 p-4\">\n  @if(formGroup.controls?.task) {\n  <div class=\"form-field\">\n    <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\">Task</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", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DropdownModule }, { 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", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AgentTaskFormComponent, isStandalone: true, selector: "agent-task-form", inputs: { formGroup: "formGroup", shortForm: "shortForm" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"space-y-6 p-4\">\n  @if(formGroup.controls?.task) {\n  <div class=\"form-field\">\n    <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\">Task</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", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DropdownModule }, { 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", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentTaskFormComponent, decorators: [{
             type: Component,
@@ -4381,7 +4568,7 @@ class DcDoActionFormComponent {
         this.removeItem.emit({ conditionIndex: this.conditionIndex, doItemIndex: this.doItemIndex });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcDoActionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcDoActionFormComponent, isStandalone: true, selector: "dc-do-action-form", inputs: { formGroup: "formGroup", conditionIndex: "conditionIndex", doItemIndex: "doItemIndex", systemPromptTypeOptions: "systemPromptTypeOptions" }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"bg-white shadow-md rounded-lg p-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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], 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", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcDoActionFormComponent, isStandalone: true, selector: "dc-do-action-form", inputs: { formGroup: "formGroup", conditionIndex: "conditionIndex", doItemIndex: "doItemIndex", systemPromptTypeOptions: "systemPromptTypeOptions" }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"bg-white shadow-md rounded-lg p-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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], 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", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcDoActionFormComponent, decorators: [{
             type: Component,
@@ -4442,7 +4629,7 @@ class DcDynamicConditionsFormComponent {
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcDynamicConditionsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcDynamicConditionsFormComponent, isStandalone: true, selector: "dc-dynamic-conditions-form", inputs: { dynamicConditionsArray: "dynamicConditionsArray", dynamicConditionsPath: "dynamicConditionsPath", entityWhatOptions: "entityWhatOptions", entityWhenOptions: "entityWhenOptions", systemPromptTypeOptions: "systemPromptTypeOptions" }, ngImport: i0, template: "<div class=\"group\">\n  <h4>Dynamic Conditions <span pTooltip=\"Conditions that trigger tasks based on conversation state\">\u2139\uFE0F</span></h4>\n  @for (conditionControl of dynamicConditionsArray.controls; track conditionControl; let i = $index) {\n  <div class=\"group nested-group dynamic-condition-item\">\n    <div class=\"flex justify-between items-center mb-4\">\n      <h5>Condition {{ i + 1 }}</h5>\n      <button\n        pTooltip=\"Remove Condition\"\n        variant=\"outlined\"\n        [raised]=\"true\"\n        pButton\n        severity=\"danger\"\n        icon=\"pi pi-trash\"\n        (click)=\"removeDynamicCondition(i)\"></button>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhat' + i\">What <span pTooltip=\"Identifier for this condition (optional)\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhat' + i\"\n        [options]=\"entityWhatOptions\"\n        [formControl]=\"conditionControl.controls.what\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select What'\"></p-select>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhen' + i\">When <span pTooltip=\"Field or variable to check\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhen' + i\"\n        [options]=\"entityWhenOptions\"\n        [formControl]=\"conditionControl.controls.when\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select When'\"></p-select>\n    </div>\n    <div class=\"form-field\">\n      <label [for]=\"'conditionValue' + i\">Value <span pTooltip=\"Value to compare against\">\u2139\uFE0F</span></label>\n      <input pInputText [id]=\"'conditionValue' + i\" type=\"text\" [formControl]=\"conditionControl.controls.value\" />\n    </div>\n\n    <div class=\"group very-nested-group\">\n      <h6>DO THIS <span pTooltip=\"Tasks to execute if this condition is met\">\u2139\uFE0F</span></h6>\n      @for (doControl of conditionControl.controls.do.controls; track doControl; let j = $index) {\n      <dc-do-action-form\n        [formGroup]=\"doControl\"\n        [conditionIndex]=\"i\"\n        [doItemIndex]=\"j\"\n        [systemPromptTypeOptions]=\"systemPromptTypeOptions\"\n        (removeItem)=\"removeDoItem(i, j)\">\n      </dc-do-action-form>\n      }\n      <button\n        pButton\n        type=\"button\"\n        label=\"Add 'Do' Task\"\n        icon=\"pi pi-plus\"\n        (click)=\"addDoControl(conditionControl.controls.do)\"\n        class=\"p-button-outlined p-button-sm\"\n        style=\"margin-top: 10px\"></button>\n    </div>\n  </div>\n  }\n  <button pButton type=\"button\" severity=\"info\" label=\"Add Dynamic Condition\" (click)=\"addDynamicCondition()\"></button>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: DcDoActionFormComponent, selector: "dc-do-action-form", inputs: ["formGroup", "conditionIndex", "doItemIndex", "systemPromptTypeOptions"], outputs: ["removeItem"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcDynamicConditionsFormComponent, isStandalone: true, selector: "dc-dynamic-conditions-form", inputs: { dynamicConditionsArray: "dynamicConditionsArray", dynamicConditionsPath: "dynamicConditionsPath", entityWhatOptions: "entityWhatOptions", entityWhenOptions: "entityWhenOptions", systemPromptTypeOptions: "systemPromptTypeOptions" }, ngImport: i0, template: "<div class=\"group\">\n  <h4>Dynamic Conditions <span pTooltip=\"Conditions that trigger tasks based on conversation state\">\u2139\uFE0F</span></h4>\n  @for (conditionControl of dynamicConditionsArray.controls; track conditionControl; let i = $index) {\n  <div class=\"group nested-group dynamic-condition-item\">\n    <div class=\"flex justify-between items-center mb-4\">\n      <h5>Condition {{ i + 1 }}</h5>\n      <button\n        pTooltip=\"Remove Condition\"\n        variant=\"outlined\"\n        [raised]=\"true\"\n        pButton\n        severity=\"danger\"\n        icon=\"pi pi-trash\"\n        (click)=\"removeDynamicCondition(i)\"></button>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhat' + i\">What <span pTooltip=\"Identifier for this condition (optional)\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhat' + i\"\n        [options]=\"entityWhatOptions\"\n        [formControl]=\"conditionControl.controls.what\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select What'\"></p-select>\n    </div>\n\n    <div class=\"form-field\">\n      <label [for]=\"'conditionWhen' + i\">When <span pTooltip=\"Field or variable to check\">\u2139\uFE0F</span></label>\n      <p-select\n        [id]=\"'conditionWhen' + i\"\n        [options]=\"entityWhenOptions\"\n        [formControl]=\"conditionControl.controls.when\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select When'\"></p-select>\n    </div>\n    <div class=\"form-field\">\n      <label [for]=\"'conditionValue' + i\">Value <span pTooltip=\"Value to compare against\">\u2139\uFE0F</span></label>\n      <input pInputText [id]=\"'conditionValue' + i\" type=\"text\" [formControl]=\"conditionControl.controls.value\" />\n    </div>\n\n    <div class=\"group very-nested-group\">\n      <h6>DO THIS <span pTooltip=\"Tasks to execute if this condition is met\">\u2139\uFE0F</span></h6>\n      @for (doControl of conditionControl.controls.do.controls; track doControl; let j = $index) {\n      <dc-do-action-form\n        [formGroup]=\"doControl\"\n        [conditionIndex]=\"i\"\n        [doItemIndex]=\"j\"\n        [systemPromptTypeOptions]=\"systemPromptTypeOptions\"\n        (removeItem)=\"removeDoItem(i, j)\">\n      </dc-do-action-form>\n      }\n      <button\n        pButton\n        type=\"button\"\n        label=\"Add 'Do' Task\"\n        icon=\"pi pi-plus\"\n        (click)=\"addDoControl(conditionControl.controls.do)\"\n        class=\"p-button-outlined p-button-sm\"\n        style=\"margin-top: 10px\"></button>\n    </div>\n  </div>\n  }\n  <button pButton type=\"button\" severity=\"info\" label=\"Add Dynamic Condition\" (click)=\"addDynamicCondition()\"></button>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: DcDoActionFormComponent, selector: "dc-do-action-form", inputs: ["formGroup", "conditionIndex", "doItemIndex", "systemPromptTypeOptions"], outputs: ["removeItem"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcDynamicConditionsFormComponent, decorators: [{
             type: Component,
@@ -4500,7 +4687,7 @@ class DcDynamicCriteriaFormComponent {
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcDynamicCriteriaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcDynamicCriteriaFormComponent, isStandalone: true, selector: "dc-dynamic-criteria-form", inputs: { formArray: "formArray", title: "title", mode: "mode", availableItems: "availableItems" }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"flex justify-content-between align-items-center mb-4\">\n    <h4 class=\"m-0 text-xl font-semibold\">{{ title }}</h4>\n    <button pButton type=\"button\" (click)=\"openDialog()\" [label]=\"'Add ' + title\" class=\"p-button-sm\"></button>\n  </div>\n\n  @for (item of formArray.controls; track $index) {\n  <div [formGroup]=\"getItemFormGroup($index)\" class=\"border-1 surface-border border-round p-4 mb-3\">\n    <div class=\"grid formgrid\">\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"name-{{ $index }}\" class=\"block mb-2\">Name</label>\n        <input id=\"name-{{ $index }}\" type=\"text\" pInputText formControlName=\"name\" class=\"w-full\" />\n      </div>\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"emoji-{{ $index }}\" class=\"block mb-2\">Emoji</label>\n        <input id=\"emoji-{{ $index }}\" type=\"text\" pInputText formControlName=\"emoji\" class=\"w-full\" />\n      </div>\n\n      <div class=\"col-12\">\n        <label for=\"description-{{ $index }}\" class=\"block mb-2\">Description</label>\n        <input id=\"description-{{ $index }}\" type=\"text\" pInputText formControlName=\"description\" class=\"w-full\" />\n      </div>\n    </div>\n\n    <div class=\"col-12 flex justify-content-between items-center mt-2\">\n      <div class=\"field-checkbox flex items-center\">\n        <p-checkbox formControlName=\"enabled\" [binary]=\"true\" inputId=\"enabled-{{ $index }}\"></p-checkbox>\n        <label for=\"enabled-{{ $index }}\" class=\"ml-2\">Enabled</label>\n      </div>\n      <button pButton type=\"button\" icon=\"pi pi-trash\" (click)=\"removeItem($index)\" class=\"p-button-danger p-button-sm\"></button>\n    </div>\n  </div>\n  }\n\n  <p-dialog [header]=\"'Select ' + title\" [(visible)]=\"displayDialog\" [modal]=\"true\" [style]=\"{ width: '50vw' }\">\n    <div class=\"flex flex-col gap-3\">\n      @for (item of availableItems; track $index) {\n      <div class=\"flex justify-content-between align-items-center py-2 border-bottom-1 surface-border\">\n        <div>\n          <span class=\"font-semibold\">{{ item.emoji }} {{ item.name }}:</span>\n          {{ item.description }}\n        </div>\n        <button pButton type=\"button\" label=\"Add\" (click)=\"addItem(item)\" class=\"p-button-sm\"></button>\n      </div>\n      }\n    </div>\n  </p-dialog>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcDynamicCriteriaFormComponent, isStandalone: true, selector: "dc-dynamic-criteria-form", inputs: { formArray: "formArray", title: "title", mode: "mode", availableItems: "availableItems" }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"flex justify-content-between align-items-center mb-4\">\n    <h4 class=\"m-0 text-xl font-semibold\">{{ title }}</h4>\n    <button pButton type=\"button\" (click)=\"openDialog()\" [label]=\"'Add ' + title\" class=\"p-button-sm\"></button>\n  </div>\n\n  @for (item of formArray.controls; track $index) {\n  <div [formGroup]=\"getItemFormGroup($index)\" class=\"border-1 surface-border border-round p-4 mb-3\">\n    <div class=\"grid formgrid\">\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"name-{{ $index }}\" class=\"block mb-2\">Name</label>\n        <input id=\"name-{{ $index }}\" type=\"text\" pInputText formControlName=\"name\" class=\"w-full\" />\n      </div>\n      <div class=\"col-12 mb-2 lg:col-6 lg:mb-0\">\n        <label for=\"emoji-{{ $index }}\" class=\"block mb-2\">Emoji</label>\n        <input id=\"emoji-{{ $index }}\" type=\"text\" pInputText formControlName=\"emoji\" class=\"w-full\" />\n      </div>\n\n      <div class=\"col-12\">\n        <label for=\"description-{{ $index }}\" class=\"block mb-2\">Description</label>\n        <input id=\"description-{{ $index }}\" type=\"text\" pInputText formControlName=\"description\" class=\"w-full\" />\n      </div>\n    </div>\n\n    <div class=\"col-12 flex justify-content-between items-center mt-2\">\n      <div class=\"field-checkbox flex items-center\">\n        <p-checkbox formControlName=\"enabled\" [binary]=\"true\" inputId=\"enabled-{{ $index }}\"></p-checkbox>\n        <label for=\"enabled-{{ $index }}\" class=\"ml-2\">Enabled</label>\n      </div>\n      <button pButton type=\"button\" icon=\"pi pi-trash\" (click)=\"removeItem($index)\" class=\"p-button-danger p-button-sm\"></button>\n    </div>\n  </div>\n  }\n\n  <p-dialog [header]=\"'Select ' + title\" [(visible)]=\"displayDialog\" [modal]=\"true\" [style]=\"{ width: '50vw' }\">\n    <div class=\"flex flex-col gap-3\">\n      @for (item of availableItems; track $index) {\n      <div class=\"flex justify-content-between align-items-center py-2 border-bottom-1 surface-border\">\n        <div>\n          <span class=\"font-semibold\">{{ item.emoji }} {{ item.name }}:</span>\n          {{ item.description }}\n        </div>\n        <button pButton type=\"button\" label=\"Add\" (click)=\"addItem(item)\" class=\"p-button-sm\"></button>\n      </div>\n      }\n    </div>\n  </p-dialog>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcDynamicCriteriaFormComponent, decorators: [{
             type: Component,
@@ -4575,7 +4762,7 @@ class DCConversationFlowFormComponent {
         console.log(this.formGroup.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationFlowFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationFlowFormComponent, isStandalone: true, selector: "dc-conversation-flow-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"group\">\n  <h3>Conversation Flow <span pTooltip=\"Define the flow and logic of the conversation\">\u2139\uFE0F</span></h3>\n\n  <div class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"Aqu\u00ED se especifican las reglas de como se progresa en la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n\n    <agent-task-form [formGroup]=\"formGroup.controls.goal\" [shortForm]=\"true\"></agent-task-form>\n  </div>\n\n  <details>\n    <summary>Trigger Task (Tareas autom\u00E1ticas que se activan al conversar)</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4\n        >Trigger Tasks\n        <span\n          (click)=\"showData()\"\n          pTooltip=\"Tareas que se ejecutan en eventos espec\u00EDficos de la conversaci\u00F3n como  cuando el usuario env\u00EDa un mensaje, cuando el agente responde, etc. se visualizan normalmente en la secci\u00F3n de retro\"\n          >\u2139\uFE0F</span\n        ></h4\n      >\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">\n          <b>{{ eventKey | formatKey }}</b>\n        </label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\" [shortForm]=\"true\"></agent-task-form>\n      </div>\n      }\n    </div>\n  </details>\n  <details>\n    <summary>Tools (Herramientas que usa la APP al ocurrir eventos)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.tools\" title=\"Tool\" mode=\"select\" [availableItems]=\"validTools\"> </dc-dynamic-criteria-form>\n  </details>\n  <details>\n    <summary>Challenges (Mini Desafios al conversar)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.challenges\" title=\"Challenge\" mode=\"free-text\"> </dc-dynamic-criteria-form>\n  </details>\n\n  <dc-dynamic-conditions-form\n    [dynamicConditionsArray]=\"formGroup.controls.dynamicConditions\"\n    [dynamicConditionsPath]=\"'formGroup.controls.dynamicConditions'\"\n    [entityWhatOptions]=\"entityWhatOptions\"\n    [entityWhenOptions]=\"entityWhenOptions\"\n    [systemPromptTypeOptions]=\"systemPromptTypeOptions\">\n  </dc-dynamic-conditions-form>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: AgentTaskFormComponent, selector: "agent-task-form", inputs: ["formGroup", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: DcDynamicConditionsFormComponent, selector: "dc-dynamic-conditions-form", inputs: ["dynamicConditionsArray", "dynamicConditionsPath", "entityWhatOptions", "entityWhenOptions", "systemPromptTypeOptions"] }, { kind: "component", type: DcDynamicCriteriaFormComponent, selector: "dc-dynamic-criteria-form", inputs: ["formArray", "title", "mode", "availableItems"] }, { kind: "pipe", type: FormatKeyPipe, name: "formatKey" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationFlowFormComponent, isStandalone: true, selector: "dc-conversation-flow-form", inputs: { formGroup: "formGroup" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"group\">\n  <h3>Conversation Flow <span pTooltip=\"Define the flow and logic of the conversation\">\u2139\uFE0F</span></h3>\n\n  <div class=\"form-field\">\n    <label for=\"flowGoal\">Goal <span pTooltip=\"Aqu\u00ED se especifican las reglas de como se progresa en la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n\n    <agent-task-form [formGroup]=\"formGroup.controls.goal\" [shortForm]=\"true\"></agent-task-form>\n  </div>\n\n  <details>\n    <summary>Trigger Task (Tareas autom\u00E1ticas que se activan al conversar)</summary>\n\n    <div formGroupName=\"triggerTasks\" class=\"group\">\n      <h4\n        >Trigger Tasks\n        <span\n          (click)=\"showData()\"\n          pTooltip=\"Tareas que se ejecutan en eventos espec\u00EDficos de la conversaci\u00F3n como  cuando el usuario env\u00EDa un mensaje, cuando el agente responde, etc. se visualizan normalmente en la secci\u00F3n de retro\"\n          >\u2139\uFE0F</span\n        ></h4\n      >\n      @for (eventKey of objectKeys(formGroup.controls.triggerTasks.controls); track eventKey) {\n      <div class=\"form-field\">\n        <label [for]=\"eventKey\">\n          <b>{{ eventKey | formatKey }}</b>\n        </label>\n        <agent-task-form [formGroup]=\"formGroup.controls.triggerTasks.controls[eventKey]\" [shortForm]=\"true\"></agent-task-form>\n      </div>\n      }\n    </div>\n  </details>\n  <details>\n    <summary>Tools (Herramientas que usa la APP al ocurrir eventos)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.tools\" title=\"Tool\" mode=\"select\" [availableItems]=\"validTools\"> </dc-dynamic-criteria-form>\n  </details>\n  <details>\n    <summary>Challenges (Mini Desafios al conversar)</summary>\n    <dc-dynamic-criteria-form [formArray]=\"formGroup.controls.challenges\" title=\"Challenge\" mode=\"free-text\"> </dc-dynamic-criteria-form>\n  </details>\n\n  <dc-dynamic-conditions-form\n    [dynamicConditionsArray]=\"formGroup.controls.dynamicConditions\"\n    [dynamicConditionsPath]=\"'formGroup.controls.dynamicConditions'\"\n    [entityWhatOptions]=\"entityWhatOptions\"\n    [entityWhenOptions]=\"entityWhenOptions\"\n    [systemPromptTypeOptions]=\"systemPromptTypeOptions\">\n  </dc-dynamic-conditions-form>\n</div>\n", styles: [".nested-group{border:1px solid #eee;padding:10px;margin-top:10px;border-radius:4px}.very-nested-group{border:1px dashed #ccc;padding:8px;margin-top:8px;border-radius:4px}.dynamic-condition-item{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: AgentTaskFormComponent, selector: "agent-task-form", inputs: ["formGroup", "shortForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: DcDynamicConditionsFormComponent, selector: "dc-dynamic-conditions-form", inputs: ["dynamicConditionsArray", "dynamicConditionsPath", "entityWhatOptions", "entityWhenOptions", "systemPromptTypeOptions"] }, { kind: "component", type: DcDynamicCriteriaFormComponent, selector: "dc-dynamic-criteria-form", inputs: ["formArray", "title", "mode", "availableItems"] }, { kind: "pipe", type: FormatKeyPipe, name: "formatKey" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationFlowFormComponent, decorators: [{
             type: Component,
@@ -4760,7 +4947,7 @@ Improve the following first message:`;
         return control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcCharacterCardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcCharacterCardFormComponent, isStandalone: true, selector: "dc-character-card-form", inputs: { characterCardForm: "characterCardForm" }, outputs: { generateMissingDataRequest: "generateMissingDataRequest" }, ngImport: i0, template: "<div [formGroup]=\"characterCardForm\" class=\"p-6 bg-teal-50 min-h-screen\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 bg-white p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold text-gray-700 mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n        >Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <input\n        pInputText\n        id=\"cardName\"\n        type=\"text\"\n        formControlName=\"name\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n      @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        class=\"textmin mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        rows=\"3\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium text-gray-700\"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >First Message\n            <span\n              pTooltip=\"Es muy importante que la historia inicie bien, ya que es el patr\u00F3n inicial para la AI, respetar las convenciones de texto\"\n              class=\"text-blue-500 cursor-pointer\"\n              >\u2139\uFE0F</span\n            ></span\n          >\n          <div class=\"flex items-center space-x-2\">\n            <p-togglebutton\n              [formControl]=\"markdownForm.controls.seeMarkdown\"\n              [onLabel]=\"'Editar'\"\n              [offLabel]=\"'Ver Markdown'\"\n              size=\"small\"\n              styleClass=\"min-w-16 p-button-sm\"\n              (onChange)=\"checkCdr()\" />\n            <p-button icon=\"pi pi-refresh\" (click)=\"improveFirstMessage()\" label=\"Mejorar\" styleClass=\"p-button-sm p-button-outlined\"></p-button>\n          </div>\n        </div>\n      </label>\n\n      @if(markdownForm.controls.seeMarkdown.value){\n      <div [innerHTML]=\"dataGroup.controls['first_mes'].value | mdToHtmlArray\" class=\"prose mt-1 p-3 border border-gray-200 rounded-md\"></div>\n      }@else{\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardFirstMessage\"\n        formControlName=\"first_mes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n      </textarea>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"mes_example\" class=\"block text-sm font-medium text-gray-700\"\n        >Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"mes_example\"\n        formControlName=\"mes_example\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardCreatorNotes\"\n        formControlName=\"creator_notes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardSystemPrompt\" class=\"block text-sm font-medium text-gray-700\"\n        >System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardSystemPrompt\"\n        formControlName=\"system_prompt\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n      @if (dataGroup.controls['system_prompt']?.errors?.['required'] && dataGroup.controls['system_prompt']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> System prompt is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label class=\"block text-sm font-medium text-gray-700\">Image Description</label>\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"picture_description\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >Post-History Instructions (Opcional)\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"post_history_instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('alternate_greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('alternate_greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('alternate_greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium text-gray-700\">Tags \u2139\uFE0F</label>\n      <div class=\"array-field space-y-2\">\n        @for (tag of tagsArray.controls; track tag; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\">\n          <input\n            pInputText\n            [id]=\"'cardTag' + i\"\n            type=\"text\"\n            [formControl]=\"asFormControl(tag)\"\n            (input)=\"updateArrayField('tags', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\" />\n          <button pButton severity=\"danger\" label=\"Remove\" icon=\"pi pi-times\" (click)=\"removeArrayItem('tags', i)\" class=\"p-button-sm\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addArrayItem('tags')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i6.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcCharacterCardFormComponent, isStandalone: true, selector: "dc-character-card-form", inputs: { characterCardForm: "characterCardForm" }, outputs: { generateMissingDataRequest: "generateMissingDataRequest" }, ngImport: i0, template: "<div [formGroup]=\"characterCardForm\" class=\"p-6 bg-teal-50 min-h-screen\">\n  <div formGroupName=\"data\" class=\"card-group space-y-6 bg-white p-8 rounded-lg shadow-md\">\n    <div class=\"flex justify-end\">\n      <p-button\n        (click)=\"generateMissingDataRequest.emit()\"\n        icon=\"pi pi-sparkles\"\n        [rounded]=\"true\"\n        severity=\"info\"\n        label=\"Arreglar Campos\"\n        styleClass=\"p-button-sm\" />\n    </div>\n\n    <h3 class=\"text-2xl font-semibold text-gray-700 mb-6\"\n      >Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></h3\n    >\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardName\" class=\"block text-sm font-medium text-gray-700\"\n        >Name <span pTooltip=\"El nombre del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <input\n        pInputText\n        id=\"cardName\"\n        type=\"text\"\n        formControlName=\"name\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\" />\n      @if (dataGroup.controls['name']?.errors?.['required'] && dataGroup.controls['name']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Name is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardDescription\" class=\"block text-sm font-medium text-gray-700\"\n        >Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        class=\"textmin mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        rows=\"3\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardDescription\"\n        formControlName=\"description\"></textarea>\n      @if (dataGroup.controls['description']?.errors?.['required'] && dataGroup.controls['description']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> Description is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardScenario\" class=\"block text-sm font-medium text-gray-700\"\n        >Scenario <span pTooltip=\"Describe the context or setting for the conversation\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardScenario\"\n        formControlName=\"scenario\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardFirstMessage\" class=\"flex flex-col text-sm font-medium text-gray-700\">\n        <div class=\"flex justify-between items-center\">\n          <span\n            >First Message\n            <span\n              pTooltip=\"Es muy importante que la historia inicie bien, ya que es el patr\u00F3n inicial para la AI, respetar las convenciones de texto\"\n              class=\"text-blue-500 cursor-pointer\"\n              >\u2139\uFE0F</span\n            ></span\n          >\n          <div class=\"flex items-center space-x-2\">\n            <p-togglebutton\n              [formControl]=\"markdownForm.controls.seeMarkdown\"\n              [onLabel]=\"'Editar'\"\n              [offLabel]=\"'Ver Markdown'\"\n              size=\"small\"\n              styleClass=\"min-w-16 p-button-sm\"\n              (onChange)=\"checkCdr()\" />\n            <p-button icon=\"pi pi-refresh\" (click)=\"improveFirstMessage()\" label=\"Mejorar\" styleClass=\"p-button-sm p-button-outlined\"></p-button>\n          </div>\n        </div>\n      </label>\n\n      @if(markdownForm.controls.seeMarkdown.value){\n      <div [innerHTML]=\"dataGroup.controls['first_mes'].value | mdToHtmlArray\" class=\"prose mt-1 p-3 border border-gray-200 rounded-md\"></div>\n      }@else{\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardFirstMessage\"\n        formControlName=\"first_mes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n      </textarea>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"mes_example\" class=\"block text-sm font-medium text-gray-700\"\n        >Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"mes_example\"\n        formControlName=\"mes_example\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardCreatorNotes\" class=\"block text-sm font-medium text-gray-700\"\n        >Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardCreatorNotes\"\n        formControlName=\"creator_notes\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardSystemPrompt\" class=\"block text-sm font-medium text-gray-700\"\n        >System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        id=\"cardSystemPrompt\"\n        formControlName=\"system_prompt\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n      @if (dataGroup.controls['system_prompt']?.errors?.['required'] && dataGroup.controls['system_prompt']?.touched) {\n      <div class=\"error text-red-500 text-xs mt-1\"> System prompt is required </div>\n      }\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label class=\"block text-sm font-medium text-gray-700\">Image Description</label>\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"picture_description\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardPostHistoryInstructions\" class=\"block text-sm font-medium text-gray-700\"\n        >Post-History Instructions (Opcional)\n        <span\n          pTooltip=\"Dejar en blanco, al menos que se sepa como funciona, esto se llama jailbreak, es para darle instrucciones finales y m\u00E1s importantes al modelo\"\n          class=\"text-blue-500 cursor-pointer\"\n          >\u2139\uFE0F</span\n        ></label\n      >\n      <textarea\n        rows=\"2\"\n        pTextarea\n        [autoResize]=\"true\"\n        formControlName=\"post_history_instructions\"\n        class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"></textarea>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label for=\"cardAlternateGreetings\" class=\"block text-sm font-medium text-gray-700\"\n        >Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\" class=\"text-blue-500 cursor-pointer\">\u2139\uFE0F</span></label\n      >\n      <div class=\"array-field space-y-2\">\n        @for (greeting of alternateGreetingsArray.controls; track greeting; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\" style=\"position: relative\">\n          <textarea\n            pTextarea\n            rows=\"1\"\n            [autoResize]=\"true\"\n            [id]=\"'cardAlternateGreeting' + i\"\n            [formControl]=\"asFormControl(greeting)\"\n            (input)=\"updateArrayField('alternate_greetings', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\">\n          </textarea>\n          <button\n            pButton\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            class=\"remove-button p-button-sm p-button-rounded p-button-danger\"\n            (click)=\"removeArrayItem('alternate_greetings', i)\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Greeting\" icon=\"pi pi-plus\" (click)=\"addArrayItem('alternate_greetings')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n\n    <div class=\"form-field grid grid-cols-1 gap-2\">\n      <label pTooltip=\"Agrega las categorias\" for=\"cardTags\" class=\"block text-sm font-medium text-gray-700\">Tags \u2139\uFE0F</label>\n      <div class=\"array-field space-y-2\">\n        @for (tag of tagsArray.controls; track tag; let i = $index) {\n        <div class=\"array-item flex items-center space-x-2\">\n          <input\n            pInputText\n            [id]=\"'cardTag' + i\"\n            type=\"text\"\n            [formControl]=\"asFormControl(tag)\"\n            (input)=\"updateArrayField('tags', i, $event)\"\n            class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm flex-grow\" />\n          <button pButton severity=\"danger\" label=\"Remove\" icon=\"pi pi-times\" (click)=\"removeArrayItem('tags', i)\" class=\"p-button-sm\"></button>\n        </div>\n        }\n        <button pButton severity=\"info\" label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addArrayItem('tags')\" class=\"p-button-sm\"></button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".textmin{min-height:40px}.array-field{display:flex;flex-direction:column;gap:8px}.array-item{display:flex;align-items:center;gap:8px;position:relative}.array-item textarea,.array-item input[type=text]{flex-grow:1}.remove-button{position:absolute;right:5px;top:5px;min-width:auto!important;width:2rem;height:2rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i6.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "pipe", type: MdToHtmlArrayPipe, name: "mdToHtmlArray" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcCharacterCardFormComponent, decorators: [{
             type: Component,
@@ -4800,7 +4987,7 @@ class DcVoiceTtsFormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcVoiceTtsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", 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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3$3.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "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: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CardModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", 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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3$5.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "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$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CardModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcVoiceTtsFormComponent, decorators: [{
             type: Component,
@@ -4876,7 +5063,7 @@ class DcConversationSettingsFormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcConversationSettingsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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    Conversation Settings\n    <span pTooltip=\"Additional information about the conversation\" 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i4$4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i6$1.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: "19.2.4", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i4$4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i6$1.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: "19.2.4", ngImport: i0, type: DcConversationSettingsFormComponent, decorators: [{
             type: Component,
@@ -4891,7 +5078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         DynamicDialogModule,
                         ModelSelectorComponent,
                         DcVoiceTtsFormComponent,
-                    ], providers: [DialogService], 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    Conversation Settings\n    <span pTooltip=\"Additional information about the conversation\" 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" }]
+                    ], providers: [DialogService], 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" }]
         }], propDecorators: { form: [{
                 type: Input
             }], textEngineOptions: [{
@@ -4902,29 +5089,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
-class DCAgentCardFormComponent extends EntityBaseFormComponent {
-    getSettings() {
-        const imageSettings = {
-            path: 'conversation-cards/' + this.entityId(),
-            fileName: '',
-            cropSettings: { aspectRatio: AspectType.Vertical_9_16, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 450 },
-        };
-        return imageSettings;
+class DcManageableFormComponent {
+    constructor() {
+        this.form = input.required();
+        this.statusOptions = [
+            { label: '✍️  Borrador', value: 'draft' },
+            { label: '📝 En Revisión', value: 'review' },
+            { label: '👍 Publicado', value: 'published' },
+            { label: '🗑️ Archivado', value: 'archived' },
+        ];
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcManageableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", type: DcManageableFormComponent, isStandalone: true, selector: "dc-manageable-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <div style=\"display: flex; justify-content: space-between\">\n    <div class=\"form-field checkbox\">\n      <label>\n        <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n        Public <span pTooltip=\"Is this content visible to all users?\">\u2139\uFE0F</span>\n      </label>\n    </div>\n\n    <div class=\"form-field\">\n      <label for=\"status\">Status <span pTooltip=\"Status of the content\">\u2139\uFE0F</span></label>\n      <p-select\n        id=\"status\"\n        [options]=\"statusOptions\"\n        formControlName=\"status\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Status'\"></p-select>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcManageableFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-manageable-form', standalone: true, imports: [ReactiveFormsModule, CardModule, CheckboxModule, SelectModule, TooltipModule], template: "<div [formGroup]=\"form()\">\n  <div style=\"display: flex; justify-content: space-between\">\n    <div class=\"form-field checkbox\">\n      <label>\n        <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n        Public <span pTooltip=\"Is this content visible to all users?\">\u2139\uFE0F</span>\n      </label>\n    </div>\n\n    <div class=\"form-field\">\n      <label for=\"status\">Status <span pTooltip=\"Status of the content\">\u2139\uFE0F</span></label>\n      <p-select\n        id=\"status\"\n        [options]=\"statusOptions\"\n        formControlName=\"status\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Status'\"></p-select>\n    </div>\n  </div>\n</div>\n" }]
+        }] });
+
+class DCAgentCardFormComponent extends EntityBaseFormComponent {
     constructor() {
-        super();
+        super(...arguments);
         // Services
         this.fb = inject(FormBuilder);
         this.entityCommunicationService = inject(CONVERSATION_AI_TOKEN);
         this.dialogService = inject(DialogService);
         this.promptBuilder = inject(ConversationPromptBuilderService);
-        this.toastService = inject(TOAST_ALERTS_TOKEN, { optional: true });
+        // private toastService = inject<ToastAlertsAbstractService>(TOAST_ALERTS_TOKEN, { optional: true });
         this.formGroupService = inject(FormGroupService);
         // select options
         this.conversationOptions = ConversationTypeOptions;
         this.voiceTTSOptions = Object.values(VoiceTTSOptions);
         this.textEngineOptions = TextEngineOptions;
         this.languageOptions = getSupportedLanguageOptions('es');
+        this.agentTypeOptions = Object.values(EAgentType).filter((value) => value !== null);
         this.storageSettings = input(this.getSettings());
         this.onSave = output();
         this.onGoDetails = output();
@@ -4932,14 +5130,19 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.form = this.formGroupService.createAgentCardForm();
         this.isGenerating = signal(false);
     }
+    getSettings() {
+        const imageSettings = {
+            path: 'conversation-cards/' + this.entityId(),
+            fileName: '',
+            cropSettings: { aspectRatio: AspectType.Vertical_9_16, resolutions: [ResolutionType.MediumLarge], resizeToWidth: 450 },
+        };
+        return imageSettings;
+    }
     patchForm(agentCard) {
         this.formGroupService.patchFormWithConversationData(this.form, agentCard);
         this.formGroupService.handleArrayForms(this.form, agentCard);
         this.storageSettings().path = 'conversation-cards/' + this.entityId();
     }
-    get conversationSettings() {
-        return this.form.get('conversationSettings');
-    }
     async save() {
         const result = await super.save();
         if (result) {
@@ -4966,8 +5169,8 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
                     jsonData.data.alternate_greetings.forEach((_) => {
                         this.form.get('characterCard.data.alternate_greetings').push(this.fb.control(''));
                     });
-                    this.conversationSettings.get('conversationType')?.setValue(ConversationType.RolePlay);
-                    this.conversationSettings.get('textEngine')?.setValue(TextEngines.MarkdownMultiMessages);
+                    this.form.get('conversationSettings.conversationType')?.setValue(ConversationType.RolePlay);
+                    this.form.get('conversationSettings.textEngine')?.setValue(TextEngines.MarkdownMultiMessages);
                 }
                 this.form.patchValue({ characterCard: jsonData });
                 console.log(this.form.value);
@@ -5110,8 +5313,8 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
     onAssetsChange(event) {
         this.entity.update((card) => ({ ...card, assets: event }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCAgentCardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null } }, 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\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\n          <div class=\"form-field\">\n            <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n            @if(form.get('title').errors?.['required'] && form.get('title').touched){\n            <div class=\"error\"> Title is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.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              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"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-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                Public\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                Published\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts){\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group 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;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$2.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: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCAgentCardFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { storageSettings: { classPropertyName: "storageSettings", publicName: "storageSettings", isSignal: true, isRequired: false, transformFunction: null } }, 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\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\n          <div class=\"form-field\">\n            <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n            @if(form.get('title').errors?.['required'] && form.get('title').touched){\n            <div class=\"error\"> Title is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.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              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        @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;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$3.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", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
             type: Component,
@@ -5136,8 +5339,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         FileUploadModule,
                         MessageModule,
                         DcConversationSettingsFormComponent,
-                    ], 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\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\n          <div class=\"form-field\">\n            <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n            @if(form.get('title').errors?.['required'] && form.get('title').touched){\n            <div class=\"error\"> Title is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.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              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n        </div>\n\n        <dc-conversation-settings-form\n          [form]=\"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-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                Public\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-inputnumber formControlName=\"level\" [showButtons]=\"true\" [min]=\"0\" [max]=\"5\" />\n                Nivel Recomendado\n              </label>\n            </div>\n\n            <div class=\"form-field checkbox\">\n              <label>\n                <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                Published\n              </label>\n            </div>\n          </div>\n        </details>\n\n        <details>\n          <summary>Gestion de cuentas</summary>\n          <div class=\"group\">\n            <h4>Gestion de cuentas</h4>\n            @if(form.controls.accounts){\n            <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n            }\n          </div>\n        </details>\n\n        @if(form.controls.conversationFlow){\n        <div class=\"group 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;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .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"] }]
-        }], ctorParameters: () => [] });
+                        DcManageableFormComponent,
+                    ], 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\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\n          <div class=\"form-field\">\n            <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n            @if(form.get('title').errors?.['required'] && form.get('title').touched){\n            <div class=\"error\"> Title is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\">Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.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              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        @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;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .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"] }]
+        }] });
 
 var EventCard;
 (function (EventCard) {
@@ -5149,6 +5353,7 @@ var EventCard;
 class AgentCardUI {
     constructor() {
         this.eventType = EventCard;
+        this.userService = inject(UserService);
         this.speedDialModel = [
             { label: 'Edit', icon: 'pi pi-pencil', title: 'edit', severity: 'primary', command: () => this.eventCard(EventCard.Edit) },
             { label: 'Clonar', icon: 'pi pi-copy', command: () => this.eventCard(EventCard.Clone) },
@@ -5159,21 +5364,21 @@ class AgentCardUI {
         this.onAction = output();
     }
     ngOnInit() {
-        const name = this.card()?.characterCard?.data?.name;
         const description = this.card()?.characterCard?.data?.description;
         if (description) {
-            this.card().characterCard.data.description = description?.replace(/{{char}}/g, name);
+            // this.card()?.characterCard?.data?.description = description?.replace(/{{char}}/g, name);
         }
+        this.userService.isAdmin();
     }
     eventCard(eventType) {
         this.onAction.emit({ action: eventType, item: this.card() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentCardUI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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().title }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().description || card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card()?.['taken']){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"eventCard(eventType.Select)\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$4.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$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$5.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: 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().title }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().description || card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card()?.['taken']){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    } @if(userService.isAdmin()){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-eye\" severity=\"secondary\" [value]=\"card()?.manageable?.status || 'Sin estado'\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"eventCard(eventType.Select)\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$4.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$3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$5.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: 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().title }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().description || card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card()?.['taken']){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"eventCard(eventType.Select)\"\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\">{{ card().title }}</p>\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().description || card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card()?.['taken']){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    } @if(userService.isAdmin()){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-eye\" severity=\"secondary\" [value]=\"card()?.manageable?.status || 'Sin estado'\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"eventCard(eventType.Select)\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"] }]
         }] });
 
 // This component contains a really avanced strategy to dinamically render Conversation Cards Details so every app can implement it with their own Style and Behavior
@@ -5188,7 +5393,7 @@ class AgentCardListComponent extends EntityBaseListComponent {
     constructor() {
         super();
         // Inputs
-        this.customFilters = [];
+        this.extraFilters = [];
         this.showOptions = input(true);
         this.gridLayout = input(true);
         this.customGetButtons = input();
@@ -5196,6 +5401,7 @@ class AgentCardListComponent extends EntityBaseListComponent {
         this.entityCommunicationService = inject(CONVERSATION_AI_TOKEN, { optional: true }) ?? inject(DefaultAgentCardsService);
         this.toastService = inject(TOAST_ALERTS_TOKEN);
         this.columns = DefaultColumns;
+        this.customFilters = [];
         this.filterConfig.returnProps = {
             _id: 1,
             title: 1,
@@ -5204,6 +5410,7 @@ class AgentCardListComponent extends EntityBaseListComponent {
             'characterCard.data.description': 1,
             'characterCard.data.name': 1,
             'characterCard.data.creator_notes': 1,
+            manageable: 1,
         };
     }
     getCustomButtons(item) {
@@ -5216,13 +5423,24 @@ class AgentCardListComponent extends EntityBaseListComponent {
         ];
     }
     ngOnInit() {
+        this.customFilters = [
+            {
+                name: 'Tipo de Agente',
+                field: 'agentType',
+                type: 'select',
+                defaultValue: EAgentType.None,
+                options: [
+                    { label: 'Todos', value: EAgentType.None },
+                    { label: 'Social', value: EAgentType.Social },
+                    { label: 'Personaje', value: EAgentType.Character },
+                ],
+            },
+            ...this.extraFilters,
+        ];
         // this.viewType.set('table');
         super.ngOnInit();
         return null;
     }
-    ngOnDestroy() {
-        // Add cleanup logic here if needed in the future
-    }
     handleTableAction(actionEvent) {
         super.doAction(actionEvent);
     }
@@ -5246,7 +5464,7 @@ class AgentCardListComponent extends EntityBaseListComponent {
         this.loadData();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null }, gridLayout: { classPropertyName: "gridLayout", publicName: "gridLayout", isSignal: true, isRequired: false, transformFunction: null }, customGetButtons: { classPropertyName: "customGetButtons", publicName: "customGetButtons", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [options]=\"filterBarOptions\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"onNew()\"></dc-filter-bar>\n\n@if(viewType() === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"items()\" [actions]=\"actions()\" (onAction)=\"handleTableAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n  @if(!isLoading) {\n  <div [ngClass]=\"{ 'cards-container': gridLayout() }\">\n    @for (card of items(); track card._id) {\n    <dc-agent-card-ui [card]=\"getCardMeta(card)\" [showOptions]=\"showOptions()\" (onAction)=\"handleAction($event)\"></dc-agent-card-ui>\n    }\n  </div>\n  }\n</div>\n\n@if(isLoading) {\n<div>\n  <p-skeleton styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n  <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(items().length === 0 && !isLoading) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<!-- Mobile Paginator -->\n<p-paginator\n  class=\"hidden md:block\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  currentPageReportTemplate=\"{first}-{last} de {totalRecords} \"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n\n<!-- Desktop Paginator -->\n<p-paginator\n  class=\"block md:hidden\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}::ng-deep p-paginator .p-paginator{padding:0!important;background:transparent!important}\n"], dependencies: [{ kind: "component", type: AgentCardUI, selector: "dc-agent-card-ui", inputs: ["card", "showOptions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$4.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AgentCardListComponent, isStandalone: true, selector: "dc-agent-card-lists", inputs: { extraFilters: { classPropertyName: "extraFilters", publicName: "extraFilters", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null }, gridLayout: { classPropertyName: "gridLayout", publicName: "gridLayout", isSignal: true, isRequired: false, transformFunction: null }, customGetButtons: { classPropertyName: "customGetButtons", publicName: "customGetButtons", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [options]=\"filterBarOptions\" [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"onNew()\"></dc-filter-bar>\n\n@if(viewType() === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"items()\" [actions]=\"actions()\" (onAction)=\"handleTableAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n  @if(!isLoading) {\n  <div [ngClass]=\"{ 'cards-container': gridLayout() }\">\n    @for (card of items(); track card._id) {\n    <dc-agent-card-ui [card]=\"getCardMeta(card)\" [showOptions]=\"showOptions()\" (onAction)=\"handleAction($event)\"></dc-agent-card-ui>\n    } @if(items().length === 0 && !isLoading) {\n    <div>\n      <dc-empty-state\n        headingText=\"No hay conversaciones para este idioma\"\n        subHeadingText=\"Estamos trabajando en ello...\"\n        mainIconSrcString=\"assets/img/empty-states/empty-box.png\">\n      </dc-empty-state>\n    </div>\n    }\n  </div>\n  }\n</div>\n\n@if(isLoading) {\n<div>\n  <p-skeleton styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n  <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} }\n\n<!-- Mobile Paginator -->\n<p-paginator\n  class=\"hidden md:block\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  currentPageReportTemplate=\"{first}-{last} de {totalRecords} \"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n\n<!-- Desktop Paginator -->\n<p-paginator\n  class=\"block md:hidden\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}::ng-deep p-paginator .p-paginator{padding:0!important;background:transparent!important}\n"], dependencies: [{ kind: "component", type: AgentCardUI, selector: "dc-agent-card-ui", inputs: ["card", "showOptions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$4.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EmptyStateComponent, selector: "dc-empty-state", inputs: ["headingText", "subHeadingText", "mainIconSrcString"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentCardListComponent, decorators: [{
             type: Component,
@@ -5260,8 +5478,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         SpeedDialModule,
                         QuickTableComponent,
                         CommonModule,
-                    ], standalone: true, template: "<dc-filter-bar [options]=\"filterBarOptions\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"onNew()\"></dc-filter-bar>\n\n@if(viewType() === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"items()\" [actions]=\"actions()\" (onAction)=\"handleTableAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n  @if(!isLoading) {\n  <div [ngClass]=\"{ 'cards-container': gridLayout() }\">\n    @for (card of items(); track card._id) {\n    <dc-agent-card-ui [card]=\"getCardMeta(card)\" [showOptions]=\"showOptions()\" (onAction)=\"handleAction($event)\"></dc-agent-card-ui>\n    }\n  </div>\n  }\n</div>\n\n@if(isLoading) {\n<div>\n  <p-skeleton styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n  <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} @if(items().length === 0 && !isLoading) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<!-- Mobile Paginator -->\n<p-paginator\n  class=\"hidden md:block\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  currentPageReportTemplate=\"{first}-{last} de {totalRecords} \"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n\n<!-- Desktop Paginator -->\n<p-paginator\n  class=\"block md:hidden\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}::ng-deep p-paginator .p-paginator{padding:0!important;background:transparent!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { customFilters: [{
+                        EmptyStateComponent,
+                    ], standalone: true, template: "<dc-filter-bar [options]=\"filterBarOptions\" [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"onNew()\"></dc-filter-bar>\n\n@if(viewType() === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"items()\" [actions]=\"actions()\" (onAction)=\"handleTableAction($event)\"></app-quick-table>\n\n}@else{\n\n<div class=\"conversation-card-lists\">\n  @if(!isLoading) {\n  <div [ngClass]=\"{ 'cards-container': gridLayout() }\">\n    @for (card of items(); track card._id) {\n    <dc-agent-card-ui [card]=\"getCardMeta(card)\" [showOptions]=\"showOptions()\" (onAction)=\"handleAction($event)\"></dc-agent-card-ui>\n    } @if(items().length === 0 && !isLoading) {\n    <div>\n      <dc-empty-state\n        headingText=\"No hay conversaciones para este idioma\"\n        subHeadingText=\"Estamos trabajando en ello...\"\n        mainIconSrcString=\"assets/img/empty-states/empty-box.png\">\n      </dc-empty-state>\n    </div>\n    }\n  </div>\n  }\n</div>\n\n@if(isLoading) {\n<div>\n  <p-skeleton styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"5rem\" styleClass=\"mb-2\" />\n  <p-skeleton height=\"2rem\" styleClass=\"mb-2\" />\n  <p-skeleton width=\"10rem\" height=\"4rem\" />\n</div>\n} }\n\n<!-- Mobile Paginator -->\n<p-paginator\n  class=\"hidden md:block\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  currentPageReportTemplate=\"{first}-{last} de {totalRecords} \"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n\n<!-- Desktop Paginator -->\n<p-paginator\n  class=\"block md:hidden\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [totalRecords]=\"totalRecordsSignal()\"\n  (onPageChange)=\"onPageChange($event)\"\n  [showCurrentPageReport]=\"true\"\n  [showPageLinks]=\"false\"\n  [showFirstLastIcon]=\"false\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\"\n  currentPageReportTemplate=\" {first}- {last} de {totalRecords} \" />\n", styles: [":host{display:flex;flex-direction:column;height:100%}.options-icon{cursor:pointer;position:absolute;top:2px;right:3px;font-size:1.2rem;color:#dde9e9;background-color:#4f486281;border-radius:50%;padding:5px;z-index:1000}.conversation-card-lists{padding:1.5rem;width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.conversation-card-lists .cards-container{display:flex;flex-wrap:wrap;gap:2rem;width:100%;justify-content:center;flex:1;overflow-y:auto;min-height:0}.conversation-card-lists .cards-container>div{flex:0 0 240px}.conversation-card-lists .dc-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;gap:2px}.conversation-card-lists .dc-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.conversation-card-lists .dc-card .dc-card-header{position:absolute;top:10px;left:5px;border-radius:5px;padding:5px}.conversation-card-lists .dc-card .dc-card-header:before{content:\"\";position:absolute;inset:0;background-color:#4d30db81;filter:blur(2px);border-radius:5px;z-index:0}.conversation-card-lists .dc-card .dc-card-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#ece7e7;position:relative;z-index:1}.conversation-card-lists .dc-card .dc-card-content{flex:1}.conversation-card-lists .dc-card .dc-card-content p{margin:0;color:#666;line-height:1.5}.conversation-card-lists .dc-card button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-weight:500;transition:background-color .2s ease}.conversation-card-lists .dc-card button:hover{background-color:#0056b3}.conversation-card-lists .dc-card button:active{transform:translateY(1px)}::ng-deep p-paginator .p-paginator{padding:0!important;background:transparent!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { extraFilters: [{
                 type: Input
             }] } });
 
@@ -5340,11 +5559,11 @@ class DcAgentCardDetailsComponent {
         this.showInfoLayer.update((value) => !value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      @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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      @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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      @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"] }]
+            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: [{
                 type: Input
             }] } });
@@ -5358,5 +5577,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AgentCardListComponent, AgentCardUI, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardDetailsComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, MOOD_STATE_PROMPT, MessageContent, MessageContentDisplayer, ModelSelectorComponent, PopupService, SystemPromptType, TextEngineOptions, TextEngines, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, markdownBasicToHTML, markdownToHTML$1 as markdownToHTML, markdownToHTML2, markdownToHtml, matchTranscription, provideAgentCardService, provideUserDataExchange, removeAllEmojis, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
+export { AIGenerationService, AgentCardListComponent, AgentCardUI, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, 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, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, markdownBasicToHTML, markdownToHTML$1 as markdownToHTML, markdownToHTML2, markdownToHtml, matchTranscription, provideAgentCardService, provideUserDataExchange, removeAllEmojis, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map