@dataclouder/ngx-agent-cards 0.0.88 → 0.0.89

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, input, output, Input, Component, signal, DestroyRef, computed, ChangeDetectorRef, effect, ChangeDetectionStrategy, Pipe, ViewChild, ViewChildren } from '@angular/core';
+import { InjectionToken, Injectable, inject, Pipe, input, output, Input, Component, signal, computed, ChangeDetectorRef, DestroyRef, effect, ChangeDetectionStrategy, ViewChild, ViewChildren } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DatePipe, DecimalPipe, NgComponentOutlet } from '@angular/common';
 import { DynamicDialogRef, DialogService, DynamicDialogConfig, DynamicDialogModule } from 'primeng/dynamicdialog';
-import * as i2$4 from 'primeng/dialog';
+import * as i1$3 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i2 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
@@ -14,11 +14,11 @@ import * as i3 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import * as i2$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
+import { AudioSpeed as AudioSpeed$1, TOAST_ALERTS_TOKEN, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { BehaviorSubject, Subject, fromEvent, filter } from 'rxjs';
+import { Subject, fromEvent, filter } from 'rxjs';
 import { takeUntil, map } from 'rxjs/operators';
 import { DomSanitizer } from '@angular/platform-browser';
-import { AudioSpeed as AudioSpeed$1, TOAST_ALERTS_TOKEN, PaginationBase, DCFilterBarComponent, QuickTableComponent } from '@dataclouder/ngx-core';
 import * as i1$2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i2$3 from 'primeng/checkbox';
@@ -49,14 +49,14 @@ import * as i9 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i10 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
-import * as i2$5 from 'primeng/card';
+import * as i2$4 from 'primeng/card';
 import { CardModule } from 'primeng/card';
 import * as i3$2 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import { ChipModule } from 'primeng/chip';
-import * as i1$3 from 'primeng/paginator';
+import * as i1$4 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i2$6 from 'primeng/speeddial';
+import * as i2$5 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
 
 const characterCardStringDataDefinition = `
@@ -83,8 +83,6 @@ class WordTimestamps {
 }
 class MessageAudio {
 }
-class ChatMultiMessage extends MessageAudio {
-}
 var ChatRole;
 (function (ChatRole) {
     ChatRole["System"] = "system";
@@ -682,7 +680,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
+
+/**
+ * SafeJsonPipe - A pipe that safely stringifies objects with circular references
+ * This pipe handles circular references and DOM objects that can't be serialized
+ */
+class SafeJsonPipe {
+    transform(value) {
+        // Create a new object with only serializable properties
+        return this.stringifySafely(value);
+    }
+    /**
+     * Safely stringify an object, handling circular references
+     */
+    stringifySafely(obj) {
+        const seen = new WeakSet();
+        return JSON.stringify(obj, (key, value) => {
+            // Skip properties that start with underscore (often internal properties)
+            if (key.startsWith('_')) {
+                return undefined;
+            }
+            // Handle DOM elements and other non-serializable objects
+            if (value instanceof HTMLElement || value instanceof Node) {
+                return '[DOM Element]';
+            }
+            // Handle audio elements specifically
+            if (key === 'audioHtml' || key === 'audioElement') {
+                return '[Audio Element]';
+            }
+            // Handle functions
+            if (typeof value === 'function') {
+                return '[Function]';
+            }
+            // Handle circular references
+            if (typeof value === 'object' && value !== null) {
+                if (seen.has(value)) {
+                    return '[Circular Reference]';
+                }
+                seen.add(value);
+            }
+            return value;
+        }, 2);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SafeJsonPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: SafeJsonPipe, isStandalone: true, name: "safeJson" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SafeJsonPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeJson',
+                    standalone: true
+                }]
+        }] });
 
 class ChatHeaderComponent {
     constructor() {
@@ -932,22 +982,14 @@ function removeAllEmojis(text) {
 class MessageProcessingService {
     constructor() { }
     // Process message for display
-    processMessage(message, conversationSettings, mutate = false) {
+    processMessage(message, conversationSettings) {
         const defaultVoice = this.getVoice(conversationSettings.voice);
         let processedMessage;
-        if (mutate) {
-            // Modify the existing message object
-            message.voice = defaultVoice;
-            processedMessage = message;
-        }
-        else {
-            // Create a new message object
-            processedMessage = {
-                content: message.content,
-                role: message.role,
-                voice: defaultVoice
-            };
-        }
+        processedMessage = {
+            content: message.content,
+            role: message.role,
+            voice: defaultVoice,
+        };
         // Process based on text engine
         if (conversationSettings.textEngine === TextEngines.MarkdownMultiMessages) {
             this.processMultiMessages(processedMessage, conversationSettings);
@@ -959,7 +1001,8 @@ class MessageProcessingService {
             const content = this.subsItalicsByTag(processedMessage.content, conversationSettings.secondaryVoice);
             processedMessage.ssml = '<speak>' + content + '</speak>';
         }
-        return processedMessage;
+        console.log(processedMessage);
+        return { ...message, ...processedMessage };
     }
     // Process multi-messages from markdown
     processMultiMessages(message, settings) {
@@ -978,7 +1021,7 @@ class MessageProcessingService {
                 audioUrl: null,
                 audioPromise: null,
                 text: val.text,
-                tag: val.tag
+                tag: val.tag,
             };
         });
     }
@@ -1022,60 +1065,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+function matchTranscription(originalText, transcription) {
+    const result = [];
+    const transcriptionMap = new Map();
+    // Create a map of lowercase words to an array of their corresponding objects in transcription
+    for (const obj of transcription) {
+        const lowercaseWord = obj.word.trim().toLowerCase();
+        if (transcriptionMap.has(lowercaseWord)) {
+            transcriptionMap.get(lowercaseWord).push(obj);
+        }
+        else {
+            transcriptionMap.set(lowercaseWord, [obj]);
+        }
+    }
+    // Split the original text into an array of words
+    const words = originalText.split(' ');
+    let currentTime = 0;
+    for (const word of words) {
+        const lowercaseWord = word.toLowerCase();
+        const matchedObjs = transcriptionMap.get(lowercaseWord);
+        if (matchedObjs && matchedObjs.length > 0) {
+            const matchedObj = matchedObjs.shift();
+            result.push({
+                word: word,
+                start: Number(matchedObj.start.toFixed(3)),
+                end: Number(matchedObj.end.toFixed(3)),
+            });
+            currentTime = matchedObj.end;
+        }
+        else {
+            result.push({
+                word: word,
+                start: Number(currentTime.toFixed(3)),
+                end: Number(currentTime.toFixed(3)),
+            });
+        }
+    }
+    return result;
+}
+function extractAudioAndTranscription(message, audio) {
+    message.audioUrl = audio.blobUrl;
+    message.transcription = audio.transcription;
+    if (message.transcription) {
+        message.transcriptionTimestamps = matchTranscription(message.text || message.content, message.transcription.words);
+    }
+    return message;
+}
+function buildObjectTTSRequest(message, settings = {}) {
+    const generateTranscription = settings?.highlightWords ?? false;
+    const speedRate = settings?.speedRate || 0;
+    const speed = typeof settings?.speed === 'string' ? settings.speed : AudioSpeed$1.Regular;
+    const text = removeEmojis(message.text || message.content);
+    return {
+        text,
+        voice: message.voice || settings.voice,
+        generateTranscription,
+        speedRate,
+        speed,
+    };
+}
+
 class ConversationService {
     constructor() {
+        // Services
         this.agentCardService = inject(CONVERSATION_AI_TOKEN);
         this.messageProcessingService = inject(MessageProcessingService);
+        this.conversationBuilder = inject(DCConversationPromptBuilderService);
+        this.userDataExchange = inject(USER_DATA_EXCHANGE);
+        // Signals
         this.messagesSignal = signal([]);
         this.isThinkingSignal = signal(false);
         this.conversationSettingsSignal = signal(null);
-        this.agentCardSignal = signal(null);
         this.isDestroyedSignal = signal(false);
     }
     // Get messages as a signal
-    getMessages() {
+    getMessagesSignal() {
         return this.messagesSignal;
     }
+    // Add message to conversation
+    addMessage(message) {
+        this.messagesSignal.update((messages) => [...messages, message]);
+    }
     // Get thinking state as a signal
     isThinking() {
         return this.isThinkingSignal;
     }
-    // Get conversation settings as a signal
-    getConversationSettings() {
-        return this.conversationSettingsSignal;
-    }
-    // Get agent card as a signal
-    getAgentCard() {
-        return this.agentCardSignal;
-    }
     // Set destroyed state
     setDestroyed(value) {
         this.isDestroyedSignal.set(value);
     }
-    // Initialize conversation
-    async initConversation(agentCard, conversationBuilder, parseDict) {
-        if (!agentCard?.conversationSettings) {
-            throw new Error('Conversation settings are required');
+    setupConversationWithAgentCard(agentCard) {
+        const conversationSettings = this.conversationBuilder.buildConversationSettings(agentCard);
+        // set initial ids
+        for (const i in conversationSettings.messages) {
+            conversationSettings.messages[i].messageId = 'msg_' + i;
         }
-        this.agentCardSignal.set(agentCard);
-        // Build conversation settings
-        const conversationSettings = conversationBuilder.buildConversationSettings(agentCard, parseDict);
         this.conversationSettingsSignal.set(conversationSettings);
-        // Update agent card with conversation settings
-        const updatedAgentCard = { ...agentCard, conversationSettings };
-        this.agentCardSignal.set(updatedAgentCard);
-        if (!conversationSettings.messages) {
-            throw new Error('conversationSettings.messages is required in proper format to start conversation');
-        }
-        // Set initial messages
-        this.messagesSignal.set(conversationSettings.messages);
+    }
+    // Initialize conversation
+    async initConversation(agentCard) {
+        this.setupConversationWithAgentCard(agentCard);
+        const conversationSettings = this.conversationSettingsSignal();
         // Find first assistant message
         const firstAssistantMsg = conversationSettings.messages.find((message) => message.role === ChatRole.Assistant);
         if (firstAssistantMsg) {
             // Process the first assistant message
-            this.processAssistantMessage(firstAssistantMsg, true);
+            const processedMessage = this.messageProcessingService.processMessage(firstAssistantMsg, this.conversationSettingsSignal());
+            // Find the index of the message with the matching ID
+            const messageIndex = conversationSettings.messages.findIndex((message) => message.messageId === firstAssistantMsg.messageId);
+            // If found, replace the message at that index
+            if (messageIndex !== -1) {
+                conversationSettings.messages[messageIndex] = processedMessage;
+            }
+            this.messagesSignal.set(conversationSettings.messages);
+            // this.addMessage(processedMessage);
         }
-        else if (agentCard.conversationSettings.autoStart) {
+        else if (conversationSettings.autoStart) {
             // Auto-start conversation if configured
             await this.sendCurrentConversation();
         }
@@ -1090,19 +1195,6 @@ class ConversationService {
         // Set thinking state
         this.isThinkingSignal.set(true);
         try {
-            if (message.audioUrl && this.getAudioPlaybackSetting()) {
-                // Wait for audio to finish playing before sending response
-                await new Promise((resolve) => {
-                    if (message.audioHtml) {
-                        message.audioHtml.addEventListener('ended', () => {
-                            resolve();
-                        });
-                    }
-                    else {
-                        resolve();
-                    }
-                });
-            }
             // Send to AI service
             await this.sendCurrentConversation();
         }
@@ -1110,18 +1202,7 @@ class ConversationService {
             this.isThinkingSignal.set(false);
         }
     }
-    // Add message to conversation
-    addMessage(message) {
-        this.messagesSignal.update((messages) => [...messages, message]);
-    }
     // Process assistant message
-    processAssistantMessage(message, mutate = false) {
-        const conversationSettings = this.conversationSettingsSignal();
-        if (!conversationSettings) {
-            throw new Error('Conversation settings not initialized');
-        }
-        return this.messageProcessingService.processMessage(message, conversationSettings, mutate);
-    }
     // Send current conversation to AI
     async sendCurrentConversation() {
         if (this.isDestroyedSignal()) {
@@ -1129,10 +1210,6 @@ class ConversationService {
         }
         const messages = this.messagesSignal();
         const conversationSettings = this.conversationSettingsSignal();
-        const agentCard = this.agentCardSignal();
-        if (!conversationSettings || !agentCard) {
-            throw new Error('Conversation not properly initialized');
-        }
         if (messages.length > 31) {
             // Safety limit to prevent infinite conversations
             return;
@@ -1140,18 +1217,16 @@ class ConversationService {
         let conversationMessages = messages;
         // Add last prompt if available
         if (conversationSettings.last_prompt) {
-            conversationMessages = [
-                ...messages,
-                { content: conversationSettings.last_prompt, role: ChatRole.System },
-            ];
+            conversationMessages = [...messages, { content: conversationSettings.last_prompt, role: ChatRole.System }];
         }
         // Prepare conversation DTO
         const conversation = {
             messages: conversationMessages,
             conversationType: conversationSettings.conversationType,
             textEngine: conversationSettings.textEngine,
-            model: agentCard.model,
+            model: { modelName: '', provider: '' },
         };
+        console.warn('fix model name modelName take from user settings');
         // Call AI service
         const response = await this.agentCardService.callChatCompletion(conversation);
         if (!response) {
@@ -1159,29 +1234,20 @@ class ConversationService {
             throw new Error('No message returned from AI');
         }
         // Process response
-        const newMessage = this.processAssistantMessage(response);
+        const newMessage = this.messageProcessingService.processMessage(response, conversationSettings);
         // Add to messages
         this.addMessage(newMessage);
         this.isThinkingSignal.set(false);
     }
-    // Helper to get audio playback setting
-    getAudioPlaybackSetting() {
-        const agentCard = this.agentCardSignal();
-        return agentCard?.conversationSettings?.repeatRecording || false;
-    }
     // Reset conversation
     async resetConversation(agentCard) {
-        if (agentCard) {
-            this.agentCardSignal.set(agentCard);
-        }
         // Clear messages
         this.messagesSignal.set([]);
-        // Re-initialize with current agent card
-        const currentAgentCard = agentCard || this.agentCardSignal();
-        if (currentAgentCard) {
-            // Note: This would need the conversationBuilder to be injected or passed
-            // await this.initConversation(currentAgentCard, conversationBuilder);
-        }
+    }
+    async getTTSFile(message) {
+        const userChatSettings = await this.userDataExchange.getUserChatSettings();
+        const ttsRequest = buildObjectTTSRequest(message, userChatSettings);
+        return this.agentCardService.getTextAudioFile(ttsRequest);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConversationService, providedIn: 'root' }); }
@@ -1191,7 +1257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 function extractJsonFromResponse(content) {
     const jsonMatch = content.match(/\{[\s\S]*?\}/); // Match everything between first { and }
@@ -1286,7 +1352,9 @@ class ChatFooterComponent {
         this.micSettings = input({ useWhisper: true, lang: 'en' });
         this.sendMessage = output();
         this.textInputChanged = output();
-        this.micFinishedEvent = output();
+        // readonly micFinishedEvent = output<any>();
+        this.isGettingTranscription = false;
+        this.isUserTalking = false;
         this.chatInputControl = new FormControl();
         // Get score from evaluation service
         this.score = this.evaluationService.getScore();
@@ -1304,7 +1372,7 @@ class ChatFooterComponent {
      * @param eventBlob The blob event from the mic component
      */
     micFinished(eventBlob) {
-        this.micFinishedEvent.emit(eventBlob);
+        // this.micFinishedEvent.emit(eventBlob);
     }
     /**
      * Sends the user message
@@ -1331,182 +1399,52 @@ class ChatFooterComponent {
      * Evaluate conversation using evaluator agent
      */
     async evaluateConversation() {
-        const messages = this.conversationService.getMessages()();
+        const messages = this.conversationService.getMessagesSignal()();
         if (this.evaluatorAgentCard()) {
             await this.evaluationService.evaluateConversation(messages, this.evaluatorAgentCard());
         }
     }
-    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.1.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 }, micSettings: { classPropertyName: "micSettings", publicName: "micSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", textInputChanged: "textInputChanged", micFinishedEvent: "micFinishedEvent" }, ngImport: i0, template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\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  <div>\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\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: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["isDone", "useWhisper", "targetOrBase", "micSettings"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }, { 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"] }] }); }
-}
-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, DCMicComponent, TextareaModule, ButtonModule], template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\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  <div>\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\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"] }]
-        }] });
-
-class AudioTextSyncService {
-    constructor() {
-        // Maps to store message-specific signals and observables
-        this.highlightedWordsSignalMap = new Map();
-        this.highlightedWords$Map = new Map();
-        // Maps for cleanup and active audio elements
-        this.cleanup$Map = new Map();
-        this.activeAudioMap = new Map();
-        this.destroyRef = inject(DestroyRef);
-        // Ensure cleanup when service is destroyed
-        this.destroyRef.onDestroy(() => {
-            this.stopAllSyncs();
-        });
-    }
-    /**
-     * Synchronizes audio playback with text transcription
-     * @param audioElement The audio element to sync with
-     * @param transcriptionTimestamps Array of word timestamps
-     * @param messageId Unique identifier for the message
-     */
-    syncAudioWithText(audioElement, transcriptionTimestamps, messageId) {
-        // Stop any existing sync for this message
-        this.stopSync(messageId);
-        // Create new signal and subject for this message if they don't exist
-        if (!this.highlightedWordsSignalMap.has(messageId)) {
-            this.highlightedWordsSignalMap.set(messageId, signal([]));
-        }
-        if (!this.highlightedWords$Map.has(messageId)) {
-            this.highlightedWords$Map.set(messageId, new BehaviorSubject([]));
-        }
-        // Create cleanup subject
-        const cleanup$ = new Subject();
-        this.cleanup$Map.set(messageId, cleanup$);
-        // Store the active audio element
-        this.activeAudioMap.set(messageId, audioElement);
-        // Get the signal and subject for this message
-        const messageSignal = this.highlightedWordsSignalMap.get(messageId);
-        const messageSubject = this.highlightedWords$Map.get(messageId);
-        // Initialize the highlighted words state
-        const initialWords = transcriptionTimestamps.map((word, index) => ({
-            word: word.word,
-            index,
-            isHighlighted: false,
-        }));
-        // Update both signal and observable
-        messageSignal.set(initialWords);
-        messageSubject.next(initialWords);
-        // Listen to timeupdate events
-        fromEvent(audioElement, 'timeupdate')
-            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(cleanup$), map(() => audioElement.currentTime))
-            .subscribe((currentTime) => {
-            const updatedWords = transcriptionTimestamps.map((word, index) => {
-                const isHighlighted = currentTime >= word.start - 0.15 && currentTime < word.end + 0.15;
-                return {
-                    word: word.word,
-                    index,
-                    isHighlighted,
-                };
-            });
-            // Update both signal and observable for this message
-            messageSignal.set(updatedWords);
-            messageSubject.next(updatedWords);
-        });
-        // Listen to ended event for cleanup
-        fromEvent(audioElement, 'ended')
-            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(cleanup$))
-            .subscribe(() => {
-            // Reset highlighting when audio ends
-            const resetWords = initialWords.map((word) => ({
-                ...word,
-                isHighlighted: false,
-            }));
-            messageSignal.set(resetWords);
-            messageSubject.next(resetWords);
-        });
-    }
-    /**
-     * Stops the sync for a specific message and cleans up resources
-     * @param messageId The ID of the message to stop syncing
-     */
-    stopSync(messageId) {
-        if (this.activeAudioMap.has(messageId)) {
-            // Get the cleanup subject for this message
-            const cleanup$ = this.cleanup$Map.get(messageId);
-            if (cleanup$) {
-                cleanup$.next();
-                cleanup$.complete();
-                this.cleanup$Map.delete(messageId);
-            }
-            this.activeAudioMap.delete(messageId);
-            // Reset state for this message
-            const messageSignal = this.highlightedWordsSignalMap.get(messageId);
-            const messageSubject = this.highlightedWords$Map.get(messageId);
-            if (messageSignal) {
-                messageSignal.set([]);
-            }
-            if (messageSubject) {
-                messageSubject.next([]);
-            }
+    async onMicFinished(eventBlob) {
+        if (!(eventBlob instanceof Blob)) {
+            return;
         }
-    }
-    /**
-     * Stops all syncs and cleans up all resources
-     */
-    stopAllSyncs() {
-        // Get all message IDs and stop each sync
-        for (const messageId of this.activeAudioMap.keys()) {
-            this.stopSync(messageId);
+        // Check if audio is too small
+        if (eventBlob.size < 10000) {
+            return;
         }
-        // Clear all maps
-        this.highlightedWordsSignalMap.clear();
-        this.highlightedWords$Map.clear();
-        this.cleanup$Map.clear();
-        this.activeAudioMap.clear();
-    }
-    /**
-     * Returns the highlighted words signal for a specific message
-     * @param messageId The ID of the message
-     */
-    getHighlightedWordsSignal(messageId) {
-        // Create a new signal for this message if it doesn't exist
-        if (!this.highlightedWordsSignalMap.has(messageId)) {
-            this.highlightedWordsSignalMap.set(messageId, signal([]));
+        this.isUserTalking = false;
+        this.isGettingTranscription = true;
+        try {
+            // Get transcription from audio
+            // const transcription = await this.agentCardService.getAudioTranscriptions(eventBlob, {
+            //   conversationId: this.agentCard._id,
+            // });
+            // Create message with transcription
+            // const message: ChatMessage = {
+            //   content: transcription.text,
+            //   role: ChatRole.User,
+            //   transcriptionTimestamps: transcription.words,
+            // };
+            const message = {
+                content: '',
+                role: ChatRole.User,
+                audioUrl: URL.createObjectURL(eventBlob),
+            };
+            // Send message to conversation
+            // The evaluation will happen automatically in the conversation service
+            await this.conversationService.sendUserMessage(message);
         }
-        return this.highlightedWordsSignalMap.get(messageId);
-    }
-    /**
-     * Returns the highlighted words observable for a specific message
-     * @param messageId The ID of the message
-     */
-    getHighlightedWords$(messageId) {
-        // Create a new subject for this message if it doesn't exist
-        if (!this.highlightedWords$Map.has(messageId)) {
-            this.highlightedWords$Map.set(messageId, new BehaviorSubject([]));
+        finally {
+            this.isGettingTranscription = false;
         }
-        return this.highlightedWords$Map.get(messageId).asObservable();
-    }
-    /**
-     * Checks if a word at a specific index is currently highlighted for a specific message
-     * @param messageId The ID of the message
-     * @param index The index of the word to check
-     */
-    isWordHighlighted(messageId, index) {
-        const messageSignal = this.getHighlightedWordsSignal(messageId);
-        return messageSignal().some((word) => word.index === index && word.isHighlighted);
     }
-    /**
-     * Returns an observable that emits true when a word at a specific index is highlighted for a specific message
-     * @param messageId The ID of the message
-     * @param index The index of the word to observe
-     */
-    isWordHighlighted$(messageId, index) {
-        return this.getHighlightedWords$(messageId).pipe(map((words) => words.some((word) => word.index === index && word.isHighlighted)));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AudioTextSyncService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AudioTextSyncService, providedIn: 'root' }); }
+    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.1.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 }, 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    <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  <div>\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\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: "component", type: DCMicComponent, selector: "dc-mic", inputs: ["isDone", "useWhisper", "targetOrBase", "micSettings"], outputs: ["onInterpretedText", "onFinishedRecognition", "onFinished"] }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AudioTextSyncService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
+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, DCMicComponent, TextareaModule, ButtonModule], template: "<div class=\"progress-input\">\n  <div class=\"input-container\">\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  <div>\n    <p-progressbar showValue=\"false\" [value]=\"score()\" [style]=\"{ height: '6px' }\" />\n  </div>\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"] }]
+        }] });
 
 const ICONS = {
     chat: `<svg viewBox="0 0 24 24" fill="currentColor">
@@ -1585,40 +1523,49 @@ 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: () => [] });
 
