@dataclouder/ngx-agent-cards 0.1.5 → 0.1.7

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

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, Pipe, input, output, Input, Component, signal, effect, computed, ChangeDetectorRef, DestroyRef, ChangeDetectionStrategy, ElementRef, ViewChild, ViewChildren } from '@angular/core';
+import { InjectionToken, Injectable, inject, RendererFactory2, ApplicationRef, Injector, EnvironmentInjector, signal, createComponent, Pipe, input, output, Input, Component, effect, ViewChild, computed, DestroyRef, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, ViewChildren } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { CommonModule, DatePipe, DecimalPipe, NgComponentOutlet } from '@angular/common';
+import { DOCUMENT, CommonModule, DatePipe, DecimalPipe, NgComponentOutlet } from '@angular/common';
+import { HttpCoreService, AudioSpeed as AudioSpeed$1, TOAST_ALERTS_TOKEN, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
 import { DynamicDialogRef, DialogService, DynamicDialogConfig, DynamicDialogModule } from 'primeng/dynamicdialog';
 import * as i1$3 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
@@ -15,7 +16,6 @@ import { TextareaModule } from 'primeng/textarea';
 import * as i2$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { nanoid } from 'nanoid';
-import { AudioSpeed as AudioSpeed$1, TOAST_ALERTS_TOKEN, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, fromEvent, filter } from 'rxjs';
 import { takeUntil, map } from 'rxjs/operators';
@@ -59,6 +59,8 @@ import * as i1$4 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i2$5 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
+import * as i4$2 from 'primeng/tag';
+import { TagModule } from 'primeng/tag';
 
 const characterCardStringDataDefinition = `
 interface CharacterCardData {
@@ -104,6 +106,23 @@ class ConversationMessagesDTO {
 }
 class ConversationDTO {
 }
+// Define the structure for chat events emitted by DCChatComponent
+var ChatEventType;
+(function (ChatEventType) {
+    ChatEventType["WordClicked"] = "wordClicked";
+    // Add other potential event types here as needed
+    // e.g., MessageSent = 'messageSent', SettingsChanged = 'settingsChanged', GoalCompleted = 'goalCompleted'
+})(ChatEventType || (ChatEventType = {}));
+// Enum to define different types of conversation context for evaluation
+var ContextType;
+(function (ContextType) {
+    ContextType["CurrentMessageContent"] = "MessageContent";
+    ContextType["LastAssistantMessage"] = "LastAssistantMessage";
+    ContextType["LastUserMessage"] = "LastUserMessage";
+    ContextType["LastDialog"] = "LastDialog";
+    ContextType["Last2Dialogs"] = "Last2Dialogs";
+    ContextType["AllConversation"] = "AllConversation";
+})(ContextType || (ContextType = {}));
 
 const CONVERSATION_AI_TOKEN = new InjectionToken('Conversation Ai Service');
 // abstract-my-service.ts
@@ -557,7 +576,7 @@ class DCConversationPromptBuilderService {
         // conversation will parse values with curren value in parseDcit:
         // Hello  {{user}} im {{char}} your are talking {{base}} -> hello jordan im AI bot your are talking spanish
         // important you have to implement userDataExchange to return what you want in parseDict that have sense for your app.
-        if (parseDict) {
+        if (parseDict && Object.keys(parseDict).length > 0) {
             return parseDict;
         }
         else {
@@ -688,6 +707,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }] });
 
+class PopupService {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.rendererFactory = inject(RendererFactory2);
+        this.appRef = inject(ApplicationRef);
+        this.injector = inject(Injector);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.currentPopupContainer = null;
+        this.currentComponentRef = null;
+        this.selectedWord = signal(null); // Keep signal for outside click logic
+        this.clickListenerUnlisten = null; // For outside click listener
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+    }
+    /**
+     * Shows a popup containing a dynamically created component.
+     * @param top Position from the top of the viewport.
+     * @param left Position from the left of the viewport.
+     * @param componentType The type of component to render inside the popup.
+     * @param injector The injector to use for the dynamic component.
+     * @param wordData The WordData to pass to the component's input signal.
+     */
+    showPopup(// Constrain T
+    top, left, componentType, injector, wordData) {
+        if (this.currentComponentRef) {
+            this.hidePopup(); // Hide existing popup first
+        }
+        this.selectedWord.set(wordData); // Track associated word data
+        // 1. Create the popup container element
+        this.currentPopupContainer = this.renderer.createElement('div');
+        this.renderer.addClass(this.currentPopupContainer, 'word-options-popup-dynamic'); // Use this class for targeting (e.g., in outside click listener)
+        this.renderer.setStyle(this.currentPopupContainer, 'position', 'fixed');
+        this.renderer.setStyle(this.currentPopupContainer, 'top', `${top + 5}px`); // Small offset
+        this.renderer.setStyle(this.currentPopupContainer, 'left', `${left + 5}px`); // Small offset
+        this.renderer.setStyle(this.currentPopupContainer, 'border', '1px solid #ccc');
+        this.renderer.setStyle(this.currentPopupContainer, 'background', 'white');
+        // Remove padding from container, let the component handle its own padding
+        // this.renderer.setStyle(this.currentPopupContainer, 'padding', '8px');
+        this.renderer.setStyle(this.currentPopupContainer, 'border-radius', '4px');
+        this.renderer.setStyle(this.currentPopupContainer, 'z-index', '1103'); // Or higher if needed
+        this.renderer.setStyle(this.currentPopupContainer, 'box-shadow', '0 2px 8px rgba(0,0,0,0.15)');
+        // 2. Create the component dynamically
+        this.currentComponentRef = createComponent(componentType, {
+            environmentInjector: this.environmentInjector, // Use environment injector
+            elementInjector: injector, // Pass the custom injector for data/providers
+        });
+        // 3. Attach the component to the Angular application lifecycle
+        this.appRef.attachView(this.currentComponentRef.hostView);
+        // 4. Get the component's root DOM element
+        const componentElement = this.currentComponentRef.location.nativeElement;
+        // 5. Append the component's element to the container
+        this.renderer.appendChild(this.currentPopupContainer, componentElement);
+        // 6. Append the container to the document body
+        this.renderer.appendChild(this.document.body, this.currentPopupContainer);
+        // 7. Set input signal *after* component is created and attached
+        // Ensure the component instance has the 'wordData' signal input
+        if (this.currentComponentRef.instance.wordData && typeof this.currentComponentRef.instance.wordData.set === 'function') {
+            this.currentComponentRef.instance.wordData.set(wordData);
+            this.currentComponentRef.changeDetectorRef.detectChanges(); // Trigger change detection
+        }
+        else {
+            console.warn('Dynamic component does not have a writable signal input named "wordData".');
+        }
+        // 8. Add listener for outside clicks *after* popup is shown
+        this.addOutsideClickListener();
+    }
+    /**
+     * Hides the currently displayed popup and destroys the dynamic component.
+     */
+    hidePopup() {
+        if (this.currentComponentRef) {
+            this.appRef.detachView(this.currentComponentRef.hostView);
+            this.currentComponentRef.destroy();
+            this.currentComponentRef = null;
+        }
+        if (this.currentPopupContainer && this.document.body.contains(this.currentPopupContainer)) {
+            try {
+                this.renderer.removeChild(this.document.body, this.currentPopupContainer);
+            }
+            catch (error) {
+                console.warn('Error removing popup container:', error);
+            }
+        }
+        this.currentPopupContainer = null;
+        this.selectedWord.set(null); // Clear selected word signal
+        this.removeOutsideClickListener(); // Remove listener when popup is hidden
+    }
+    addOutsideClickListener() {
+        // Remove any existing listener first
+        this.removeOutsideClickListener();
+        // Use setTimeout to ensure the listener is added after the current click event cycle
+        setTimeout(() => {
+            this.clickListenerUnlisten = this.renderer.listen(this.document, 'click', (event) => {
+                const clickedInsidePopup = this.currentPopupContainer?.contains(event.target);
+                // Also check if the click target is the word itself (to prevent immediate closing)
+                // This requires knowledge of the word element ID structure
+                const clickedOnWord = event.target?.closest('[id^="word-"]');
+                if (!clickedInsidePopup && !clickedOnWord && this.currentComponentRef) {
+                    console.log('Outside click detected, hiding popup.');
+                    this.hidePopup();
+                }
+            });
+        }, 0);
+    }
+    removeOutsideClickListener() {
+        if (this.clickListenerUnlisten) {
+            this.clickListenerUnlisten();
+            this.clickListenerUnlisten = null;
+        }
+    }
+    // Optional: Cleanup logic if the service itself is destroyed
+    ngOnDestroy() {
+        this.hidePopup(); // Ensure cleanup on service destruction (also removes listener)
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PopupService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PopupService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+// Change this on backend if i have more types
+var AgentCardProgressStatus;
+(function (AgentCardProgressStatus) {
+    AgentCardProgressStatus["NotStarted"] = "not_started";
+    AgentCardProgressStatus["Started"] = "started";
+    AgentCardProgressStatus["Completed"] = "completed";
+})(AgentCardProgressStatus || (AgentCardProgressStatus = {}));
+const DefaultAPI = {
+    Progress: 'api/agent-cards-progress',
+};
+class AgentUserProgressService {
+    constructor() {
+        // Services
+        this.httpService = inject(HttpCoreService);
+    }
+    getProgress() {
+        return this.httpService.get(DefaultAPI.Progress + '/user');
+    }
+    saveProgress(progress) {
+        return this.httpService.put(DefaultAPI.Progress + '/user', progress);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentUserProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentUserProgressService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentUserProgressService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * SafeJsonPipe - A pipe that safely stringifies objects with circular references
  * This pipe handles circular references and DOM objects that can't be serialized
@@ -998,7 +1171,8 @@ class MessageProcessingService {
             processedMessage.imgUrl = extraData.userImg;
         }
         else if (message.role === ChatRole.Assistant && extraData.assistantImg) {
-            const defaultVoice = this.getVoice(conversationSettings.voice);
+            // TODO i think lessons send voice in voice, but should be in tts
+            const defaultVoice = this.getVoice(conversationSettings?.tts?.voice || conversationSettings.voice);
             processedMessage.voice = defaultVoice;
             processedMessage.imgUrl = extraData.assistantImg;
         }
@@ -1007,10 +1181,11 @@ class MessageProcessingService {
             this.processMultiMessages(processedMessage, conversationSettings);
         }
         else if (conversationSettings.textEngine === TextEngines.MarkdownSSML) {
-            if (!conversationSettings.secondaryVoice) {
+            // TODO: check how to add default secondary voice
+            if (!conversationSettings?.tts?.secondaryVoice) {
                 throw new Error('Secondary voice is required for SSML');
             }
-            const content = this.subsItalicsByTag(processedMessage.content, conversationSettings.secondaryVoice);
+            const content = this.subsItalicsByTag(processedMessage.content, conversationSettings.tts.secondaryVoice);
             processedMessage.ssml = '<speak>' + content + '</speak>';
         }
         return processedMessage;
@@ -1056,14 +1231,15 @@ class MessageProcessingService {
             return voiceCodes[Math.floor(Math.random() * voiceCodes.length)];
         }
         else {
-            const voice = VoiceTTSOptions.find((voice) => voice.id === voice_value);
-            if (voice) {
-                return voice.id;
-            }
-            else {
-                console.error('Voice not found getting something random', voice_value);
-                return VoiceTTSOptions.find((voice) => voice.lang.includes(targetLang))?.id || '';
-            }
+            return 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 }); }
@@ -1133,6 +1309,7 @@ function buildObjectTTSRequest(message, settings = {}) {
         generateTranscription,
         speedRate,
         speed,
+        ssml: message?.ssml,
     };
 }
 
@@ -1150,6 +1327,7 @@ class ConversationService {
         this.isDestroyedSignal = signal(false);
         this.micStatusSignal = signal('ready');
         this.currentAudioStatus = signal(null);
+        this.wordClickedSignal = signal(null); // Signal for clicked word
         // Var State
         this.avatarImages = {
             userImg: 'assets/defaults/avatar_user.png',
@@ -1162,6 +1340,20 @@ class ConversationService {
     getUserSettings() {
         return this.userDataExchange.getUserChatSettings();
     }
+    /**
+     * Notifies subscribers that a word has been clicked in a message.
+     * @param wordData The data associated with the clicked word.
+     */
+    notifyWordClicked(wordData) {
+        this.wordClickedSignal.set(wordData);
+    }
+    /**
+     * Gets the signal that emits when a word is clicked.
+     * @returns A signal emitting WordData or null.
+     */
+    getWordClickedSignal() {
+        return this.wordClickedSignal;
+    }
     // Add message to conversation
     addMessage(message) {
         this.messagesSignal.update((messages) => [...messages, message]);
@@ -1193,7 +1385,7 @@ class ConversationService {
     }
     setupConversationWithAgentCard(agentCard, parseDict = null) {
         // Set user AI avatar image
-        this.avatarImages.assistantImg = agentCard?.assets.image?.url || this.avatarImages.assistantImg;
+        this.avatarImages.assistantImg = agentCard?.assets?.image?.url || this.avatarImages.assistantImg;
         const conversationSettings = this.conversationBuilder.buildConversationSettings(agentCard, parseDict);
         this.conversationSettingsSignal.set(conversationSettings);
     }
@@ -1204,10 +1396,9 @@ class ConversationService {
     async initConversation() {
         // Set user avatar images
         this.avatarImages.userImg = this.userDataExchange.getUserDataExchange().imgUrl;
-        console.log(this.avatarImages);
         const conversationSettings = this.conversationSettingsSignal();
         for (const i in conversationSettings.messages) {
-            conversationSettings.messages[i].messageId = 'msg_' + i;
+            conversationSettings.messages[i].messageId = nanoid();
         }
         // Find first assistant message
         const firstAssistantMsg = conversationSettings?.messages.find((message) => message.role === ChatRole.Assistant);
@@ -1232,40 +1423,66 @@ class ConversationService {
         this.setupConversationWithAgentCard(agentCard, parseDict);
         await this.initConversation();
     }
-    // Send user message
+    /**
+     * Sends a user message, processes it, adds it to the conversation,
+     * and triggers the AI response flow.
+     * @param message The initial ChatMessage object from the user.
+     * @param updateId Optional ID if this message should update an existing one (e.g., transcription added).
+     * @param updateId Optional ID if this message should update an existing one (e.g., transcription added).
+     * @returns A promise resolving to an object containing the user message ID and the assistant message ID (or null if an error occurred).
+     */
     async sendUserMessage(message, updateId = null) {
         if (this.isThinkingSignal()) {
-            return;
+            console.warn('AI is already thinking, message dropped.');
+            return null; // Indicate message was not sent due to AI being busy
         }
+        let userMessageId;
+        // Add or update the user message
         if (updateId) {
-            this.updateMessage(updateId, message);
+            // Ensure the update includes the ID if not already present in message object
+            const messageToUpdate = { ...message, messageId: updateId };
+            const updated = this.updateMessage(updateId, messageToUpdate);
+            if (!updated) {
+                console.error(`Failed to update message with ID: ${updateId}`);
+                // Decide how to handle this - maybe throw an error or return null?
+                return null;
+            }
+            userMessageId = updateId;
         }
         else {
-            // Add message to conversation
+            // Process and add the new message
             const processedMessage = this.messageProcessingService.processMessage(message, this.conversationSettingsSignal(), this.avatarImages);
+            // Ensure ID exists (processMessage should handle this, but fallback just in case)
+            processedMessage.messageId = processedMessage.messageId || nanoid();
             this.addMessage(processedMessage);
+            userMessageId = processedMessage.messageId;
         }
-        // Set thinking state
+        // Set thinking state and get AI response
         this.isThinkingSignal.set(true);
+        let assistantMessageId = null;
         try {
-            // Send to AI service
-            await this.sendCurrentConversation();
+            assistantMessageId = await this.sendCurrentConversation();
+        }
+        catch (error) {
+            console.error('Error sending conversation to AI:', error);
+            // Handle error appropriately, maybe set a specific state or message
         }
         finally {
             this.isThinkingSignal.set(false);
         }
+        return { userMessageId, assistantMessageId };
     }
     // Process assistant message
     // Send current conversation to AI
     async sendCurrentConversation() {
         if (this.isDestroyedSignal()) {
-            return;
+            return null;
         }
         const messages = this.messagesSignal();
         const conversationSettings = this.conversationSettingsSignal();
         if (messages.length > 31) {
             // Safety limit to prevent infinite conversations
-            return;
+            return null;
         }
         let conversationMessages = messages;
         // Add last prompt if available
@@ -1279,6 +1496,7 @@ class ConversationService {
             textEngine: conversationSettings.textEngine,
             model: conversationSettings.model || { modelName: '', provider: '' },
         };
+        this.isThinkingSignal.set(true);
         // Call AI service
         const response = await this.agentCardService.callChatCompletion(conversation);
         if (!response) {
@@ -1290,6 +1508,7 @@ class ConversationService {
         // Add to messages
         this.addMessage(newMessage);
         this.isThinkingSignal.set(false);
+        return newMessage.messageId;
     }
     // Reset conversation
     async resetConversation(agentCard) {
@@ -1312,7 +1531,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
         }] });
 
 function extractJsonFromResponse(content) {
-    const jsonMatch = content.match(/\{[\s\S]*?\}/); // Match everything between first { and }
+    // Match everything between the first { and last } OR first [ and last ]
+    const jsonMatch = content.match(/(\{[\s\S]*?\}|\[[\s\S]*?\])/);
     if (!jsonMatch)
         return null;
     try {
@@ -1367,6 +1587,7 @@ This is the conversation history:
 and give the response in next JSON format.
     ${evaluator.expectedResponseType}
     `;
+        // TODO: evaluations gemini flashcard
         // Send evaluation request
         const evaluationMessages = [{ content: instructions, role: ChatRole.User }];
         // Not sure what strategy use, if works types should be definied in definitions, generarally response will be score, and feedback.
@@ -1392,67 +1613,111 @@ and give the response in next JSON format.
         }
         return jsonData;
     }