-/**
- * Standalone component for audio-text synchronization
- * This component can work independently from the chat component
- */
-class StandaloneAudioTextSyncComponent {
+class TextHighlighterComponent {
     constructor() {
-        this.message = input(undefined); // Or input.required<MessageAudio>() if always expected
+        this.message = input.required(); // Or input.required<MessageAudio>() if always expected
         this.highlightedWords = signal([]); // Signal for highlighted words
-        this.isLoading = computed(() => this.message()?.isLoading);
-        this.shouldPlayAudio = computed(() => {
-            debugger;
-            const shouldPlay = !!this.message() && this.message()?.shouldPlayAudio;
-            return shouldPlay;
+        this.isPlaying = signal(false); // Signal for play state
+        // Signals State computed from the input message
+        this.iconState = computed(() => {
+            if (this.isLoading()) {
+                return 'isLoading';
+            }
+            else if (this.isPlaying()) {
+                return 'isPlaying';
+            }
+            else if (this.message()?.audioUrl) {
+                return 'playable';
+            }
+            else {
+                return 'idle';
+            }
         });
-        this.playAudio = output();
-        this.audioCompleted = output();
-        this.audioElement = null; // Audio element for playback
-        this.destroy$ = new Subject(); // Cleanup subject
-        // Inject services
-        this.cdr = inject(ChangeDetectorRef); // Keep for now, might remove if template fully signal-driven
-        this.destroyRef = inject(DestroyRef);
+        this.isLoading = computed(() => this.message()?.isLoading);
+        this.shouldPlayAudio = computed(() => !!this.message() && this.message()?.shouldPlayAudio);
         // Computed signal for message text
         this.messageText = computed(() => {
+            console.log('Message text computed', this.message());
             const msg = this.message(); // Read the input signal
-            return msg?.content || msg?.text || '';
+            return msg?.text || msg?.content || 'N/A';
         });
+        this.classTag = computed(() => this.message()?.tag);
         // 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(() => {
-            debugger;
             const currentMsg = this.message(); // Read the input signal
             console.log('Input message signal changed:', currentMsg);
             if (currentMsg) {
@@ -1653,30 +1600,27 @@ class StandaloneAudioTextSyncComponent {
         this.destroy$.complete();
         this.cleanupAudio();
     }
-    // This method is called by the effect when the message signal changes
     initializeBasedOnMessage(msg) {
         // Initialize or cleanup audio based on URL presence and change
         if (msg.audioUrl && (!this.audioElement || this.audioElement.src !== msg.audioUrl)) {
             this.initializeAudio(msg.audioUrl); // Pass URL
         }
         else if (!msg.audioUrl && this.audioElement) {
-            // Cleanup if URL removed and element exists
             this.cleanupAudio();
         }
+        else if (!msg.audioUrl) {
+            // No audio URL and no audio element - just log a warning instead of throwing an error
+            console.warn('No audioUrl provided in the message. Audio playback will not be available.');
+        }
         // Initialize words and sync based on transcription presence
         if (this.hasTranscription()) {
             // Use computed signal
             const timestamps = msg.transcriptionTimestamps || [];
             this.initializeHighlightedWords(timestamps); // Pass timestamps
-            // Ensure audio sync setup happens if audio element exists
-            if (this.audioElement) {
-                this.setupAudioSync(timestamps); // Pass timestamps
-            }
+            this.subcribeToAudioSync(timestamps); // Pass timestamps
         }
         else {
-            // No transcription, clear words and potentially stop sync listeners
-            this.highlightedWords.set([]);
-            this.destroy$.next(); // Signal existing listeners to stop
+            this.subscribeToEndAudio();
         }
     }
     /**
@@ -1701,7 +1645,7 @@ class StandaloneAudioTextSyncComponent {
     /**
      * Set up audio synchronization with text
      */
-    setupAudioSync(timestamps) {
+    subcribeToAudioSync(timestamps) {
         // Accept timestamps
         if (!this.audioElement) {
             // Guard against missing audio element
@@ -1733,6 +1677,8 @@ class StandaloneAudioTextSyncComponent {
                 isHighlighted: false,
             }));
             this.highlightedWords.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) {
@@ -1742,6 +1688,23 @@ class StandaloneAudioTextSyncComponent {
             }
         });
     }
+    subscribeToEndAudio() {
+        if (!this.audioElement) {
+            return;
+        }
+        fromEvent(this.audioElement, 'ended')
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.destroy$))
+            .subscribe(() => {
+            // 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) {
+                currentMsg.shouldPlayAudio = false;
+                this.audioCompleted.emit(currentMsg);
+            }
+        });
+    }
     /**
      * Clean up audio element and event listeners
      */
@@ -1763,6 +1726,7 @@ class StandaloneAudioTextSyncComponent {
      * Play or pause the audio
      */
     onPlayMessage() {
+        console.log('Playing message audio', this.message().messageId);
         const currentMsg = this.message(); // Read signal
         if (this.audioElement) {
             if (this.audioElement.paused) {
@@ -1778,6 +1742,7 @@ class StandaloneAudioTextSyncComponent {
             // 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) {
@@ -1795,358 +1760,201 @@ class StandaloneAudioTextSyncComponent {
         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: StandaloneAudioTextSyncComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: StandaloneAudioTextSyncComponent, isStandalone: true, selector: "dc-standalone-audio-text-sync", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted" }, ngImport: i0, template: "<div class=\"audio-text-sync-container\">\n  <!-- Icon for play/loading status -->\n  <div>\n    <!-- <span> lo: {{ isLoading() }} tr: {{ hasTranscription() }} play: {{ shouldPlayAudio() }} </span> -->\n  </div>\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @if (isLoading()) {\n    <!-- <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon> -->\n    <i class=\"spin-animation pi pi-spinner-dotted\"></i>\n\n    } @else {\n    <dc-icon name=\"play\"></dc-icon>\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div class=\"text-content\">\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 [innerHtml]=\"messageText()\"></span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:8px}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px}.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)}}\n"], dependencies: [{ kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: StandaloneAudioTextSyncComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextHighlighterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-standalone-audio-text-sync', standalone: true, imports: [IconsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\">\n  <!-- Icon for play/loading status -->\n  <div>\n    <!-- <span> lo: {{ isLoading() }} tr: {{ hasTranscription() }} play: {{ shouldPlayAudio() }} </span> -->\n  </div>\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @if (isLoading()) {\n    <!-- <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon> -->\n    <i class=\"spin-animation pi pi-spinner-dotted\"></i>\n\n    } @else {\n    <dc-icon name=\"play\"></dc-icon>\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <div class=\"text-content\">\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 [innerHtml]=\"messageText()\"></span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:8px}.play-button{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px}.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)}}\n"] }]
+            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"] }]
         }], ctorParameters: () => [] });
 
-class MultiMessageContentComponent {
+class MessageOrchestratorComponent {
     constructor() {
+        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
+        this.conversationService = inject(ConversationService);
         this.messages = input.required();
-        this.isLoading = input(false);
+        this.messageRole = input.required();
+        this.messagesSignal = signal([]);
         this.playAudio = output();
-        // Track current playing message index
-        this.currentPlayingIndex = -1;
-    }
-    /**
-     * Checks if a message has transcription timestamps
-     * @param message The message to check
-     */
-    hasTranscription(message) {
-        //
-        return !!message.transcriptionTimestamps;
+        this.audioCompleted = output();
+        // Audio queue management
+        this.audioQueue = [];
+        this.isGenerating = false;
+        this.currentPlayingIndex = null;
+        this.preGenerationInProgress = false;
     }
-    /**
-     * Emits the playAudio event with the selected message and starts sequential playback
-     * @param message The message to play
-     */
-    onPlayMessage(message) {
-        // Find the index of the message to play
-        const index = this.messages().findIndex((msg) => msg === message || msg.messageId === message.messageId);
-        if (index >= 0) {
-            this.startSequentialPlayback(index);
+    ngOnInit() {
+        if (this.messageRole() === ChatRole.Assistant) {
+            console.log('MessageOrchestratorComponent initialized', this.messages());
+            // Initialize the queue with all message indices
+            this.initializeAudioQueue();
+            // Start processing the queue - generate the first audio
+            this.processNextInQueue();
+        }
+        else {
+            // since user only have one message, just activate signal
+            this.changeStates(0, this.messages()[0]);
         }
-        // Also emit to parent if needed
-        this.playAudio.emit(message);
     }
-    /**
-     * Method to start playing the sequence
-     * @param startIndex Index of the message to start playing from
-     */
-    startSequentialPlayback(startIndex = 0) {
-        this.currentPlayingIndex = startIndex;
+    // Initialize the queue with all message indices
+    initializeAudioQueue() {
         const messages = this.messages();
-        if (messages && messages.length > startIndex) {
-            // Reset all messages
-            messages.forEach((msg) => (msg.shouldPlayAudio = false));
-            // Set the current message to play
-            messages[startIndex].shouldPlayAudio = true;
+        if (messages && messages.length > 0) {
+            this.audioQueue = messages.map((_, index) => index);
         }
     }
-    /**
-     * Handle audio completion from child component
-     * @param message The message that completed playback
-     */
-    onAudioCompleted(message) {
-        // Find the index of the completed message
-        const completedIndex = this.messages().findIndex((msg) => msg === message || msg.messageId === message.messageId);
-        if (completedIndex >= 0 && completedIndex < this.messages().length - 1) {
-            // Reset current message
-            const messages = this.messages();
-            messages[completedIndex].shouldPlayAudio = false;
-            // Play the next message
-            this.currentPlayingIndex = completedIndex + 1;
-            messages[this.currentPlayingIndex].shouldPlayAudio = true;
+    // Process the next message in the queue
+    async processNextInQueue() {
+        console.log('Processing next message in queue', this.audioQueue);
+        if (this.audioQueue.length === 0 || this.isGenerating) {
+            return;
         }
-        else {
-            // All messages played or message not found
-            this.currentPlayingIndex = -1;
+        // Get the next index from the queue
+        const nextIndex = this.audioQueue.shift();
+        // Start generating
+        this.isGenerating = true;
+        // Generate audio for the current message
+        await this.generateAudioForIndex(nextIndex);
+        // After generation, mark as not generating
+        this.isGenerating = false;
+        // If there's another message in the queue, pre-generate it
+        this.preGenerateNextIfNeeded();
+    }
+    // Pre-generate the next audio if available
+    async preGenerateNextIfNeeded() {
+        if (this.audioQueue.length > 0 && !this.preGenerationInProgress) {
+            const nextIndex = this.audioQueue[0]; // Peek at next index but don't remove
+            // Mark pre-generation as in progress
+            this.preGenerationInProgress = true;
+            // Mark as loading but don't set shouldPlayAudio yet
+            const messages = this.messages();
+            const message = { ...messages[nextIndex], isLoading: true };
+            this.changeStates(nextIndex, message);
+            // Generate in background
+            const messageAudio = await this.generateAudio(messages[nextIndex], null);
+            messageAudio.isLoading = false;
+            messageAudio.shouldPlayAudio = false; // Don't auto-play yet
+            this.changeStates(nextIndex, messageAudio);
+            // Reset pre-generation flag
+            this.preGenerationInProgress = false;
+        }
+    }
+    // Generate audio for a specific index
+    async generateAudioForIndex(index) {
+        const messages = this.messages();
+        // Check if this message was already pre-generated (has audioUrl)
+        if (messages[index].audioUrl) {
+            // If it was pre-generated, just set it to play
+            const messageAudio = { ...messages[index], shouldPlayAudio: true };
+            this.changeStates(index, messageAudio);
+            this.currentPlayingIndex = index;
+            return;
         }
+        // Otherwise generate it now
+        const message = { ...messages[index], isLoading: true };
+        this.changeStates(index, message);
+        const messageAudio = await this.generateAudio(messages[index], null);
+        messageAudio.isLoading = false;
+        messageAudio.shouldPlayAudio = true;
+        this.changeStates(index, messageAudio);
+        this.currentPlayingIndex = index;
     }
-    ngOnInit() {
-        console.log(this.messages());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MultiMessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: MultiMessageContentComponent, isStandalone: true, selector: "dc-multi-message-content", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playAudio: "playAudio" }, ngImport: i0, template: "@for (message of messages(); track message) {\n  <!-- Message with transcription -->\n  @if (hasTranscription(message)) {\n    <dc-standalone-audio-text-sync [message]=\"message\" (playAudio)=\"onPlayMessage(message)\" (audioCompleted)=\"onAudioCompleted(message)\"></dc-standalone-audio-text-sync>\n    }@else {\n    <!-- Message without transcription -->\n\n    <div style=\"display: flex\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading(), message: message }\"></ng-container>\n      <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text || message.content\"></span>\n    </div>\n    } }\n\n    <!-- Icon template for play/loading status -->\n    <ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n      <i (click)=\"onPlayMessage(message)\">\n        @if (isLoading) {\n          <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon>\n        }\n        @if (!isLoading) {\n          <dc-icon name=\"play\"></dc-icon>\n        }\n      </i>\n    </ng-template>\n", styles: [".highlight{background-color:#ffff004d}i{cursor:pointer;display:inline-flex;align-items:center;margin-right:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: IconsComponent, selector: "dc-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: StandaloneAudioTextSyncComponent, selector: "dc-standalone-audio-text-sync", inputs: ["message"], outputs: ["playAudio", "audioCompleted"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: MultiMessageContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-multi-message-content', standalone: true, imports: [IconsComponent, StandaloneAudioTextSyncComponent, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (message of messages(); track message) {\n  <!-- Message with transcription -->\n  @if (hasTranscription(message)) {\n    <dc-standalone-audio-text-sync [message]=\"message\" (playAudio)=\"onPlayMessage(message)\" (audioCompleted)=\"onAudioCompleted(message)\"></dc-standalone-audio-text-sync>\n    }@else {\n    <!-- Message without transcription -->\n\n    <div style=\"display: flex\">\n      <ng-container *ngTemplateOutlet=\"iconTemplate; context: { isLoading: isLoading(), message: message }\"></ng-container>\n      <span style=\"margin-left: 2px\" [ngClass]=\"message.tag\" [innerHtml]=\"message.text || message.content\"></span>\n    </div>\n    } }\n\n    <!-- Icon template for play/loading status -->\n    <ng-template #iconTemplate let-isLoading=\"isLoading\" let-message=\"message\">\n      <i (click)=\"onPlayMessage(message)\">\n        @if (isLoading) {\n          <dc-icon class=\"spin-animation\" name=\"loading\"></dc-icon>\n        }\n        @if (!isLoading) {\n          <dc-icon name=\"play\"></dc-icon>\n        }\n      </i>\n    </ng-template>\n", styles: [".highlight{background-color:#ffff004d}i{cursor:pointer;display:inline-flex;align-items:center;margin-right:4px}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [] });
-
-function matchTranscription(originalText, transcription) {
-    const result = [];
-    const transcriptionMap = new Map();
-    // Create a map of lowercase words to an array of their corresponding objects in transcription
-    for (const obj of transcription) {
-        const lowercaseWord = obj.word.trim().toLowerCase();
-        if (transcriptionMap.has(lowercaseWord)) {
-            transcriptionMap.get(lowercaseWord).push(obj);
-        }
-        else {
-            transcriptionMap.set(lowercaseWord, [obj]);
+    // Handle audio completion event from text-highlighter
+    onAudioCompleted(message) {
+        // Forward the event
+        this.audioCompleted.emit(message);
+        // Reset current playing index
+        this.currentPlayingIndex = null;
+        // If there are more messages in the queue, process the next one
+        if (this.audioQueue.length > 0) {
+            this.processNextInQueue();
         }
     }
-    // Split the original text into an array of words
-    const words = originalText.split(' ');
-    let currentTime = 0;
-    for (const word of words) {
-        const lowercaseWord = word.toLowerCase();
-        const matchedObjs = transcriptionMap.get(lowercaseWord);
-        if (matchedObjs && matchedObjs.length > 0) {
-            const matchedObj = matchedObjs.shift();
-            result.push({
-                word: word,
-                start: Number(matchedObj.start.toFixed(3)),
-                end: Number(matchedObj.end.toFixed(3)),
-            });
-            currentTime = matchedObj.end;
+    changeStates(index, messageAudio) {
+        const messages = this.messages();
+        messages[index] = { ...messages[index], ...messageAudio };
+        this.messagesSignal.set([...messages]);
+    }
+    async generateAudio(message, overwriteText = null) {
+        try {
+            const text = overwriteText || message.text || message.content;
+            const ttsObject = buildObjectTTSRequest({ ...message, text }, { highlightWords: true });
+            const speechAudio = await this.conversationService.getTTSFile(ttsObject);
+            message = extractAudioAndTranscription(message, speechAudio);
+            return message;
         }
-        else {
-            result.push({
-                word: word,
-                start: Number(currentTime.toFixed(3)),
-                end: Number(currentTime.toFixed(3)),
-            });
+        finally {
+            // No longer emitting audioCompleted here as it's handled by the text-highlighter
         }
     }
-    return result;
-}
-function extractAudioAndTranscription(message, audio) {
-    message.audioUrl = audio.blobUrl;
-    message.transcription = audio.transcription;
-    if (message.transcription) {
-        message.transcriptionTimestamps = matchTranscription(message.text || message.content, message.transcription.words);
-    }
-}
-function buildObjectTTSRequest(message, settings = {}) {
-    const generateTranscription = settings?.highlightWords ?? false;
-    const speedRate = settings?.speedRate || 0;
-    const speed = typeof settings?.speed === 'string' ? settings.speed : AudioSpeed$1.Regular;
-    const text = removeEmojis(message.text || message.content);
-    return {
-        text,
-        voice: message.voice || settings.voice,
-        generateTranscription,
-        speedRate,
-        speed,
-    };
+    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 }); }
 }
+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"] }]
+        }] });
 
 class ChatMessageComponent {
     constructor() {
-        this.audioService = inject(AudioService);
-        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
-        this.audioTextSyncService = inject(AudioTextSyncService);
         this.chatMessage = input.required();
         this.chatUserSettings = input(null);
         this.audioMessage = signal(null);
-        this.destroyRef = inject(DestroyRef);
-        this.conversationChatSettings = signal(null);
-        this.isLoading = signal(false);
+        // Computed properties for easier access to signal values
+        this.hasMultiMessages = computed(() => !!this.chatMessage()?.multiMessages);
+        this.multiMessages = computed(() => this.chatMessage()?.multiMessages || []);
+        this.messageTranslation = computed(() => this.chatMessage()?.translation);
+        this.isUserMessage = computed(() => this.chatMessage()?.role === ChatRole.User);
         // Field initializer for the effect - runs during component creation
         this.messageEffect = effect(() => {
             const message = this.chatMessage();
             if (!message)
                 return;
-            const settings$ = this.conversationChatSettings();
-            // Skip processing if settings aren't loaded yet
-            if (!settings$)
-                return;
             if (message.role === ChatRole.AssistantHelper) {
                 return;
             }
             if (message.role === ChatRole.User) {
-                if (settings$.repeatRecording && settings$.synthVoice && message.audioUrl) {
-                    this.playMessage(message);
-                }
+                this.audioMessage.set({ ...message });
             }
-            else if (settings$.synthVoice) {
-                if (message.multiMessages) {
-                    this.generateAndPlayAllAudios(message.multiMessages);
+            else if (message.role === ChatRole.Assistant) {
+                if (this.multiMessages().length > 0) {
                 }
                 else {
-                    this.generateAndPlayAudio(message);
+                    this.audioMessage.set({ ...message });
                 }
             }
         });
-        // Computed properties for easier access to signal values
-        this.messageRole = computed(() => this.chatMessage()?.role);
-        this.hasMultiMessages = computed(() => !!this.chatMessage()?.multiMessages);
-        this.multiMessages = computed(() => this.chatMessage()?.multiMessages || []);
-        this.messageContent = computed(() => this.chatMessage()?.content || '');
-        this.messageTranslation = computed(() => this.chatMessage()?.translation);
-        this.isUserMessage = computed(() => this.messageRole() === ChatRole.User);
-        this.isAssistantMessage = computed(() => this.messageRole() === ChatRole.Assistant);
-        this.isAssistantHelperMessage = computed(() => this.messageRole() === ChatRole.AssistantHelper);
-    }
-    async ngOnInit() {
-        // Load settings - the effect will react to this change
-        const settings = await this.agentCardService.getConversationUserChatSettings();
-        this.conversationChatSettings.set(settings);
-        // No need for effect here as it's now a field initializer
-    }
-    async generateAndPlayAudio(message, overwriteText = null) {
-        // this.isLoading.set(true);
-        this.audioMessage.set({ ...message, isLoading: true });
-        try {
-            const text = overwriteText || message.content;
-            const ttsObject = buildObjectTTSRequest({ ...message, text }, this.conversationChatSettings());
-            if (message.ssml) {
-                ttsObject.ssml = message.ssml;
-            }
-            const speechAudio = await this.agentCardService.getTextAudioFile(ttsObject);
-            extractAudioAndTranscription(message, speechAudio);
-            this.audioMessage.set({ ...message, isLoading: false, shouldPlayAudio: true });
-            // this.playMessage(message);
-        }
-        finally {
-            this.isLoading.set(false);
-        }
-    }
-    playMessage(message) {
-        debugger;
-        if (!message.audioUrl) {
-            return null;
-        }
-        const audioElement = this.audioService.playAudio(message.audioUrl);
-        message['audioHtml'] = audioElement;
-        // console.log('Playing message with transcription:', {
-        //   hasTranscription: !!message.transcriptionTimestamps,
-        //   transcriptionLength: message.transcriptionTimestamps?.length,
-        //   audioUrl: message.audioUrl,
-        //   audioElement,
-        // });
-        if (message.transcriptionTimestamps) {
-            // Generate a unique ID for this message
-            const messageId = this.generateMessageId(message);
-            console.log('Syncing audio with text:', {
-                messageId,
-                transcriptionTimestamps: message.transcriptionTimestamps,
-                wordCount: message.transcriptionTimestamps.length,
-            });
-            // Use the audio-text sync service instead of direct manipulation
-            // Pass the messageId to ensure each message has its own state
-            // this.audioTextSyncService.syncAudioWithText(audioElement, message.transcriptionTimestamps, messageId);
-        }
-        return audioElement;
-    }
-    /**
-     * Generate a unique ID for a message
-     * Uses message content/text and a timestamp to ensure uniqueness
-     */
-    generateMessageId(message) {
-        const messageContent = message.content || message.text || '';
-        // Use a safe approach to get an ID-like value since 'id' isn't guaranteed on these types
-        const messageId = message._id || message.id || '';
-        const timestamp = new Date().getTime();
-        return `msg_${messageId}_${messageContent.substring(0, 10).replace(/\s+/g, '_')}_${timestamp}`;
-    }
-    // This method is no longer needed as we're using the AudioTextSyncService
-    // It's kept here as a reference but can be removed
-    /*
-    private setupTranscriptionHighlighting(audioElement: HTMLAudioElement, transcriptionTimestamps: WordTimestamps[]): void {
-      // This functionality has been moved to AudioTextSyncService
-    }
-    */
-    generateAndPlayAllAudios(multiMessages) {
-        if (!multiMessages.length)
-            return;
-        let currentIndex = 0;
-        const playAudioSequentially = async () => {
-            if (currentIndex >= multiMessages.length) {
-                return;
-            }
-            const currentMessage = multiMessages[currentIndex];
-            currentMessage.isLoading = true;
-            try {
-                // Process current message audio if needed
-                if (!currentMessage.audioUrl) {
-                    if (currentMessage.audioPromise) {
-                        await currentMessage.audioPromise;
-                    }
-                    else {
-                        const request = buildObjectTTSRequest(currentMessage, this.conversationChatSettings());
-                        currentMessage.audioPromise = this.agentCardService.getTextAudioFile(request);
-                        const audio = await currentMessage.audioPromise;
-                        extractAudioAndTranscription(currentMessage, audio);
-                    }
-                }
-                // Play the current message
-                const audioElement = this.playMessage(currentMessage);
-                if (audioElement) {
-                    audioElement.addEventListener('ended', () => {
-                        currentIndex++;
-                        playAudioSequentially();
-                    });
-                }
-                else {
-                    // If playback failed, move to next message
-                    currentIndex++;
-                    playAudioSequentially();
-                }
-                // Preload next message audio
-                this.preloadNextMessageAudio(multiMessages, currentIndex);
-            }
-            finally {
-                currentMessage.isLoading = false;
-            }
-        };
-        // Start the sequential playback
-        playAudioSequentially();
-    }
-    preloadNextMessageAudio(messages, currentIndex) {
-        if (currentIndex + 1 < messages.length) {
-            const nextMessage = messages[currentIndex + 1];
-            if (!nextMessage.audioUrl && !nextMessage.audioPromise) {
-                const request = buildObjectTTSRequest(nextMessage, this.conversationChatSettings());
-                nextMessage.isLoading = true;
-                nextMessage.audioPromise = this.agentCardService.getTextAudioFile(request);
-                nextMessage.audioPromise.then((audio) => {
-                    extractAudioAndTranscription(nextMessage, audio);
-                    nextMessage.isLoading = false;
-                });
-            }
-        }
     }
     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        <span class=\"avatar-initial\">A</span>\n      </div>\n    </div>\n    }\n\n    <!-- Message content -->\n    <div class=\"message-bubble\">\n      @if (hasMultiMessages()) {\n      <dc-multi-message-content [messages]=\"multiMessages()\" (playAudio)=\"playMessage($event)\"></dc-multi-message-content>\n      } @else {\n      <dc-standalone-audio-text-sync [message]=\"audioMessage()\"></dc-standalone-audio-text-sync>\n      }\n\n      <!-- Translation if available -->\n      @if (messageTranslation()) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n        {{ messageTranslation() }}\n      </div>\n      }\n    </div>\n\n    <!-- Avatar for user messages -->\n    @if (isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar user-avatar\">\n        <span class=\"avatar-initial\">U</span>\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-reverse}.user-message .message-bubble{background-color:#0d5878;color:#fff;border-radius:18px 18px 0;margin-right:8px}.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}.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: MultiMessageContentComponent, selector: "dc-multi-message-content", inputs: ["messages", "isLoading"], outputs: ["playAudio"] }, { kind: "component", type: StandaloneAudioTextSyncComponent, selector: "dc-standalone-audio-text-sync", inputs: ["message"], 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\">\n        <img src=\"assets/defaults/avatar.jpg\" alt=\"User\" 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    </div>\n\n    <!-- Avatar for user messages -->\n    @if (isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar user-avatar\">\n        <img src=\"assets/defaults/avatar.jpg\" 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}.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, MultiMessageContentComponent, StandaloneAudioTextSyncComponent], 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        <span class=\"avatar-initial\">A</span>\n      </div>\n    </div>\n    }\n\n    <!-- Message content -->\n    <div class=\"message-bubble\">\n      @if (hasMultiMessages()) {\n      <dc-multi-message-content [messages]=\"multiMessages()\" (playAudio)=\"playMessage($event)\"></dc-multi-message-content>\n      } @else {\n      <dc-standalone-audio-text-sync [message]=\"audioMessage()\"></dc-standalone-audio-text-sync>\n      }\n\n      <!-- Translation if available -->\n      @if (messageTranslation()) {\n      <div class=\"translation\">\n        <hr class=\"divider\" />\n        {{ messageTranslation() }}\n      </div>\n      }\n    </div>\n\n    <!-- Avatar for user messages -->\n    @if (isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar user-avatar\">\n        <span class=\"avatar-initial\">U</span>\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-reverse}.user-message .message-bubble{background-color:#0d5878;color:#fff;border-radius:18px 18px 0;margin-right:8px}.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}.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"] }]
-        }], ctorParameters: () => [] });
+            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=\"assets/defaults/avatar.jpg\" alt=\"User\" 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    </div>\n\n    <!-- Avatar for user messages -->\n    @if (isUserMessage()) {\n    <div class=\"avatar-container\">\n      <div class=\"avatar user-avatar\">\n        <img src=\"assets/defaults/avatar.jpg\" 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}.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 {
     constructor() {
         this.chatUserSettings = input.required();
-        this.thinkingImg = input.required();
         this.aiIcon = 'assets/default/ai.png';
         this.conversationService = inject(ConversationService);
-        // Create a signal for the filter text
-        this.filterText = signal('');
+        this.inputMessages = input.required();
         // Get messages and thinking state from the conversation service
         this.messages = computed(() => {
             // Get the actual array of messages from the signal by calling it as a function
-            const allMessages = this.conversationService.getMessages()();
-            return allMessages.filter((message) => message.role !== 'system');
+            const allMessages = this.conversationService.getMessagesSignal()();
+            return allMessages.filter((message) => message.role !== ChatRole.System);
         });
         this.isThinking = this.conversationService.isThinking();
     }
-    // Method to update the filter text
-    updateFilter(value) {
-        this.filterText.set(value);
-    }
     // Track messages by their content and role for efficient rendering
     trackByMessage(index, message) {
         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 }, thinkingImg: { classPropertyName: "thinkingImg", publicName: "thinkingImg", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"messages-container\">\n  @for (message of messages(); track trackByMessage($index, message)) {\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;overflow-y:auto;max-height:calc(100vh - 200px)}.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 trackByMessage($index, message)) {\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;overflow-y:auto;max-height:calc(100vh - 200px)}.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ChatMessagesListComponent, decorators: [{
             type: Component,
@@ -2351,77 +2159,29 @@ const DefaultEvaluatorAgentCard = {
 
 class DCChatComponent {
     constructor() {
-        this.agentCardService = inject(CONVERSATION_AI_TOKEN);
         this.conversationBuilder = inject(DCConversationPromptBuilderService);
         this.dialogService = inject(DialogService);
         this.conversationService = inject(ConversationService);
-        this.evaluationService = inject(EvaluationService);
+        this.userDataExchange = inject(USER_DATA_EXCHANGE);
+        this.chatUserSettings = this.userDataExchange.getUserChatSettings(); // Default to user data exchange
+        // TODO: those are optional think if i need them,
         this.evaluatorAgentCard = input(DefaultEvaluatorAgentCard);
         this.parseDict = input({});
-        this.sendMessage = output();
+        this.sendMessage = output(); // notifies whatever happened inside the chat
         this.micSettings = { useWhisper: true, lang: 'en' };
-        this.imageUser = `assets/default/user.svg`;
-        this.thinkingImg = `assets/default/thinking.svg`;
-        this.aiIcon = `assets/default/ai.svg`;
         this.isInfoVisible = false;
-        this.isChatSettingsVisible = false;
-        this.isUserTalking = false;
-        this.isGettingTranscription = false;
         this.isAdmin = true;
         // Get reactive state from services
-        this.messages = this.conversationService.getMessages();
-        this.isThinking = this.conversationService.isThinking();
-        this.score = this.evaluationService.getScore();
+        // public messages = this.conversationService.getMessages();
+        this.messages = signal([]);
     }
     async ngOnInit() {
-        // Get user settings if not provided
-        if (!this.chatUserSettings) {
-            this.chatUserSettings = await this.agentCardService.getConversationUserChatSettings();
-        }
-        // Initialize conversation
-        await this.conversationService.initConversation(this.agentCard, this.conversationBuilder, this.parseDict());
+        this.conversationService.initConversation(this.agentCard);
     }
     ngOnDestroy() {
         // Mark conversation as destroyed to prevent async operations
         this.conversationService.setDestroyed(true);
     }
-    // onUserMessage method has been moved to the chat-footer component
-    /**
-     * Handle microphone input finished
-     */
-    async onMicFinished(eventBlob) {
-        if (!(eventBlob instanceof Blob)) {
-            if (!this.chatUserSettings.superHearing) {
-                this.isUserTalking = false;
-            }
-            return;
-        }
-        // Check if audio is too small
-        if (eventBlob.size < 10000) {
-            return;
-        }
-        this.isUserTalking = false;
-        this.isGettingTranscription = true;
-        try {
-            // Get transcription from audio
-            const transcription = await this.agentCardService.getAudioTranscriptions(eventBlob, {
-                conversationId: this.agentCard._id,
-            });
-            // Create message with transcription
-            const message = {
-                content: transcription.text,
-                role: ChatRole.User,
-                transcriptionTimestamps: transcription.words,
-            };
-            message['audioUrl'] = URL.createObjectURL(eventBlob);
-            // Send message to conversation
-            // The evaluation will happen automatically in the conversation service
-            await this.conversationService.sendUserMessage(message);
-        }
-        finally {
-            this.isGettingTranscription = false;
-        }
-    }
     /**
      * Open chat settings dialog
      */
@@ -2435,7 +2195,7 @@ class DCChatComponent {
             closeOnEscape: true,
         })
             .onClose.subscribe(async () => {
-            this.chatUserSettings = await this.agentCardService.getConversationUserChatSettings();
+            // TODO: Que hacer cuando cambie las configuraciones del usario?, creo que si existe en exchange no necesito guardarlo y leer desde el servicio.
         });
     }
     /**
@@ -2454,12 +2214,12 @@ 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 }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, evaluatorAgentCard: { classPropertyName: "evaluatorAgentCard", publicName: "evaluatorAgentCard", isSignal: true, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage" }, 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\" [thinkingImg]=\"thinkingImg\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer \n    [isAIThinking]=\"isThinking()\" \n    [micSettings]=\"micSettings\" \n    [evaluatorAgentCard]=\"evaluatorAgentCard()\" \n    (micFinishedEvent)=\"onMicFinished($event)\">\n  </dc-chat-footer>\n\n  <!-- Progress Bar for Score -->\n  <!-- @if (score() > 0) {\n    <div class=\"score-container\">\n      <p-progressBar [value]=\"score()\" [showValue]=\"true\"></p-progressBar>\n    </div>\n  } -->\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 | json }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | json }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: [".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: "pipe", type: i1$1.JsonPipe, name: "json" }, { 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", "micSettings"], outputs: ["sendMessage", "textInputChanged", "micFinishedEvent"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings", "thinkingImg"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$4.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 }], 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 }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, evaluatorAgentCard: { classPropertyName: "evaluatorAgentCard", publicName: "evaluatorAgentCard", isSignal: true, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage" }, 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\" [evaluatorAgentCard]=\"evaluatorAgentCard()\"> </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", "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], 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\" [thinkingImg]=\"thinkingImg\"> </dc-chat-messages-list>\n\n  <!-- Chat Footer -->\n  <dc-chat-footer \n    [isAIThinking]=\"isThinking()\" \n    [micSettings]=\"micSettings\" \n    [evaluatorAgentCard]=\"evaluatorAgentCard()\" \n    (micFinishedEvent)=\"onMicFinished($event)\">\n  </dc-chat-footer>\n\n  <!-- Progress Bar for Score -->\n  <!-- @if (score() > 0) {\n    <div class=\"score-container\">\n      <p-progressBar [value]=\"score()\" [showValue]=\"true\"></p-progressBar>\n    </div>\n  } -->\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 | json }}</pre>\n\n      <h3>User Settings</h3>\n      <pre>{{ chatUserSettings | json }}</pre>\n    </div>\n  </p-dialog>\n</div>\n", styles: [".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\" [evaluatorAgentCard]=\"evaluatorAgentCard()\"> </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"] }]
+        }], propDecorators: { chatUserSettings: [{
                 type: Input
             }], agentCard: [{
                 type: Input
@@ -2803,7 +2563,7 @@ class AccountPlatformForm {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AccountPlatformForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n  <p-card header=\"Cuenta\">\n    @for (formAccount of formArray.controls; track formAccount) {\n    <form [formGroup]=\"$any(formAccount)\">\n      <div class=\"form-field\">\n        <label class=\"block\">Platform</label>\n        <p-dropdown [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-dropdown>\n      </div>\n\n      <div class=\"form-field\">\n        <label for=\"name\" class=\"block\">Username</label>\n        <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n\n      <div class=\"form-field\">\n        <label class=\"block\">Email</label>\n        <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n      </div>\n    </form>\n    }\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AccountPlatformForm, decorators: [{
             type: Component,
@@ -3283,7 +3043,7 @@ class DCConversationCardUIComponent {
         this.onCardAction.emit({ event: 'delete', card: this.card() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationCardUIComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCConversationCardUIComponent, isStandalone: true, selector: "dc-agent-card-default-ui", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardAction: "onCardAction" }, ngImport: i0, template: "<p-card class=\"card-image\">\n  @if(showOptions()) {\n  <div style=\"position: absolute; top: 5px; right: 5px; z-index: 1000\">\n    <p-speeddial\n      [model]=\"speedDialModel\"\n      [radius]=\"70\"\n      type=\"quarter-circle\"\n      direction=\"down-left\"\n      [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  </div>\n  }\n\n  <img [src]=\"card()?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n  <div (click)=\"onDetails()\" class=\"content\">\n    <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$6.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }], 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    <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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCConversationCardUIComponent, decorators: [{
             type: Component,
@@ -3430,7 +3190,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)\"></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$3.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", "customFilters", "items"], outputs: ["onFilterAction", "onChangeSort"] }, { 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: ["onlyView", "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]=\"true\" (onFilterAction)=\"doFilterBarAction($event)\"></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", "customFilters", "items"], outputs: ["onFilterAction", "onChangeSort"] }, { 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: ["onlyView", "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,
@@ -3511,7 +3271,7 @@ class DcAgentCardDetailsComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcAgentCardDetailsComponent, isStandalone: true, selector: "dc-agent-card-details", inputs: { agentCardId: "agentCardId" }, outputs: { onStartConversation: "onStartConversation" }, ngImport: i0, template: "<div style=\"display: flex; justify-content: center; align-items: center\">\n  <p-card>\n    <div class=\"card-container\">\n      <img class=\"card-image\" [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n\n      <div class=\"info-button\" (click)=\"toggleInfoLayer()\">\n        <p-button icon=\"pi pi-arrow-down-left\" [rounded]=\"true\" [raised]=\"true\" severity=\"primary\" [outlined]=\"true\" />\n      </div>\n\n      <div style=\"position: absolute; bottom: 20px; right: 50%; transform: translateX(50%); z-index: 3\">\n        <p-button size=\"large\" label=\"Iniciar Conversaci\u00F3n\" [rounded]=\"true\" (click)=\"startConversation()\" />\n      </div>\n\n      <div class=\"info-layer\" [class.active]=\"showInfoLayer\">\n        <div class=\"info-content\">\n          <h1\n            ><strong>{{ agentCard?.title }}</strong></h1\n            >\n            <p>{{ agentCard?.characterCard.data?.name }}</p>\n\n            @if (agentCard?.characterCard.data?.scenario) {\n              <div class=\"scenario\">\n                <h4>Scenario</h4>\n                <p>{{ agentCard?.characterCard.data.scenario | parseCard : agentCard }}</p>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </p-card>\n  </div>\n\n  <!-- <div class=\"dc-conversation-card-details\">\n  <div class=\"header\">\n    <h2>{{ agentCard?.title }}</h2>\n    <span class=\"version\">v{{ agentCard?.version }}</span>\n  </div>\n\n  <div class=\"character-card\" *ngIf=\"agentCard?.characterCard\">\n    <div class=\"character-header\">\n      <h3>{{ agentCard?.characterCard.data.name }}</h3>\n      <div class=\"tags\">\n        <span class=\"tag\" *ngFor=\"let tag of agentCard?.characterCard.data?.tags\">{{ tag }}</span>\n      </div>\n    </div>\n\n    <div class=\"image-wrapper\">\n      <div class=\"image\">\n        <img [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n        <div class=\"actions\">\n          <p-button label=\"Start Conversation\" (click)=\"startConversation()\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"description\">\n      <p>{{ agentCard?.characterCard.data?.description | parseCard : agentCard }}</p>\n    </div>\n\n    <div class=\"scenario\" *ngIf=\"agentCard?.characterCard.data?.scenario\">\n      <h4>Scenario</h4>\n      <p>{{ agentCard?.characterCard.data.scenario }}</p>\n    </div>\n\n    <div class=\"first-message\" *ngIf=\"agentCard?.characterCard.data?.first_mes\">\n      <h4>First Message</h4>\n      <p>{{ agentCard?.characterCard.data.first_mes }}</p>\n    </div>\n\n    <div class=\"alternate-greetings\" *ngIf=\"agentCard?.characterCard.data?.alternate_greetings?.length\">\n      <h4>Alternate Greetings</h4>\n      <ul>\n        <li *ngFor=\"let greeting of agentCard?.characterCard.data.alternate_greetings\">{{ greeting }}</li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"settings\">\n    <div class=\"conversation-settings\">\n      <h3>Conversation Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Type:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.conversationType }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Language:</span>\n        <span class=\"value\">{{ agentCard?.lang }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Text Engine:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.textEngine }}</span>\n      </div>\n    </div>\n\n    <div class=\"tts-settings\" *ngIf=\"agentCard?.tts\">\n      <h3>TTS Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Primary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.voice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Secondary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.secondaryVoice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Speed:</span>\n        <span class=\"value\">{{ agentCard?.tts.speed }} ({{ agentCard?.tts.speedRate }}x)</span>\n      </div>\n    </div>\n  </div>\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$5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "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\n  <!-- <div class=\"dc-conversation-card-details\">\n  <div class=\"header\">\n    <h2>{{ agentCard?.title }}</h2>\n    <span class=\"version\">v{{ agentCard?.version }}</span>\n  </div>\n\n  <div class=\"character-card\" *ngIf=\"agentCard?.characterCard\">\n    <div class=\"character-header\">\n      <h3>{{ agentCard?.characterCard.data.name }}</h3>\n      <div class=\"tags\">\n        <span class=\"tag\" *ngFor=\"let tag of agentCard?.characterCard.data?.tags\">{{ tag }}</span>\n      </div>\n    </div>\n\n    <div class=\"image-wrapper\">\n      <div class=\"image\">\n        <img [src]=\"agentCard?.assets?.image?.url || 'assets/images/default_conversation_card.webp'\" alt=\"\" />\n        <div class=\"actions\">\n          <p-button label=\"Start Conversation\" (click)=\"startConversation()\"></p-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"description\">\n      <p>{{ agentCard?.characterCard.data?.description | parseCard : agentCard }}</p>\n    </div>\n\n    <div class=\"scenario\" *ngIf=\"agentCard?.characterCard.data?.scenario\">\n      <h4>Scenario</h4>\n      <p>{{ agentCard?.characterCard.data.scenario }}</p>\n    </div>\n\n    <div class=\"first-message\" *ngIf=\"agentCard?.characterCard.data?.first_mes\">\n      <h4>First Message</h4>\n      <p>{{ agentCard?.characterCard.data.first_mes }}</p>\n    </div>\n\n    <div class=\"alternate-greetings\" *ngIf=\"agentCard?.characterCard.data?.alternate_greetings?.length\">\n      <h4>Alternate Greetings</h4>\n      <ul>\n        <li *ngFor=\"let greeting of agentCard?.characterCard.data.alternate_greetings\">{{ greeting }}</li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"settings\">\n    <div class=\"conversation-settings\">\n      <h3>Conversation Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Type:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.conversationType }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Language:</span>\n        <span class=\"value\">{{ agentCard?.lang }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Text Engine:</span>\n        <span class=\"value\">{{ agentCard?.conversationSettings?.textEngine }}</span>\n      </div>\n    </div>\n\n    <div class=\"tts-settings\" *ngIf=\"agentCard?.tts\">\n      <h3>TTS Settings</h3>\n      <div class=\"setting-item\">\n        <span class=\"label\">Primary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.voice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Secondary Voice:</span>\n        <span class=\"value\">{{ agentCard?.tts.secondaryVoice }}</span>\n      </div>\n      <div class=\"setting-item\">\n        <span class=\"label\">Speed:</span>\n        <span class=\"value\">{{ agentCard?.tts.speed }} ({{ agentCard?.tts.speedRate }}x)</span>\n      </div>\n    </div>\n  </div>\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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcAgentCardDetailsComponent, decorators: [{
             type: Component,
@@ -3529,5 +3289,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, ChatMultiMessage, ChatRole, ChatUserSettings, ConversationDTO, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, DefaultEvaluatorAgentCard, EAccountsPlatform, LangCodeDescriptionEs, MessageAudio, ProviderSelectorComponent, StandaloneAudioTextSyncComponent, TextEngineOptions, TextEngines, USER_DATA_EXCHANGE, UserDataExchangeAbstractService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, buildObjectTTSRequest, characterCardStringDataDefinition, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, matchTranscription, provideChatAIService, provideUserDataExchange };
+export { AgentCardListComponent, AgentCardsAbstractService, AudioService, AudioSpeed, CONVERSATION_AI_TOKEN, ChatMessage, ChatRole, ChatUserSettings, ConversationDTO, ConversationMessagesDTO, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationCardUIComponent, DCConversationPromptBuilderService, DcAgentCardDetailsComponent, DefaultEvaluatorAgentCard, EAccountsPlatform, 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 };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map