-    // Evaluate with a specific task and agent
-    async evaluateWithTask(messages, agentTask) {
-        // const { agent, task } = appAgentTask;
-        // Construct messages for the AI call
+    // Helper function to get context messages based on type
+    getContextMessages(messages, contextType) {
+        const conversationMessages = messages.filter((message) => [ChatRole.User, ChatRole.Assistant].includes(message.role));
+        if (conversationMessages.length === 0) {
+            return [];
+        }
+        switch (contextType) {
+            case ContextType.LastAssistantMessage: {
+                const lastAssistant = conversationMessages
+                    .slice()
+                    .reverse()
+                    .find((m) => m.role === ChatRole.Assistant);
+                return lastAssistant ? [lastAssistant] : [];
+            }
+            case ContextType.LastUserMessage: {
+                const lastUser = conversationMessages
+                    .slice()
+                    .reverse()
+                    .find((m) => m.role === ChatRole.User);
+                return lastUser ? [lastUser] : [];
+            }
+            case ContextType.LastDialog: {
+                const lastUser = conversationMessages
+                    .slice()
+                    .reverse()
+                    .find((m) => m.role === ChatRole.User);
+                const lastAssistant = conversationMessages
+                    .slice()
+                    .reverse()
+                    .find((m) => m.role === ChatRole.Assistant);
+                const dialog = [];
+                if (lastAssistant)
+                    dialog.push(lastAssistant);
+                if (lastUser)
+                    dialog.push(lastUser);
+                // Sort by timestamp if available, otherwise keep order [Assistant, User] if both exist
+                // Assuming messageId or a timestamp property exists and is comparable
+                // dialog.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0)); // Example sorting
+                return dialog;
+            }
+            case ContextType.Last2Dialogs: {
+                const users = conversationMessages.filter((m) => m.role === ChatRole.User);
+                const assistants = conversationMessages.filter((m) => m.role === ChatRole.Assistant);
+                const lastTwoUsers = users.slice(-2);
+                const lastTwoAssistants = assistants.slice(-2);
+                const dialogs = [...lastTwoAssistants, ...lastTwoUsers];
+                // Sort by timestamp if available
+                // dialogs.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0)); // Example sorting
+                return dialogs;
+            }
+            case ContextType.AllConversation:
+            default:
+                return conversationMessages;
+        }
+    }
+    /**
+     * Evaluates a conversation context based on a specific task and attaches the result to a designated message.
+     * @param agentTask The task definition for the evaluation.
+     * @param messageToUpdate The specific ChatMessage object (user or assistant) to attach the evaluation results to.
+     * @param contextType Determines which part of the conversation history to send as context (default: AllConversation).
+     * @returns The JSON result of the evaluation.
+     */
+    async evaluateWithTask(agentTask, messageToUpdate, // Message to attach the evaluation to
+    contextType = ContextType.AllConversation) {
+        // Fetch the current conversation messages from the service
+        const messages = this.conversationService.getMessagesSignal()();
         const requestMessages = [];
-        // Add system prompt if available
-        // Prioritize characterCard system_prompt, then description as fallback
         const systemPrompt = agentTask.systemPrompt || 'You are a helpful assistant.'; // Default fallback
         requestMessages.push({ role: ChatRole.System, content: systemPrompt });
-        // Add the main task content
         let taskContent = agentTask.task;
         if (agentTask.expectedResponseType) {
-            // Ensure proper formatting instructions
             taskContent += `\n\nPlease provide the response strictly in the following JSON format:\n${agentTask.expectedResponseType}`;
         }
-        // Note: Handling task.sources might require fetching data if they are identifiers/URLs.
-        // For now, assuming sources are simple strings if provided.
-        // if (agentTask.sources && agentTask.sources.length > 0) {
-        //   taskContent += `\n\nUse the following sources as context:\n${agentTask.sources.join('\n---\n')}`;
-        // }
-        // Add conversation history
-        if (messages.length > 0) {
-            const conversationHistory = messages
-                .filter((message) => [ChatRole.User, ChatRole.Assistant].includes(message.role))
-                .map((message) => `${message.role}: ${message.content}`)
-                .join('\n');
-            taskContent += `\n\nHere is the conversation history:\n${conversationHistory}`;
-        }
-        let lastUserMessage = null;
-        for (let i = messages.length - 1; i >= 0; i--) {
-            // reverse the array to find the last user message
-            if (messages[i].role === ChatRole.User) {
-                lastUserMessage = messages[i];
-                break;
+        if (contextType === ContextType.CurrentMessageContent) {
+            taskContent += `\n\nHere is text: ${messageToUpdate.content}`;
+        }
+        else {
+            // Get context messages based on the specified type
+            const contextMessages = this.getContextMessages(messages, contextType);
+            if (contextMessages.length > 0) {
+                const conversationHistoryString = contextMessages
+                    .map((message) => `${message.role}: ${message.content}`) // Format messages
+                    .join('\n');
+                taskContent += `\n\nHere is the relevant conversation history:\n${conversationHistoryString}`;
             }
         }
+        // No longer need to find the last user message here, it's passed in as messageToUpdate
         requestMessages.push({ role: ChatRole.User, content: taskContent });
         try {
-            // Send evaluation request to the AI service
-            // Pass the model if the service method supports it
-            console.log(requestMessages);
             const response = await this.agentCardService.callChatCompletion({ messages: requestMessages, model: agentTask.model });
-            // Extract JSON from response, handling potential errors
-            const jsonData = extractJsonFromResponse(response.content);
-            // Optional: Update specific signals or show tailored toasts for this function
-            // Example: this.taskEvaluationResultSignal.set(jsonData);
+            let jsonData = extractJsonFromResponse(response.content);
+            if (jsonData === null) {
+                jsonData = { score: 1, feedback: 'Good job!' };
+            }
             this.evaluationResultSignal.set(jsonData);
             // Update score if available
             if (jsonData.score) {
-                // Assuming a similar scoring logic as evaluateConversation
                 // Adjust the multiplier or condition if needed for task-based evaluation
                 if (jsonData.score <= 3) {
                     this.updateScore(jsonData.score * 10);
                 }
             }
-            // Example: this.toastService.success({ title: 'Task Evaluation Complete' });
-            // Update the evaluated message with the result
-            if (lastUserMessage?.messageId && jsonData) {
-                this.conversationService.updateMessage(lastUserMessage.messageId, {
-                    evaluation: jsonData, // Add evaluation data to the message
-                });
+            // Update the specific message provided by the caller with the result
+            if (messageToUpdate?.messageId && jsonData) {
+                this.conversationService.updateMessage(messageToUpdate.messageId, { evaluation: jsonData });
             }
             return jsonData;
         }
@@ -1466,16 +1731,14 @@ and give the response in next JSON format.
             throw error;
         }
     }
-    // Update score with limits
     updateScore(additionalScore) {
         this.scoreSignal.update((currentScore) => {
             const newScore = currentScore + additionalScore;
             return newScore > 100 ? 100 : newScore;
         });
     }
-    // Reset score
     resetScore() {
-        this.scoreSignal.set(10);
+        this.scoreSignal.set(0);
     }
     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' }); }
@@ -1496,8 +1759,9 @@ class ChatFooterComponent {
         // Inputs
         this.isAIThinking = input(false);
         // @deprecated in favor of appAgentTask
-        this.evaluatorAgentCard = input();
-        this.evaluatorAgentTask = input();
+        // readonly evaluatorAgentCard = input<IMiniAgentCard>();
+        this.taskOnUserMessage = input();
+        this.taskOnAssistantMessage = input();
         this.micSettings = input({ useWhisper: true, lang: 'en' });
         // Outputs
         this.sendMessage = output();
@@ -1555,31 +1819,46 @@ class ChatFooterComponent {
             return;
         }
         const text = this.chatInputControl.value;
-        const message = {
-            content: text,
-            role: ChatRole.User,
-        };
-        // Emit the message for parent components that need it
-        // this.sendMessage.emit(message);
-        // Clear the input field
+        const message = { content: text, role: ChatRole.User };
         this.chatInputControl.setValue('');
-        // Send the user message to the conversation service
-        await this.conversationService.sendUserMessage(message);
-        // Evaluate conversation after sending message
-        this.evaluateConversation();
+        const result = await this.conversationService.sendUserMessage(message);
+        const messages = this.conversationService.getMessagesSignal()();
+        if (result.assistantMessageId) {
+            const assistantMessage = messages.find((m) => m.messageId === result.assistantMessageId);
+            this.evaluateConversation(assistantMessage, 'assistant');
+        }
+        if (result?.userMessageId) {
+            // Evaluate the message only if it was successfully sent and we have the user message ID
+            // Find the message using the userMessageId from the result object
+            const messageToEvaluate = messages.find((m) => m.messageId === result.userMessageId);
+            if (messageToEvaluate) {
+                this.evaluateConversation(messageToEvaluate, 'user');
+            }
+            else {
+                // Log the correct ID in the error message
+                console.error(`Could not find message with ID ${result.userMessageId} to evaluate.`);
+            }
+        }
+        else {
+            console.warn('Message sending failed or returned no ID, skipping evaluation.');
+        }
     }
     /**
      * Evaluate conversation using evaluator agent
      */
-    async evaluateConversation() {
-        const messages = this.conversationService.getMessagesSignal()();
-        if (this.evaluatorAgentCard()) {
-            const data = await this.evaluationService.evaluateConversation(messages, this.evaluatorAgentCard());
-            console.log(data);
+    /**
+     * Evaluate a specific message using the evaluator agent task.
+     * @param messageToEvaluate The ChatMessage (typically the user's last message) to evaluate.
+     */
+    async evaluateConversation(messageToEvaluate, type) {
+        let agentTask;
+        if (type === 'user' && this.taskOnUserMessage()) {
+            agentTask = this.taskOnUserMessage();
+            const data = await this.evaluationService.evaluateWithTask(agentTask, messageToEvaluate);
         }
-        if (this.evaluatorAgentTask()) {
-            const data = await this.evaluationService.evaluateWithTask(messages, this.evaluatorAgentTask());
-            console.log(data);
+        else if (type === 'assistant' && this.taskOnAssistantMessage()) {
+            agentTask = this.taskOnAssistantMessage();
+            const data = await this.evaluationService.evaluateWithTask(agentTask, messageToEvaluate, ContextType.CurrentMessageContent);
         }
     }
     handleAudioRecorded(event) {
@@ -1609,7 +1888,8 @@ class ChatFooterComponent {
                 audioUrl: URL.createObjectURL(eventBlob),
                 isLoading: true,
             };
-            const messageId = this.conversationService.addMessage(message);
+            // Instead of creating message, eneble animation user is spacking
+            // const messageId = this.conversationService.addMessage(message);
             // Get transcription from audio
             const transcription = await this.agentCardService.getAudioTranscriptions(eventBlob, null);
             // Create updated message with transcription and isLoading set to false
@@ -1619,24 +1899,36 @@ class ChatFooterComponent {
                 transcription: transcription || undefined,
                 isLoading: false,
             };
-            // Send message to conversation
             // The evaluation will happen automatically in the conversation service
-            await this.conversationService.sendUserMessage(updatedMessage, messageId);
+            await this.conversationService.sendUserMessage(updatedMessage);
         }
         finally {
             this.isGettingTranscription = false;
+            // console.log(this.isAIThinking());
+            //
         }
     }
     setScore(score) {
         this.evaluationService.setScore(100);
     }
+    /**
+     * Stops the microphone recording if the component is available.
+     */
+    stopMic() {
+        if (this.micComponent) {
+            this.micComponent.stopRecording();
+        }
+    }
     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 }, evaluatorAgentCard: { classPropertyName: "evaluatorAgentCard", publicName: "evaluatorAgentCard", isSignal: true, isRequired: false, transformFunction: null }, evaluatorAgentTask: { classPropertyName: "evaluatorAgentTask", publicName: "evaluatorAgentTask", isSignal: true, isRequired: false, transformFunction: null }, micSettings: { classPropertyName: "micSettings", publicName: "micSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", textInputChanged: "textInputChanged" }, ngImport: i0, template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <app-mic-vad\n      (audioRecorded)=\"handleAudioRecorded($event)\"\n      (statusChanged)=\"handleMicStatusChanged($event)\"\n      [continueListening]=\"shouldContinueListening()\" />\n    <!-- <dc-mic\n      style=\"display: flex; align-items: center\"\n      (onInterpretedText)=\"setInputText($event)\"\n      (onFinished)=\"micFinished($event)\"\n      [micSettings]=\"micSettings()\"></dc-mic> -->\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"sendUserMessage()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  @if(evaluatorAgentTask()) {\n  <div (click)=\"setScore(100)\">\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\n  }\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MicVadComponent, selector: "app-mic-vad", inputs: ["continueListening"], outputs: ["statusChanged", "audioRecorded", "error"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatFooterComponent, isStandalone: true, selector: "dc-chat-footer", inputs: { isAIThinking: { classPropertyName: "isAIThinking", publicName: "isAIThinking", isSignal: true, isRequired: false, transformFunction: null }, taskOnUserMessage: { classPropertyName: "taskOnUserMessage", publicName: "taskOnUserMessage", isSignal: true, isRequired: false, transformFunction: null }, taskOnAssistantMessage: { classPropertyName: "taskOnAssistantMessage", publicName: "taskOnAssistantMessage", isSignal: true, isRequired: false, transformFunction: null }, micSettings: { classPropertyName: "micSettings", publicName: "micSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", textInputChanged: "textInputChanged" }, viewQueries: [{ propertyName: "micComponent", first: true, predicate: MicVadComponent, descendants: true }], ngImport: i0, template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <app-mic-vad\n      (audioRecorded)=\"handleAudioRecorded($event)\"\n      (statusChanged)=\"handleMicStatusChanged($event)\"\n      [continueListening]=\"shouldContinueListening()\" />\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"sendUserMessage()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  @if(taskOnUserMessage()) {\n  <div (click)=\"setScore(100)\">\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\n  }\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MicVadComponent, selector: "app-mic-vad", inputs: ["continueListening"], outputs: ["statusChanged", "audioRecorded", "error"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat-footer', standalone: true, imports: [ReactiveFormsModule, ProgressBarModule, TextareaModule, ButtonModule, MicVadComponent], template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <app-mic-vad\n      (audioRecorded)=\"handleAudioRecorded($event)\"\n      (statusChanged)=\"handleMicStatusChanged($event)\"\n      [continueListening]=\"shouldContinueListening()\" />\n    <!-- <dc-mic\n      style=\"display: flex; align-items: center\"\n      (onInterpretedText)=\"setInputText($event)\"\n      (onFinished)=\"micFinished($event)\"\n      [micSettings]=\"micSettings()\"></dc-mic> -->\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"sendUserMessage()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  @if(evaluatorAgentTask()) {\n  <div (click)=\"setScore(100)\">\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\n  }\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'dc-chat-footer', standalone: true, imports: [ReactiveFormsModule, ProgressBarModule, TextareaModule, ButtonModule, MicVadComponent], template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\n    <app-mic-vad\n      (audioRecorded)=\"handleAudioRecorded($event)\"\n      (statusChanged)=\"handleMicStatusChanged($event)\"\n      [continueListening]=\"shouldContinueListening()\" />\n\n    <textarea pTextarea [formControl]=\"chatInputControl\" (keyup.enter)=\"sendUserMessage()\" rows=\"1\"></textarea>\n\n    <p-button (click)=\"sendUserMessage()\" [disabled]=\"isAIThinking() || !chatInputControl.value\" label=\"Enviar\" [rounded]=\"true\" />\n  </div>\n\n  @if(taskOnUserMessage()) {\n  <div (click)=\"setScore(100)\">\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\n  }\n</div>\n", styles: [".progress-input{padding:10px;background-color:#f5f5f545;border-top:1px solid #b1a8a8}.progress-input .input-container{display:flex;align-items:center;margin-bottom:5px}.progress-input .input-container textarea{flex:1;resize:none;margin:0 10px}.progress-input .input-container .send-button{background-color:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 15px;cursor:pointer}.progress-input .input-container .send-button:disabled{background-color:#ccc;cursor:not-allowed}.progress-input .input-container .send-button:hover:not(:disabled){background-color:#0069d9}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { micComponent: [{
+                type: ViewChild,
+                args: [MicVadComponent]
+            }] } });
 
 const ICONS = {
     chat: `<svg viewBox="0 0 24 24" fill="currentColor">
@@ -1715,12 +2007,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
   `, standalone: true, styles: [":host{display:inline-flex;align-items:center;line-height:0}span{line-height:0}:host ::ng-deep svg{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [] });
 
+// Given a text that can be in markdown but only in asterisk like *italic* or **bold** or ***bold italic***
+// Example Hola que tal es *Hey What's up* en inglés
+// i want to extract in array every word like this.
+// [{word: 'Hola', tag: ''}, {word: 'que', tag: ''}, {word: 'tal', tag: ''}, {word: 'es', tag: ''}, {word: 'Hey', tag: 'italic'}, {word: 'What's', tag: 'italic'}, {word: 'up', tag: 'italic'}, {word: 'en', tag: ''}, {word: 'inglés', tag: ''}]
+function extractTags(text) {
+    const result = [];
+    const tagStack = [];
+    // Regex to match markdown markers (***, **, *) or spaces or sequences of non-space/non-asterisk characters (words with punctuation)
+    const regex = /(\*\*\*|\*\*|\*|\s+|[^\s\*]+)/g;
+    let match;
+    while ((match = regex.exec(text)) !== null) {
+        const token = match[0];
+        if (token.trim() === '') {
+            // Ignore spaces
+            continue;
+        }
+        if (token === '***') {
+            if (tagStack.length > 0 && tagStack[tagStack.length - 1] === 'bold italic') {
+                tagStack.pop(); // Closing bold italic
+            }
+            else {
+                tagStack.push('bold italic'); // Opening bold italic
+            }
+        }
+        else if (token === '**') {
+            if (tagStack.length > 0 && tagStack[tagStack.length - 1] === 'bold') {
+                tagStack.pop(); // Closing bold
+            }
+            else {
+                tagStack.push('bold'); // Opening bold
+            }
+        }
+        else if (token === '*') {
+            if (tagStack.length > 0 && tagStack[tagStack.length - 1] === 'italic') {
+                tagStack.pop(); // Closing italic
+            }
+            else {
+                tagStack.push('italic'); // Opening italic
+            }
+        }
+        else {
+            // It's a word (including punctuation)
+            const currentTag = tagStack.length > 0 ? tagStack[tagStack.length - 1] : '';
+            result.push({ word: token, tag: currentTag });
+        }
+    }
+    // Note: This implementation assumes correctly matched opening and closing tags.
+    // Unclosed tags at the end of the string will be ignored.
+    return result;
+}
+
 class TextHighlighterComponent {
     constructor() {
+        // Inputs
         this.message = input.required(); // Or input.required<MessageAudio>() if always expected
-        this.highlightedWords = signal([]); // Signal for highlighted words
+        // Outputs
+        this.playAudio = output();
+        this.audioCompleted = output();
+        this.wordClicked = output(); // Output for clicked word with messageId
+        // Signal States
+        this.wordWithMeta = signal([]); // Signal for plain text words when no transcription
         this.isPlaying = signal(false); // Signal for play state
         // Signals State computed from the input message
+        this.wordsWithMetaState = [];
         this.iconState = computed(() => {
             if (this.isLoading()) {
                 return 'isLoading';
@@ -1742,25 +2092,21 @@ class TextHighlighterComponent {
             const msg = this.message(); // Read the input signal
             return msg?.text || msg?.content || 'N/A';
         });
-        this.classTag = computed(() => this.message()?.tag);
+        this.classTag = computed(() => this.message()?.tag); // tag can be at message level or word level this is for message level
         // Computed signal for transcription availability
         this.hasTranscription = computed(() => {
             const hasTranscription = !!this.message()?.transcriptionTimestamps && this.message()?.transcriptionTimestamps.length > 0;
             return hasTranscription;
         });
-        this.playAudio = output();
-        this.audioCompleted = output();
         this.audioElement = null; // Audio element for playback
         this.destroy$ = new Subject(); // Cleanup localsubject
         // Inject services
-        this.cdr = inject(ChangeDetectorRef); // Keep for now, might remove if template fully signal-driven
         this.destroyRef = inject(DestroyRef);
         // Effect to react to message changes and re-initialize
         effect(() => {
             const currentMsg = this.message(); // Read the input signal
-            console.log('Input message signal changed:', currentMsg);
-            if (currentMsg) {
-                // Re-run initialization logic whenever the message signal changes
+            // Somethimes message changes but audio is already playing.
+            if (currentMsg && !this.isPlaying()) {
                 this.initializeBasedOnMessage(currentMsg);
                 // Check if shouldPlayAudio flag is set
                 if (currentMsg.shouldPlayAudio) {
@@ -1768,21 +2114,15 @@ class TextHighlighterComponent {
                 }
             }
             else {
-                // Handle case where message becomes undefined (cleanup?)
-                this.cleanupAudio();
-                this.highlightedWords.set([]);
+                // this.cleanupAudio();
             }
-            // No cdr.markForCheck() needed here usually if template bindings use signals/computed
         });
         // Keep the effect for highlightedWords for now, might be redundant if template binds directly
         effect(() => {
-            this.highlightedWords();
-            this.cdr.markForCheck(); // Keep if template uses non-signal bindings for highlighted words
+            // some how i need to isolate the reading, becouse reading in main effect is very dangerous since later is set and produces infinite loop
+            this.wordsWithMetaState = this.wordWithMeta();
         });
     }
-    /**
-     * Track function for ngFor to improve performance
-     */
     trackByIndex(index, item) {
         return index;
     }
@@ -1805,75 +2145,58 @@ class TextHighlighterComponent {
         }
         // Initialize words and sync based on transcription presence
         if (this.hasTranscription()) {
-            // Use computed signal
-            const timestamps = msg.transcriptionTimestamps || [];
-            this.initializeHighlightedWords(timestamps); // Pass timestamps
-            this.subcribeToAudioSync(timestamps); // Pass timestamps
+            const wordsAndTimestamps = [];
+            // NOTE: This merge is only going to work if transcriptionTimestamps and wordsWithMetaState have the same length
+            // wordsWithMetaState is initialized here in initializePlainTextWords but transcriptionTimestamps in the father, check later if i have bugs.
+            msg?.transcriptionTimestamps?.forEach((word, index) => {
+                wordsAndTimestamps.push({ ...word, ...this.wordsWithMetaState[index], index });
+            });
+            console.log(wordsAndTimestamps);
+            this.subcribeToAudioSync(wordsAndTimestamps); // Pass timestamps
         }
         else {
             this.subscribeToEndAudio();
+            this.initializePlainTextWords(msg.text || msg.content || ''); // Initialize plain text words
         }
     }
-    /**
-     * Initialize the audio element and set up event listeners
-     */
     initializeAudio(audioUrl) {
-        // Clean up any existing audio element and listeners first
         this.cleanupAudio();
         this.audioElement = new Audio(audioUrl); // Use passed URL
     }
-    /**
-     * Initialize highlighted words from transcription timestamps
-     */
-    initializeHighlightedWords(timestamps) {
-        const initialWords = timestamps.map((word, index) => ({
-            word: word.word,
-            index,
-            isHighlighted: false,
-        }));
-        this.highlightedWords.set(initialWords);
-    }
-    /**
-     * Set up audio synchronization with text
-     */
     subcribeToAudioSync(timestamps) {
-        // Accept timestamps
         if (!this.audioElement) {
             // Guard against missing audio element
             return;
         }
-        // Important: Clean up previous listeners before setting up new ones
         this.destroy$.next(); // Signal previous subscriptions to complete
-        // Listen to timeupdate events
+        console.log('Subscribing to audio sync with timestamps:', timestamps);
         fromEvent(this.audioElement, 'timeupdate')
-            .pipe(takeUntilDestroyed(this.destroyRef), // Use DestroyRef for component lifecycle
-        takeUntil(this.destroy$), // Use manual subject for re-initialization cleanup
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.destroy$), // Use manual subject for re-initialization cleanup
         map(() => this.audioElement?.currentTime || 0))
             .subscribe((currentTime) => {
             // Use the passed timestamps array
             const updatedWords = timestamps.map((word, index) => {
                 const isHighlighted = currentTime >= word.start - 0.15 && currentTime < word.end + 0.15;
-                return { word: word.word, index, isHighlighted };
+                console.log(isHighlighted, currentTime, word.start, word.end, word.start - 0.15 && currentTime < word.end + 0.15);
+                return { word: word.word, index, isHighlighted, tag: word.tag };
             });
-            this.highlightedWords.set(updatedWords);
+            this.wordWithMeta.set(updatedWords);
         });
         // Listen to ended event for cleanup
         fromEvent(this.audioElement, 'ended')
             .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.destroy$))
             .subscribe(() => {
             // Reset highlighting when audio ends
-            const resetWords = this.highlightedWords().map((word) => ({
+            const resetWords = this.wordWithMeta().map((word) => ({
                 // Read current words signal
                 ...word,
                 isHighlighted: false,
             }));
-            this.highlightedWords.set(resetWords);
+            this.wordWithMeta.set(resetWords);
             // Set isPlaying to false when audio finishes
             this.isPlaying.set(false);
-            // Emit audio completed event with the current message
             const currentMsg = this.message();
             if (currentMsg) {
-                // Reset the shouldPlayAudio flag
                 currentMsg.shouldPlayAudio = false;
                 this.audioCompleted.emit(currentMsg);
             }
@@ -1906,11 +2229,11 @@ class TextHighlighterComponent {
             this.audioElement = null;
             this.destroy$.next(); // Ensure listeners tied to this audio instance are cleaned up
             // Reset highlighting immediately on cleanup
-            const resetWords = this.highlightedWords().map((word) => ({
+            const resetWords = this.wordWithMeta().map((word) => ({
                 ...word,
                 isHighlighted: false,
             }));
-            this.highlightedWords.set(resetWords);
+            this.wordWithMeta.set(resetWords);
         }
     }
     /**
@@ -1933,7 +2256,6 @@ class TextHighlighterComponent {
             // For simplicity, let's re-call initializeAudio here if needed,
             // though ideally the effect handles it.
             this.initializeAudio(currentMsg.audioUrl); // Ensure it's created if somehow missed
-            // this.initializeBasedOnMessage(currentMsg);
             this.startAudioPlayback();
         }
         else if (currentMsg) {
@@ -1942,23 +2264,44 @@ class TextHighlighterComponent {
         }
     }
     /**
-     * Start audio playback and handle any setup needed
+     * Initialize plain text words by splitting the message text
      */
+    initializePlainTextWords(text) {
+        const words = extractTags(text);
+        const plainWords = words.map((word, index) => ({
+            word: word.word,
+            index: index,
+            isHighlighted: false,
+            tag: word.tag,
+        }));
+        this.wordWithMeta.set(plainWords);
+    }
+    onWordClick(wordData) {
+        const currentMsg = this.message();
+        if (!currentMsg) {
+            console.warn('Cannot emit wordClicked: message input is not available.');
+            return;
+        }
+        // Determine the correct data structure based on input type
+        const clickedWord = 'isHighlighted' in wordData
+            ? { word: wordData.word, index: wordData.index, messageId: currentMsg.messageId }
+            : { ...wordData, messageId: currentMsg.messageId };
+        this.wordClicked.emit(clickedWord);
+    }
     startAudioPlayback() {
         if (!this.audioElement)
             return;
-        // Play the audio
         this.audioElement.play().catch((error) => {
             console.error('Error playing audio:', error);
         });
         this.isPlaying.set(true); // Set play state to true
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextHighlighterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: TextHighlighterComponent, isStandalone: true, selector: "dc-text-highlighter", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted" }, ngImport: i0, template: "<div class=\"audio-text-sync-container\">\n  <div> </div>\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @if (iconState() === 'isLoading') {\n    <!-- <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon> -->\n    <i class=\"spin-animation pi pi-spinner-dotted\"></i>\n    } @else if (iconState() === 'isPlaying') {\n    <i class=\"pi pi-volume-up\"></i>\n    } @else if (iconState() === 'playable') {\n    <!-- Display play icon when not playing -->\n    <dc-icon name=\"play\"></dc-icon>\n    } @else {\n    <!-- Nothing-->\n    <!-- <dc-icon name=\"play\"></dc-icon> -->\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div [class]=\"'text-content ' + classTag()\">\n    @if (hasTranscription()) { @for (wordState of highlightedWords(); track trackByIndex($index, wordState)) {\n    <span [class.highlight]=\"wordState.isHighlighted\">{{ wordState.word }}&nbsp;</span>\n    } } @else {\n    <!-- Display regular text content when no transcription is available -->\n    <span> {{ messageText() }}</span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#6495ed}.strong{font-weight:700;color:inherit}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"], dependencies: [{ kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: TextHighlighterComponent, isStandalone: true, selector: "dc-text-highlighter", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted", wordClicked: "wordClicked" }, ngImport: i0, template: "<div class=\"audio-text-sync-container\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @if (iconState() === 'isLoading') {\n    <!-- <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon> -->\n    <i class=\"spin-animation pi pi-spinner-dotted\"></i>\n    } @else if (iconState() === 'isPlaying') {\n    <i class=\"pi pi-volume-up\"></i>\n    } @else if (iconState() === 'playable') {\n    <!-- Display play icon when not playing -->\n    <dc-icon name=\"play\"></dc-icon>\n    } @else {\n    <!-- Nothing-->\n    <!-- <dc-icon name=\"play\"></dc-icon> -->\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span [class]=\"word.tag\" [class.highlight]=\"word.isHighlighted\" (click)=\"onWordClick(word)\" [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}&nbsp;</span\n    >\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#6495ed}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:#6495ed}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"], dependencies: [{ kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextHighlighterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-text-highlighter', standalone: true, imports: [IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\">\n  <div> </div>\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @if (iconState() === 'isLoading') {\n    <!-- <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon> -->\n    <i class=\"spin-animation pi pi-spinner-dotted\"></i>\n    } @else if (iconState() === 'isPlaying') {\n    <i class=\"pi pi-volume-up\"></i>\n    } @else if (iconState() === 'playable') {\n    <!-- Display play icon when not playing -->\n    <dc-icon name=\"play\"></dc-icon>\n    } @else {\n    <!-- Nothing-->\n    <!-- <dc-icon name=\"play\"></dc-icon> -->\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div [class]=\"'text-content ' + classTag()\">\n    @if (hasTranscription()) { @for (wordState of highlightedWords(); track trackByIndex($index, wordState)) {\n    <span [class.highlight]=\"wordState.isHighlighted\">{{ wordState.word }}&nbsp;</span>\n    } } @else {\n    <!-- Display regular text content when no transcription is available -->\n    <span> {{ messageText() }}</span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#6495ed}.strong{font-weight:700;color:inherit}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"] }]
+            args: [{ selector: 'dc-text-highlighter', standalone: true, imports: [IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @if (iconState() === 'isLoading') {\n    <!-- <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon> -->\n    <i class=\"spin-animation pi pi-spinner-dotted\"></i>\n    } @else if (iconState() === 'isPlaying') {\n    <i class=\"pi pi-volume-up\"></i>\n    } @else if (iconState() === 'playable') {\n    <!-- Display play icon when not playing -->\n    <dc-icon name=\"play\"></dc-icon>\n    } @else {\n    <!-- Nothing-->\n    <!-- <dc-icon name=\"play\"></dc-icon> -->\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span [class]=\"word.tag\" [class.highlight]=\"word.isHighlighted\" (click)=\"onWordClick(word)\" [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}&nbsp;</span\n    >\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;margin-top:4px}.play-button:hover{opacity:.8}.text-content{flex:1}.highlight{background-color:#3cd8ff;border-radius:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:#6495ed}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:#6495ed}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"] }]
         }], ctorParameters: () => [] });
 
 class MessageOrchestratorComponent {
@@ -1967,7 +2310,6 @@ class MessageOrchestratorComponent {
         this.messages = input.required();
         this.messageRole = input.required();
         this.messagesSignal = signal([]);
-        // Effect to update messagesSignal when input messages change
         this.messagesEffect = effect(() => {
             // Get the latest messages from the input
             const currentMessages = this.messages();
@@ -2104,12 +2446,16 @@ class MessageOrchestratorComponent {
             this.isGenerating = false;
         }
     }
+    onWordClicked(wordData) {
+        console.log('Word clicked in MessageOrchestrator:', wordData);
+        this.conversationService.notifyWordClicked(wordData);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: MessageOrchestratorComponent, 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: { playAudio: "playAudio", audioCompleted: "audioCompleted" }, ngImport: i0, template: "@for (message of messagesSignal(); track message.messageId) {\n<dc-text-highlighter [message]=\"message\" (playAudio)=\"playAudio.emit($event)\" (audioCompleted)=\"onAudioCompleted($event)\" />\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TextHighlighterComponent, selector: "dc-text-highlighter", inputs: ["message"], outputs: ["playAudio", "audioCompleted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: MessageOrchestratorComponent, 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: { playAudio: "playAudio", audioCompleted: "audioCompleted" }, ngImport: i0, template: "<div class=\"message-orchestrator-container\">\n  @for (message of messagesSignal(); track message.messageId) {\n  <dc-text-highlighter\n    [message]=\"message\"\n    (playAudio)=\"playAudio.emit($event)\"\n    (audioCompleted)=\"onAudioCompleted($event)\"\n    (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: TextHighlighterComponent, selector: "dc-text-highlighter", inputs: ["message"], outputs: ["playAudio", "audioCompleted", "wordClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MessageOrchestratorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-message-orchestrator', imports: [TextHighlighterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (message of messagesSignal(); track message.messageId) {\n<dc-text-highlighter [message]=\"message\" (playAudio)=\"playAudio.emit($event)\" (audioCompleted)=\"onAudioCompleted($event)\" />\n}\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'dc-message-orchestrator', imports: [TextHighlighterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-orchestrator-container\">\n  @for (message of messagesSignal(); track message.messageId) {\n  <dc-text-highlighter\n    [message]=\"message\"\n    (playAudio)=\"playAudio.emit($event)\"\n    (audioCompleted)=\"onAudioCompleted($event)\"\n    (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"] }]
         }] });
 
 const EVALUATION_EMOJIS = {
@@ -2131,7 +2477,7 @@ class ChatMessageComponent {
         this.messageTranslation = computed(() => this.chatMessage()?.translation);
         this.isUserMessage = computed(() => this.chatMessage()?.role === ChatRole.User);
         this.evaluationEmoji = computed(() => {
-            const score = this.chatMessage()?.evaluation?.score;
+            const score = this.chatMessage()?.evaluation?.['score'];
             if (score === null || score === undefined) {
                 return '';
             }
@@ -2159,14 +2505,17 @@ class ChatMessageComponent {
     }
     showEvaluation() {
         console.log('showEvaluation', this.chatMessage().evaluation);
-        alert(this.chatMessage().evaluation?.feedback || 'No feedback available');
+        alert(this.chatMessage().evaluation?.['feedback'] || 'No feedback available');
+    }
+    printData() {
+        console.log(this.chatMessage());
     }
     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 for assistant messages -->\n\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"AI\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message content -->\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 if available -->\n      @if (messageTranslation()) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n        {{ messageTranslation() }}\n      </div>\n      }\n      <!-- Evaluation if available for user message -->\n      @if (isUserMessage() && chatMessage().evaluation) {\n      <div style=\"position: absolute; bottom: -10px; left: 20px\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n      }\n    </div>\n    <!-- Avatar for user messages -->\n    @if (isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar user-avatar\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:85%;line-height:1.5}.user-message{justify-content:flex-end}.user-message .message-container{flex-direction:row}.user-message .message-bubble{background-color:#0d5878;color:#fff;border-radius:18px 18px 0;margin-left:8px;position:relative}.assistant-message{justify-content:flex-start}.assistant-message .message-container{flex-direction:row}.assistant-message .message-bubble{background-color:#f0f0f0;color:#333;border-radius:18px 18px 18px 0;margin-left:8px}.message-bubble{padding:12px 16px;box-shadow:0 1px 2px #0000001a;max-width:calc(100% - 50px);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;hyphens:auto;min-width:0}.avatar-container{display:flex;align-items:flex-end}.avatar{width:36px;height:36px;border-radius:50%;background-color:#0d5878;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:#ffa77e}::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 #ffa77e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageOrchestratorComponent, selector: "dc-message-orchestrator", inputs: ["messages", "messageRole"], outputs: ["playAudio", "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 for assistant messages -->\n\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    }\n\n    <!-- Message content -->\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 if available -->\n      @if (chatMessage().evaluation?.['translation']) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['translation'] }}\n      </div>\n      } @if (isUserMessage() && chatMessage().evaluation) {\n      <div class=\"translation\" style=\"color: white\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['feedback'] }}\n      </div>\n\n      <div style=\"position: absolute; bottom: -10px; left: 20px\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n\n      }\n    </div>\n\n    <!-- Avatar for user messages -->\n    @if (isUserMessage()) {\n    <div class=\"avatar-container\" (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    <br />\n  </div>\n</div>\n", styles: [":host{display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:85%;line-height:1.5}.user-message{justify-content:flex-end}.user-message .message-container{flex-direction:row}.user-message .message-bubble{background-color:#0d5878;color:#fff;border-radius:18px 18px 0;margin-left:8px;position:relative}.assistant-message{justify-content:flex-start}.assistant-message .message-container{flex-direction:row}.assistant-message .message-bubble{background-color:#f0f0f0;color:#333;border-radius:18px 18px 18px 0;margin-left:8px}.message-bubble{padding:12px 16px;box-shadow:0 1px 2px #0000001a;max-width:calc(100% - 50px);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;hyphens:auto;min-width:0}.avatar-container{display:flex;align-items:flex-end}.avatar{width:36px;height:36px;border-radius:50%;background-color:#0d5878;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:#ffa77e}::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 #ffa77e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageOrchestratorComponent, selector: "dc-message-orchestrator", inputs: ["messages", "messageRole"], outputs: ["playAudio", "audioCompleted"] }], 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, MessageOrchestratorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar for assistant messages -->\n\n    @if (!isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"AI\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n\n    <!-- Message content -->\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 if available -->\n      @if (messageTranslation()) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n        {{ messageTranslation() }}\n      </div>\n      }\n      <!-- Evaluation if available for user message -->\n      @if (isUserMessage() && chatMessage().evaluation) {\n      <div style=\"position: absolute; bottom: -10px; left: 20px\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n      }\n    </div>\n    <!-- Avatar for user messages -->\n    @if (isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar user-avatar\">\n        <img [src]=\"chatMessage().imgUrl\" alt=\"User\" class=\"avatar-image\" />\n      </div>\n    </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:85%;line-height:1.5}.user-message{justify-content:flex-end}.user-message .message-container{flex-direction:row}.user-message .message-bubble{background-color:#0d5878;color:#fff;border-radius:18px 18px 0;margin-left:8px;position:relative}.assistant-message{justify-content:flex-start}.assistant-message .message-container{flex-direction:row}.assistant-message .message-bubble{background-color:#f0f0f0;color:#333;border-radius:18px 18px 18px 0;margin-left:8px}.message-bubble{padding:12px 16px;box-shadow:0 1px 2px #0000001a;max-width:calc(100% - 50px);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;hyphens:auto;min-width:0}.avatar-container{display:flex;align-items:flex-end}.avatar{width:36px;height:36px;border-radius:50%;background-color:#0d5878;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:#ffa77e}::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 #ffa77e}\n"] }]
+            args: [{ selector: 'dc-chat-message', standalone: true, imports: [CommonModule, MessageOrchestratorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-wrapper\" [ngClass]=\"{ 'user-message': isUserMessage(), 'assistant-message': !isUserMessage() }\">\n  <div class=\"message-container\">\n    <!-- Avatar for assistant messages -->\n\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    }\n\n    <!-- Message content -->\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 if available -->\n      @if (chatMessage().evaluation?.['translation']) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['translation'] }}\n      </div>\n      } @if (isUserMessage() && chatMessage().evaluation) {\n      <div class=\"translation\" style=\"color: white\">\n        <hr class=\"divider\" />\n        {{ chatMessage().evaluation?.['feedback'] }}\n      </div>\n\n      <div style=\"position: absolute; bottom: -10px; left: 20px\">\n        <span>{{ evaluationEmoji() }}</span>\n        <span class=\"pointer\" (click)=\"showEvaluation()\"> \uD83E\uDDD0 </span>\n      </div>\n\n      }\n    </div>\n\n    <!-- Avatar for user messages -->\n    @if (isUserMessage()) {\n    <div class=\"avatar-container\" (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    <br />\n  </div>\n</div>\n", styles: [":host{display:block;margin-bottom:16px}.message-wrapper{display:flex;width:100%;margin-bottom:12px}.message-container{display:flex;max-width:85%;line-height:1.5}.user-message{justify-content:flex-end}.user-message .message-container{flex-direction:row}.user-message .message-bubble{background-color:#0d5878;color:#fff;border-radius:18px 18px 0;margin-left:8px;position:relative}.assistant-message{justify-content:flex-start}.assistant-message .message-container{flex-direction:row}.assistant-message .message-bubble{background-color:#f0f0f0;color:#333;border-radius:18px 18px 18px 0;margin-left:8px}.message-bubble{padding:12px 16px;box-shadow:0 1px 2px #0000001a;max-width:calc(100% - 50px);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;hyphens:auto;min-width:0}.avatar-container{display:flex;align-items:flex-end}.avatar{width:36px;height:36px;border-radius:50%;background-color:#0d5878;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;overflow:hidden}.avatar-image{width:100%;height:100%;object-fit:cover}.user-avatar{background-color:#ffa77e}::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 #ffa77e}\n"] }]
         }] });
 
 class ChatMessagesListComponent {
@@ -2178,7 +2527,7 @@ class ChatMessagesListComponent {
         this.conversationService = inject(ConversationService);
         this.elementRef = inject(ElementRef);
         // State
-        this.aiIcon = 'assets/default/ai.png';
+        this.aiIcon = 'assets/defaults/avatar_ai.webp';
         this.isThinking = this.conversationService.isThinking();
         this.messages = computed(() => {
             // Get the actual array of messages from the signal by calling it as a function
@@ -2211,11 +2560,11 @@ class ChatMessagesListComponent {
         return `${message.role}-${index}-${message.content.substring(0, 20)}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessagesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatMessagesListComponent, isStandalone: true, selector: "dc-chat-messages-list", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: true, isRequired: true, transformFunction: null }, inputMessages: { classPropertyName: "inputMessages", publicName: "inputMessages", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"messages-container\">\n  @for (message of messages(); track message.messageId) {\n  <dc-chat-message [chatMessage]=\"message\" [chatUserSettings]=\"chatUserSettings()\"> </dc-chat-message>\n  } @if (isThinking()) {\n  <div class=\"thinking-container\">\n    <div class=\"thinking-message\">\n      <div class=\"thinking-avatar\">\n        <img [src]=\"aiIcon\" alt=\"AI thinking\" class=\"avatar-img\" />\n      </div>\n      <div class=\"thinking-content\">\n        <p-skeleton width=\"80%\" height=\"2rem\"></p-skeleton>\n        <p-skeleton width=\"60%\" height=\"2rem\"></p-skeleton>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n", styles: [".messages-container{display:flex;flex-direction:column;gap:1rem;padding:1rem;height:100%}.thinking-container{padding:.5rem 0}.thinking-message{display:flex;gap:1rem;align-items:flex-start}.thinking-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-img{width:100%;height:100%;object-fit:cover}.thinking-content{flex:1;display:flex;flex-direction:column;gap:.5rem}\n"], dependencies: [{ kind: "component", type: ChatMessageComponent, selector: "dc-chat-message", inputs: ["chatMessage", "chatUserSettings"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ChatMessagesListComponent, isStandalone: true, selector: "dc-chat-messages-list", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: true, isRequired: true, transformFunction: null }, inputMessages: { classPropertyName: "inputMessages", publicName: "inputMessages", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"messages-container\">\n  @for (message of messages(); track message.messageId) {\n  <dc-chat-message [chatMessage]=\"message\" [chatUserSettings]=\"chatUserSettings()\"> </dc-chat-message>\n  } @if (isThinking()) {\n  <div class=\"thinking-container\">\n    <div class=\"thinking-message\">\n      <div class=\"thinking-avatar\">\n        <img [src]=\"aiIcon\" alt=\"AI thinking\" class=\"avatar-img\" />\n      </div>\n      <div class=\"thinking-content\">\n        <p-skeleton width=\"80%\" height=\"2rem\"></p-skeleton>\n        <p-skeleton width=\"60%\" height=\"2rem\"></p-skeleton>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n", styles: [".messages-container{display:flex;flex-direction:column;gap:1rem;padding:1rem;height:100%}.thinking-container{padding:.5rem 0;border-radius:20px;background:#fff}.thinking-message{display:flex;gap:1rem;align-items:flex-start}.thinking-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-img{width:100%;height:100%;object-fit:cover}.thinking-content{flex:1;display:flex;flex-direction:column;gap:.5rem}\n"], dependencies: [{ kind: "component", type: ChatMessageComponent, selector: "dc-chat-message", inputs: ["chatMessage", "chatUserSettings"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessagesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat-messages-list', standalone: true, imports: [ChatMessageComponent, SkeletonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"messages-container\">\n  @for (message of messages(); track message.messageId) {\n  <dc-chat-message [chatMessage]=\"message\" [chatUserSettings]=\"chatUserSettings()\"> </dc-chat-message>\n  } @if (isThinking()) {\n  <div class=\"thinking-container\">\n    <div class=\"thinking-message\">\n      <div class=\"thinking-avatar\">\n        <img [src]=\"aiIcon\" alt=\"AI thinking\" class=\"avatar-img\" />\n      </div>\n      <div class=\"thinking-content\">\n        <p-skeleton width=\"80%\" height=\"2rem\"></p-skeleton>\n        <p-skeleton width=\"60%\" height=\"2rem\"></p-skeleton>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n", styles: [".messages-container{display:flex;flex-direction:column;gap:1rem;padding:1rem;height:100%}.thinking-container{padding:.5rem 0}.thinking-message{display:flex;gap:1rem;align-items:flex-start}.thinking-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-img{width:100%;height:100%;object-fit:cover}.thinking-content{flex:1;display:flex;flex-direction:column;gap:.5rem}\n"] }]
+            args: [{ selector: 'dc-chat-messages-list', standalone: true, imports: [ChatMessageComponent, SkeletonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"messages-container\">\n  @for (message of messages(); track message.messageId) {\n  <dc-chat-message [chatMessage]=\"message\" [chatUserSettings]=\"chatUserSettings()\"> </dc-chat-message>\n  } @if (isThinking()) {\n  <div class=\"thinking-container\">\n    <div class=\"thinking-message\">\n      <div class=\"thinking-avatar\">\n        <img [src]=\"aiIcon\" alt=\"AI thinking\" class=\"avatar-img\" />\n      </div>\n      <div class=\"thinking-content\">\n        <p-skeleton width=\"80%\" height=\"2rem\"></p-skeleton>\n        <p-skeleton width=\"60%\" height=\"2rem\"></p-skeleton>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n", styles: [".messages-container{display:flex;flex-direction:column;gap:1rem;padding:1rem;height:100%}.thinking-container{padding:.5rem 0;border-radius:20px;background:#fff}.thinking-message{display:flex;gap:1rem;align-items:flex-start}.thinking-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-img{width:100%;height:100%;object-fit:cover}.thinking-content{flex:1;display:flex;flex-direction:column;gap:.5rem}\n"] }]
         }], ctorParameters: () => [] });
 
 const SpeedDescription = {
@@ -2411,12 +2760,14 @@ class DCChatComponent {
         // Inputs
         this.chatUserSettings = this.userDataExchange.getUserChatSettings(); // Default to user data exchange
         // Signal Inputs
-        this.evaluatorAgentCard = input(); // @Deprecated in favor of appAgentTask
-        this.appAgentTask = input();
+        // readonly evaluatorAgentCard = input<IMiniAgentCard>(); // @Deprecated in favor of appAgentTask
+        this.taskOnUserMessage = input();
+        this.taskOnAssistantMessage = input();
         this.parseDict = input({});
         // Outputs
-        this.sendMessage = output(); // Not implemented, should notifies whatever happened inside the chat
+        this.sendMessage = 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
         this.messages = signal([]);
         // States
@@ -2430,9 +2781,18 @@ class DCChatComponent {
                 this.goalCompleted.emit();
             }
         });
+        // Effect to watch for word clicks from the service
+        effect(() => {
+            const clickedWordData = this.conversationService.getWordClickedSignal()();
+            if (clickedWordData) {
+                // Emit through the consolidated sendMessage output
+                this.sendMessage.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);
+            }
+        });
     }
     async ngOnInit() {
-        console.log(this.parseDict());
         if (this.conversationSettings) {
             this.conversationService.setDestroyed(false);
             await this.conversationService.initConversationWithSettings(this.conversationSettings);
@@ -2440,10 +2800,13 @@ class DCChatComponent {
         else {
             await this.conversationService.initConversationWithAgentCard(this.agentCard, this.parseDict());
         }
+        this.evaluationService.resetScore();
     }
     ngOnDestroy() {
         // Mark conversation as destroyed to prevent async operations
         this.conversationService.setDestroyed(true);
+        // Ensure the microphone is stopped when the chat component is destroyed
+        this.chatFooterComponent?.stopMic();
     }
     /**
      * Open chat settings dialog
@@ -2477,12 +2840,15 @@ class DCChatComponent {
         await this.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationSettings: { classPropertyName: "conversationSettings", publicName: "conversationSettings", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, evaluatorAgentCard: { classPropertyName: "evaluatorAgentCard", publicName: "evaluatorAgentCard", isSignal: true, isRequired: false, transformFunction: null }, appAgentTask: { classPropertyName: "appAgentTask", publicName: "appAgentTask", isSignal: true, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", goalCompleted: "goalCompleted" }, providers: [DialogService], ngImport: i0, template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [evaluatorAgentTask]=\"appAgentTask()\"> </dc-chat-footer>\n\n  <!-- Info Dialog -->\n  <p-dialog [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n    <div class=\"info-content\">\n      <h3>Agent Card</h3>\n      <pre>{{ agentCard | safeJson }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | safeJson }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["isAdmin", "alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "evaluatorAgentCard", "evaluatorAgentTask", "micSettings"], outputs: ["sendMessage", "textInputChanged"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings", "inputMessages"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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 }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, taskOnUserMessage: { classPropertyName: "taskOnUserMessage", publicName: "taskOnUserMessage", isSignal: true, isRequired: false, transformFunction: null }, taskOnAssistantMessage: { classPropertyName: "taskOnAssistantMessage", publicName: "taskOnAssistantMessage", isSignal: true, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", goalCompleted: "goalCompleted" }, providers: [DialogService], viewQueries: [{ propertyName: "chatFooterComponent", first: true, predicate: ChatFooterComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [taskOnUserMessage]=\"taskOnUserMessage()\" [taskOnAssistantMessage]=\"taskOnAssistantMessage()\"> </dc-chat-footer>\n\n  <!-- Info Dialog -->\n  <p-dialog [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n    <div class=\"info-content\">\n      <h3>Agent Card</h3>\n      <pre>{{ agentCard | safeJson }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | safeJson }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["isAdmin", "alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "taskOnUserMessage", "taskOnAssistantMessage", "micSettings"], outputs: ["sendMessage", "textInputChanged"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings", "inputMessages"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, ChatHeaderComponent, ChatFooterComponent, ChatMessagesListComponent, DialogModule, ProgressBarModule, SafeJsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [evaluatorAgentTask]=\"appAgentTask()\"> </dc-chat-footer>\n\n  <!-- Info Dialog -->\n  <p-dialog [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n    <div class=\"info-content\">\n      <h3>Agent Card</h3>\n      <pre>{{ agentCard | safeJson }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | safeJson }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { chatUserSettings: [{
+            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, ChatHeaderComponent, ChatFooterComponent, ChatMessagesListComponent, DialogModule, ProgressBarModule, SafeJsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], template: "<div class=\"chat-container\">\n  <!-- Chat Header -->\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [isAdmin]=\"isAdmin\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\">\n  </dc-chat-header>\n\n  <!-- Messages List -->\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\" [inputMessages]=\"messages()\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer [micSettings]=\"micSettings\" [taskOnUserMessage]=\"taskOnUserMessage()\" [taskOnAssistantMessage]=\"taskOnAssistantMessage()\"> </dc-chat-footer>\n\n  <!-- Info Dialog -->\n  <p-dialog [(visible)]=\"isInfoVisible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" header=\"Conversation Info\">\n    <div class=\"info-content\">\n      <h3>Agent Card</h3>\n      <pre>{{ agentCard | safeJson }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | safeJson }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { chatFooterComponent: [{
+                type: ViewChild,
+                args: [ChatFooterComponent]
+            }], chatUserSettings: [{
                 type: Input
             }], conversationSettings: [{
                 type: Input
@@ -2837,6 +3203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
+// import { extractJsonFromResponse } from '@dataclouder/ngx-agent-cards';
 class DCAgentCardFormComponent {
     getSettings() {
         const imageSettings = {
@@ -3219,7 +3586,7 @@ class DCAgentCardFormComponent {
             textEngine: TextEngines.SimpleText,
             conversationType: ConversationType.General,
         });
-        const jsonData = this.extractJsonFromResponse(response.content);
+        const jsonData = extractJsonFromResponse(response.content);
         if (jsonData) {
             this.toastService.success({ title: 'Character generated', subtitle: 'No te olvides de guardar cambios si estas seguro' });
             this.form.controls.characterCard.patchValue({ data: jsonData });
@@ -3232,18 +3599,6 @@ class DCAgentCardFormComponent {
         }
         this.isGenerating = false;
     }
-    extractJsonFromResponse(content) {
-        const jsonMatch = content.match(/\{[\s\S]*?\}/); // Match everything between first { and }
-        if (!jsonMatch)
-            return null;
-        try {
-            return JSON.parse(jsonMatch[0]);
-        }
-        catch (error) {
-            console.error('Error parsing JSON:', error);
-            return null;
-        }
-    }
     async removeSticker(sticker) {
         console.log('remove sticker', sticker);
         this.storageService.deleteImage(sticker.path);
@@ -3278,7 +3633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         DynamicDialogModule,
                         PopoverModule,
                         ProviderSelectorComponent,
-                        AccountPlatformForm
+                        AccountPlatformForm,
                     ], template: "<div class=\"top-buttons\">\n  <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n  <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n  <button pButton severity=\"primary\" (click)=\"saveConversation()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n</div>\n\n<div class=\"top-buttons\">\n  <p-button severity=\"help\" (click)=\"translate()\" label=\"\uD83D\uDD04 Traducir\"></p-button>\n  <p-button [loading]=\"isGenerating\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n\n  <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n  <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n</div>\n\n<br />\n<br />\n<form [formGroup]=\"form\" class=\"conversation-form\">\n  <div class=\"form-grid\">\n    <div class=\"left-column\">\n      <div style=\"display: flex; gap: 15px\">\n        <div class=\"form-field\">\n          <label for=\"version\">Version: {{ form.controls.version.value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"id\"\n            >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.controls.id.value }} \u2139\uFE0F</span></label\n            >\n          </div>\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"title\">Title <span pTooltip=\"T\u00EDtulo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n          <input pInputText id=\"title\" type=\"text\" formControlName=\"title\" />\n          @if(form.controls.title.errors?.['required'] && form.controls.title.touched){\n            <div class=\"error\"> Title is required </div>\n          }\n        </div>\n\n        <div class=\"form-field\">\n          <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n          <p-select\n            id=\"lang\"\n            [options]=\"languageOptions\"\n            formControlName=\"lang\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n        </div>\n\n        <div formGroupName=\"conversationSettings\" class=\"group\">\n          <h3>Conversation Settings <span pTooltip=\"Additional information about the conversation\">\u2139\uFE0F</span></h3>\n\n          <div class=\"form-field\">\n            <label for=\"textEngine\">\n              Text Engine\n              <span\n                class=\"cursor-pointer\"\n                (click)=\"textEngineDialog.toggle($event)\"\n                pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n                >\u2139\uFE0F</span\n                >\n              </label>\n\n              <p-select\n                id=\"textEngine\"\n                [options]=\"textEngineOptions\"\n                formControlName=\"textEngine\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n              [placeholder]=\"'Select Text Engine'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"conversationType\">Conversation Type <span pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span></label>\n              <p-select\n                id=\"conversationType\"\n                [options]=\"conversationOptions\"\n                formControlName=\"conversationType\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n              [placeholder]=\"'Select Conversation Type'\"></p-select>\n            </div>\n\n            <div class=\"form-field\">\n              <label> Auto Start <span pTooltip=\"Start conversation automatically\">\u2139\uFE0F</span> </label>\n              <p-toggleSwitch formControlName=\"autoStart\"> </p-toggleSwitch>\n            </div>\n\n            <div formGroupName=\"tts\" class=\"group\">\n              <h3>TTS Settings <span pTooltip=\"Text-to-Speech configuration options\">\u2139\uFE0F</span></h3>\n\n              <div class=\"form-field\">\n                <label for=\"voice\">Voice <span pTooltip=\"Select the primary voice for text-to-speech\">\u2139\uFE0F</span></label>\n                <p-select\n                  id=\"voice\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"voice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                [placeholder]=\"'Select Voice'\"></p-select>\n              </div>\n\n              <div class=\"form-field\">\n                <label for=\"secondaryVoice\">Secondary Voice <span pTooltip=\"Select an alternative voice for text-to-speech\">\u2139\uFE0F</span></label>\n                <p-select\n                  id=\"secondaryVoice\"\n                  [options]=\"voiceTTSOptions\"\n                  formControlName=\"secondaryVoice\"\n                  optionLabel=\"name\"\n                  optionValue=\"id\"\n                [placeholder]=\"'Select Secondary Voice'\"></p-select>\n              </div>\n\n              <div class=\"form-field\">\n                <label for=\"speed\">Speed <span pTooltip=\"Set the speech rate for text-to-speech conversion\">\u2139\uFE0F</span></label>\n                <p-select\n                  id=\"speed\"\n                  [options]=\"audioSpeedOptions\"\n                  formControlName=\"speed\"\n                  optionLabel=\"label\"\n                  optionValue=\"value\"\n                [placeholder]=\"'Select Speed'\"></p-select>\n              </div>\n\n              <div class=\"form-field\">\n                <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n                <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n              </div>\n            </div>\n          </div>\n\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\">\n                  Please enter a valid email address\n                </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"takenCount\"\n                >Taken Count <span pTooltip=\"Es el contador de cuantas veces se ha tomado esta conversaci\u00F3n, no sirve por ahora\"> \u2139\uFE0F</span></label\n                >\n                <input pInputText id=\"takenCount\" type=\"number\" formControlName=\"takenCount\" />\n              </div>\n\n              <div class=\"form-field checkbox\">\n                <label>\n                  <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n                  Public\n                </label>\n              </div>\n\n              <div class=\"form-field checkbox\">\n                <label>\n                  <p-checkbox [binary]=\"true\" formControlName=\"isPublished\" />\n                  Published\n                </label>\n              </div>\n            </div>\n\n            <div class=\"group\">\n              <h4>Model Settings <span pTooltip=\"AI model configuration\">\u2139\uFE0F</span></h4>\n\n              <dc-provider-selector [parentForm]=\"form.controls.model\"></dc-provider-selector>\n            </div>\n\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              }\n            </div>\n          </div>\n\n          <div class=\"right-column\">\n            <div style=\"position: relative; min-height: 60px\">\n              <img [src]=\"conversation?.assets?.bannerImg?.url || 'assets/images/default_banner.webp'\" class=\"main-banner-image-card\" />\n              @if(!conversation?.assets?.bannerImg?.url && agentCardId) {\n\n                <dc-cropper-modal\n                  style=\"position: absolute; bottom: 10px; right: 10px\"\n                  #cropperBanner\n                  id=\"cropperBanner\"\n                  [buttonLabel]=\"conversation?.assets?.bannerImg?.url ? 'Cambiar el banner' : 'Cargar un banner'\"\n                  [imgStorageSettings]=\"bannerImgSettings()\"\n                  [currentStorage]=\"conversation?.assets?.bannerImg\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'bannerImg')\"></dc-cropper-modal>\n\n              }\n            </div>\n            <div style=\"position: relative\">\n              <img [src]=\"conversation?.assets?.image?.url || 'assets/images/default_2_3.webp'\" class=\"main-image-card\" />\n              @if (!agentCardId) {\n                <button pButton (click)=\"saveConversation()\"> Guarda el scenario para subir la imagen</button>\n              } @else {\n\n                <dc-cropper-modal\n                  style=\"position: absolute; bottom: 10px; left: 50%\"\n                  id=\"cropperCardImage\"\n                  #cropperCardImage\n                  [buttonLabel]=\"conversation?.assets?.image?.url ? 'Cambiar imagen' : 'Cargar una imagen'\"\n                  [imgStorageSettings]=\"imageStorageSettings()\"\n                  (onFileSelected)=\"onImageSelected($event)\"\n                (imageUploaded)=\"onImageUploaded($event, 'image')\"></dc-cropper-modal>\n              }\n            </div>\n\n            <div>\n              <h4>Agregar stickers</h4>\n\n              <dc-cropper-modal\n                id=\"cropperCardImage\"\n                #cropperStickers\n                [buttonLabel]=\"'agregar sticker'\"\n                [imgStorageSettings]=\"stickerStorageSettings\"\n                (onFileSelected)=\"onImageSelected($event)\"\n              (imageUploaded)=\"onImageUploaded($event, 'sticker')\"></dc-cropper-modal>\n            </div>\n\n            <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n              @for (sticker of conversation?.assets?.stickers; track sticker.url) {\n                <div style=\"position: relative\">\n                  <img width=\"100\" [src]=\"sticker.url\" alt=\"\" />\n                  <p-button (click)=\"removeSticker(sticker)\" class=\"remove-sticker\" icon=\"pi pi-times\" [rounded]=\"true\" [text]=\"true\" severity=\"danger\" />\n                </div>\n              }\n            </div>\n\n            <!-- <input pInputText type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" /> -->\n\n            <div formGroupName=\"characterCard\">\n              <div formGroupName=\"data\" class=\"card-group\">\n                <h3>Character Card <span pTooltip=\"Informaci\u00F3n de la ficha del personaje\">\u2139\uFE0F</span></h3>\n                <div class=\"form-field\">\n                  <label for=\"cardName\">Name <span pTooltip=\"El nombre del personaje\">\u2139\uFE0F</span></label>\n                  <input pInputText id=\"cardName\" type=\"text\" formControlName=\"name\" />\n                  @if (form.get('characterCard.data.name')?.errors?.['required'] && form.get('characterCard.data.name')?.touched) {\n                    <div class=\"error\">\n                      Name is required\n                    </div>\n                  }\n                </div>\n\n                <div class=\"form-field\">\n                  <label for=\"cardDescription\">Description <span pTooltip=\"Descripci\u00F3n detallada del personaje\">\u2139\uFE0F</span></label>\n                  <textarea class=\"textmin\" rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardDescription\" formControlName=\"description\"></textarea>\n                  @if (form.get('characterCard.data.description')?.errors?.['required'] && form.get('characterCard.data.description')?.touched) {\n                    <div class=\"error\">\n                      Description is required\n                    </div>\n                  }\n                </div>\n\n                <div class=\"form-field\">\n                  <label for=\"cardScenario\">Scenario <span pTooltip=\"Describe the context or setting for the conversation\">\u2139\uFE0F</span></label>\n                  <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardScenario\" formControlName=\"scenario\"></textarea>\n                </div>\n\n                <div class=\"form-field\">\n                  <label for=\"cardFirstMessage\">\n                    First Message\n                    <span 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                      >\u2139\uFE0F</span\n                      >\n\n                      <p-togglebutton\n                        [formControl]=\"markdownForm.controls.seeMarkdown\"\n                        [onLabel]=\"'Editar'\"\n                        [offLabel]=\"'Ver Markdown Texto'\"\n                        size=\"small\"\n                        styleClass=\"min-w-16\"\n                        (onChange)=\"checkCdr()\" />\n                    </label>\n\n                    @if(markdownForm.controls.seeMarkdown.value){\n                      <div [innerHTML]=\"form.controls.characterCard.controls.data.controls.first_mes.value | mdToHtmlArray\"></div>\n                      }@else{\n                      <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardFirstMessage\" formControlName=\"first_mes\"> </textarea>\n                    }\n                  </div>\n\n                  <div class=\"form-field\">\n                    <label for=\"mes_example\">Mensajes de Ejemplo <span pTooltip=\"Importante para el estilo de la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n                    <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"mes_example\" formControlName=\"mes_example\"></textarea>\n                  </div>\n\n                  <div class=\"form-field\">\n                    <label for=\"cardCreatorNotes\">Creator Notes <span pTooltip=\"son solo notas del creador, no afecta nada a la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n                    <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardCreatorNotes\" formControlName=\"creator_notes\"></textarea>\n                  </div>\n\n                  <div class=\"form-field\">\n                    <label for=\"cardSystemPrompt\">System Prompt (Opcional) <span pTooltip=\"Instrucciones del sistema para la conversaci\u00F3n\">\u2139\uFE0F</span></label>\n                    <textarea rows=\"1\" pTextarea [autoResize]=\"true\" id=\"cardSystemPrompt\" formControlName=\"system_prompt\"></textarea>\n                    @if (form.get('characterCard.data.system_prompt')?.errors?.['required'] && form.get('characterCard.data.system_prompt')?.touched) {\n                      <div\n                        class=\"error\"\n                        >\n                        System prompt is required\n                      </div>\n                    }\n                  </div>\n\n                  <div style=\"display: flex; flex-direction: column\">\n                    <label for=\"cardPostHistoryInstructions\"\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                        >\u2139\uFE0F</span\n                        ></label\n                        >\n                        <textarea rows=\"1\" pTextarea [autoResize]=\"true\" formControlName=\"post_history_instructions\"></textarea>\n                      </div>\n\n                      <div class=\"form-field\">\n                        <label for=\"cardAlternateGreetings\">Alternate Greetings <span pTooltip=\"Saludos alternativos para comenzar una historia diferente\">\u2139\uFE0F</span></label>\n                        <div class=\"array-field\">\n                          @for (greeting of form.controls.characterCard.controls.data.controls.alternate_greetings.controls; track greeting; let i = $index) {\n                            <div\n                              class=\"array-item\"\n                              style=\"position: relative\">\n                              <textarea\n                                pTextarea\n                                rows=\"1\"\n                                [autoResize]=\"true\"\n                                [id]=\"'cardAlternateGreeting' + i\"\n                                [formControl]=\"greeting\"\n                                (input)=\"updateArrayField('alternate_greetings', i, $event)\">\n                              </textarea>\n                              <button pButton severity=\"danger\" class=\"remove-button\" (click)=\"removeArrayItem('alternate_greetings', i)\">&#x2716;</button>\n                            </div>\n                          }\n                          <button pButton severity=\"info\" (click)=\"addArrayItem('alternate_greetings')\">Add Greeting</button>\n                        </div>\n                      </div>\n\n                      <div class=\"form-field\">\n                        <label pTooltip=\"Agrega las categorias\" for=\"cardTags\">Tags \u2139\uFE0F</label>\n                        <div class=\"array-field\">\n                          @for (tag of form.controls.characterCard.controls.data.controls.tags.controls; track tag; let i = $index) {\n                            <div class=\"array-item\">\n                              <input [id]=\"'cardTag' + i\" type=\"text\" [formControl]=\"tag\" (input)=\"updateArrayField('tags', i, $event)\" />\n                              <button pButton severity=\"danger\" (click)=\"removeArrayItem('tags', i)\">Remove</button>\n                            </div>\n                          }\n                          <button pButton severity=\"info\" (click)=\"addArrayItem('tags')\">Add Tag</button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n            <p-popover #textEngineDialog header=\"Text Engine Information\">\n              <div class=\"p-4\">\n                <h3>Text Engine Types</h3>\n                <ul>\n                  <li> <strong>Texto Simple</strong> La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica</li>\n\n                  <li\n                    ><strong>Multi Mensajes</strong> Utiliza markdown (recomendable entenderlo), sirve para darle formato al texto y sea m\u00E1s agradable de leer, el sistema\n                    puede partir dialogos que tienen distinto formato, como normal, cursiva y negritas, asi puede generar distintas voces y estilo para el narrador y\n                    personaje principal</li\n                    >\n                    <li\n                      ><strong>MD SSML :</strong> Markdown con Lenguaje de marcaci\u00F3n de s\u00EDntesis de voz (SSML), es tambien markdown pero a diferencia de multimessage, solo se\n                      presenta un mensaje. y la voz se genera para toda la linea,normalmente lo uso para conversaciones bilingues.</li\n                      >\n                    </ul>\n                  </div>\n                </p-popover>\n\n                <div class=\"float-button\">\n                  <p-button icon=\"pi pi-save\" (click)=\"saveConversation()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n                </div>\n", styles: [".textmin{min-width:36vw}.main-image-card{max-width:280px;display:block;margin:0 auto;border-radius:8px}.main-banner-image-card{border-radius:8px}.remove-sticker{position:absolute;top:5px;right:5px}.conversation-form{max-width:100%;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{background-color:#f8f9fa;padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;width:100%;max-width:100%}@media (max-width: 768px){.conversation-form .form-grid{grid-template-columns:1fr}}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field textarea{resize:vertical}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;gap:1rem}.conversation-form .array-field{display:flex;flex-direction:column;gap:.5rem}.conversation-form .array-field .array-item{display:flex;gap:.5rem}.conversation-form .array-field .array-item input,.conversation-form .array-field .array-item textarea{flex:1}.conversation-form .array-field .array-item button{padding:.5rem}.conversation-form .array-field button[type=button]{background-color:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s}.conversation-form .array-field button[type=button]:hover{background-color:#218838}.conversation-form .group,.conversation-form .meta-group,.conversation-form .card-group{background-color:#f8f9fa;padding:1rem;border-radius:4px;margin-bottom:1.5rem}.conversation-form .group h3,.conversation-form .meta-group h3,.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}\n"] }]
         }], ctorParameters: () => [] });
 
@@ -3308,11 +3663,11 @@ class DCConversationCardUIComponent {
         this.onCardAction.emit({ event: 'delete', card: this.card() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationCardUIComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardAction: "onCardAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <h2 class=\"title-text\">{{ card().title }}</h2>\n\n    <h5 class=\"title\">\n      <span [innerHTML]=\"card().characterCard?.data.description | truncate : 100\"></span>\n    </h5>\n\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$5.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardAction: "onCardAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ card().title }}</p>\n\n    <!-- <h5 class=\"title\">\n      <span [innerHTML]=\"card().characterCard?.data.description | truncate : 100\"></span>\n    </h5> -->\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card().taken){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$5.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$2.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationCardUIComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-default-ui', imports: [PopoverModule, TruncatePipe, ButtonModule, SpeedDialModule, CardModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <h2 class=\"title-text\">{{ card().title }}</h2>\n\n    <h5 class=\"title\">\n      <span [innerHTML]=\"card().characterCard?.data.description | truncate : 100\"></span>\n    </h5>\n\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1.5rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"] }]
+            args: [{ selector: 'dc-agent-card-default-ui', imports: [PopoverModule, TruncatePipe, ButtonModule, SpeedDialModule, CardModule, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <p class=\"text-xl font-bold text-shadow-lg/30\">{{ card().title }}</p>\n\n    <!-- <h5 class=\"title\">\n      <span [innerHTML]=\"card().characterCard?.data.description | truncate : 100\"></span>\n    </h5> -->\n\n    <p style=\"margin-top: 40px\">\n      <span class=\"title text-shadow-lg/30\" [innerHTML]=\"card().characterCard?.data.creator_notes | truncate : 200\"></span>\n    </p>\n\n    @if(card().taken){\n\n    <div style=\"position: absolute; bottom: 10px; left: 10px\">\n      <p-tag icon=\"pi pi-check-circle\" severity=\"secondary\" value=\"Tomada\" [rounded]=\"true\" />\n    </div>\n    }\n    <p-button\n      (click)=\"onDetails()\"\n      [style]=\"{ position: 'absolute', bottom: '10px', right: '10px' }\"\n      icon=\"pi pi-comment\"\n      [rounded]=\"true\"\n      severity=\"info\"\n      [outlined]=\"true\"\n      [raised]=\"true\" />\n  </div>\n</p-card>\n", styles: [":host{display:block}:host ::ng-deep .p-card{height:100%}:host ::ng-deep .p-card-body{height:100%;padding:0!important}.card-image{width:280px;height:380px;position:relative;align-items:center;display:block;padding:-10px}.card-image img{position:absolute;z-index:3;width:100%;height:100%;opacity:.75;object-fit:cover;transition:opacity .5s}.content{position:absolute;inset:0;z-index:4;padding:1rem;color:#fff;background:linear-gradient(to bottom,#0003,#0000001a);height:100%;display:flex;flex-direction:column;justify-content:space-between}.content:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--p-primary-color) 20%,transparent),color-mix(in srgb,black 10%,transparent));cursor:pointer}\n"] }]
         }] });
 
 // 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
@@ -3328,9 +3683,11 @@ class AgentCardListComponent extends PaginationBase {
         const route = inject(ActivatedRoute);
         const router = inject(Router);
         super(route, router);
+        // Services
         this.agentCardService = inject(CONVERSATION_AI_TOKEN);
         this.toastService = inject(TOAST_ALERTS_TOKEN);
         this.cdr = inject(ChangeDetectorRef);
+        // Inputs
         this.viewMode = 'cards';
         this.customCardComponent = input(undefined);
         this.showOptions = input(true);
@@ -3343,7 +3700,15 @@ class AgentCardListComponent extends PaginationBase {
     ngOnInit() {
         this.columns = DefaultColumns;
         // this.buttonActions = DefaultActions;
-        this.filterConfig.returnProps = { _id: 1, title: 1, assets: 1, description: 1, 'characterCard.data.description': 1, 'characterCard.data.name': 1 };
+        this.filterConfig.returnProps = {
+            _id: 1,
+            title: 1,
+            assets: 1,
+            description: 1,
+            'characterCard.data.description': 1,
+            'characterCard.data.name': 1,
+            'characterCard.data.creator_notes': 1,
+        };
         this.loadConversationCards();
         this.cardComponent = this.customCardComponent() || DCConversationCardUIComponent;
     }
@@ -3458,7 +3823,7 @@ class AgentCardListComponent extends PaginationBase {
         }
     }
     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: { viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: false, isRequired: false, transformFunction: null }, customCardComponent: { classPropertyName: "customCardComponent", publicName: "customCardComponent", isSignal: true, 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 }, getCustomButtons: { classPropertyName: "getCustomButtons", publicName: "getCustomButtons", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [isAdmin]=\"true\" (onFilterAction)=\"doFilterBarAction($event)\" (onNew)=\"newAgentCard()\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions()\" (onAction)=\"onCardAction($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 agentCards; track card) {\n    <div style=\"position: relative\">\n      <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card, showOptions: showOptions() }\">\n      </ng-container>\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} @if(agentCards.length === 0) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;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%;height:100%;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)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: ["isAdmin", "items", "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$1.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: { viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: false, isRequired: false, transformFunction: null }, customCardComponent: { classPropertyName: "customCardComponent", publicName: "customCardComponent", isSignal: true, 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 }, getCustomButtons: { classPropertyName: "getCustomButtons", publicName: "getCustomButtons", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [isAdmin]=\"showOptions()\" (onFilterAction)=\"doFilterBarAction($event)\" (onNew)=\"newAgentCard()\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions()\" (onAction)=\"onCardAction($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 agentCards; track card) {\n    <div style=\"position: relative\">\n      <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card, showOptions: showOptions() }\">\n      </ng-container>\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} @if(agentCards.length === 0) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;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%;height:100%;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)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: ["isAdmin", "items", "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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AgentCardListComponent, decorators: [{
             type: Component,
@@ -3472,7 +3837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         SpeedDialModule,
                         QuickTableComponent,
                         CommonModule,
-                    ], standalone: true, template: "<dc-filter-bar [isAdmin]=\"true\" (onFilterAction)=\"doFilterBarAction($event)\" (onNew)=\"newAgentCard()\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions()\" (onAction)=\"onCardAction($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 agentCards; track card) {\n    <div style=\"position: relative\">\n      <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card, showOptions: showOptions() }\">\n      </ng-container>\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} @if(agentCards.length === 0) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;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%;height:100%;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)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"] }]
+                    ], standalone: true, template: "<dc-filter-bar [isAdmin]=\"showOptions()\" (onFilterAction)=\"doFilterBarAction($event)\" (onNew)=\"newAgentCard()\"></dc-filter-bar>\n\n@if(viewMode === 'table'){\n<app-quick-table [columns]=\"columns\" [tableData]=\"agentCards\" [actions]=\"actions()\" (onAction)=\"onCardAction($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 agentCards; track card) {\n    <div style=\"position: relative\">\n      <ng-container #outlet=\"ngComponentOutlet\" [ngComponentOutlet]=\"cardComponent\" [ngComponentOutletInputs]=\"{ card: card, showOptions: showOptions() }\">\n      </ng-container>\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} @if(agentCards.length === 0) {\n<div>\n  <p>No conversations found or no connection with server</p>\n</div>\n} }\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:block;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%;height:100%;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)}:host{display:flex;flex-direction:column;height:100%}p-paginator{margin-top:1rem;flex-shrink:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { viewMode: [{
                 type: Input
             }], outlets: [{
@@ -3538,11 +3903,11 @@ class DcAgentCardDetailsComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          @if (agentCard?.characterCard.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          @if (agentCard?.characterCard.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          @if (agentCard?.characterCard.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}\n"] }]
+            args: [{ selector: 'dc-agent-card-details', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe], template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n          >\n          <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n          @if (agentCard?.characterCard.data?.scenario) {\n          <div class=\"scenario\">\n            <h4>Scenario</h4>\n            <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}.info-button{position:absolute;top:15px;right:15px;z-index:3}.info-button:hover{transform:scale(1.1)}.info-layer{height:100%;width:100%;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#ed122833;color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
         }], propDecorators: { agentCardId: [{
                 type: Input
             }] } });
@@ -3556,5 +3921,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AgentCardListComponent, AgentCardsAbstractService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, ChatMessage, ChatRole, ChatUserSettings, ConversationDTO, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, EAccountsPlatform, EvalResultStringDefinition, LangCodeDescriptionEs, MessageAudio, MessageOrchestratorComponent, ProviderSelectorComponent, TextEngineOptions, TextEngines, TextHighlighterComponent, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, markdownBasicToHTML, markdownToHTML$1 as markdownToHTML, markdownToHTML2, markdownToHtml, matchTranscription, provideChatAIService, provideUserDataExchange, removeAllEmojis, removeEmojis };
+export { AgentCardListComponent, AgentCardProgressStatus, AgentCardsAbstractService, AgentUserProgressService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, ChatEventType, ChatMessage, ChatRole, ChatUserSettings, ContextType, ConversationDTO, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, EAccountsPlatform, EvalResultStringDefinition, LangCodeDescriptionEs, MessageAudio, MessageOrchestratorComponent, PopupService, ProviderSelectorComponent, TextEngineOptions, TextEngines, TextHighlighterComponent, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, markdownBasicToHTML, markdownToHTML$1 as markdownToHTML, markdownToHTML2, markdownToHtml, matchTranscription, provideChatAIService, provideUserDataExchange, removeAllEmojis, removeEmojis };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map