@dataclouder/ngx-agent-cards 0.2.14 → 0.2.15

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, signal, computed, RendererFactory2, ApplicationRef, Injector, EnvironmentInjector, createComponent, ChangeDetectionStrategy, Component, output, Input, input, effect, ViewChild, DestroyRef, HostBinding, untracked, ElementRef, Pipe, ChangeDetectorRef, EventEmitter, Output, viewChild } from '@angular/core';
+import { InjectionToken, Injectable, inject, signal, computed, RendererFactory2, ApplicationRef, Injector, EnvironmentInjector, createComponent, ChangeDetectionStrategy, Component, output, Input, input, effect, ViewChild, DestroyRef, untracked, HostBinding, ElementRef, Pipe, ChangeDetectorRef, EventEmitter, Output, viewChild } from '@angular/core';
 import * as i1$1 from '@dataclouder/ngx-core';
 import { MoodStateOptions, LANGUAGES, EntityCommunicationService, TOAST_ALERTS_TOKEN, APP_CONFIG, MoodState, AudioSpeed as AudioSpeed$1, LoadingBarService, EModelQuality, getLangDesc, AudioSpeedReverse, formatCamelCaseString, EntityBaseDetailComponent, AudioNotificationService, SUPPORTED_LANGUAGES, FormUtilsService, LangDescTranslation, FlagPipe, FlagImgPipe, DcTagsFormComponent, EntityBaseFormComponent, getSupportedLanguageOptions, DcManageableFormComponent, DcLearnableFormComponent, EntityBaseListV2Component, DCFilterBarComponent, QuickTableComponent, EmptyStateComponent, EntityBaseSignalFormComponent } from '@dataclouder/ngx-core';
 import { UserService } from '@dataclouder/ngx-users';
 import { AiWhisperService, TtsService, NgxAiServicesService, GeneratedAssetsService, VoiceSelectorComponent } from '@dataclouder/ngx-ai-services';
 import { FirebaseAuthService } from '@dataclouder/ngx-auth';
-import { firstValueFrom, Subject, fromEvent, filter, BehaviorSubject, Subscription } from 'rxjs';
+import { firstValueFrom, Subject, fromEvent, BehaviorSubject, filter, Subscription } from 'rxjs';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule, KeyValuePipe, NgTemplateOutlet, DatePipe, SlicePipe } from '@angular/common';
 import { nanoid } from 'nanoid';
@@ -24,7 +24,7 @@ import { DCMicComponent } from '@dataclouder/ngx-mic';
 import * as i4 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { map, takeUntil } from 'rxjs/operators';
+import { take, takeUntil, map } from 'rxjs/operators';
 import * as i2$2 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
 import * as i1$3 from 'primeng/skeleton';
@@ -283,6 +283,7 @@ var ChatEventType;
     ChatEventType["WordClicked"] = "wordClicked";
     ChatEventType["MoodDetected"] = "moodDetected";
     ChatEventType["AudioStarted"] = "audioStarted";
+    ChatEventType["AudioStopped"] = "audioStopped";
     // Add other potential event types here as needed
     // e.g., MessageSent = 'messageSent', SettingsChanged = 'settingsChanged', GoalCompleted = 'goalCompleted'
 })(ChatEventType || (ChatEventType = {}));
@@ -1865,6 +1866,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }] });
 
+class ChatMonitorService {
+    // Actualmente la única comunicación es con el background para cambiar el fondo.
+    // El problema de comunicar así es si tiene que ser singleton, y en control markets tengo varias instancias de dc-chat.
+    // Voy a utilizar el evento por ahora, y ver si combiene luego crear un servicio.
+    // Se requiere comunicar el chat-engine con la app afuera, va a ver 2 formas de hacerlo.
+    // Mediante eventos del chat, o estar subscrito al chat-monitor.
+    // La complejidad del chat monitor es menor porque puedo injectarlo en cualquier lugar.
+    // Los eventos estan bien pero si el vento viene muy interno tengo que propagarlo bastante.
+    constructor() {
+        this.activeAudioMessage = signal(null, ...(ngDevMode ? [{ debugName: "activeAudioMessage" }] : /* istanbul ignore next */ []));
+        this.currentMood = signal(null, ...(ngDevMode ? [{ debugName: "currentMood" }] : /* istanbul ignore next */ []));
+        this.isConversationActive = signal(false, ...(ngDevMode ? [{ debugName: "isConversationActive" }] : /* istanbul ignore next */ []));
+        // Background
+        this.backgroundUrl = signal(undefined, ...(ngDevMode ? [{ debugName: "backgroundUrl" }] : /* istanbul ignore next */ []));
+        // Audio pipeline signals — source of truth for Live2D lip-sync bridge
+        this.messageAudioWillPlay$ = signal(null, ...(ngDevMode ? [{ debugName: "messageAudioWillPlay$" }] : /* istanbul ignore next */ []));
+        this.messageAudioStatus$ = signal(null, ...(ngDevMode ? [{ debugName: "messageAudioStatus$" }] : /* istanbul ignore next */ []));
+        console.log(`%c ChatMonitorService instantiated: ${Math.random()}`, 'color: #00ff00; font-weight: bold; padding: 2px 4px; border: 1px solid #00ff00;');
+    }
+    logCurrentMood(mood) {
+        this.currentMood.set(mood);
+    }
+    cleanMonitorVars() {
+        this.currentMood.set(null);
+        this.activeAudioMessage.set(null);
+        this.isConversationActive.set(false);
+    }
+    setBackground(imageUrl) {
+        if (imageUrl) {
+            this.backgroundUrl.set(imageUrl);
+        }
+        else {
+            this.backgroundUrl.set(undefined);
+        }
+    }
+    logMessageAudioWillPlay(message) {
+        this.messageAudioWillPlay$.set(message);
+    }
+    logMessageAudioStatus(message, status) {
+        this.messageAudioStatus$.set({ message, status });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatMonitorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatMonitorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * @description
  * Service responsible for managing the real-time, dynamic state of a conversation flow.
@@ -1879,6 +1931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  */
 class ConversationFlowStateService {
     constructor() {
+        this.chatMonitorService = inject(ChatMonitorService, { optional: true });
         this.initialState = {
             goal: { value: 0 },
             challenges: [],
@@ -1944,6 +1997,7 @@ class ConversationFlowStateService {
         }
         if (newState.moodState?.value) {
             this.moodUpdated.next(newState.moodState.value);
+            this.chatMonitorService?.logCurrentMood(newState.moodState.value);
         }
         if (newState.goal && newState.goal.deltaPoints !== undefined && newState.goal.deltaPoints !== 0) {
             this.goalEvaluationUpdated.next({ deltaPoints: newState.goal.deltaPoints });
@@ -2004,6 +2058,7 @@ class ConversationFlowStateService {
         }));
         if (moodState.value) {
             this.moodUpdated.next(moodState.value);
+            this.chatMonitorService?.logCurrentMood(moodState.value);
         }
     }
     /**
@@ -2505,58 +2560,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }] });
 
-class ChatMonitorService {
-    // Actualmente la única comunicación es con el background para cambiar el fondo.
-    // El problema de comunicar así es si tiene que ser singleton, y en control markets tengo varias instancias de dc-chat.
-    // Voy a utilizar el evento por ahora, y ver si combiene luego crear un servicio.
-    // Se requiere comunicar el chat-engine con la app afuera, va a ver 2 formas de hacerlo.
-    // Mediante eventos del chat, o estar subscrito al chat-monitor.
-    // La complejidad del chat monitor es menor porque puedo injectarlo en cualquier lugar.
-    // Los eventos estan bien pero si el vento viene muy interno tengo que propagarlo bastante.
-    constructor() {
-        this.messageAudioWillPlay = signal(null, ...(ngDevMode ? [{ debugName: "messageAudioWillPlay" }] : /* istanbul ignore next */ []));
-        this.messageAudioWillPlay$ = this.messageAudioWillPlay.asReadonly();
-        this.currentMood = signal(null, ...(ngDevMode ? [{ debugName: "currentMood" }] : /* istanbul ignore next */ []));
-        this.isConversationActive = signal(false, ...(ngDevMode ? [{ debugName: "isConversationActive" }] : /* istanbul ignore next */ []));
-        // Background
-        this.backgroundUrl = signal(undefined, ...(ngDevMode ? [{ debugName: "backgroundUrl" }] : /* istanbul ignore next */ []));
-        console.log(`%c ChatMonitorService instantiated: ${Math.random()}`, 'color: #00ff00; font-weight: bold; padding: 2px 4px; border: 1px solid #00ff00;');
-    }
-    logMessageAudioWillPlay(message) {
-        // console.log('Audio will play....', message);
-        this.messageAudioWillPlay.set(message);
-    }
-    logCurrentMood(mood) {
-        this.currentMood.set(mood);
-    }
-    cleanMonitorVars() {
-        this.currentMood.set(null);
-        this.messageAudioWillPlay.set(null);
-        this.isConversationActive.set(false);
-    }
-    setBackground(imageUrl) {
-        if (imageUrl) {
-            this.backgroundUrl.set(imageUrl);
-        }
-        else {
-            this.backgroundUrl.set(undefined);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatMonitorService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatMonitorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
 class MessageProcessingService {
     constructor() {
         this.MAX_CHUNK_LENGTH = 190;
     }
-    processMessage(message, conversationSettings) {
+    processMessage(message, conversationSettings, voiceSettings) {
         const processedMessage = {
             ...message,
             messageId: message.messageId || nanoid(),
@@ -2568,25 +2576,25 @@ class MessageProcessingService {
             return processedMessage;
         }
         if (processedMessage.role === ChatRole.Assistant) {
-            return this.processAssistantMessage(processedMessage, conversationSettings);
+            return this.processAssistantMessage(processedMessage, conversationSettings, voiceSettings);
         }
         return processedMessage;
     }
-    processAssistantMessage(message, settings) {
+    processAssistantMessage(message, settings, voiceSettings) {
         if (settings.avatarImages.assistant) {
             message.imgUrl = settings.avatarImages.assistant;
         }
-        const mainVoice = settings?.mainVoice?.voice || settings?.tts?.voice;
+        const mainVoice = voiceSettings?.main?.voice || settings?.mainVoice?.voice || settings?.tts?.voice;
         message.voice = this.getVoice(mainVoice);
         switch (settings.textEngine) {
             case TextEngines.SimpleText:
                 this.processSimpleText(message, settings);
                 break;
             case TextEngines.MarkdownMultiMessages:
-                this.processMultiMessages(message, settings);
+                this.processMultiMessages(message, settings, voiceSettings);
                 break;
             case TextEngines.MarkdownSSML:
-                this.processSSML(message, settings);
+                this.processSSML(message, settings, voiceSettings);
                 break;
         }
         return message;
@@ -2605,9 +2613,9 @@ class MessageProcessingService {
             };
         });
     }
-    processMultiMessages(message, settings) {
+    processMultiMessages(message, settings, voiceSettings) {
         const htmlSegments = convertToHTML(message.content);
-        const secondaryVoice = settings?.secondaryVoice?.voice || settings?.tts?.secondaryVoice || 'en-US-News-L';
+        const secondaryVoice = voiceSettings?.secondary?.voice || settings?.secondaryVoice?.voice || settings?.tts?.secondaryVoice || 'en-US-News-L';
         const processedSegments = [];
         for (const segment of htmlSegments) {
             const isItalics = segment.tag === 'em';
@@ -2656,11 +2664,12 @@ class MessageProcessingService {
                 return `<p>${text}</p>`;
         }
     }
-    processSSML(message, settings) {
-        if (!settings?.secondaryVoice?.voice) {
+    processSSML(message, settings, voiceSettings) {
+        const secondaryVoice = voiceSettings?.secondary?.voice || settings?.secondaryVoice?.voice || settings?.tts?.secondaryVoice;
+        if (!secondaryVoice) {
             throw new Error('Secondary voice is required for SSML');
         }
-        const content = this.subsItalicsByTag(message.content, settings.secondaryVoice.voice);
+        const content = this.subsItalicsByTag(message.content, secondaryVoice);
         message.ssml = `<speak>${content}</speak>`;
     }
     splitContent(content, maxLength) {
@@ -3469,7 +3478,7 @@ class ConversationService {
     }
     createNewUserMessage() {
         const message = { content: '...', role: ChatRole.User };
-        const processedMessage = this.messageProcessingService.processMessage(message, this.conversationSettingsState());
+        const processedMessage = this.messageProcessingService.processMessage(message, this.conversationSettingsState(), this.agentCardState.agentCard$()?.voice);
         this.messagesStateService.addMessage(processedMessage);
         return processedMessage.messageId;
     }
@@ -3576,7 +3585,7 @@ class ConversationService {
             const firstAssistantMsg = conversationSettings.messages.find((message) => message.role === ChatRole.Assistant);
             if (firstAssistantMsg) {
                 // Process the first assistant message
-                const processedMessage = this.messageProcessingService.processMessage(firstAssistantMsg, this.conversationSettingsState());
+                const processedMessage = this.messageProcessingService.processMessage(firstAssistantMsg, this.conversationSettingsState(), this.agentCardState.agentCard$()?.voice);
                 this.messagesStateService.updateMessage(firstAssistantMsg.messageId, processedMessage);
                 // Find the index of the message with the matching ID
                 const messageIndex = conversationSettings.messages.findIndex((message) => message.messageId === firstAssistantMsg.messageId);
@@ -3625,7 +3634,7 @@ class ConversationService {
         }
         else {
             // Means is new meessage, Process and add the new message
-            const processedMessage = this.messageProcessingService.processMessage(message, this.conversationSettingsState());
+            const processedMessage = this.messageProcessingService.processMessage(message, this.conversationSettingsState(), this.agentCardState.agentCard$()?.voice);
             // Ensure ID exists (processMessage should handle this, but fallback just in case)
             processedMessage.messageId = processedMessage.messageId || nanoid();
             this.messagesStateService.addMessage(processedMessage);
@@ -3696,7 +3705,7 @@ class ConversationService {
             throw new Error('No message returned from AI');
         }
         // Process response
-        const newMessage = this.messageProcessingService.processMessage({ content: response.content, role: ChatRole.Assistant }, conversationSettings);
+        const newMessage = this.messageProcessingService.processMessage({ content: response.content, role: ChatRole.Assistant }, conversationSettings, this.agentCardState.agentCard$()?.voice);
         this.messagesStateService.addMessage(newMessage);
         this.isThinkingSignal.set(false);
         // Run Dynamic Flow Evaluations
@@ -3705,9 +3714,10 @@ class ConversationService {
     }
     async handleStreamingResponse(conversation, conversationSettings) {
         const messageId = nanoid();
-        const mainVoice = conversationSettings?.mainVoice?.voice || conversationSettings?.tts?.voice;
+        const agentCard = this.agentCardState.agentCard$();
+        const mainVoice = agentCard?.voice?.main?.voice || conversationSettings?.mainVoice?.voice || conversationSettings?.tts?.voice;
         const assistantVoice = this.messageProcessingService.getVoice(mainVoice);
-        const secondaryVoice = conversationSettings?.secondaryVoice?.voice || conversationSettings?.tts?.secondaryVoice || 'en-US-News-L';
+        const secondaryVoice = agentCard?.voice?.secondary?.voice || conversationSettings?.secondaryVoice?.voice || conversationSettings?.tts?.secondaryVoice || 'en-US-News-L';
         let assistantMessage = {
             messageId,
             role: ChatRole.Assistant,
@@ -3879,7 +3889,7 @@ class ConversationService {
             isLoading: true,
         };
         // Process to get initial structure and ensure it's ready for display
-        const processedPlaceholder = this.messageProcessingService.processMessage(placeholder, this.conversationSettingsState());
+        const processedPlaceholder = this.messageProcessingService.processMessage(placeholder, this.conversationSettingsState(), this.agentCardState.agentCard$()?.voice);
         // Use passed updateId or newly generated one from processing
         const messageId = updateId || processedPlaceholder.messageId || nanoid();
         processedPlaceholder.messageId = messageId;
@@ -4003,7 +4013,6 @@ function provideLive2D(config) {
 
 class VideoPlayerService {
     constructor() {
-        this.conversationFlowStateService = inject(ConversationFlowStateService);
         this.useNativePlayer = false;
         this.isRewinding = false;
         this.videoQueue = [];
@@ -4013,17 +4022,6 @@ class VideoPlayerService {
         this.agentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "agentCard" }] : /* istanbul ignore next */ []));
         console.log(' CONSTRUCTOR FOR VIDEO PLAYER...');
         this.playAndRewindedSubscription = this.playAndRewinded$.subscribe(() => { });
-        this.moodSubscription = this.conversationFlowStateService.moodUpdated$.subscribe((mood) => {
-            console.log('CHANGING MOOD.. ', mood);
-            const card = this.agentCard();
-            if (mood && card?.assets?.motions) {
-                const motionUrl = card.assets.motions.find((m) => m.metadata?.moodState === mood)?.url;
-                if (motionUrl) {
-                    this.addVideosToQueue([motionUrl]);
-                    this.playAndRewind();
-                }
-            }
-        });
     }
     setAgentCard(card) {
         this.agentCard.set(card);
@@ -4155,9 +4153,6 @@ class VideoPlayerService {
         if (this.playAndRewindedSubscription) {
             this.playAndRewindedSubscription.unsubscribe();
         }
-        if (this.moodSubscription) {
-            this.moodSubscription.unsubscribe();
-        }
     }
     playNextInQueueNative() {
         if (this.videoQueue.length > 0) {
@@ -4245,25 +4240,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
 class VideoPlayerNativeService {
     constructor() {
-        this.conversationFlowStateService = inject(ConversationFlowStateService);
         this.videoQueue = [];
         this.defaultVideoUrl = null;
         this.pendingPlayingHandler = null;
         this.pendingPlayingTarget = null;
         this.agentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "agentCard" }] : /* istanbul ignore next */ []));
         this.isVideoPlaying = signal(false, ...(ngDevMode ? [{ debugName: "isVideoPlaying" }] : /* istanbul ignore next */ []));
-        this.moodSubscription = this.conversationFlowStateService.moodUpdated$.subscribe((mood) => {
-            const card = this.agentCard();
-            if (!mood || !card?.assets?.motions)
-                return;
-            const motionUrl = card.assets.motions.find((m) => m.metadata?.moodState === mood)?.url;
-            if (!motionUrl)
-                return;
-            // Interrupt current playback. transitionToVideo loads the new clip
-            // into the hidden <video> and crossfades only when its first frame
-            // is ready, so the active clip keeps showing until then (no flash).
-            this.transitionToVideo(motionUrl);
-        });
         this.onVideoEndedBound = this.onVideoEnded.bind(this);
     }
     setAgentCard(card) {
@@ -4346,7 +4328,6 @@ class VideoPlayerNativeService {
         this.agentCard.set(undefined);
     }
     ngOnDestroy() {
-        this.moodSubscription?.unsubscribe();
         this.destroyPlayer();
     }
     onVideoEnded() {
@@ -4629,563 +4610,831 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 args: [DCMicComponent]
             }], isAIThinking: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAIThinking", required: false }] }], micSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "micSettings", required: false }] }], sendMessage: [{ type: i0.Output, args: ["sendMessage"] }], textInputChanged: [{ type: i0.Output, args: ["textInputChanged"] }] } });
 
-// Given a text that can be in markdown but only in asterisk like *italic* or **bold** or ***bold italic***
-// Example Hola que tal es *Hey What's up* en inglés
-// i want to extract in array every word like this.
-// [{word: 'Hola', tag: ''}, {word: 'que', tag: ''}, {word: 'tal', tag: ''}, {word: 'es', tag: ''}, {word: 'Hey', tag: 'italic'}, {word: 'What's', tag: 'italic'}, {word: 'up', tag: 'italic'}, {word: 'en', tag: ''}, {word: 'inglés', tag: ''}]
-function extractTags(text) {
-    const result = [];
-    const tagStack = [];
-    // Regex to match markdown markers (***, **, *) or spaces or sequences of non-space/non-asterisk characters (words with punctuation)
-    const regex = /(\*\*\*|\*\*|\*|\s+|[^\s\*]+)/g;
-    let match;
-    while ((match = regex.exec(text)) !== null) {
-        const token = match[0];
-        if (token.trim() === '') {
-            // Ignore spaces
-            continue;
-        }
-        if (token === '***') {
-            if (tagStack.length > 0 && tagStack[tagStack.length - 1] === 'bold italic') {
-                tagStack.pop(); // Closing bold italic
+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.currentPlayingAudio = null;
+        this.chatMonitorService = inject(ChatMonitorService, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.currentActiveMessage = signal(null, ...(ngDevMode ? [{ debugName: "currentActiveMessage" }] : /* istanbul ignore next */ []));
+        // Ensure cleanup when service is destroyed
+        this.destroyRef.onDestroy(() => {
+            this.stopAllSyncs();
+        });
+    }
+    /**
+     * Plays the given audio element exclusively, pausing any other active audio.
+     * @param audioElement The audio element to play.
+     * @param message The message associated with this audio playback.
+     */
+    playAudio(audioElement, message) {
+        if (this.currentPlayingAudio && this.currentPlayingAudio !== audioElement) {
+            this.currentPlayingAudio.pause();
+            this.currentPlayingAudio.currentTime = 0;
+        }
+        // Ensure audioUrl is present on the message if it's currently empty but the element has a source
+        if (!message.audioUrl && audioElement.src) {
+            console.log('AudioTextSyncService: fixing empty message.audioUrl with audioElement.src:', audioElement.src);
+            message.audioUrl = audioElement.src;
+        }
+        console.log('AudioTextSyncService: playAudio emitting to ChatMonitorService activeAudioMessage:', {
+            messageId: message.messageId,
+            audioUrl: message.audioUrl,
+            src: audioElement.src
+        });
+        this.currentPlayingAudio = audioElement;
+        this.currentActiveMessage.set(message);
+        this.chatMonitorService?.activeAudioMessage.set(message);
+        this.chatMonitorService?.logMessageAudioWillPlay(message);
+        this.chatMonitorService?.logMessageAudioStatus(message, 'playing');
+        // Setup ended listener to clear state automatically when playback finishes
+        fromEvent(audioElement, 'ended')
+            .pipe(take(1))
+            .subscribe(() => {
+            if (this.currentPlayingAudio === audioElement) {
+                this.currentActiveMessage.set(null);
+                this.chatMonitorService?.activeAudioMessage.set(null);
+                this.chatMonitorService?.logMessageAudioStatus(message, 'finished');
             }
-            else {
-                tagStack.push('bold italic'); // Opening bold italic
+        });
+        audioElement.play().catch((error) => {
+            console.error('Error playing audio in AudioTextSyncService:', error);
+            this.currentActiveMessage.set(null);
+            this.chatMonitorService?.activeAudioMessage.set(null);
+            this.chatMonitorService?.logMessageAudioStatus(message, 'stopped');
+        });
+    }
+    /**
+     * Pauses the given audio element.
+     * @param audioElement The audio element to pause.
+     */
+    pauseAudio(audioElement) {
+        const message = this.currentActiveMessage();
+        audioElement.pause();
+        if (this.currentPlayingAudio === audioElement) {
+            this.currentActiveMessage.set(null);
+            this.chatMonitorService?.activeAudioMessage.set(null);
+            if (message) {
+                this.chatMonitorService?.logMessageAudioStatus(message, 'stopped');
             }
         }
-        else if (token === '**') {
-            if (tagStack.length > 0 && tagStack[tagStack.length - 1] === 'bold') {
-                tagStack.pop(); // Closing bold
+    }
+    /**
+     * 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)) {
+            const audio = this.activeAudioMap.get(messageId);
+            const currentMsg = this.currentActiveMessage();
+            if (audio && this.currentPlayingAudio === audio) {
+                audio.pause();
+                audio.currentTime = 0;
+                this.currentPlayingAudio = null;
+                this.currentActiveMessage.set(null);
+                this.chatMonitorService?.activeAudioMessage.set(null);
+                if (currentMsg) {
+                    this.chatMonitorService?.logMessageAudioStatus(currentMsg, 'stopped');
+                }
             }
-            else {
-                tagStack.push('bold'); // Opening bold
+            // 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);
             }
-        }
-        else if (token === '*') {
-            if (tagStack.length > 0 && tagStack[tagStack.length - 1] === 'italic') {
-                tagStack.pop(); // Closing italic
+            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([]);
             }
-            else {
-                tagStack.push('italic'); // Opening italic
+            if (messageSubject) {
+                messageSubject.next([]);
             }
         }
-        else {
-            // It's a word (including punctuation)
-            const currentTag = tagStack.length > 0 ? tagStack[tagStack.length - 1] : '';
-            result.push({ word: token, tag: currentTag });
-        }
-    }
-    // Note: This implementation assumes correctly matched opening and closing tags.
-    // Unclosed tags at the end of the string will be ignored.
-    return result;
-}
-
-// Removed AudioState as it's replaced by AudioStatus from agent.models
-class MessageContentDisplayer {
-    get hostHighlightColor() {
-        return this.highlightColor();
     }
-    constructor() {
-        // Inputs
-        this.message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
-        this.markWord = input(...(ngDevMode ? [undefined, { debugName: "markWord" }] : /* istanbul ignore next */ []));
-        this.highlightColor = input(...(ngDevMode ? [undefined, { debugName: "highlightColor" }] : /* istanbul ignore next */ []));
-        // Outputs
-        this.playAudio = output();
-        this.audioCompleted = output();
-        this.audioStatusChanged = output();
-        this.wordClicked = output();
-        // Signal States
-        this.wordWithMeta = signal([], ...(ngDevMode ? [{ debugName: "wordWithMeta" }] : /* istanbul ignore next */ []));
-        this.localAudioStatus = signal(null, ...(ngDevMode ? [{ debugName: "localAudioStatus" }] : /* istanbul ignore next */ []));
-        // Signals State computed from the input message
-        this.wordsWithMetaState = [];
-        this.lastHasTranscription = false;
-        this.audioElement = signal(null, ...(ngDevMode ? [{ debugName: "audioElement" }] : /* istanbul ignore next */ []));
-        this.destroyRef = inject(DestroyRef);
-        this.iconState = computed(() => {
-            const msg = this.message();
-            if (msg?.isLoading) {
-                return 'loading';
-            }
-            const status = this.localAudioStatus() || msg?.audioStatus;
-            if (status === 'playing') {
-                return 'playing';
-            }
-            if (status === 'stopped') {
-                return 'paused';
-            }
-            if (status === 'finished') {
-                return 'finished';
-            }
-            if (status === 'pending') {
-                return 'pending';
-            }
-            if (msg?.audioUrl) {
-                return 'playable';
+    /**
+     * Stops all syncs and cleans up all resources
+     */
+    stopAllSyncs() {
+        const currentMsg = this.currentActiveMessage();
+        if (this.currentPlayingAudio) {
+            this.currentPlayingAudio.pause();
+            this.currentPlayingAudio.currentTime = 0;
+            this.currentPlayingAudio = null;
+            this.currentActiveMessage.set(null);
+            this.chatMonitorService?.activeAudioMessage.set(null);
+            if (currentMsg) {
+                this.chatMonitorService?.logMessageAudioStatus(currentMsg, 'stopped');
             }
-            return 'idle';
-        }, ...(ngDevMode ? [{ debugName: "iconState" }] : /* istanbul ignore next */ []));
-        this.isPendingAudio = computed(() => !!this.message() && this.message()?.audioStatus === 'pending', ...(ngDevMode ? [{ debugName: "isPendingAudio" }] : /* istanbul ignore next */ []));
-        this.messageText = computed(() => {
-            const msg = this.message();
-            return msg?.text || msg?.content || 'N/A';
-        }, ...(ngDevMode ? [{ debugName: "messageText" }] : /* istanbul ignore next */ []));
-        this.classTag = computed(() => this.message()?.tag, ...(ngDevMode ? [{ debugName: "classTag" }] : /* istanbul ignore next */ []));
-        // When message is updated, check is has transcriptions whisper format.
-        this.transcriptionTimestamps = computed(() => {
-            const msg = this.message();
-            if (!msg || !msg.transcription) {
-                return [];
+        }
+        // Get all message IDs and stop each sync
+        for (const messageId of this.activeAudioMap.keys()) {
+            this.stopSync(messageId);
+        }
+        // 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([]));
+        }
+        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([]));
+        }
+        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: "21.2.5", ngImport: i0, type: AudioTextSyncService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AudioTextSyncService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AudioTextSyncService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @Injectable
+ *
+ * @description
+ * This service orchestrates the playback of chat messages, ensuring that they are played sequentially.
+ * It manages a queue of messages and handles the generation and playback of audio for each message.
+ *
+ * @see ChatMessageOrchestratorComponent
+ */
+class MessageOrchestrationService {
+    constructor() {
+        // Services
+        this.conversationService = inject(ConversationService);
+        this.chatMonitorService = inject(ChatMonitorService);
+        this.userService = inject(UserService);
+        this.messagesStateService = inject(MessagesStateService);
+        // State Signals
+        this.messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+        this.messageRole = signal(ChatRole.User, ...(ngDevMode ? [{ debugName: "messageRole" }] : /* istanbul ignore next */ []));
+        this.messageToPlay = signal(null, ...(ngDevMode ? [{ debugName: "messageToPlay" }] : /* istanbul ignore next */ []));
+        // Public Signals for components to consume
+        this.messagesSignal = this.messages.asReadonly();
+        this.messageToPlay$ = this.messageToPlay.asReadonly();
+        // Audio queue management
+        this.audioQueue = [];
+        this.isGenerating = signal(false, ...(ngDevMode ? [{ debugName: "isGenerating" }] : /* istanbul ignore next */ []));
+        this.currentPlayingIndex = signal(null, ...(ngDevMode ? [{ debugName: "currentPlayingIndex" }] : /* istanbul ignore next */ []));
+        this.preGenerationInProgress = signal(false, ...(ngDevMode ? [{ debugName: "preGenerationInProgress" }] : /* istanbul ignore next */ []));
+        console.log('MessageOrchestrationService initialized');
+    }
+    /**
+     * @description
+     * Starts the orchestration process for a list of messages.
+     *
+     * @param messages - An array of `MessageContent` objects to be orchestrated.
+     * @param role - The `ChatRole` of the messages' author.
+     */
+    startOrchestration(messages, role) {
+        untracked(() => {
+            const currentMessages = this.messages();
+            const isAssistant = role === ChatRole.Assistant;
+            // Check if it's a continuation of the same orchestration (e.g., streaming)
+            const isContinuation = currentMessages.length > 0 &&
+                messages.length >= currentMessages.length &&
+                messages[0].messageId === currentMessages[0].messageId;
+            // Update internal state signal with new messages
+            // If it's a continuation, we want to merge properties carefully to avoid flickering or resetting local state like 'playing' status
+            if (isContinuation) {
+                this.messages.update(prev => {
+                    return messages.map((newMsg, idx) => {
+                        const prevMsg = prev[idx];
+                        if (prevMsg) {
+                            // Merge properties: keep local transient state like audioStatus if it's currently managed by this service
+                            return { ...newMsg, ...prevMsg, ...newMsg }; // prioritize newMsg but keep prevMsg as base if needed
+                        }
+                        return newMsg;
+                    });
+                });
             }
-            return matchTranscription(msg.text || msg.content, msg.transcription.words);
-        }, ...(ngDevMode ? [{ debugName: "transcriptionTimestamps" }] : /* istanbul ignore next */ []));
-        // if transcriptionTimestamps is calculated then hasTranscription is true.
-        this.hasTranscription = computed(() => {
-            return this.transcriptionTimestamps().length > 0;
-        }, ...(ngDevMode ? [{ debugName: "hasTranscription" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const currentMsg = this.message();
-            if (!currentMsg)
-                return;
-            const hasTranscription = this.hasTranscription();
-            const idChanged = currentMsg.messageId !== this.currentMessageId;
-            const audioUrlChanged = currentMsg.audioUrl !== this.lastAudioUrl;
-            const transcriptionChanged = hasTranscription !== this.lastHasTranscription;
-            if (idChanged || audioUrlChanged || transcriptionChanged) {
-                this.currentMessageId = currentMsg.messageId;
-                this.lastAudioUrl = currentMsg.audioUrl;
-                this.lastHasTranscription = hasTranscription;
-                this.localAudioStatus.set(null); // Reset local state on message/audio change
-                this.initializeBasedOnMessage(currentMsg);
+            else {
+                this.messages.set([...messages]);
             }
-        });
-        effect(() => {
-            if (this.isPendingAudio()) {
-                this.startAudioPlayback();
+            this.messageRole.set(role);
+            if (isAssistant) {
+                const chatSettings = this.userService.user()?.settings?.conversation;
+                if (chatSettings?.synthVoice) {
+                    if (!isContinuation) {
+                        console.log('Starting new orchestration');
+                        this.initializeAudioQueue();
+                        this.processNextInQueue();
+                    }
+                    else {
+                        console.log('Updating existing orchestration queue');
+                        // Update the queue with new indices
+                        for (let i = currentMessages.length; i < messages.length; i++) {
+                            if (messages[i].audioStatus !== 'finished' && !this.audioQueue.includes(i)) {
+                                this.audioQueue.push(i);
+                            }
+                        }
+                        this.processNextInQueue();
+                    }
+                }
             }
         });
-        effect(() => {
-            this.wordsWithMetaState = this.wordWithMeta();
-        });
     }
-    trackByIndex(index, item) {
-        return index;
-    }
-    ngOnDestroy() {
-        this.cleanupAudio();
+    audioCompleted(message) {
+        const index = this.currentPlayingIndex();
+        if (index !== null) {
+            console.log(`Audio completed for index ${index}, setting status to finished`);
+            this.updateAudioStatus(message, 'finished', index);
+        }
+        else {
+            console.warn('Audio completed but currentPlayingIndex is null');
+        }
+        this.conversationService.currentAudioStatus.set({ message, completed: true });
+        this.currentPlayingIndex.set(null);
+        this.messageToPlay.set(null);
+        if (this.audioQueue.length > 0) {
+            this.processNextInQueue();
+        }
     }
-    initializeBasedOnMessage(msg) {
-        if (msg.audioUrl) {
-            this.initializeAudio(msg.audioUrl);
+    /**
+     * @description
+     * Updates the audio status of a message.
+     *
+     * @param message - The `MessageContent` object whose status has changed.
+     * @param status - The new `AudioStatus`.
+     * @param index - The index of the message in the orchestration queue.
+     */
+    updateAudioStatus(message, status, index) {
+        console.log(`Updating audio status for index ${index} to ${status}. MessageId: ${message.messageId}`);
+        if (status === 'playing') {
+            if (message.messageId) {
+                this.messagesStateService.setActiveMessage(message.messageId, index);
+            }
+            // Update local state: set this one as active, others as inactive
+            this.messages.update((messages) => messages.map((m, idx) => ({
+                ...m,
+                isActive: idx === index,
+                // Also update the current one's status
+                ...(idx === index ? { audioStatus: status } : {}),
+            })));
         }
-        if (this.hasTranscription()) {
-            const wordsAndTimestamps = [];
-            this.transcriptionTimestamps()?.forEach((word, index) => {
-                wordsAndTimestamps.push({ ...word, ...this.wordsWithMetaState[index], index });
+        else {
+            // For other statuses (stopped, finished), preserve isActive and update status
+            this.changeStates(index, { ...message, audioStatus: status });
+        }
+        // 4. Update global state
+        if (message.messageId) {
+            this.messagesStateService.updateMultiMessage(message.messageId, index, {
+                audioStatus: status,
             });
-            const firstState = this.transcriptionTimestamps()?.map((word, index) => ({
-                word: word.word,
-                index,
-                isHighlighted: false,
-                tag: '',
-                marked: word.word.toLowerCase() == this.markWord()?.toLowerCase(),
-            }));
-            console.log('firstState', firstState);
-            this.wordWithMeta.set(firstState);
-            // Para mostrar las transcripciones iliminadas: el audio tiene que sonar y en la subscripción apareceran los cambios.
         }
-        else {
-            this.initializePlainTextWords(msg.text || msg.content || '');
+        this.chatMonitorService.logMessageAudioStatus(message, status);
+    }
+    /**
+     * @description
+     * Notifies the `ConversationService` when a word is clicked.
+     *
+     * @param wordData - The `WordData` object containing information about the clicked word.
+     */
+    wordClicked(wordData) {
+        this.conversationService.notifyWordClicked(wordData);
+    }
+    initializeAudioQueue() {
+        const messages = this.messages();
+        if (messages && messages.length > 0) {
+            this.audioQueue = messages
+                .map((m, index) => ({ status: m.audioStatus, index }))
+                .filter((item) => item.status !== 'finished' && item.status !== 'skip')
+                .map((item) => item.index);
+            console.log('Audio queue initialized:', this.audioQueue);
         }
-        // Removal of shouldPlayAudio check - playback now handled by isPendingAudio effect
     }
-    initializeAudio(audioUrl) {
-        let audio = this.audioElement();
-        if (!audio) {
-            audio = new Audio(audioUrl);
-            this.audioElement.set(audio);
-            this.setupAudioEventListeners(audio);
+    async processNextInQueue() {
+        if (this.audioQueue.length === 0 || this.isGenerating() || this.currentPlayingIndex() !== null) {
+            return;
         }
-        else if (audio.src && audioUrl && !audio.src.endsWith(audioUrl)) {
-            audio.src = audioUrl;
+        const nextIndex = this.audioQueue.shift();
+        this.isGenerating.set(true);
+        try {
+            await this.generateAudioForIndex(nextIndex);
+        }
+        catch (error) {
+            console.error('Error generating audio:', error);
+        }
+        finally {
+            this.isGenerating.set(false);
         }
+        this.preGenerateNextIfNeeded();
     }
-    setupAudioEventListeners(audioElement) {
-        fromEvent(audioElement, 'timeupdate')
-            .pipe(takeUntilDestroyed(this.destroyRef), map(() => audioElement.currentTime || 0))
-            .subscribe((currentTime) => {
-            if (currentTime === 0) {
-                this.updateAudioStatus('playing');
+    async preGenerateNextIfNeeded() {
+        if (this.audioQueue.length > 0 && !this.preGenerationInProgress()) {
+            const nextIndex = this.audioQueue[0];
+            const messages = this.messages();
+            const message = messages[nextIndex];
+            // Skip if audio is already generated or generation is not needed
+            if (message.audioUrl || message.isLoading) {
                 return;
             }
-            if (this.hasTranscription()) {
-                const wordsAndTimestamps = [];
-                this.transcriptionTimestamps()?.forEach((word, index) => {
-                    wordsAndTimestamps.push({ ...word, ...this.wordsWithMetaState[index], index });
-                });
-                const updatedWords = wordsAndTimestamps.map((word, index) => ({
-                    word: word.word,
-                    index,
-                    isHighlighted: currentTime >= word.start - 0.15 && currentTime < word.end + 0.15,
-                    tag: word.tag,
-                    marked: word.word.toLowerCase() == this.markWord()?.toLowerCase(),
-                }));
-                this.wordWithMeta.set(updatedWords);
+            this.preGenerationInProgress.set(true);
+            const loadingMessage = { ...message, isLoading: true };
+            this.changeStates(nextIndex, loadingMessage);
+            try {
+                const messageAudio = await this.generateAudio(message, null);
+                messageAudio.isLoading = false;
+                // Pre-generated audio stays in the background, no status update needed here or set to 'stopped'/'playable'
+                // Actually, if it's pre-rendered it should probably stay as whatever it was but with audioUrl
+                this.changeStates(nextIndex, messageAudio);
             }
-        });
-        fromEvent(audioElement, 'ended')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            const resetWords = this.wordWithMeta().map((word) => ({ ...word, isHighlighted: false }));
-            this.wordWithMeta.set(resetWords);
-            const currentMsg = this.message();
-            if (currentMsg) {
-                // No direct mutation of input!
-                this.updateAudioStatus('finished');
-                this.audioCompleted.emit(currentMsg);
+            finally {
+                this.preGenerationInProgress.set(false);
             }
+        }
+    }
+    async generateAudioForIndex(index) {
+        const messages = this.messages();
+        if (messages[index].audioUrl) {
+            const messageAudio = { ...messages[index], audioStatus: 'pending' };
+            this.changeStates(index, messageAudio);
+            this.chatMonitorService.logMessageAudioWillPlay(messageAudio);
+            this.messageToPlay.set(messageAudio);
+            this.currentPlayingIndex.set(index);
+            return;
+        }
+        const message = { ...messages[index], isLoading: true };
+        this.changeStates(index, message);
+        try {
+            const messageAudio = await this.generateAudio(messages[index], null);
+            messageAudio.isLoading = false;
+            messageAudio.audioStatus = 'pending';
+            this.changeStates(index, messageAudio);
+            this.chatMonitorService.logMessageAudioWillPlay(messageAudio);
+            this.messageToPlay.set(messageAudio);
+        }
+        finally {
+            // Solo limpiamos isLoading sobre el estado ACTUAL del signal (no el snapshot previo al try),
+            // para no pisar el audioStatus:'pending' que acaba de setear el bloque try.
+            this.messages.update(msgs => {
+                const updated = [...msgs];
+                updated[index] = { ...updated[index], isLoading: false };
+                return updated;
+            });
+        }
+        this.currentPlayingIndex.set(index);
+    }
+    changeStates(index, messageAudio) {
+        this.messages.update((messages) => {
+            const newMessages = [...messages];
+            newMessages[index] = { ...messages[index], ...messageAudio };
+            return newMessages;
         });
     }
-    updateAudioStatus(status) {
-        const currentMsg = this.message();
-        // Update local state for immediate feedback
-        this.localAudioStatus.set(status);
-        // Only update if the status is actually changing relative to the current input
-        if (currentMsg && currentMsg.audioStatus !== status) {
-            // NOTE: We do NOT mutate currentMsg.audioStatus here. 
-            // The parent orchestration service will update the state and propagate it back via signals.
-            this.audioStatusChanged.emit({ message: currentMsg, status });
+    async generateAudio(message, overwriteText = null) {
+        if (message.audioUrl) {
+            return message;
+        }
+        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;
         }
-    }
-    cleanupAudio() {
-        const audioElement = this.audioElement();
-        if (audioElement) {
-            audioElement.pause();
-            audioElement.src = '';
-            const resetWords = this.wordWithMeta().map((word) => ({ ...word, isHighlighted: false }));
-            this.wordWithMeta.set(resetWords);
+        finally {
+            this.isGenerating.set(false);
         }
     }
-    onPlayMessage() {
-        console.log('onPlayMessage');
-        const currentMsg = this.message();
-        const audioElement = this.audioElement();
-        if (audioElement) {
-            if (audioElement.paused) {
-                this.startAudioPlayback();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageOrchestrationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageOrchestrationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageOrchestrationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// Given a text that can be in markdown but only in asterisk like *italic* or **bold** or ***bold italic***
+// Example Hola que tal es *Hey What's up* en inglés
+// i want to extract in array every word like this.
+// [{word: 'Hola', tag: ''}, {word: 'que', tag: ''}, {word: 'tal', tag: ''}, {word: 'es', tag: ''}, {word: 'Hey', tag: 'italic'}, {word: 'What's', tag: 'italic'}, {word: 'up', tag: 'italic'}, {word: 'en', tag: ''}, {word: 'inglés', tag: ''}]
+function extractTags(text) {
+    const result = [];
+    const tagStack = [];
+    // Regex to match markdown markers (***, **, *) or spaces or sequences of non-space/non-asterisk characters (words with punctuation)
+    const regex = /(\*\*\*|\*\*|\*|\s+|[^\s\*]+)/g;
+    let match;
+    while ((match = regex.exec(text)) !== null) {
+        const token = match[0];
+        if (token.trim() === '') {
+            // Ignore spaces
+            continue;
+        }
+        if (token === '***') {
+            if (tagStack.length > 0 && tagStack[tagStack.length - 1] === 'bold italic') {
+                tagStack.pop(); // Closing bold italic
             }
             else {
-                audioElement.pause();
-                this.updateAudioStatus('stopped');
+                tagStack.push('bold italic'); // Opening bold italic
             }
         }
-        else if (currentMsg?.audioUrl) {
-            console.log('onPlayMessage initializeAudio with url');
-            this.initializeAudio(currentMsg.audioUrl);
-            this.startAudioPlayback();
-        }
-        else if (currentMsg) {
-            console.log('onPlayMessage emit playAudio');
-            this.playAudio.emit(currentMsg);
+        else if (token === '**') {
+            if (tagStack.length > 0 && tagStack[tagStack.length - 1] === 'bold') {
+                tagStack.pop(); // Closing bold
+            }
+            else {
+                tagStack.push('bold'); // Opening bold
+            }
         }
-    }
-    initializePlainTextWords(text) {
-        const words = extractTags(text);
-        const plainWords = words.map((word, index) => ({
-            word: word.word,
-            index: index,
-            isHighlighted: false,
-            tag: word.tag,
-        }));
-        this.wordWithMeta.set(plainWords);
-    }
-    onWordClick(wordData) {
-        const currentMsg = this.message();
-        if (!currentMsg)
-            return;
-        const clickedWord = 'isHighlighted' in wordData
-            ? { word: wordData.word, index: wordData.index, messageId: currentMsg.messageId }
-            : { ...wordData, messageId: currentMsg.messageId };
-        this.wordClicked.emit(clickedWord);
-    }
-    startAudioPlayback() {
-        const audioElement = this.audioElement();
-        if (!audioElement)
-            return;
-        try {
-            audioElement.play();
-            console.log('Audio playing');
+        else if (token === '*') {
+            if (tagStack.length > 0 && tagStack[tagStack.length - 1] === 'italic') {
+                tagStack.pop(); // Closing italic
+            }
+            else {
+                tagStack.push('italic'); // Opening italic
+            }
         }
-        catch (error) {
-            console.error('Error playing audio:', error);
+        else {
+            // It's a word (including punctuation)
+            const currentTag = tagStack.length > 0 ? tagStack[tagStack.length - 1] : '';
+            result.push({ word: token, tag: currentTag });
         }
-        // Important: we move it to playing status immediately to avoid re-triggering the effect
-        this.updateAudioStatus('playing');
     }
-    debug() {
-        console.log('debug', this.wordWithMeta());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageContentDisplayer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MessageContentDisplayer, isStandalone: true, selector: "message-content-displayer", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, markWord: { classPropertyName: "markWord", publicName: "markWord", isSignal: true, isRequired: false, transformFunction: null }, highlightColor: { classPropertyName: "highlightColor", publicName: "highlightColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted", audioStatusChanged: "audioStatusChanged", wordClicked: "wordClicked" }, host: { properties: { "style.--highlight-bg-color": "this.hostHighlightColor" } }, ngImport: i0, template: "<div class=\"audio-text-sync-container\" [class.is-active]=\"message().isActive\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { \n      @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } \n      @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n      @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } \n      @case ('finished') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> } \n      @case ('pending') { <i class=\"pi pi-angle-right\"></i> }\n      @case ('playable') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> } \n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n@if (message().imageUrl) {\n<div class=\"tour-image-container\" style=\"display: flex; justify-content: center\">\n  <img [src]=\"message().imageUrl\" alt=\"Tour Image\" style=\"max-width: 220px; height: auto\" />\n</div>\n}\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center;transition:background-color .3s ease}.audio-text-sync-container.is-active{background-color:#3cd8ff1a;border-radius:8px;padding-left:4px}.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:var(--highlight-bg-color, rgb(60, 216, 255));border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:var(--chat-message-italic-color, rgb(184, 208, 252))}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:var(--chat-message-italic-color, rgb(252, 198, 184))}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    // Note: This implementation assumes correctly matched opening and closing tags.
+    // Unclosed tags at the end of the string will be ignored.
+    return result;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageContentDisplayer, decorators: [{
-            type: Component,
-            args: [{ selector: 'message-content-displayer', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\" [class.is-active]=\"message().isActive\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { \n      @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } \n      @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n      @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } \n      @case ('finished') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> } \n      @case ('pending') { <i class=\"pi pi-angle-right\"></i> }\n      @case ('playable') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> } \n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n@if (message().imageUrl) {\n<div class=\"tour-image-container\" style=\"display: flex; justify-content: center\">\n  <img [src]=\"message().imageUrl\" alt=\"Tour Image\" style=\"max-width: 220px; height: auto\" />\n</div>\n}\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center;transition:background-color .3s ease}.audio-text-sync-container.is-active{background-color:#3cd8ff1a;border-radius:8px;padding-left:4px}.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:var(--highlight-bg-color, rgb(60, 216, 255));border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:var(--chat-message-italic-color, rgb(184, 208, 252))}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:var(--chat-message-italic-color, rgb(252, 198, 184))}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], markWord: [{ type: i0.Input, args: [{ isSignal: true, alias: "markWord", required: false }] }], highlightColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightColor", required: false }] }], hostHighlightColor: [{
-                type: HostBinding,
-                args: ['style.--highlight-bg-color']
-            }], playAudio: [{ type: i0.Output, args: ["playAudio"] }], audioCompleted: [{ type: i0.Output, args: ["audioCompleted"] }], audioStatusChanged: [{ type: i0.Output, args: ["audioStatusChanged"] }], wordClicked: [{ type: i0.Output, args: ["wordClicked"] }] } });
 
 /**
- * @Injectable
+ * @Component
  *
  * @description
- * This service orchestrates the playback of chat messages, ensuring that they are played sequentially.
- * It manages a queue of messages and handles the generation and playback of audio for each message.
+ * Variante "atada al chat" de `MessageContentDisplayer`.
  *
- * @see ChatMessageOrchestratorComponent
+ * A diferencia del `MessageContentDisplayer` (que es agnóstico y se comunica
+ * exclusivamente mediante `@Output()` para poder reutilizarse fuera del chat),
+ * este componente **inyecta directamente** el `MessageOrchestrationService`
+ * (instancia local provista por `ChatMessageOrchestratorComponent`) y le reporta
+ * los cambios de estado de audio sin emitir eventos.
+ *
+ * Punto clave del refactor:
+ * - NO mantiene un `localAudioStatus`. El `iconState` deriva ÚNICAMENTE del
+ *   input `message()`, que a su vez baja del signal del orquestador. Esto elimina
+ *   el bug donde el icono/estado de una burbuja anterior se quedaba en "playing"
+ *   al activar otro mensaje, porque el estado local divergía del global.
+ *
+ * @see MessageOrchestrationService
+ * @see MessageContentDisplayer (versión desacoplada / reutilizable)
  */
-class MessageOrchestrationService {
-    constructor() {
-        // Services
-        this.conversationService = inject(ConversationService);
-        this.chatMonitorService = inject(ChatMonitorService);
-        this.userService = inject(UserService);
-        this.messagesStateService = inject(MessagesStateService);
-        // State Signals
-        this.messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
-        this.messageRole = signal(ChatRole.User, ...(ngDevMode ? [{ debugName: "messageRole" }] : /* istanbul ignore next */ []));
-        this.messageToPlay = signal(null, ...(ngDevMode ? [{ debugName: "messageToPlay" }] : /* istanbul ignore next */ []));
-        // Public Signals for components to consume
-        this.messagesSignal = this.messages.asReadonly();
-        this.messageToPlay$ = this.messageToPlay.asReadonly();
-        // Audio queue management
-        this.audioQueue = [];
-        this.isGenerating = signal(false, ...(ngDevMode ? [{ debugName: "isGenerating" }] : /* istanbul ignore next */ []));
-        this.currentPlayingIndex = signal(null, ...(ngDevMode ? [{ debugName: "currentPlayingIndex" }] : /* istanbul ignore next */ []));
-        this.preGenerationInProgress = signal(false, ...(ngDevMode ? [{ debugName: "preGenerationInProgress" }] : /* istanbul ignore next */ []));
-        console.log('MessageOrchestrationService initialized');
+class MessageContentReactive {
+    get hostHighlightColor() {
+        return this.highlightColor();
     }
-    /**
-     * @description
-     * Starts the orchestration process for a list of messages.
-     *
-     * @param messages - An array of `MessageContent` objects to be orchestrated.
-     * @param role - The `ChatRole` of the messages' author.
-     */
-    startOrchestration(messages, role) {
-        untracked(() => {
-            const currentMessages = this.messages();
-            const isAssistant = role === ChatRole.Assistant;
-            // Check if it's a continuation of the same orchestration (e.g., streaming)
-            const isContinuation = currentMessages.length > 0 &&
-                messages.length >= currentMessages.length &&
-                messages[0].messageId === currentMessages[0].messageId;
-            // Update internal state signal with new messages
-            // If it's a continuation, we want to merge properties carefully to avoid flickering or resetting local state like 'playing' status
-            if (isContinuation) {
-                this.messages.update(prev => {
-                    return messages.map((newMsg, idx) => {
-                        const prevMsg = prev[idx];
-                        if (prevMsg) {
-                            // Merge properties: keep local transient state like audioStatus if it's currently managed by this service
-                            return { ...newMsg, ...prevMsg, ...newMsg }; // prioritize newMsg but keep prevMsg as base if needed
-                        }
-                        return newMsg;
-                    });
-                });
+    constructor() {
+        // Inputs
+        this.message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        /** Índice del fragmento dentro del array de multiMessages del orquestador. */
+        this.index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        this.markWord = input(...(ngDevMode ? [undefined, { debugName: "markWord" }] : /* istanbul ignore next */ []));
+        this.highlightColor = input(...(ngDevMode ? [undefined, { debugName: "highlightColor" }] : /* istanbul ignore next */ []));
+        // Services (atados al chat — fuente de verdad)
+        this.orchestrationService = inject(MessageOrchestrationService);
+        this.audioTextSyncService = inject(AudioTextSyncService);
+        this.destroyRef = inject(DestroyRef);
+        // Signal States (solo presentación de palabras / karaoke)
+        this.wordWithMeta = signal([], ...(ngDevMode ? [{ debugName: "wordWithMeta" }] : /* istanbul ignore next */ []));
+        this.wordsWithMetaState = [];
+        this.lastHasTranscription = false;
+        this.audioElement = signal(null, ...(ngDevMode ? [{ debugName: "audioElement" }] : /* istanbul ignore next */ []));
+        /**
+         * Estado del icono derivado ÚNICAMENTE del input `message()`.
+         * No hay estado local: el orquestador es la única fuente de verdad.
+         */
+        this.iconState = computed(() => {
+            const msg = this.message();
+            if (msg?.isLoading) {
+                return 'loading';
             }
-            else {
-                this.messages.set([...messages]);
+            const status = msg?.audioStatus;
+            if (status === 'playing') {
+                return 'playing';
             }
-            this.messageRole.set(role);
-            if (isAssistant) {
-                const chatSettings = this.userService.user()?.settings?.conversation;
-                if (chatSettings?.synthVoice) {
-                    if (!isContinuation) {
-                        console.log('Starting new orchestration');
-                        this.initializeAudioQueue();
-                        this.processNextInQueue();
-                    }
-                    else {
-                        console.log('Updating existing orchestration queue');
-                        // Update the queue with new indices
-                        for (let i = currentMessages.length; i < messages.length; i++) {
-                            if (messages[i].audioStatus !== 'finished' && !this.audioQueue.includes(i)) {
-                                this.audioQueue.push(i);
-                            }
-                        }
-                        this.processNextInQueue();
-                    }
-                }
+            if (status === 'stopped') {
+                return 'paused';
+            }
+            if (status === 'finished') {
+                return 'finished';
+            }
+            if (status === 'pending') {
+                return 'pending';
+            }
+            if (msg?.audioUrl) {
+                return 'playable';
+            }
+            return 'idle';
+        }, ...(ngDevMode ? [{ debugName: "iconState" }] : /* istanbul ignore next */ []));
+        this.isPendingAudio = computed(() => this.message()?.audioStatus === 'pending', ...(ngDevMode ? [{ debugName: "isPendingAudio" }] : /* istanbul ignore next */ []));
+        this.messageText = computed(() => {
+            const msg = this.message();
+            return msg?.text || msg?.content || 'N/A';
+        }, ...(ngDevMode ? [{ debugName: "messageText" }] : /* istanbul ignore next */ []));
+        this.classTag = computed(() => this.message()?.tag, ...(ngDevMode ? [{ debugName: "classTag" }] : /* istanbul ignore next */ []));
+        this.transcriptionTimestamps = computed(() => {
+            const msg = this.message();
+            if (!msg || !msg.transcription) {
+                return [];
+            }
+            return matchTranscription(msg.text || msg.content, msg.transcription.words);
+        }, ...(ngDevMode ? [{ debugName: "transcriptionTimestamps" }] : /* istanbul ignore next */ []));
+        this.hasTranscription = computed(() => this.transcriptionTimestamps().length > 0, ...(ngDevMode ? [{ debugName: "hasTranscription" }] : /* istanbul ignore next */ []));
+        // Re-inicializa audio/palabras cuando cambia el mensaje, su audio o su transcripción.
+        effect(() => {
+            const currentMsg = this.message();
+            if (!currentMsg)
+                return;
+            const hasTranscription = this.hasTranscription();
+            const idChanged = currentMsg.messageId !== this.currentMessageId;
+            const audioUrlChanged = currentMsg.audioUrl !== this.lastAudioUrl;
+            const transcriptionChanged = hasTranscription !== this.lastHasTranscription;
+            if (idChanged || audioUrlChanged || transcriptionChanged) {
+                this.currentMessageId = currentMsg.messageId;
+                this.lastAudioUrl = currentMsg.audioUrl;
+                this.lastHasTranscription = hasTranscription;
+                this.initializeBasedOnMessage(currentMsg);
+            }
+        });
+        // Cuando el orquestador marca este fragmento como 'pending', se reproduce.
+        effect(() => {
+            if (this.isPendingAudio()) {
+                this.startAudioPlayback();
             }
         });
+        effect(() => {
+            this.wordsWithMetaState = this.wordWithMeta();
+        });
     }
-    audioCompleted(message) {
-        const index = this.currentPlayingIndex();
-        if (index !== null) {
-            console.log(`Audio completed for index ${index}, setting status to finished`);
-            this.updateAudioStatus(message, 'finished', index);
-        }
-        else {
-            console.warn('Audio completed but currentPlayingIndex is null');
-        }
-        this.conversationService.currentAudioStatus.set({ message, completed: true });
-        this.currentPlayingIndex.set(null);
-        this.messageToPlay.set(null);
-        if (this.audioQueue.length > 0) {
-            this.processNextInQueue();
-        }
+    trackByIndex(index, item) {
+        return index;
     }
-    /**
-     * @description
-     * Updates the audio status of a message.
-     *
-     * @param message - The `MessageContent` object whose status has changed.
-     * @param status - The new `AudioStatus`.
-     * @param index - The index of the message in the orchestration queue.
-     */
-    updateAudioStatus(message, status, index) {
-        const currentMessage = this.messages()[index];
-        console.log(`Updating audio status for index ${index} to ${status}. MessageId: ${message.messageId}`);
-        if (status === 'playing') {
-            if (message.messageId) {
-                this.messagesStateService.setActiveMessage(message.messageId, index);
+    ngOnDestroy() {
+        this.cleanupAudio();
+    }
+    onPlayMessage() {
+        const currentMsg = this.message();
+        const audioElement = this.audioElement();
+        if (audioElement) {
+            if (audioElement.paused) {
+                this.startAudioPlayback();
+            }
+            else {
+                this.audioTextSyncService.pauseAudio(audioElement);
+                this.reportStatus('stopped');
             }
-            // Update local state: set this one as active, others as inactive
-            this.messages.update((messages) => messages.map((m, idx) => ({
-                ...m,
-                isActive: idx === index,
-                // Also update the current one's status
-                ...(idx === index ? { audioStatus: status } : {}),
-            })));
-        }
-        else {
-            // For other statuses (stopped, finished), preserve isActive and update status
-            this.changeStates(index, { ...message, audioStatus: status });
         }
-        // 4. Update global state
-        if (message.messageId) {
-            this.messagesStateService.updateMultiMessage(message.messageId, index, {
-                audioStatus: status,
-            });
+        else if (currentMsg?.audioUrl) {
+            this.initializeAudio(currentMsg.audioUrl);
+            this.startAudioPlayback();
         }
+        // Si no hay audioUrl, el orquestador lo generará vía la cola (status 'pending').
+    }
+    onWordClick(wordData) {
+        const currentMsg = this.message();
+        if (!currentMsg)
+            return;
+        this.orchestrationService.wordClicked({
+            word: wordData.word,
+            index: wordData.index,
+            messageId: currentMsg.messageId,
+        });
     }
+    // --- Reporte de estado directo al orquestador (sin @Output) ---
     /**
-     * @description
-     * Notifies the `ConversationService` when a word is clicked.
-     *
-     * @param wordData - The `WordData` object containing information about the clicked word.
+     * Reporta el nuevo estado de audio al orquestador, que es la fuente de verdad.
+     * Guarda contra reportes redundantes (el evento `timeupdate` se dispara en cada tick).
      */
-    wordClicked(wordData) {
-        this.conversationService.notifyWordClicked(wordData);
-    }
-    initializeAudioQueue() {
-        const messages = this.messages();
-        if (messages && messages.length > 0) {
-            this.audioQueue = messages
-                .map((m, index) => ({ status: m.audioStatus, index }))
-                .filter((item) => item.status !== 'finished' && item.status !== 'skip')
-                .map((item) => item.index);
-            console.log('Audio queue initialized:', this.audioQueue);
+    reportStatus(status) {
+        const currentMsg = this.message();
+        if (currentMsg && currentMsg.audioStatus !== status) {
+            this.orchestrationService.updateAudioStatus(currentMsg, status, this.index());
         }
     }
-    async processNextInQueue() {
-        if (this.audioQueue.length === 0 || this.isGenerating() || this.currentPlayingIndex() !== null) {
-            return;
+    // --- Audio lifecycle ---
+    initializeBasedOnMessage(msg) {
+        if (msg.audioUrl) {
+            this.initializeAudio(msg.audioUrl);
         }
-        const nextIndex = this.audioQueue.shift();
-        this.isGenerating.set(true);
-        try {
-            await this.generateAudioForIndex(nextIndex);
+        if (this.hasTranscription()) {
+            const firstState = this.transcriptionTimestamps()?.map((word, index) => ({
+                word: word.word,
+                index,
+                isHighlighted: false,
+                tag: '',
+                marked: word.word.toLowerCase() == this.markWord()?.toLowerCase(),
+            }));
+            this.wordWithMeta.set(firstState);
         }
-        catch (error) {
-            console.error('Error generating audio:', error);
+        else {
+            this.initializePlainTextWords(msg.text || msg.content || '');
         }
-        finally {
-            this.isGenerating.set(false);
+    }
+    initializeAudio(audioUrl) {
+        let audio = this.audioElement();
+        if (!audio) {
+            audio = new Audio(audioUrl);
+            this.audioElement.set(audio);
+            this.setupAudioEventListeners(audio);
+        }
+        else if (audio.src && audioUrl && !audio.src.endsWith(audioUrl)) {
+            audio.src = audioUrl;
         }
-        this.preGenerateNextIfNeeded();
     }
-    async preGenerateNextIfNeeded() {
-        if (this.audioQueue.length > 0 && !this.preGenerationInProgress()) {
-            const nextIndex = this.audioQueue[0];
-            const messages = this.messages();
-            const message = messages[nextIndex];
-            // Skip if audio is already generated or generation is not needed
-            if (message.audioUrl || message.isLoading) {
-                return;
+    setupAudioEventListeners(audioElement) {
+        fromEvent(audioElement, 'timeupdate')
+            .pipe(takeUntilDestroyed(this.destroyRef), map(() => audioElement.currentTime || 0))
+            .subscribe((currentTime) => {
+            if (this.hasTranscription()) {
+                const wordsAndTimestamps = [];
+                this.transcriptionTimestamps()?.forEach((word, index) => {
+                    wordsAndTimestamps.push({ ...word, ...this.wordsWithMetaState[index], index });
+                });
+                const updatedWords = wordsAndTimestamps.map((word, index) => ({
+                    word: word.word,
+                    index,
+                    isHighlighted: currentTime >= word.start - 0.15 && currentTime < word.end + 0.15,
+                    tag: word.tag,
+                    marked: word.word.toLowerCase() == this.markWord()?.toLowerCase(),
+                }));
+                this.wordWithMeta.set(updatedWords);
             }
-            this.preGenerationInProgress.set(true);
-            const loadingMessage = { ...message, isLoading: true };
-            this.changeStates(nextIndex, loadingMessage);
-            try {
-                const messageAudio = await this.generateAudio(message, null);
-                messageAudio.isLoading = false;
-                // Pre-generated audio stays in the background, no status update needed here or set to 'stopped'/'playable'
-                // Actually, if it's pre-rendered it should probably stay as whatever it was but with audioUrl
-                this.changeStates(nextIndex, messageAudio);
+        });
+        fromEvent(audioElement, 'play')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.reportStatus('playing');
+        });
+        fromEvent(audioElement, 'pause')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            const resetWords = this.wordWithMeta().map((word) => ({ ...word, isHighlighted: false }));
+            this.wordWithMeta.set(resetWords);
+            if (audioElement.currentTime !== audioElement.duration) {
+                this.reportStatus('stopped');
             }
-            finally {
-                this.preGenerationInProgress.set(false);
+        });
+        fromEvent(audioElement, 'ended')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            const resetWords = this.wordWithMeta().map((word) => ({ ...word, isHighlighted: false }));
+            this.wordWithMeta.set(resetWords);
+            const currentMsg = this.message();
+            if (currentMsg) {
+                // El servicio marca 'finished' y avanza la cola en un solo paso.
+                this.orchestrationService.audioCompleted(currentMsg);
             }
-        }
+        });
     }
-    async generateAudioForIndex(index) {
-        const messages = this.messages();
-        if (messages[index].audioUrl) {
-            const messageAudio = { ...messages[index], audioStatus: 'pending' };
-            this.changeStates(index, messageAudio);
-            this.chatMonitorService.logMessageAudioWillPlay(messageAudio);
-            this.messageToPlay.set(messageAudio);
-            this.currentPlayingIndex.set(index);
+    startAudioPlayback() {
+        const audioElement = this.audioElement();
+        if (!audioElement)
+            return;
+        const currentMsg = this.message();
+        if (!currentMsg)
             return;
-        }
-        const message = { ...messages[index], isLoading: true };
-        this.changeStates(index, message);
         try {
-            const messageAudio = await this.generateAudio(messages[index], null);
-            messageAudio.isLoading = false;
-            messageAudio.audioStatus = 'pending';
-            this.changeStates(index, messageAudio);
-            this.chatMonitorService.logMessageAudioWillPlay(messageAudio);
-            this.messageToPlay.set(messageAudio);
+            this.audioTextSyncService.playAudio(audioElement, currentMsg);
         }
-        finally {
-            const message = { ...messages[index], isLoading: false };
-            this.changeStates(index, message);
+        catch (error) {
+            console.error('Error playing audio:', error);
         }
-        this.currentPlayingIndex.set(index);
-    }
-    changeStates(index, messageAudio) {
-        this.messages.update((messages) => {
-            const newMessages = [...messages];
-            newMessages[index] = { ...messages[index], ...messageAudio };
-            return newMessages;
-        });
+        this.reportStatus('playing');
     }
-    async generateAudio(message, overwriteText = null) {
-        if (message.audioUrl) {
-            return message;
-        }
-        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;
-        }
-        finally {
-            this.isGenerating.set(false);
+    cleanupAudio() {
+        const audioElement = this.audioElement();
+        if (audioElement) {
+            this.audioTextSyncService.pauseAudio(audioElement);
+            audioElement.src = '';
+            const resetWords = this.wordWithMeta().map((word) => ({ ...word, isHighlighted: false }));
+            this.wordWithMeta.set(resetWords);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageOrchestrationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageOrchestrationService }); }
+    initializePlainTextWords(text) {
+        const words = extractTags(text);
+        const plainWords = words.map((word, index) => ({
+            word: word.word,
+            index: index,
+            isHighlighted: false,
+            tag: word.tag,
+        }));
+        this.wordWithMeta.set(plainWords);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageContentReactive, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MessageContentReactive, isStandalone: true, selector: "message-content-reactive", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, markWord: { classPropertyName: "markWord", publicName: "markWord", isSignal: true, isRequired: false, transformFunction: null }, highlightColor: { classPropertyName: "highlightColor", publicName: "highlightColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--highlight-bg-color": "this.hostHighlightColor" } }, ngImport: i0, template: "<div class=\"audio-text-sync-container\" [class.is-active]=\"message().isActive\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) {\n      @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> }\n      @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n      @case ('paused') { <i class=\"pi pi-pause-circle\"></i> }\n      @case ('finished') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> }\n      @case ('pending') { <i class=\"pi pi-angle-right\"></i> }\n      @case ('playable') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> }\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n@if (message().imageUrl) {\n<div class=\"tour-image-container\" style=\"display: flex; justify-content: center\">\n  <img [src]=\"message().imageUrl\" alt=\"Tour Image\" style=\"max-width: 220px; height: auto\" />\n</div>\n}\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center;transition:background-color .3s ease}.audio-text-sync-container.is-active{background-color:#3cd8ff1a;border-radius:8px;padding-left:4px}.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:var(--highlight-bg-color, rgb(60, 216, 255));border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:var(--chat-message-italic-color, rgb(184, 208, 252))}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:var(--chat-message-italic-color, rgb(252, 198, 184))}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageOrchestrationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageContentReactive, decorators: [{
+            type: Component,
+            args: [{ selector: 'message-content-reactive', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\" [class.is-active]=\"message().isActive\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) {\n      @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> }\n      @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n      @case ('paused') { <i class=\"pi pi-pause-circle\"></i> }\n      @case ('finished') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> }\n      @case ('pending') { <i class=\"pi pi-angle-right\"></i> }\n      @case ('playable') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> }\n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n@if (message().imageUrl) {\n<div class=\"tour-image-container\" style=\"display: flex; justify-content: center\">\n  <img [src]=\"message().imageUrl\" alt=\"Tour Image\" style=\"max-width: 220px; height: auto\" />\n</div>\n}\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center;transition:background-color .3s ease}.audio-text-sync-container.is-active{background-color:#3cd8ff1a;border-radius:8px;padding-left:4px}.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:var(--highlight-bg-color, rgb(60, 216, 255));border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:var(--chat-message-italic-color, rgb(184, 208, 252))}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:var(--chat-message-italic-color, rgb(252, 198, 184))}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], markWord: [{ type: i0.Input, args: [{ isSignal: true, alias: "markWord", required: false }] }], highlightColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightColor", required: false }] }], hostHighlightColor: [{
+                type: HostBinding,
+                args: ['style.--highlight-bg-color']
+            }] } });
 
 /**
  * @Component
@@ -5194,8 +5443,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * This component orchestrates the display and audio playback of chat messages.
  * It uses the `MessageOrchestrationService` to manage the message queue and audio playback.
  *
+ * Children (`MessageContentReactive`) inject the same `MessageOrchestrationService`
+ * instance directly and report their state to it, so this component no longer needs
+ * to relay per-segment audio events via `@Output()`.
+ *
  * @see MessageOrchestrationService
- * @see MessageContentDisplayer
+ * @see MessageContentReactive
  */
 class ChatMessageOrchestratorComponent {
     constructor() {
@@ -5221,41 +5474,12 @@ class ChatMessageOrchestratorComponent {
             this.orchestrationService.startOrchestration(this.messages(), this.messageRole());
         });
     }
-    /**
-     * @description
-     * Handles the `audioCompleted` event from the `MessageContentDisplayer`.
-     *
-     * @param message - The `MessageContent` object whose audio has finished playing.
-     */
-    onAudioCompleted(message) {
-        this.orchestrationService.audioCompleted(message);
-        this.audioCompleted.emit(message);
-    }
-    /**
-     * @description
-     * Handles the `audioStatusChanged` event from the `MessageContentDisplayer`.
-     *
-     * @param event - The event object containing the `MessageContent` and its new `AudioStatus`.
-     * @param index - The index of the message in the array.
-     */
-    onAudioStatusChanged(event, index) {
-        this.orchestrationService.updateAudioStatus(event.message, event.status, index);
-    }
-    /**
-     * @description
-     * Handles the `wordClicked` event from the `MessageContentDisplayer`.
-     *
-     * @param wordData - The `WordData` object containing information about the clicked word.
-     */
-    onWordClicked(wordData) {
-        this.orchestrationService.wordClicked(wordData);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatMessageOrchestratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ChatMessageOrchestratorComponent, isStandalone: true, selector: "dc-message-orchestrator", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, messageRole: { classPropertyName: "messageRole", publicName: "messageRole", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { audioCompleted: "audioCompleted" }, providers: [MessageOrchestrationService], ngImport: i0, template: "<div class=\"message-orchestrator-container\">\n  @for (message of messagesSignal(); track $index) {\n  <message-content-displayer [message]=\"message\" (audioCompleted)=\"onAudioCompleted($event)\" (audioStatusChanged)=\"onAudioStatusChanged($event, $index)\" (wordClicked)=\"onWordClicked($event)\" />\n  }\n</div>\n", styles: [":host{display:block}.word-options-popup{position:absolute;border:1px solid #ccc;background:#fff;padding:5px;z-index:1000}message-content-displayer{text-shadow:1px 1px 4px rgba(255,255,255,.4)}\n"], dependencies: [{ kind: "component", type: MessageContentDisplayer, selector: "message-content-displayer", inputs: ["message", "markWord", "highlightColor"], outputs: ["playAudio", "audioCompleted", "audioStatusChanged", "wordClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ChatMessageOrchestratorComponent, isStandalone: true, selector: "dc-message-orchestrator", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, messageRole: { classPropertyName: "messageRole", publicName: "messageRole", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { audioCompleted: "audioCompleted" }, providers: [MessageOrchestrationService], ngImport: i0, template: "<div class=\"message-orchestrator-container\">\n  @for (message of messagesSignal(); track $index) {\n  <message-content-reactive [message]=\"message\" [index]=\"$index\" />\n  }\n</div>\n", styles: [":host{display:block}.word-options-popup{position:absolute;border:1px solid #ccc;background:#fff;padding:5px;z-index:1000}message-content-displayer{text-shadow:1px 1px 4px rgba(255,255,255,.4)}\n"], dependencies: [{ kind: "component", type: MessageContentReactive, selector: "message-content-reactive", inputs: ["message", "index", "markWord", "highlightColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatMessageOrchestratorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-message-orchestrator', imports: [MessageContentDisplayer], changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageOrchestrationService], template: "<div class=\"message-orchestrator-container\">\n  @for (message of messagesSignal(); track $index) {\n  <message-content-displayer [message]=\"message\" (audioCompleted)=\"onAudioCompleted($event)\" (audioStatusChanged)=\"onAudioStatusChanged($event, $index)\" (wordClicked)=\"onWordClicked($event)\" />\n  }\n</div>\n", styles: [":host{display:block}.word-options-popup{position:absolute;border:1px solid #ccc;background:#fff;padding:5px;z-index:1000}message-content-displayer{text-shadow:1px 1px 4px rgba(255,255,255,.4)}\n"] }]
+            args: [{ selector: 'dc-message-orchestrator', imports: [MessageContentReactive], changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageOrchestrationService], template: "<div class=\"message-orchestrator-container\">\n  @for (message of messagesSignal(); track $index) {\n  <message-content-reactive [message]=\"message\" [index]=\"$index\" />\n  }\n</div>\n", styles: [":host{display:block}.word-options-popup{position:absolute;border:1px solid #ccc;background:#fff;padding:5px;z-index:1000}message-content-displayer{text-shadow:1px 1px 4px rgba(255,255,255,.4)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: true }] }], messageRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageRole", required: true }] }], audioCompleted: [{ type: i0.Output, args: ["audioCompleted"] }] } });
 
 const EMOJI_TO_LABEL = new Map(MoodStateOptions.map((o) => [o.emoji, o.label]));
@@ -5571,169 +5795,262 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 args: ['tooltipRef']
             }] } });
 
-class AudioTextSyncService {
+// Removed AudioState as it's replaced by AudioStatus from agent.models
+class MessageContentDisplayer {
+    get hostHighlightColor() {
+        return this.highlightColor();
+    }
     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();
+        // Inputs
+        this.message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        this.markWord = input(...(ngDevMode ? [undefined, { debugName: "markWord" }] : /* istanbul ignore next */ []));
+        this.highlightColor = input(...(ngDevMode ? [undefined, { debugName: "highlightColor" }] : /* istanbul ignore next */ []));
+        // Outputs
+        this.playAudio = output();
+        this.audioCompleted = output();
+        this.audioStatusChanged = output();
+        this.wordClicked = output();
+        // Signal States
+        this.wordWithMeta = signal([], ...(ngDevMode ? [{ debugName: "wordWithMeta" }] : /* istanbul ignore next */ []));
+        this.localAudioStatus = signal(null, ...(ngDevMode ? [{ debugName: "localAudioStatus" }] : /* istanbul ignore next */ []));
+        // Signals State computed from the input message
+        this.wordsWithMetaState = [];
+        this.lastHasTranscription = false;
+        this.audioElement = signal(null, ...(ngDevMode ? [{ debugName: "audioElement" }] : /* istanbul ignore next */ []));
         this.destroyRef = inject(DestroyRef);
-        // Ensure cleanup when service is destroyed
-        this.destroyRef.onDestroy(() => {
-            this.stopAllSyncs();
+        this.iconState = computed(() => {
+            const msg = this.message();
+            if (msg?.isLoading) {
+                return 'loading';
+            }
+            const status = this.localAudioStatus() || msg?.audioStatus;
+            if (status === 'playing') {
+                return 'playing';
+            }
+            if (status === 'stopped') {
+                return 'paused';
+            }
+            if (status === 'finished') {
+                return 'finished';
+            }
+            if (status === 'pending') {
+                return 'pending';
+            }
+            if (msg?.audioUrl) {
+                return 'playable';
+            }
+            return 'idle';
+        }, ...(ngDevMode ? [{ debugName: "iconState" }] : /* istanbul ignore next */ []));
+        this.isPendingAudio = computed(() => !!this.message() && this.message()?.audioStatus === 'pending', ...(ngDevMode ? [{ debugName: "isPendingAudio" }] : /* istanbul ignore next */ []));
+        this.messageText = computed(() => {
+            const msg = this.message();
+            return msg?.text || msg?.content || 'N/A';
+        }, ...(ngDevMode ? [{ debugName: "messageText" }] : /* istanbul ignore next */ []));
+        this.classTag = computed(() => this.message()?.tag, ...(ngDevMode ? [{ debugName: "classTag" }] : /* istanbul ignore next */ []));
+        // When message is updated, check is has transcriptions whisper format.
+        this.transcriptionTimestamps = computed(() => {
+            const msg = this.message();
+            if (!msg || !msg.transcription) {
+                return [];
+            }
+            return matchTranscription(msg.text || msg.content, msg.transcription.words);
+        }, ...(ngDevMode ? [{ debugName: "transcriptionTimestamps" }] : /* istanbul ignore next */ []));
+        // if transcriptionTimestamps is calculated then hasTranscription is true.
+        this.hasTranscription = computed(() => {
+            return this.transcriptionTimestamps().length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasTranscription" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const currentMsg = this.message();
+            if (!currentMsg)
+                return;
+            const hasTranscription = this.hasTranscription();
+            const idChanged = currentMsg.messageId !== this.currentMessageId;
+            const audioUrlChanged = currentMsg.audioUrl !== this.lastAudioUrl;
+            const transcriptionChanged = hasTranscription !== this.lastHasTranscription;
+            if (idChanged || audioUrlChanged || transcriptionChanged) {
+                this.currentMessageId = currentMsg.messageId;
+                this.lastAudioUrl = currentMsg.audioUrl;
+                this.lastHasTranscription = hasTranscription;
+                this.localAudioStatus.set(null); // Reset local state on message/audio change
+                this.initializeBasedOnMessage(currentMsg);
+            }
+        });
+        effect(() => {
+            if (this.isPendingAudio()) {
+                this.startAudioPlayback();
+            }
+        });
+        effect(() => {
+            this.wordsWithMetaState = this.wordWithMeta();
         });
     }
-    /**
-     * 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([]));
+    trackByIndex(index, item) {
+        return index;
+    }
+    ngOnDestroy() {
+        this.cleanupAudio();
+    }
+    initializeBasedOnMessage(msg) {
+        if (msg.audioUrl) {
+            this.initializeAudio(msg.audioUrl);
         }
-        if (!this.highlightedWords$Map.has(messageId)) {
-            this.highlightedWords$Map.set(messageId, new BehaviorSubject([]));
+        if (this.hasTranscription()) {
+            const wordsAndTimestamps = [];
+            this.transcriptionTimestamps()?.forEach((word, index) => {
+                wordsAndTimestamps.push({ ...word, ...this.wordsWithMetaState[index], index });
+            });
+            const firstState = this.transcriptionTimestamps()?.map((word, index) => ({
+                word: word.word,
+                index,
+                isHighlighted: false,
+                tag: '',
+                marked: word.word.toLowerCase() == this.markWord()?.toLowerCase(),
+            }));
+            console.log('firstState', firstState);
+            this.wordWithMeta.set(firstState);
+            // Para mostrar las transcripciones iliminadas: el audio tiene que sonar y en la subscripción apareceran los cambios.
         }
-        // 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
+        else {
+            this.initializePlainTextWords(msg.text || msg.content || '');
+        }
+        // Removal of shouldPlayAudio check - playback now handled by isPendingAudio effect
+    }
+    initializeAudio(audioUrl) {
+        let audio = this.audioElement();
+        if (!audio) {
+            audio = new Audio(audioUrl);
+            this.audioElement.set(audio);
+            this.setupAudioEventListeners(audio);
+        }
+        else if (audio.src && audioUrl && !audio.src.endsWith(audioUrl)) {
+            audio.src = audioUrl;
+        }
+    }
+    setupAudioEventListeners(audioElement) {
         fromEvent(audioElement, 'timeupdate')
-            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(cleanup$), map(() => audioElement.currentTime))
+            .pipe(takeUntilDestroyed(this.destroyRef), map(() => audioElement.currentTime || 0))
             .subscribe((currentTime) => {
-            const updatedWords = transcriptionTimestamps.map((word, index) => {
-                const isHighlighted = currentTime >= word.start - 0.15 && currentTime < word.end + 0.15;
-                return {
+            if (currentTime === 0) {
+                this.updateAudioStatus('playing');
+                return;
+            }
+            if (this.hasTranscription()) {
+                const wordsAndTimestamps = [];
+                this.transcriptionTimestamps()?.forEach((word, index) => {
+                    wordsAndTimestamps.push({ ...word, ...this.wordsWithMetaState[index], index });
+                });
+                const updatedWords = wordsAndTimestamps.map((word, index) => ({
                     word: word.word,
                     index,
-                    isHighlighted,
-                };
-            });
-            // Update both signal and observable for this message
-            messageSignal.set(updatedWords);
-            messageSubject.next(updatedWords);
+                    isHighlighted: currentTime >= word.start - 0.15 && currentTime < word.end + 0.15,
+                    tag: word.tag,
+                    marked: word.word.toLowerCase() == this.markWord()?.toLowerCase(),
+                }));
+                this.wordWithMeta.set(updatedWords);
+            }
         });
-        // Listen to ended event for cleanup
         fromEvent(audioElement, 'ended')
-            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(cleanup$))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .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([]);
+            const resetWords = this.wordWithMeta().map((word) => ({ ...word, isHighlighted: false }));
+            this.wordWithMeta.set(resetWords);
+            const currentMsg = this.message();
+            if (currentMsg) {
+                // No direct mutation of input!
+                this.updateAudioStatus('finished');
+                this.audioCompleted.emit(currentMsg);
             }
-        }
+        });
     }
-    /**
-     * 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);
+    updateAudioStatus(status) {
+        const currentMsg = this.message();
+        // Update local state for immediate feedback
+        this.localAudioStatus.set(status);
+        // Only update if the status is actually changing relative to the current input
+        if (currentMsg && currentMsg.audioStatus !== status) {
+            // NOTE: We do NOT mutate currentMsg.audioStatus here. 
+            // The parent orchestration service will update the state and propagate it back via signals.
+            this.audioStatusChanged.emit({ message: currentMsg, status });
         }
-        // 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([]));
+    cleanupAudio() {
+        const audioElement = this.audioElement();
+        if (audioElement) {
+            audioElement.pause();
+            audioElement.src = '';
+            const resetWords = this.wordWithMeta().map((word) => ({ ...word, isHighlighted: false }));
+            this.wordWithMeta.set(resetWords);
         }
-        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([]));
+    onPlayMessage() {
+        console.log('onPlayMessage');
+        const currentMsg = this.message();
+        const audioElement = this.audioElement();
+        if (audioElement) {
+            if (audioElement.paused) {
+                this.startAudioPlayback();
+            }
+            else {
+                audioElement.pause();
+                this.updateAudioStatus('stopped');
+            }
+        }
+        else if (currentMsg?.audioUrl) {
+            console.log('onPlayMessage initializeAudio with url');
+            this.initializeAudio(currentMsg.audioUrl);
+            this.startAudioPlayback();
+        }
+        else if (currentMsg) {
+            console.log('onPlayMessage emit playAudio');
+            this.playAudio.emit(currentMsg);
         }
-        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);
+    initializePlainTextWords(text) {
+        const words = extractTags(text);
+        const plainWords = words.map((word, index) => ({
+            word: word.word,
+            index: index,
+            isHighlighted: false,
+            tag: word.tag,
+        }));
+        this.wordWithMeta.set(plainWords);
     }
-    /**
-     * 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)));
+    onWordClick(wordData) {
+        const currentMsg = this.message();
+        if (!currentMsg)
+            return;
+        const clickedWord = 'isHighlighted' in wordData
+            ? { word: wordData.word, index: wordData.index, messageId: currentMsg.messageId }
+            : { ...wordData, messageId: currentMsg.messageId };
+        this.wordClicked.emit(clickedWord);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AudioTextSyncService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AudioTextSyncService, providedIn: 'root' }); }
+    startAudioPlayback() {
+        const audioElement = this.audioElement();
+        if (!audioElement)
+            return;
+        try {
+            audioElement.play();
+            console.log('Audio playing');
+        }
+        catch (error) {
+            console.error('Error playing audio:', error);
+        }
+        // Important: we move it to playing status immediately to avoid re-triggering the effect
+        this.updateAudioStatus('playing');
+    }
+    debug() {
+        console.log('debug', this.wordWithMeta());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageContentDisplayer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MessageContentDisplayer, isStandalone: true, selector: "message-content-displayer", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, markWord: { classPropertyName: "markWord", publicName: "markWord", isSignal: true, isRequired: false, transformFunction: null }, highlightColor: { classPropertyName: "highlightColor", publicName: "highlightColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playAudio: "playAudio", audioCompleted: "audioCompleted", audioStatusChanged: "audioStatusChanged", wordClicked: "wordClicked" }, host: { properties: { "style.--highlight-bg-color": "this.hostHighlightColor" } }, ngImport: i0, template: "<div class=\"audio-text-sync-container\" [class.is-active]=\"message().isActive\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { \n      @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } \n      @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n      @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } \n      @case ('finished') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> } \n      @case ('pending') { <i class=\"pi pi-angle-right\"></i> }\n      @case ('playable') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> } \n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n@if (message().imageUrl) {\n<div class=\"tour-image-container\" style=\"display: flex; justify-content: center\">\n  <img [src]=\"message().imageUrl\" alt=\"Tour Image\" style=\"max-width: 220px; height: auto\" />\n</div>\n}\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center;transition:background-color .3s ease}.audio-text-sync-container.is-active{background-color:#3cd8ff1a;border-radius:8px;padding-left:4px}.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:var(--highlight-bg-color, rgb(60, 216, 255));border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:var(--chat-message-italic-color, rgb(184, 208, 252))}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:var(--chat-message-italic-color, rgb(252, 198, 184))}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AudioTextSyncService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageContentDisplayer, decorators: [{
+            type: Component,
+            args: [{ selector: 'message-content-displayer', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audio-text-sync-container\" [class.is-active]=\"message().isActive\">\n  <i (click)=\"onPlayMessage()\" class=\"play-button\">\n    @switch (iconState()) { \n      @case ('loading') { <i class=\"spin-animation pi pi-spinner-dotted\"></i> } \n      @case ('playing') { <i class=\"pi pi-volume-up\"></i> }\n      @case ('paused') { <i class=\"pi pi-pause-circle\"></i> } \n      @case ('finished') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> } \n      @case ('pending') { <i class=\"pi pi-angle-right\"></i> }\n      @case ('playable') { <i class=\"pi pi-play-circle\" style=\"color: white\"></i> } \n    }\n  </i>\n\n  <!-- Display transcription with highlighting -->\n  <p style=\"width: 100%\" [class]=\"'text-content ' + classTag()\">\n    @for (word of wordWithMeta(); track trackByIndex($index, word)) {\n    <span\n      [class]=\"word.tag\"\n      [class.highlight]=\"word.isHighlighted\"\n      [class.marked]=\"word.marked\"\n      (click)=\"onWordClick(word)\"\n      [attr.id]=\"'word-' + message().messageId + '-' + word.index\"\n      >{{ word.word }}\n    </span>\n    }\n  </p>\n</div>\n@if (message().imageUrl) {\n<div class=\"tour-image-container\" style=\"display: flex; justify-content: center\">\n  <img [src]=\"message().imageUrl\" alt=\"Tour Image\" style=\"max-width: 220px; height: auto\" />\n</div>\n}\n", styles: [":host{display:block}.audio-text-sync-container{display:flex;align-items:flex-start;gap:2px;align-items:center;transition:background-color .3s ease}.audio-text-sync-container.is-active{background-color:#3cd8ff1a;border-radius:8px;padding-left:4px}.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:var(--highlight-bg-color, rgb(60, 216, 255));border-radius:4px}::ng-deep .marked{position:relative;color:#f8bfbc}::ng-deep .marked:before{content:\"\";z-index:-2;left:-.1em;top:.1em;border-width:2px;border-style:solid;border-color:#f27068;position:absolute;border-right-color:transparent;width:100%;height:1em;transform:rotate(2deg);opacity:.7;border-radius:50%;padding:.1em .25em}::ng-deep .marked:after{content:\"\";z-index:-1;left:-.1em;top:.4em;padding:.1em .25em;border-width:2px;border-style:solid;border-color:#f27068;border-left-color:transparent;border-top-color:transparent;position:absolute;width:100%;height:1em;transform:rotate(-1deg);opacity:.7;border-radius:50%}.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.em{font-style:italic;color:var(--chat-message-italic-color, rgb(184, 208, 252))}.strong{font-weight:700;color:inherit}.italic{font-style:italic;color:var(--chat-message-italic-color, rgb(252, 198, 184))}.em_strong{font-weight:700;font-style:italic;color:inherit}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], markWord: [{ type: i0.Input, args: [{ isSignal: true, alias: "markWord", required: false }] }], highlightColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightColor", required: false }] }], hostHighlightColor: [{
+                type: HostBinding,
+                args: ['style.--highlight-bg-color']
+            }], playAudio: [{ type: i0.Output, args: ["playAudio"] }], audioCompleted: [{ type: i0.Output, args: ["audioCompleted"] }], audioStatusChanged: [{ type: i0.Output, args: ["audioStatusChanged"] }], wordClicked: [{ type: i0.Output, args: ["wordClicked"] }] } });
 
 class DcImmersiveChatComponent {
     constructor() {
@@ -6137,16 +6454,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
 class MessagesStateInspectorComponent {
     constructor() {
-        this.messagesStateService = inject(MessagesStateService);
-        this.messages = this.messagesStateService.getMessagesSignal();
+        this.service = input(...(ngDevMode ? [undefined, { debugName: "service" }] : /* istanbul ignore next */ []));
+        this.fallback = inject(MessagesStateService);
+        this.messages = computed(() => (this.service() ?? this.fallback).getMessagesSignal()(), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessagesStateInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MessagesStateInspectorComponent, isStandalone: true, selector: "dc-messages-state-inspector", ngImport: i0, template: "<div class=\"messages-state-inspector\">\n  @for (msg of messages(); track msg.messageId; let i = $index) {\n  <details class=\"message-group mb-2 border rounded p-2\">\n    <summary class=\"cursor-pointer font-bold p-1 hover:bg-gray-100 flex justify-between items-center\">\n      <span>\n        <span class=\"text-xs text-gray-400 mr-2\">#{{ i + 1 }}</span>\n        <span [class]=\"'role-badge ' + msg.role\">{{ msg.role }}</span>\n        <span class=\"ml-2 text-sm truncate max-w-xs\">{{ msg.content | slice:0:50 }}{{ msg.content.length > 50 ? '...' : '' }}</span>\n      </span>\n      <span class=\"text-xs text-gray-400\">{{ msg.messageId }}</span>\n    </summary>\n\n    <div class=\"message-details mt-2 pl-4 border-l-2 border-primary\">\n      <!-- Standard Properties -->\n      <div class=\"grid grid-cols-2 gap-2 text-sm\">\n        <div><strong>Role:</strong> {{ msg.role }}</div>\n        <div><strong>Section:</strong> {{ msg.section || 'N/A' }}</div>\n        <div><strong>Message ID:</strong> {{ msg.messageId }}</div>\n        <div class=\"col-span-2\"><strong>Content:</strong> <pre class=\"whitespace-pre-wrap text-xs bg-gray-50 p-2 mt-1\">{{ msg.content }}</pre></div>\n        @if (msg.translation) {\n          <div class=\"col-span-2 text-blue-600\"><strong>Translation:</strong> {{ msg.translation }}</div>\n        }\n      </div>\n\n      <!-- JSON Preview of other props -->\n      <details class=\"mt-2\">\n        <summary class=\"text-xs text-gray-500 cursor-pointer\">All Metadata</summary>\n        <pre class=\"text-[10px] bg-slate-800 text-white p-2 rounded mt-1 overflow-auto max-h-64\">{{ msg | safeJson }}</pre>\n      </details>\n\n      <!-- MultiMessages recursive check -->\n      @if (msg.multiMessages && msg.multiMessages.length > 0) {\n        <div class=\"mt-3\">\n          <strong class=\"text-xs uppercase text-gray-500\">Multi Messages ({{ msg.multiMessages.length }})</strong>\n          <div class=\"pl-4 border-l-2 border-dashed border-gray-300\">\n            @for (subMsg of msg.multiMessages; track $index) {\n              <details class=\"mt-1 border rounded p-1 bg-gray-50\">\n                <summary class=\"text-xs cursor-pointer truncate\">Sub: {{ subMsg.text | slice:0:30 }}...</summary>\n                <pre class=\"text-[10px] mt-1 p-1 bg-white border overflow-auto\">{{ subMsg | safeJson }}</pre>\n              </details>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Evaluation -->\n      @if (msg.evaluation) {\n        <div class=\"mt-2 p-2 bg-yellow-50 rounded text-xs space-y-2\">\n          <strong>Evaluation</strong>\n\n          @if (msg.evaluation['flow']; as flow) {\n            <div class=\"flow-eval space-y-2\">\n              @if (flow.goal) {\n                <div class=\"p-2 bg-white rounded border\">\n                  <div class=\"flex items-center justify-between\">\n                    <strong class=\"text-[11px] uppercase text-gray-600\">Goal</strong>\n                    @if (flow.goal.deltaPoints != null) {\n                      <span\n                        class=\"px-1.5 rounded text-[11px] font-bold\"\n                        [class.bg-green-100]=\"flow.goal.deltaPoints > 0\"\n                        [class.text-green-700]=\"flow.goal.deltaPoints > 0\"\n                        [class.bg-red-100]=\"flow.goal.deltaPoints < 0\"\n                        [class.text-red-700]=\"flow.goal.deltaPoints < 0\"\n                        [class.bg-gray-100]=\"flow.goal.deltaPoints === 0\"\n                        [class.text-gray-600]=\"flow.goal.deltaPoints === 0\">\n                        {{ flow.goal.deltaPoints > 0 ? '+' : '' }}{{ flow.goal.deltaPoints }} pts\n                      </span>\n                    }\n                  </div>\n                  @if (flow.goal.previousValue != null && flow.goal.newValue != null) {\n                    <div class=\"mt-1 text-[11px] text-gray-600\">\n                      <span>{{ flow.goal.previousValue }}</span>\n                      <span class=\"mx-1\">\u2192</span>\n                      <span class=\"font-bold text-gray-900\">{{ flow.goal.newValue }}</span>\n                      <span class=\"text-gray-400\"> / 100</span>\n                    </div>\n                    <div class=\"w-full bg-gray-200 rounded h-1 mt-1 overflow-hidden\">\n                      <div class=\"bg-primary h-1\" [style.width.%]=\"flow.goal.newValue\" [style.background-color]=\"'#3b82f6'\"></div>\n                    </div>\n                  }\n                  @if (flow.intervention?.message) {\n                    <div class=\"mt-1 text-[11px] italic text-gray-700\">\"{{ flow.intervention.message }}\"</div>\n                  }\n                </div>\n              }\n\n              @if (flow.challenges?.length) {\n                <div class=\"p-2 bg-white rounded border\">\n                  <strong class=\"text-[11px] uppercase text-gray-600\">Challenges</strong>\n                  <ul class=\"mt-1 space-y-0.5\">\n                    @for (ch of flow.challenges; track ch.name) {\n                      <li class=\"flex items-center gap-1 text-[11px]\">\n                        <span [class.text-green-600]=\"ch.value\" [class.text-gray-400]=\"!ch.value\">\n                          {{ ch.value ? '\u2713' : '\u25CB' }}\n                        </span>\n                        <span [class.font-semibold]=\"ch.value\">{{ ch.name }}</span>\n                      </li>\n                    }\n                  </ul>\n                </div>\n              }\n\n              @if (flow.moodState?.value) {\n                <div class=\"p-2 bg-white rounded border flex items-center justify-between\">\n                  <strong class=\"text-[11px] uppercase text-gray-600\">Mood</strong>\n                  <span class=\"text-[11px] font-semibold\">{{ flow.moodState.value }}</span>\n                </div>\n              }\n\n              @if (flow.evaluatedAt) {\n                <div class=\"text-[10px] text-gray-400 text-right\">{{ flow.evaluatedAt }}</div>\n              }\n            </div>\n          }\n\n          <details class=\"mt-1\">\n            <summary class=\"text-[10px] text-gray-500 cursor-pointer\">Raw evaluation</summary>\n            <pre class=\"text-[10px]\">{{ msg.evaluation | safeJson }}</pre>\n          </details>\n        </div>\n      }\n\n      <!-- Tags -->\n      @if (msg.tags && msg.tags.length > 0) {\n        <div class=\"mt-2 flex flex-wrap gap-1\">\n          <strong>Tags:</strong>\n          @for (tag of msg.tags; track tag) {\n            <span class=\"bg-gray-200 px-1 rounded text-[10px]\">{{ tag }}</span>\n          }\n        </div>\n      }\n    </div>\n  </details>\n  } @empty {\n  <div class=\"p-4 text-center text-gray-400\">No messages in state.</div>\n  }\n</div>\n\n<style>\n  .role-badge {\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 0.7rem;\n    text-transform: uppercase;\n    font-weight: bold;\n  }\n  .role-badge.user { background: #e0f2fe; color: #0369a1; }\n  .role-badge.assistant { background: #f0fdf4; color: #15803d; }\n  .role-badge.assistantHelper { background: #faf5ff; color: #7e22ce; }\n  .role-badge.system { background: #f1f5f9; color: #475569; }\n  .border-primary { border-color: var(--p-primary-color, #3b82f6); }\n</style>\n", styles: [".role-badge{padding:2px 6px;border-radius:4px;font-size:.7rem;text-transform:uppercase;font-weight:700}.role-badge.user{background:#e0f2fe;color:#0369a1}.role-badge.assistant{background:#f0fdf4;color:#15803d}.role-badge.assistantHelper{background:#faf5ff;color:#7e22ce}.role-badge.system{background:#f1f5f9;color:#475569}.border-primary{border-color:var(--p-primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MessagesStateInspectorComponent, isStandalone: true, selector: "dc-messages-state-inspector", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"messages-state-inspector\">\n  @for (msg of messages(); track msg.messageId; let i = $index) {\n  <details class=\"message-group mb-2 border rounded p-2\">\n    <summary class=\"cursor-pointer font-bold p-1 hover:bg-gray-100 flex justify-between items-center\">\n      <span>\n        <span class=\"text-xs text-gray-400 mr-2\">#{{ i + 1 }}</span>\n        <span [class]=\"'role-badge ' + msg.role\">{{ msg.role }}</span>\n        <span class=\"ml-2 text-sm truncate max-w-xs\">{{ msg.content | slice:0:50 }}{{ msg.content.length > 50 ? '...' : '' }}</span>\n      </span>\n      <span class=\"text-xs text-gray-400\">{{ msg.messageId }}</span>\n    </summary>\n\n    <div class=\"message-details mt-2 pl-4 border-l-2 border-primary\">\n      <!-- Standard Properties -->\n      <div class=\"grid grid-cols-2 gap-2 text-sm\">\n        <div><strong>Role:</strong> {{ msg.role }}</div>\n        <div><strong>Section:</strong> {{ msg.section || 'N/A' }}</div>\n        <div><strong>Message ID:</strong> {{ msg.messageId }}</div>\n        <div class=\"col-span-2\"><strong>Content:</strong> <pre class=\"whitespace-pre-wrap text-xs bg-gray-50 p-2 mt-1\">{{ msg.content }}</pre></div>\n        @if (msg.translation) {\n          <div class=\"col-span-2 text-blue-600\"><strong>Translation:</strong> {{ msg.translation }}</div>\n        }\n      </div>\n\n      <!-- JSON Preview of other props -->\n      <details class=\"mt-2\">\n        <summary class=\"text-xs text-gray-500 cursor-pointer\">All Metadata</summary>\n        <pre class=\"text-[10px] bg-slate-800 text-white p-2 rounded mt-1 overflow-auto max-h-64\">{{ msg | safeJson }}</pre>\n      </details>\n\n      <!-- MultiMessages recursive check -->\n      @if (msg.multiMessages && msg.multiMessages.length > 0) {\n        <div class=\"mt-3\">\n          <strong class=\"text-xs uppercase text-gray-500\">Multi Messages ({{ msg.multiMessages.length }})</strong>\n          <div class=\"pl-4 border-l-2 border-dashed border-gray-300\">\n            @for (subMsg of msg.multiMessages; track $index) {\n              <details class=\"mt-1 border rounded p-1 bg-gray-50\">\n                <summary class=\"text-xs cursor-pointer truncate\">Sub: {{ subMsg.text | slice:0:30 }}...</summary>\n                <pre class=\"text-[10px] mt-1 p-1 bg-white border overflow-auto\">{{ subMsg | safeJson }}</pre>\n              </details>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Evaluation -->\n      @if (msg.evaluation) {\n        <div class=\"mt-2 p-2 bg-yellow-50 rounded text-xs space-y-2\">\n          <strong>Evaluation</strong>\n\n          @if (msg.evaluation['flow']; as flow) {\n            <div class=\"flow-eval space-y-2\">\n              @if (flow.goal) {\n                <div class=\"p-2 bg-white rounded border\">\n                  <div class=\"flex items-center justify-between\">\n                    <strong class=\"text-[11px] uppercase text-gray-600\">Goal</strong>\n                    @if (flow.goal.deltaPoints != null) {\n                      <span\n                        class=\"px-1.5 rounded text-[11px] font-bold\"\n                        [class.bg-green-100]=\"flow.goal.deltaPoints > 0\"\n                        [class.text-green-700]=\"flow.goal.deltaPoints > 0\"\n                        [class.bg-red-100]=\"flow.goal.deltaPoints < 0\"\n                        [class.text-red-700]=\"flow.goal.deltaPoints < 0\"\n                        [class.bg-gray-100]=\"flow.goal.deltaPoints === 0\"\n                        [class.text-gray-600]=\"flow.goal.deltaPoints === 0\">\n                        {{ flow.goal.deltaPoints > 0 ? '+' : '' }}{{ flow.goal.deltaPoints }} pts\n                      </span>\n                    }\n                  </div>\n                  @if (flow.goal.previousValue != null && flow.goal.newValue != null) {\n                    <div class=\"mt-1 text-[11px] text-gray-600\">\n                      <span>{{ flow.goal.previousValue }}</span>\n                      <span class=\"mx-1\">\u2192</span>\n                      <span class=\"font-bold text-gray-900\">{{ flow.goal.newValue }}</span>\n                      <span class=\"text-gray-400\"> / 100</span>\n                    </div>\n                    <div class=\"w-full bg-gray-200 rounded h-1 mt-1 overflow-hidden\">\n                      <div class=\"bg-primary h-1\" [style.width.%]=\"flow.goal.newValue\" [style.background-color]=\"'#3b82f6'\"></div>\n                    </div>\n                  }\n                  @if (flow.intervention?.message) {\n                    <div class=\"mt-1 text-[11px] italic text-gray-700\">\"{{ flow.intervention.message }}\"</div>\n                  }\n                </div>\n              }\n\n              @if (flow.challenges?.length) {\n                <div class=\"p-2 bg-white rounded border\">\n                  <strong class=\"text-[11px] uppercase text-gray-600\">Challenges</strong>\n                  <ul class=\"mt-1 space-y-0.5\">\n                    @for (ch of flow.challenges; track ch.name) {\n                      <li class=\"flex items-center gap-1 text-[11px]\">\n                        <span [class.text-green-600]=\"ch.value\" [class.text-gray-400]=\"!ch.value\">\n                          {{ ch.value ? '\u2713' : '\u25CB' }}\n                        </span>\n                        <span [class.font-semibold]=\"ch.value\">{{ ch.name }}</span>\n                      </li>\n                    }\n                  </ul>\n                </div>\n              }\n\n              @if (flow.moodState?.value) {\n                <div class=\"p-2 bg-white rounded border flex items-center justify-between\">\n                  <strong class=\"text-[11px] uppercase text-gray-600\">Mood</strong>\n                  <span class=\"text-[11px] font-semibold\">{{ flow.moodState.value }}</span>\n                </div>\n              }\n\n              @if (flow.evaluatedAt) {\n                <div class=\"text-[10px] text-gray-400 text-right\">{{ flow.evaluatedAt }}</div>\n              }\n            </div>\n          }\n\n          <details class=\"mt-1\">\n            <summary class=\"text-[10px] text-gray-500 cursor-pointer\">Raw evaluation</summary>\n            <pre class=\"text-[10px]\">{{ msg.evaluation | safeJson }}</pre>\n          </details>\n        </div>\n      }\n\n      <!-- Tags -->\n      @if (msg.tags && msg.tags.length > 0) {\n        <div class=\"mt-2 flex flex-wrap gap-1\">\n          <strong>Tags:</strong>\n          @for (tag of msg.tags; track tag) {\n            <span class=\"bg-gray-200 px-1 rounded text-[10px]\">{{ tag }}</span>\n          }\n        </div>\n      }\n    </div>\n  </details>\n  } @empty {\n  <div class=\"p-4 text-center text-gray-400\">No messages in state.</div>\n  }\n</div>\n\n<style>\n  .role-badge {\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 0.7rem;\n    text-transform: uppercase;\n    font-weight: bold;\n  }\n  .role-badge.user { background: #e0f2fe; color: #0369a1; }\n  .role-badge.assistant { background: #f0fdf4; color: #15803d; }\n  .role-badge.assistantHelper { background: #faf5ff; color: #7e22ce; }\n  .role-badge.system { background: #f1f5f9; color: #475569; }\n  .border-primary { border-color: var(--p-primary-color, #3b82f6); }\n</style>\n", styles: [".role-badge{padding:2px 6px;border-radius:4px;font-size:.7rem;text-transform:uppercase;font-weight:700}.role-badge.user{background:#e0f2fe;color:#0369a1}.role-badge.assistant{background:#f0fdf4;color:#15803d}.role-badge.assistantHelper{background:#faf5ff;color:#7e22ce}.role-badge.system{background:#f1f5f9;color:#475569}.border-primary{border-color:var(--p-primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessagesStateInspectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-messages-state-inspector', standalone: true, imports: [CommonModule, SafeJsonPipe], template: "<div class=\"messages-state-inspector\">\n  @for (msg of messages(); track msg.messageId; let i = $index) {\n  <details class=\"message-group mb-2 border rounded p-2\">\n    <summary class=\"cursor-pointer font-bold p-1 hover:bg-gray-100 flex justify-between items-center\">\n      <span>\n        <span class=\"text-xs text-gray-400 mr-2\">#{{ i + 1 }}</span>\n        <span [class]=\"'role-badge ' + msg.role\">{{ msg.role }}</span>\n        <span class=\"ml-2 text-sm truncate max-w-xs\">{{ msg.content | slice:0:50 }}{{ msg.content.length > 50 ? '...' : '' }}</span>\n      </span>\n      <span class=\"text-xs text-gray-400\">{{ msg.messageId }}</span>\n    </summary>\n\n    <div class=\"message-details mt-2 pl-4 border-l-2 border-primary\">\n      <!-- Standard Properties -->\n      <div class=\"grid grid-cols-2 gap-2 text-sm\">\n        <div><strong>Role:</strong> {{ msg.role }}</div>\n        <div><strong>Section:</strong> {{ msg.section || 'N/A' }}</div>\n        <div><strong>Message ID:</strong> {{ msg.messageId }}</div>\n        <div class=\"col-span-2\"><strong>Content:</strong> <pre class=\"whitespace-pre-wrap text-xs bg-gray-50 p-2 mt-1\">{{ msg.content }}</pre></div>\n        @if (msg.translation) {\n          <div class=\"col-span-2 text-blue-600\"><strong>Translation:</strong> {{ msg.translation }}</div>\n        }\n      </div>\n\n      <!-- JSON Preview of other props -->\n      <details class=\"mt-2\">\n        <summary class=\"text-xs text-gray-500 cursor-pointer\">All Metadata</summary>\n        <pre class=\"text-[10px] bg-slate-800 text-white p-2 rounded mt-1 overflow-auto max-h-64\">{{ msg | safeJson }}</pre>\n      </details>\n\n      <!-- MultiMessages recursive check -->\n      @if (msg.multiMessages && msg.multiMessages.length > 0) {\n        <div class=\"mt-3\">\n          <strong class=\"text-xs uppercase text-gray-500\">Multi Messages ({{ msg.multiMessages.length }})</strong>\n          <div class=\"pl-4 border-l-2 border-dashed border-gray-300\">\n            @for (subMsg of msg.multiMessages; track $index) {\n              <details class=\"mt-1 border rounded p-1 bg-gray-50\">\n                <summary class=\"text-xs cursor-pointer truncate\">Sub: {{ subMsg.text | slice:0:30 }}...</summary>\n                <pre class=\"text-[10px] mt-1 p-1 bg-white border overflow-auto\">{{ subMsg | safeJson }}</pre>\n              </details>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Evaluation -->\n      @if (msg.evaluation) {\n        <div class=\"mt-2 p-2 bg-yellow-50 rounded text-xs space-y-2\">\n          <strong>Evaluation</strong>\n\n          @if (msg.evaluation['flow']; as flow) {\n            <div class=\"flow-eval space-y-2\">\n              @if (flow.goal) {\n                <div class=\"p-2 bg-white rounded border\">\n                  <div class=\"flex items-center justify-between\">\n                    <strong class=\"text-[11px] uppercase text-gray-600\">Goal</strong>\n                    @if (flow.goal.deltaPoints != null) {\n                      <span\n                        class=\"px-1.5 rounded text-[11px] font-bold\"\n                        [class.bg-green-100]=\"flow.goal.deltaPoints > 0\"\n                        [class.text-green-700]=\"flow.goal.deltaPoints > 0\"\n                        [class.bg-red-100]=\"flow.goal.deltaPoints < 0\"\n                        [class.text-red-700]=\"flow.goal.deltaPoints < 0\"\n                        [class.bg-gray-100]=\"flow.goal.deltaPoints === 0\"\n                        [class.text-gray-600]=\"flow.goal.deltaPoints === 0\">\n                        {{ flow.goal.deltaPoints > 0 ? '+' : '' }}{{ flow.goal.deltaPoints }} pts\n                      </span>\n                    }\n                  </div>\n                  @if (flow.goal.previousValue != null && flow.goal.newValue != null) {\n                    <div class=\"mt-1 text-[11px] text-gray-600\">\n                      <span>{{ flow.goal.previousValue }}</span>\n                      <span class=\"mx-1\">\u2192</span>\n                      <span class=\"font-bold text-gray-900\">{{ flow.goal.newValue }}</span>\n                      <span class=\"text-gray-400\"> / 100</span>\n                    </div>\n                    <div class=\"w-full bg-gray-200 rounded h-1 mt-1 overflow-hidden\">\n                      <div class=\"bg-primary h-1\" [style.width.%]=\"flow.goal.newValue\" [style.background-color]=\"'#3b82f6'\"></div>\n                    </div>\n                  }\n                  @if (flow.intervention?.message) {\n                    <div class=\"mt-1 text-[11px] italic text-gray-700\">\"{{ flow.intervention.message }}\"</div>\n                  }\n                </div>\n              }\n\n              @if (flow.challenges?.length) {\n                <div class=\"p-2 bg-white rounded border\">\n                  <strong class=\"text-[11px] uppercase text-gray-600\">Challenges</strong>\n                  <ul class=\"mt-1 space-y-0.5\">\n                    @for (ch of flow.challenges; track ch.name) {\n                      <li class=\"flex items-center gap-1 text-[11px]\">\n                        <span [class.text-green-600]=\"ch.value\" [class.text-gray-400]=\"!ch.value\">\n                          {{ ch.value ? '\u2713' : '\u25CB' }}\n                        </span>\n                        <span [class.font-semibold]=\"ch.value\">{{ ch.name }}</span>\n                      </li>\n                    }\n                  </ul>\n                </div>\n              }\n\n              @if (flow.moodState?.value) {\n                <div class=\"p-2 bg-white rounded border flex items-center justify-between\">\n                  <strong class=\"text-[11px] uppercase text-gray-600\">Mood</strong>\n                  <span class=\"text-[11px] font-semibold\">{{ flow.moodState.value }}</span>\n                </div>\n              }\n\n              @if (flow.evaluatedAt) {\n                <div class=\"text-[10px] text-gray-400 text-right\">{{ flow.evaluatedAt }}</div>\n              }\n            </div>\n          }\n\n          <details class=\"mt-1\">\n            <summary class=\"text-[10px] text-gray-500 cursor-pointer\">Raw evaluation</summary>\n            <pre class=\"text-[10px]\">{{ msg.evaluation | safeJson }}</pre>\n          </details>\n        </div>\n      }\n\n      <!-- Tags -->\n      @if (msg.tags && msg.tags.length > 0) {\n        <div class=\"mt-2 flex flex-wrap gap-1\">\n          <strong>Tags:</strong>\n          @for (tag of msg.tags; track tag) {\n            <span class=\"bg-gray-200 px-1 rounded text-[10px]\">{{ tag }}</span>\n          }\n        </div>\n      }\n    </div>\n  </details>\n  } @empty {\n  <div class=\"p-4 text-center text-gray-400\">No messages in state.</div>\n  }\n</div>\n\n<style>\n  .role-badge {\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 0.7rem;\n    text-transform: uppercase;\n    font-weight: bold;\n  }\n  .role-badge.user { background: #e0f2fe; color: #0369a1; }\n  .role-badge.assistant { background: #f0fdf4; color: #15803d; }\n  .role-badge.assistantHelper { background: #faf5ff; color: #7e22ce; }\n  .role-badge.system { background: #f1f5f9; color: #475569; }\n  .border-primary { border-color: var(--p-primary-color, #3b82f6); }\n</style>\n" }]
-        }] });
+        }], propDecorators: { service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }] } });
 
 class DcAgentCardDetailComponent extends EntityBaseDetailComponent {
     constructor() {
@@ -6186,11 +6504,11 @@ class DcAgentCardDetailComponent extends EntityBaseDetailComponent {
         this.selectedMotion.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcAgentCardDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcAgentCardDetailComponent, isStandalone: true, selector: "dc-agent-card-detail", inputs: { entityData: { classPropertyName: "entityData", publicName: "entityData", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isLoading()) {\n<div class=\"loading-state\">\n  <p-progressSpinner strokeWidth=\"4\" />\n</div>\n} @else if (entity()) {\n<div class=\"preview-container\">\n\n  <!-- Banner -->\n  @if (bannerUrl) {\n  <div class=\"preview-banner\">\n    <img class=\"banner-image\" [src]=\"bannerUrl\" alt=\"banner\" />\n  </div>\n  }\n\n  <!-- Header: image + name + meta -->\n  <div class=\"preview-header\" [class.has-banner]=\"bannerUrl\">\n    @if (entity()?.assets?.image?.url) {\n    <img class=\"preview-image\" [src]=\"entity()!.assets!.image!.url\" [alt]=\"characterData?.name || entity()?.name\" />\n    }\n    <div class=\"preview-header-info\">\n      <h2 class=\"preview-name\">{{ characterData?.name || entity()?.name }}</h2>\n\n      <div class=\"preview-meta-tags\">\n        @if (entity()?.lang) {\n        <p-tag [value]=\"entity()!.lang!\" severity=\"secondary\" icon=\"pi pi-flag\" />\n        }\n        @if (entity()?.manageable?.status) {\n        <p-tag [value]=\"entity()!.manageable!.status!\" severity=\"info\" icon=\"pi pi-circle-fill\" />\n        }\n        @if (characterData?.gender) {\n        <p-tag [value]=\"characterData!.gender\" severity=\"secondary\" icon=\"pi pi-user\" />\n        }\n        @if (entity()?.metaApp?.takenCount) {\n        <p-tag [value]=\"'Taken: ' + entity()!.metaApp!.takenCount\" severity=\"success\" icon=\"pi pi-users\" />\n        }\n        @if (learnableInfo?.level) {\n        <p-tag [value]=\"'Level ' + learnableInfo.level\" severity=\"warn\" icon=\"pi pi-star\" />\n        }\n        @if (learnableInfo?.takenCount) {\n        <p-tag [value]=\"'Played: ' + learnableInfo.takenCount\" severity=\"secondary\" icon=\"pi pi-play\" />\n        }\n      </div>\n\n      @if (characterData?.tags?.length) {\n      <div class=\"preview-tags\">\n        @for (tag of characterData!.tags; track tag) {\n        <p-tag [value]=\"tag\" severity=\"secondary\" />\n        }\n      </div>\n      }\n    </div>\n  </div>\n\n  <!-- Entity-level description -->\n  @if (entity()?.description) {\n  <div class=\"preview-entity-description\">\n    <p>{{ entity()!.description }}</p>\n  </div>\n  }\n\n  <!-- Motion Videos -->\n  @if (motions.length) {\n  <div class=\"preview-section motions-top-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-video\"></i> Motion Videos ({{ motions.length }})</h4>\n    <div class=\"motions-grid\">\n      @for (motion of motions; track $index) {\n        @if (motion.metadata?.moodState || motion.metadata?.event) {\n        <button class=\"motion-chip\" (click)=\"openMotionVideo(motion)\">\n          <i class=\"pi pi-play-circle\"></i>\n          <span>{{ motion.metadata?.moodState || motion.metadata?.event }}</span>\n        </button>\n        }\n      }\n    </div>\n  </div>\n  }\n\n  <p-divider />\n\n  @if (characterData?.hook) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-bookmark\"></i> Hook</h4>\n    <p>{{ characterData!.hook }}</p>\n  </div>\n  }\n\n  @if (characterData?.instructions) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-info-circle\"></i> Instructions</h4>\n    <p>{{ characterData!.instructions }}</p>\n  </div>\n  }\n\n  @if (characterData?.scenario) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-map\"></i> Scenario</h4>\n    <p>{{ characterData!.scenario }}</p>\n  </div>\n  }\n\n  @if (characterData?.creator_notes) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-file\"></i> Creator Notes</h4>\n    <p>{{ characterData!.creator_notes }}</p>\n  </div>\n  }\n\n  @if (characterData?.description) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-align-left\"></i> Description</h4>\n    <p>{{ characterData!.description }}</p>\n  </div>\n  }\n\n  @if (characterData?.greetings?.length) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-comments\"></i> Greetings</h4>\n    @for (greeting of characterData!.greetings; track $index) {\n    <p class=\"greeting-item\"><i class=\"pi pi-chevron-right\"></i> {{ greeting }}</p>\n    }\n  </div>\n  }\n\n\n  @if (persona) {\n  <p-divider />\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-id-card\"></i> Persona</h4>\n    <div class=\"persona-grid\">\n      @if (persona.identity) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Identity</span>\n        <span>{{ persona.identity }}</span>\n      </div>\n      }\n      @if (persona.physical) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Physical</span>\n        <span>{{ persona.physical }}</span>\n      </div>\n      }\n      @if (persona.personality) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Personality</span>\n        <span>{{ persona.personality }}</span>\n      </div>\n      }\n      @if (persona.communication) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Communication</span>\n        <span>{{ persona.communication }}</span>\n      </div>\n      }\n      @if (persona.background) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Background</span>\n        <span>{{ persona.background }}</span>\n      </div>\n      }\n      @if (persona.psychology) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Psychology</span>\n        <span>{{ persona.psychology }}</span>\n      </div>\n      }\n      @if (persona.capabilities) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Capabilities</span>\n        <span>{{ persona.capabilities }}</span>\n      </div>\n      }\n      @if (persona.social) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Social</span>\n        <span>{{ persona.social }}</span>\n      </div>\n      }\n      @if (persona.preferences) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Preferences</span>\n        <span>{{ persona.preferences }}</span>\n      </div>\n      }\n      @if (persona.situation) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Situation</span>\n        <span>{{ persona.situation }}</span>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Conversation Settings -->\n  @if (entity()?.conversationSettings) {\n  <p-divider />\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Conversation Settings</h4>\n    <div class=\"settings-chips\">\n      @if (entity()?.conversationSettings?.conversationType) {\n      <p-tag [value]=\"entity()!.conversationSettings!.conversationType!\" severity=\"info\" icon=\"pi pi-comments\" />\n      }\n      @if (entity()?.conversationSettings?.textEngine) {\n      <p-tag [value]=\"entity()!.conversationSettings!.textEngine!\" severity=\"secondary\" icon=\"pi pi-code\" />\n      }\n      @if (entity()?.conversationSettings?.autoStart) {\n      <p-tag value=\"Auto Start\" severity=\"success\" icon=\"pi pi-play\" />\n      }\n      @if (entity()?.conversationSettings?.userMustStart) {\n      <p-tag value=\"User Starts\" severity=\"warn\" icon=\"pi pi-user\" />\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Voices -->\n  @if (entity()?.conversationSettings?.mainVoice?.voice) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-volume-up\"></i> Voices</h4>\n    <div class=\"voice-info\">\n      <p><span class=\"field-label\">Main:</span> {{ entity()!.conversationSettings!.mainVoice!.voice }}</p>\n      @if (entity()?.conversationSettings?.secondaryVoice?.voice) {\n      <p><span class=\"field-label\">Secondary:</span> {{ entity()!.conversationSettings!.secondaryVoice!.voice }}</p>\n      }\n    </div>\n  </div>\n  }\n\n</div>\n}\n\n@if (entity()?.manageable) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Manageable</h4>\n  <div class=\"settings-chips\">\n    @if (entity()?.manageable?.status) {\n    <p-tag [value]=\"entity()!.manageable!.status!\" severity=\"info\" icon=\"pi pi-comments\" />\n    }\n    @if (entity()?.manageable?.isPublic) {\n    <p-tag [value]=\"'Public'\" severity=\"secondary\" icon=\"pi pi-code\" />\n    }\n  </div>\n</div>\n}\n\n@if (entity()?.learnable) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Learnable</h4>\n  <div class=\"settings-chips\">\n    @if (entity()?.learnable?.level) {\n    <p-tag [value]=\"'Level ' + entity()!.learnable!.level!\" severity=\"info\" icon=\"pi pi-comments\" />\n    }\n    @if (entity()?.learnable?.tags) {\n    <p-tag [value]=\"'Public'\" severity=\"secondary\" icon=\"pi pi-code\" />\n    }\n  </div>\n</div>\n}\n\n@if(entity()?.conversationFlow) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-tags\"></i> Conversation Flow</h4>\n\n  @if (entity()?.conversationFlow?.moodState) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-face-smile\"></i> Mood State</h5>\n    <div class=\"settings-chips\">\n      @if (entity()!.conversationFlow!.moodState!.enabled) {\n      <p-tag value=\"Enabled\" severity=\"success\" icon=\"pi pi-check\" />\n      } @else {\n      <p-tag value=\"Disabled\" severity=\"danger\" icon=\"pi pi-times\" />\n      }\n      @if (entity()!.conversationFlow!.moodState!.useAssetStatesOnly) {\n      <p-tag value=\"Asset States Only\" severity=\"warn\" icon=\"pi pi-images\" />\n      }\n    </div>\n    @if (entity()!.conversationFlow!.moodState!.detectableStates?.length) {\n    <div class=\"settings-chips\" style=\"margin-top: 0.5rem;\">\n      @for (state of entity()!.conversationFlow!.moodState!.detectableStates; track $index) {\n      <p-tag [value]=\"state\" severity=\"info\" icon=\"pi pi-tag\" />\n      }\n    </div>\n    }\n  </div>\n  }\n\n  @if (entity()?.conversationFlow?.dynamicConditions?.length) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-sliders-v\"></i> Dynamic Conditions</h5>\n    @for (condition of entity()!.conversationFlow!.dynamicConditions!; track $index) {\n    <div class=\"persona-field\" style=\"margin-bottom: 0.5rem;\">\n      <div class=\"settings-chips\">\n        <p-tag [value]=\"condition.what\" severity=\"info\" icon=\"pi pi-filter\" />\n        <p-tag [value]=\"condition.when\" severity=\"secondary\" />\n        <p-tag [value]=\"condition.value + ''\" severity=\"warn\" />\n      </div>\n      @if (condition.do?.length) {\n      <div class=\"settings-chips\" style=\"margin-top: 0.25rem;\">\n        @for (action of condition.do!; track $index) {\n        <p-tag [value]=\"action.actionType\" severity=\"contrast\" icon=\"pi pi-bolt\" />\n        @if (action.prompt) {\n        <span class=\"field-label\" style=\"font-size: 0.75rem;\">{{ action.prompt | slice:0:60 }}\u2026</span>\n        }\n        }\n      </div>\n      }\n    </div>\n    }\n  </div>\n  }\n\n  @if (entity()?.conversationFlow?.triggerTasks) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-bolt\"></i> Trigger Tasks</h5>\n    @for (entry of objectEntries(entity()!.conversationFlow!.triggerTasks!); track $index) {\n    <div class=\"persona-field\" style=\"margin-bottom: 0.5rem;\">\n      <span class=\"field-label\">{{ entry[0] }}</span>\n      <div class=\"settings-chips\" style=\"margin-top: 0.25rem;\">\n        @if (entry[1].enabled) {\n        <p-tag value=\"Enabled\" severity=\"success\" icon=\"pi pi-check\" />\n        } @else {\n        <p-tag value=\"Disabled\" severity=\"secondary\" icon=\"pi pi-times\" />\n        }\n        @if (entry[1].disableFeature) {\n        <p-tag value=\"Feature Disabled\" severity=\"danger\" icon=\"pi pi-ban\" />\n        }\n      </div>\n      @if (entry[1].task) {\n      <p style=\"font-size: 0.8rem; margin: 0.25rem 0 0;\">{{ entry[1].task | slice:0:120 }}\u2026</p>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n\n<!-- Video Dialog -->\n<p-dialog\n  [visible]=\"videoDialogVisible()\"\n  (visibleChange)=\"$event ? null : closeMotionVideo()\"\n  [header]=\"selectedMotion()?.metadata?.moodState || selectedMotion()?.metadata?.event || 'Video'\"\n  [modal]=\"true\"\n  [dismissableMask]=\"true\"\n  [closable]=\"true\"\n  styleClass=\"video-dialog\"\n  [style]=\"{ width: '560px' }\">\n\n  @if (selectedMotion()?.url) {\n  <video\n    class=\"motion-video\"\n    [src]=\"selectedMotion().url\"\n    controls\n    autoplay>\n  </video>\n  }\n</p-dialog>\n", styles: [".preview-container{padding:.5rem}.preview-banner{width:100%;height:210px;overflow:hidden;border-radius:8px;margin-bottom:0}.banner-image{width:100%;height:100%;object-fit:cover;display:block}.preview-header{display:flex;gap:1.5rem;align-items:flex-start;padding:1rem 0 .5rem}.preview-header.has-banner{padding-top:.75rem}.preview-image{width:120px;height:170px;object-fit:cover;border-radius:8px;flex-shrink:0;box-shadow:0 2px 8px #00000026}.preview-header-info{display:flex;flex-direction:column;gap:.5rem}.preview-name{margin:0 0 .25rem;font-size:1.5rem;font-weight:700}.preview-meta-tags{display:flex;flex-wrap:wrap;gap:.35rem}.preview-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}.preview-entity-description{color:var(--p-text-muted-color);font-size:.9rem;margin:.5rem 0}.preview-entity-description p{margin:0}.preview-section{margin-bottom:1rem}.section-title{margin:0 0 .5rem;font-size:.95rem;font-weight:600;color:var(--p-text-muted-color);display:flex;align-items:center;gap:.4rem}.greeting-item{margin:.25rem 0;padding-left:.5rem;border-left:2px solid var(--p-primary-color)}.first-message{background:var(--p-surface-100);border-radius:6px;padding:.75rem;font-style:italic}.persona-grid{display:flex;flex-direction:column;gap:.5rem}.persona-field{display:flex;flex-direction:column;gap:.15rem}.field-label{font-size:.8rem;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.05em}.motions-top-section{margin-top:.75rem;margin-bottom:0}.motions-grid{display:flex;flex-wrap:wrap;gap:.4rem}.motion-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:20px;border:1px solid var(--p-surface-300);background:var(--p-surface-100);color:var(--p-text-color);font-size:.8rem;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-transform:capitalize}.motion-chip i{font-size:.85rem;color:var(--p-primary-color)}.motion-chip:hover{background:var(--p-primary-50, #f0f4ff);border-color:var(--p-primary-color);transform:translateY(-1px)}.motion-chip:active{transform:translateY(0)}.motion-video{width:100%;border-radius:6px;display:block}.settings-chips{display:flex;flex-wrap:wrap;gap:.4rem}.voice-info{display:flex;flex-direction:column;gap:.25rem}.loading-state{display:flex;justify-content:center;padding:2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i1$4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i2$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i2$4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcAgentCardDetailComponent, isStandalone: true, selector: "dc-agent-card-detail", inputs: { entityData: { classPropertyName: "entityData", publicName: "entityData", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isLoading()) {\n<div class=\"loading-state\">\n  <p-progressSpinner strokeWidth=\"4\" />\n</div>\n} @else if (entity()) {\n<div class=\"preview-container\">\n\n  <!-- Banner -->\n  @if (bannerUrl) {\n  <div class=\"preview-banner\">\n    <img class=\"banner-image\" [src]=\"bannerUrl\" alt=\"banner\" />\n  </div>\n  }\n\n  <!-- Header: image + name + meta -->\n  <div class=\"preview-header\" [class.has-banner]=\"bannerUrl\">\n    @if (entity()?.assets?.image?.url) {\n    <img class=\"preview-image\" [src]=\"entity()!.assets!.image!.url\" [alt]=\"characterData?.name || entity()?.name\" />\n    }\n    <div class=\"preview-header-info\">\n      <h2 class=\"preview-name\">{{ characterData?.name || entity()?.name }}</h2>\n\n      <div class=\"preview-meta-tags\">\n        @if (entity()?.lang) {\n        <p-tag [value]=\"entity()!.lang!\" severity=\"secondary\" icon=\"pi pi-flag\" />\n        }\n        @if (entity()?.manageable?.status) {\n        <p-tag [value]=\"entity()!.manageable!.status!\" severity=\"info\" icon=\"pi pi-circle-fill\" />\n        }\n        @if (characterData?.gender) {\n        <p-tag [value]=\"characterData!.gender\" severity=\"secondary\" icon=\"pi pi-user\" />\n        }\n        @if (entity()?.metaApp?.takenCount) {\n        <p-tag [value]=\"'Taken: ' + entity()!.metaApp!.takenCount\" severity=\"success\" icon=\"pi pi-users\" />\n        }\n        @if (learnableInfo?.level) {\n        <p-tag [value]=\"'Level ' + learnableInfo.level\" severity=\"warn\" icon=\"pi pi-star\" />\n        }\n        @if (learnableInfo?.takenCount) {\n        <p-tag [value]=\"'Played: ' + learnableInfo.takenCount\" severity=\"secondary\" icon=\"pi pi-play\" />\n        }\n      </div>\n\n      @if (characterData?.tags?.length) {\n      <div class=\"preview-tags\">\n        @for (tag of characterData!.tags; track tag) {\n        <p-tag [value]=\"tag\" severity=\"secondary\" />\n        }\n      </div>\n      }\n    </div>\n  </div>\n\n  <!-- Entity-level description -->\n  @if (entity()?.description) {\n  <div class=\"preview-entity-description\">\n    <p>{{ entity()!.description }}</p>\n  </div>\n  }\n\n  <!-- Motion Videos -->\n  @if (motions.length) {\n  <div class=\"preview-section motions-top-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-video\"></i> Motion Videos ({{ motions.length }})</h4>\n    <div class=\"motions-grid\">\n      @for (motion of motions; track $index) {\n        @if (motion.metadata?.moodState || motion.metadata?.event) {\n        <button class=\"motion-chip\" (click)=\"openMotionVideo(motion)\">\n          <i class=\"pi pi-play-circle\"></i>\n          <span>{{ motion.metadata?.moodState || motion.metadata?.event }}</span>\n        </button>\n        }\n      }\n    </div>\n  </div>\n  }\n\n  <p-divider />\n\n  @if (characterData?.hook) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-bookmark\"></i> Hook</h4>\n    <p>{{ characterData!.hook }}</p>\n  </div>\n  }\n\n  @if (characterData?.instructions) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-info-circle\"></i> Instructions</h4>\n    <p>{{ characterData!.instructions }}</p>\n  </div>\n  }\n\n  @if (characterData?.scenario) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-map\"></i> Scenario</h4>\n    <p>{{ characterData!.scenario }}</p>\n  </div>\n  }\n\n  @if (characterData?.creator_notes) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-file\"></i> Creator Notes</h4>\n    <p>{{ characterData!.creator_notes }}</p>\n  </div>\n  }\n\n  @if (characterData?.description) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-align-left\"></i> Description</h4>\n    <p>{{ characterData!.description }}</p>\n  </div>\n  }\n\n  @if (characterData?.greetings?.length) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-comments\"></i> Greetings</h4>\n    @for (greeting of characterData!.greetings; track $index) {\n    <p class=\"greeting-item\"><i class=\"pi pi-chevron-right\"></i> {{ greeting }}</p>\n    }\n  </div>\n  }\n\n\n  @if (persona) {\n  <p-divider />\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-id-card\"></i> Persona</h4>\n    <div class=\"persona-grid\">\n      @if (persona.identity) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Identity</span>\n        <span>{{ persona.identity }}</span>\n      </div>\n      }\n      @if (persona.physical) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Physical</span>\n        <span>{{ persona.physical }}</span>\n      </div>\n      }\n      @if (persona.personality) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Personality</span>\n        <span>{{ persona.personality }}</span>\n      </div>\n      }\n      @if (persona.communication) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Communication</span>\n        <span>{{ persona.communication }}</span>\n      </div>\n      }\n      @if (persona.background) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Background</span>\n        <span>{{ persona.background }}</span>\n      </div>\n      }\n      @if (persona.psychology) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Psychology</span>\n        <span>{{ persona.psychology }}</span>\n      </div>\n      }\n      @if (persona.capabilities) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Capabilities</span>\n        <span>{{ persona.capabilities }}</span>\n      </div>\n      }\n      @if (persona.social) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Social</span>\n        <span>{{ persona.social }}</span>\n      </div>\n      }\n      @if (persona.preferences) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Preferences</span>\n        <span>{{ persona.preferences }}</span>\n      </div>\n      }\n      @if (persona.situation) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Situation</span>\n        <span>{{ persona.situation }}</span>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Conversation Settings -->\n  @if (entity()?.conversationSettings) {\n  <p-divider />\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Conversation Settings</h4>\n    <div class=\"settings-chips\">\n      @if (entity()?.conversationSettings?.conversationType) {\n      <p-tag [value]=\"entity()!.conversationSettings!.conversationType!\" severity=\"info\" icon=\"pi pi-comments\" />\n      }\n      @if (entity()?.conversationSettings?.textEngine) {\n      <p-tag [value]=\"entity()!.conversationSettings!.textEngine!\" severity=\"secondary\" icon=\"pi pi-code\" />\n      }\n      @if (entity()?.conversationSettings?.autoStart) {\n      <p-tag value=\"Auto Start\" severity=\"success\" icon=\"pi pi-play\" />\n      }\n      @if (entity()?.conversationSettings?.userMustStart) {\n      <p-tag value=\"User Starts\" severity=\"warn\" icon=\"pi pi-user\" />\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Voices -->\n  @if (entity()?.voice?.main?.voice || entity()?.conversationSettings?.mainVoice?.voice) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-volume-up\"></i> Voices</h4>\n    <div class=\"voice-info\">\n      <p><span class=\"field-label\">Main:</span> {{ entity()?.voice?.main?.voice || entity()?.conversationSettings?.mainVoice?.voice }}</p>\n      @if (entity()?.voice?.secondary?.voice || entity()?.conversationSettings?.secondaryVoice?.voice) {\n      <p><span class=\"field-label\">Secondary:</span> {{ entity()?.voice?.secondary?.voice || entity()?.conversationSettings?.secondaryVoice?.voice }}</p>\n      }\n    </div>\n  </div>\n  }\n\n</div>\n}\n\n@if (entity()?.manageable) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Manageable</h4>\n  <div class=\"settings-chips\">\n    @if (entity()?.manageable?.status) {\n    <p-tag [value]=\"entity()!.manageable!.status!\" severity=\"info\" icon=\"pi pi-comments\" />\n    }\n    @if (entity()?.manageable?.isPublic) {\n    <p-tag [value]=\"'Public'\" severity=\"secondary\" icon=\"pi pi-code\" />\n    }\n  </div>\n</div>\n}\n\n@if (entity()?.learnable) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Learnable</h4>\n  <div class=\"settings-chips\">\n    @if (entity()?.learnable?.level) {\n    <p-tag [value]=\"'Level ' + entity()!.learnable!.level!\" severity=\"info\" icon=\"pi pi-comments\" />\n    }\n    @if (entity()?.learnable?.tags) {\n    <p-tag [value]=\"'Public'\" severity=\"secondary\" icon=\"pi pi-code\" />\n    }\n  </div>\n</div>\n}\n\n@if(entity()?.conversationFlow) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-tags\"></i> Conversation Flow</h4>\n\n  @if (entity()?.conversationFlow?.moodState) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-face-smile\"></i> Mood State</h5>\n    <div class=\"settings-chips\">\n      @if (entity()!.conversationFlow!.moodState!.enabled) {\n      <p-tag value=\"Enabled\" severity=\"success\" icon=\"pi pi-check\" />\n      } @else {\n      <p-tag value=\"Disabled\" severity=\"danger\" icon=\"pi pi-times\" />\n      }\n      @if (entity()!.conversationFlow!.moodState!.useAssetStatesOnly) {\n      <p-tag value=\"Asset States Only\" severity=\"warn\" icon=\"pi pi-images\" />\n      }\n    </div>\n    @if (entity()!.conversationFlow!.moodState!.detectableStates?.length) {\n    <div class=\"settings-chips\" style=\"margin-top: 0.5rem;\">\n      @for (state of entity()!.conversationFlow!.moodState!.detectableStates; track $index) {\n      <p-tag [value]=\"state\" severity=\"info\" icon=\"pi pi-tag\" />\n      }\n    </div>\n    }\n  </div>\n  }\n\n  @if (entity()?.conversationFlow?.dynamicConditions?.length) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-sliders-v\"></i> Dynamic Conditions</h5>\n    @for (condition of entity()!.conversationFlow!.dynamicConditions!; track $index) {\n    <div class=\"persona-field\" style=\"margin-bottom: 0.5rem;\">\n      <div class=\"settings-chips\">\n        <p-tag [value]=\"condition.what\" severity=\"info\" icon=\"pi pi-filter\" />\n        <p-tag [value]=\"condition.when\" severity=\"secondary\" />\n        <p-tag [value]=\"condition.value + ''\" severity=\"warn\" />\n      </div>\n      @if (condition.do?.length) {\n      <div class=\"settings-chips\" style=\"margin-top: 0.25rem;\">\n        @for (action of condition.do!; track $index) {\n        <p-tag [value]=\"action.actionType\" severity=\"contrast\" icon=\"pi pi-bolt\" />\n        @if (action.prompt) {\n        <span class=\"field-label\" style=\"font-size: 0.75rem;\">{{ action.prompt | slice:0:60 }}\u2026</span>\n        }\n        }\n      </div>\n      }\n    </div>\n    }\n  </div>\n  }\n\n  @if (entity()?.conversationFlow?.triggerTasks) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-bolt\"></i> Trigger Tasks</h5>\n    @for (entry of objectEntries(entity()!.conversationFlow!.triggerTasks!); track $index) {\n    <div class=\"persona-field\" style=\"margin-bottom: 0.5rem;\">\n      <span class=\"field-label\">{{ entry[0] }}</span>\n      <div class=\"settings-chips\" style=\"margin-top: 0.25rem;\">\n        @if (entry[1].enabled) {\n        <p-tag value=\"Enabled\" severity=\"success\" icon=\"pi pi-check\" />\n        } @else {\n        <p-tag value=\"Disabled\" severity=\"secondary\" icon=\"pi pi-times\" />\n        }\n        @if (entry[1].disableFeature) {\n        <p-tag value=\"Feature Disabled\" severity=\"danger\" icon=\"pi pi-ban\" />\n        }\n      </div>\n      @if (entry[1].task) {\n      <p style=\"font-size: 0.8rem; margin: 0.25rem 0 0;\">{{ entry[1].task | slice:0:120 }}\u2026</p>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n\n<!-- Video Dialog -->\n<p-dialog\n  [visible]=\"videoDialogVisible()\"\n  (visibleChange)=\"$event ? null : closeMotionVideo()\"\n  [header]=\"selectedMotion()?.metadata?.moodState || selectedMotion()?.metadata?.event || 'Video'\"\n  [modal]=\"true\"\n  [dismissableMask]=\"true\"\n  [closable]=\"true\"\n  styleClass=\"video-dialog\"\n  [style]=\"{ width: '560px' }\">\n\n  @if (selectedMotion()?.url) {\n  <video\n    class=\"motion-video\"\n    [src]=\"selectedMotion().url\"\n    controls\n    autoplay>\n  </video>\n  }\n</p-dialog>\n", styles: [".preview-container{padding:.5rem}.preview-banner{width:100%;height:210px;overflow:hidden;border-radius:8px;margin-bottom:0}.banner-image{width:100%;height:100%;object-fit:cover;display:block}.preview-header{display:flex;gap:1.5rem;align-items:flex-start;padding:1rem 0 .5rem}.preview-header.has-banner{padding-top:.75rem}.preview-image{width:120px;height:170px;object-fit:cover;border-radius:8px;flex-shrink:0;box-shadow:0 2px 8px #00000026}.preview-header-info{display:flex;flex-direction:column;gap:.5rem}.preview-name{margin:0 0 .25rem;font-size:1.5rem;font-weight:700}.preview-meta-tags{display:flex;flex-wrap:wrap;gap:.35rem}.preview-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}.preview-entity-description{color:var(--p-text-muted-color);font-size:.9rem;margin:.5rem 0}.preview-entity-description p{margin:0}.preview-section{margin-bottom:1rem}.section-title{margin:0 0 .5rem;font-size:.95rem;font-weight:600;color:var(--p-text-muted-color);display:flex;align-items:center;gap:.4rem}.greeting-item{margin:.25rem 0;padding-left:.5rem;border-left:2px solid var(--p-primary-color)}.first-message{background:var(--p-surface-100);border-radius:6px;padding:.75rem;font-style:italic}.persona-grid{display:flex;flex-direction:column;gap:.5rem}.persona-field{display:flex;flex-direction:column;gap:.15rem}.field-label{font-size:.8rem;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.05em}.motions-top-section{margin-top:.75rem;margin-bottom:0}.motions-grid{display:flex;flex-wrap:wrap;gap:.4rem}.motion-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:20px;border:1px solid var(--p-surface-300);background:var(--p-surface-100);color:var(--p-text-color);font-size:.8rem;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-transform:capitalize}.motion-chip i{font-size:.85rem;color:var(--p-primary-color)}.motion-chip:hover{background:var(--p-primary-50, #f0f4ff);border-color:var(--p-primary-color);transform:translateY(-1px)}.motion-chip:active{transform:translateY(0)}.motion-video{width:100%;border-radius:6px;display:block}.settings-chips{display:flex;flex-wrap:wrap;gap:.4rem}.voice-info{display:flex;flex-direction:column;gap:.25rem}.loading-state{display:flex;justify-content:center;padding:2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i1$4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i2$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i2$4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcAgentCardDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-detail', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CardModule, TagModule, DividerModule, ProgressSpinnerModule, DialogModule, ButtonModule], template: "@if (isLoading()) {\n<div class=\"loading-state\">\n  <p-progressSpinner strokeWidth=\"4\" />\n</div>\n} @else if (entity()) {\n<div class=\"preview-container\">\n\n  <!-- Banner -->\n  @if (bannerUrl) {\n  <div class=\"preview-banner\">\n    <img class=\"banner-image\" [src]=\"bannerUrl\" alt=\"banner\" />\n  </div>\n  }\n\n  <!-- Header: image + name + meta -->\n  <div class=\"preview-header\" [class.has-banner]=\"bannerUrl\">\n    @if (entity()?.assets?.image?.url) {\n    <img class=\"preview-image\" [src]=\"entity()!.assets!.image!.url\" [alt]=\"characterData?.name || entity()?.name\" />\n    }\n    <div class=\"preview-header-info\">\n      <h2 class=\"preview-name\">{{ characterData?.name || entity()?.name }}</h2>\n\n      <div class=\"preview-meta-tags\">\n        @if (entity()?.lang) {\n        <p-tag [value]=\"entity()!.lang!\" severity=\"secondary\" icon=\"pi pi-flag\" />\n        }\n        @if (entity()?.manageable?.status) {\n        <p-tag [value]=\"entity()!.manageable!.status!\" severity=\"info\" icon=\"pi pi-circle-fill\" />\n        }\n        @if (characterData?.gender) {\n        <p-tag [value]=\"characterData!.gender\" severity=\"secondary\" icon=\"pi pi-user\" />\n        }\n        @if (entity()?.metaApp?.takenCount) {\n        <p-tag [value]=\"'Taken: ' + entity()!.metaApp!.takenCount\" severity=\"success\" icon=\"pi pi-users\" />\n        }\n        @if (learnableInfo?.level) {\n        <p-tag [value]=\"'Level ' + learnableInfo.level\" severity=\"warn\" icon=\"pi pi-star\" />\n        }\n        @if (learnableInfo?.takenCount) {\n        <p-tag [value]=\"'Played: ' + learnableInfo.takenCount\" severity=\"secondary\" icon=\"pi pi-play\" />\n        }\n      </div>\n\n      @if (characterData?.tags?.length) {\n      <div class=\"preview-tags\">\n        @for (tag of characterData!.tags; track tag) {\n        <p-tag [value]=\"tag\" severity=\"secondary\" />\n        }\n      </div>\n      }\n    </div>\n  </div>\n\n  <!-- Entity-level description -->\n  @if (entity()?.description) {\n  <div class=\"preview-entity-description\">\n    <p>{{ entity()!.description }}</p>\n  </div>\n  }\n\n  <!-- Motion Videos -->\n  @if (motions.length) {\n  <div class=\"preview-section motions-top-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-video\"></i> Motion Videos ({{ motions.length }})</h4>\n    <div class=\"motions-grid\">\n      @for (motion of motions; track $index) {\n        @if (motion.metadata?.moodState || motion.metadata?.event) {\n        <button class=\"motion-chip\" (click)=\"openMotionVideo(motion)\">\n          <i class=\"pi pi-play-circle\"></i>\n          <span>{{ motion.metadata?.moodState || motion.metadata?.event }}</span>\n        </button>\n        }\n      }\n    </div>\n  </div>\n  }\n\n  <p-divider />\n\n  @if (characterData?.hook) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-bookmark\"></i> Hook</h4>\n    <p>{{ characterData!.hook }}</p>\n  </div>\n  }\n\n  @if (characterData?.instructions) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-info-circle\"></i> Instructions</h4>\n    <p>{{ characterData!.instructions }}</p>\n  </div>\n  }\n\n  @if (characterData?.scenario) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-map\"></i> Scenario</h4>\n    <p>{{ characterData!.scenario }}</p>\n  </div>\n  }\n\n  @if (characterData?.creator_notes) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-file\"></i> Creator Notes</h4>\n    <p>{{ characterData!.creator_notes }}</p>\n  </div>\n  }\n\n  @if (characterData?.description) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-align-left\"></i> Description</h4>\n    <p>{{ characterData!.description }}</p>\n  </div>\n  }\n\n  @if (characterData?.greetings?.length) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-comments\"></i> Greetings</h4>\n    @for (greeting of characterData!.greetings; track $index) {\n    <p class=\"greeting-item\"><i class=\"pi pi-chevron-right\"></i> {{ greeting }}</p>\n    }\n  </div>\n  }\n\n\n  @if (persona) {\n  <p-divider />\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-id-card\"></i> Persona</h4>\n    <div class=\"persona-grid\">\n      @if (persona.identity) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Identity</span>\n        <span>{{ persona.identity }}</span>\n      </div>\n      }\n      @if (persona.physical) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Physical</span>\n        <span>{{ persona.physical }}</span>\n      </div>\n      }\n      @if (persona.personality) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Personality</span>\n        <span>{{ persona.personality }}</span>\n      </div>\n      }\n      @if (persona.communication) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Communication</span>\n        <span>{{ persona.communication }}</span>\n      </div>\n      }\n      @if (persona.background) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Background</span>\n        <span>{{ persona.background }}</span>\n      </div>\n      }\n      @if (persona.psychology) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Psychology</span>\n        <span>{{ persona.psychology }}</span>\n      </div>\n      }\n      @if (persona.capabilities) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Capabilities</span>\n        <span>{{ persona.capabilities }}</span>\n      </div>\n      }\n      @if (persona.social) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Social</span>\n        <span>{{ persona.social }}</span>\n      </div>\n      }\n      @if (persona.preferences) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Preferences</span>\n        <span>{{ persona.preferences }}</span>\n      </div>\n      }\n      @if (persona.situation) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Situation</span>\n        <span>{{ persona.situation }}</span>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Conversation Settings -->\n  @if (entity()?.conversationSettings) {\n  <p-divider />\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Conversation Settings</h4>\n    <div class=\"settings-chips\">\n      @if (entity()?.conversationSettings?.conversationType) {\n      <p-tag [value]=\"entity()!.conversationSettings!.conversationType!\" severity=\"info\" icon=\"pi pi-comments\" />\n      }\n      @if (entity()?.conversationSettings?.textEngine) {\n      <p-tag [value]=\"entity()!.conversationSettings!.textEngine!\" severity=\"secondary\" icon=\"pi pi-code\" />\n      }\n      @if (entity()?.conversationSettings?.autoStart) {\n      <p-tag value=\"Auto Start\" severity=\"success\" icon=\"pi pi-play\" />\n      }\n      @if (entity()?.conversationSettings?.userMustStart) {\n      <p-tag value=\"User Starts\" severity=\"warn\" icon=\"pi pi-user\" />\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Voices -->\n  @if (entity()?.conversationSettings?.mainVoice?.voice) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-volume-up\"></i> Voices</h4>\n    <div class=\"voice-info\">\n      <p><span class=\"field-label\">Main:</span> {{ entity()!.conversationSettings!.mainVoice!.voice }}</p>\n      @if (entity()?.conversationSettings?.secondaryVoice?.voice) {\n      <p><span class=\"field-label\">Secondary:</span> {{ entity()!.conversationSettings!.secondaryVoice!.voice }}</p>\n      }\n    </div>\n  </div>\n  }\n\n</div>\n}\n\n@if (entity()?.manageable) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Manageable</h4>\n  <div class=\"settings-chips\">\n    @if (entity()?.manageable?.status) {\n    <p-tag [value]=\"entity()!.manageable!.status!\" severity=\"info\" icon=\"pi pi-comments\" />\n    }\n    @if (entity()?.manageable?.isPublic) {\n    <p-tag [value]=\"'Public'\" severity=\"secondary\" icon=\"pi pi-code\" />\n    }\n  </div>\n</div>\n}\n\n@if (entity()?.learnable) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Learnable</h4>\n  <div class=\"settings-chips\">\n    @if (entity()?.learnable?.level) {\n    <p-tag [value]=\"'Level ' + entity()!.learnable!.level!\" severity=\"info\" icon=\"pi pi-comments\" />\n    }\n    @if (entity()?.learnable?.tags) {\n    <p-tag [value]=\"'Public'\" severity=\"secondary\" icon=\"pi pi-code\" />\n    }\n  </div>\n</div>\n}\n\n@if(entity()?.conversationFlow) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-tags\"></i> Conversation Flow</h4>\n\n  @if (entity()?.conversationFlow?.moodState) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-face-smile\"></i> Mood State</h5>\n    <div class=\"settings-chips\">\n      @if (entity()!.conversationFlow!.moodState!.enabled) {\n      <p-tag value=\"Enabled\" severity=\"success\" icon=\"pi pi-check\" />\n      } @else {\n      <p-tag value=\"Disabled\" severity=\"danger\" icon=\"pi pi-times\" />\n      }\n      @if (entity()!.conversationFlow!.moodState!.useAssetStatesOnly) {\n      <p-tag value=\"Asset States Only\" severity=\"warn\" icon=\"pi pi-images\" />\n      }\n    </div>\n    @if (entity()!.conversationFlow!.moodState!.detectableStates?.length) {\n    <div class=\"settings-chips\" style=\"margin-top: 0.5rem;\">\n      @for (state of entity()!.conversationFlow!.moodState!.detectableStates; track $index) {\n      <p-tag [value]=\"state\" severity=\"info\" icon=\"pi pi-tag\" />\n      }\n    </div>\n    }\n  </div>\n  }\n\n  @if (entity()?.conversationFlow?.dynamicConditions?.length) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-sliders-v\"></i> Dynamic Conditions</h5>\n    @for (condition of entity()!.conversationFlow!.dynamicConditions!; track $index) {\n    <div class=\"persona-field\" style=\"margin-bottom: 0.5rem;\">\n      <div class=\"settings-chips\">\n        <p-tag [value]=\"condition.what\" severity=\"info\" icon=\"pi pi-filter\" />\n        <p-tag [value]=\"condition.when\" severity=\"secondary\" />\n        <p-tag [value]=\"condition.value + ''\" severity=\"warn\" />\n      </div>\n      @if (condition.do?.length) {\n      <div class=\"settings-chips\" style=\"margin-top: 0.25rem;\">\n        @for (action of condition.do!; track $index) {\n        <p-tag [value]=\"action.actionType\" severity=\"contrast\" icon=\"pi pi-bolt\" />\n        @if (action.prompt) {\n        <span class=\"field-label\" style=\"font-size: 0.75rem;\">{{ action.prompt | slice:0:60 }}\u2026</span>\n        }\n        }\n      </div>\n      }\n    </div>\n    }\n  </div>\n  }\n\n  @if (entity()?.conversationFlow?.triggerTasks) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-bolt\"></i> Trigger Tasks</h5>\n    @for (entry of objectEntries(entity()!.conversationFlow!.triggerTasks!); track $index) {\n    <div class=\"persona-field\" style=\"margin-bottom: 0.5rem;\">\n      <span class=\"field-label\">{{ entry[0] }}</span>\n      <div class=\"settings-chips\" style=\"margin-top: 0.25rem;\">\n        @if (entry[1].enabled) {\n        <p-tag value=\"Enabled\" severity=\"success\" icon=\"pi pi-check\" />\n        } @else {\n        <p-tag value=\"Disabled\" severity=\"secondary\" icon=\"pi pi-times\" />\n        }\n        @if (entry[1].disableFeature) {\n        <p-tag value=\"Feature Disabled\" severity=\"danger\" icon=\"pi pi-ban\" />\n        }\n      </div>\n      @if (entry[1].task) {\n      <p style=\"font-size: 0.8rem; margin: 0.25rem 0 0;\">{{ entry[1].task | slice:0:120 }}\u2026</p>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n\n<!-- Video Dialog -->\n<p-dialog\n  [visible]=\"videoDialogVisible()\"\n  (visibleChange)=\"$event ? null : closeMotionVideo()\"\n  [header]=\"selectedMotion()?.metadata?.moodState || selectedMotion()?.metadata?.event || 'Video'\"\n  [modal]=\"true\"\n  [dismissableMask]=\"true\"\n  [closable]=\"true\"\n  styleClass=\"video-dialog\"\n  [style]=\"{ width: '560px' }\">\n\n  @if (selectedMotion()?.url) {\n  <video\n    class=\"motion-video\"\n    [src]=\"selectedMotion().url\"\n    controls\n    autoplay>\n  </video>\n  }\n</p-dialog>\n", styles: [".preview-container{padding:.5rem}.preview-banner{width:100%;height:210px;overflow:hidden;border-radius:8px;margin-bottom:0}.banner-image{width:100%;height:100%;object-fit:cover;display:block}.preview-header{display:flex;gap:1.5rem;align-items:flex-start;padding:1rem 0 .5rem}.preview-header.has-banner{padding-top:.75rem}.preview-image{width:120px;height:170px;object-fit:cover;border-radius:8px;flex-shrink:0;box-shadow:0 2px 8px #00000026}.preview-header-info{display:flex;flex-direction:column;gap:.5rem}.preview-name{margin:0 0 .25rem;font-size:1.5rem;font-weight:700}.preview-meta-tags{display:flex;flex-wrap:wrap;gap:.35rem}.preview-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}.preview-entity-description{color:var(--p-text-muted-color);font-size:.9rem;margin:.5rem 0}.preview-entity-description p{margin:0}.preview-section{margin-bottom:1rem}.section-title{margin:0 0 .5rem;font-size:.95rem;font-weight:600;color:var(--p-text-muted-color);display:flex;align-items:center;gap:.4rem}.greeting-item{margin:.25rem 0;padding-left:.5rem;border-left:2px solid var(--p-primary-color)}.first-message{background:var(--p-surface-100);border-radius:6px;padding:.75rem;font-style:italic}.persona-grid{display:flex;flex-direction:column;gap:.5rem}.persona-field{display:flex;flex-direction:column;gap:.15rem}.field-label{font-size:.8rem;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.05em}.motions-top-section{margin-top:.75rem;margin-bottom:0}.motions-grid{display:flex;flex-wrap:wrap;gap:.4rem}.motion-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:20px;border:1px solid var(--p-surface-300);background:var(--p-surface-100);color:var(--p-text-color);font-size:.8rem;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-transform:capitalize}.motion-chip i{font-size:.85rem;color:var(--p-primary-color)}.motion-chip:hover{background:var(--p-primary-50, #f0f4ff);border-color:var(--p-primary-color);transform:translateY(-1px)}.motion-chip:active{transform:translateY(0)}.motion-video{width:100%;border-radius:6px;display:block}.settings-chips{display:flex;flex-wrap:wrap;gap:.4rem}.voice-info{display:flex;flex-direction:column;gap:.25rem}.loading-state{display:flex;justify-content:center;padding:2rem}\n"] }]
+            args: [{ selector: 'dc-agent-card-detail', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CardModule, TagModule, DividerModule, ProgressSpinnerModule, DialogModule, ButtonModule], template: "@if (isLoading()) {\n<div class=\"loading-state\">\n  <p-progressSpinner strokeWidth=\"4\" />\n</div>\n} @else if (entity()) {\n<div class=\"preview-container\">\n\n  <!-- Banner -->\n  @if (bannerUrl) {\n  <div class=\"preview-banner\">\n    <img class=\"banner-image\" [src]=\"bannerUrl\" alt=\"banner\" />\n  </div>\n  }\n\n  <!-- Header: image + name + meta -->\n  <div class=\"preview-header\" [class.has-banner]=\"bannerUrl\">\n    @if (entity()?.assets?.image?.url) {\n    <img class=\"preview-image\" [src]=\"entity()!.assets!.image!.url\" [alt]=\"characterData?.name || entity()?.name\" />\n    }\n    <div class=\"preview-header-info\">\n      <h2 class=\"preview-name\">{{ characterData?.name || entity()?.name }}</h2>\n\n      <div class=\"preview-meta-tags\">\n        @if (entity()?.lang) {\n        <p-tag [value]=\"entity()!.lang!\" severity=\"secondary\" icon=\"pi pi-flag\" />\n        }\n        @if (entity()?.manageable?.status) {\n        <p-tag [value]=\"entity()!.manageable!.status!\" severity=\"info\" icon=\"pi pi-circle-fill\" />\n        }\n        @if (characterData?.gender) {\n        <p-tag [value]=\"characterData!.gender\" severity=\"secondary\" icon=\"pi pi-user\" />\n        }\n        @if (entity()?.metaApp?.takenCount) {\n        <p-tag [value]=\"'Taken: ' + entity()!.metaApp!.takenCount\" severity=\"success\" icon=\"pi pi-users\" />\n        }\n        @if (learnableInfo?.level) {\n        <p-tag [value]=\"'Level ' + learnableInfo.level\" severity=\"warn\" icon=\"pi pi-star\" />\n        }\n        @if (learnableInfo?.takenCount) {\n        <p-tag [value]=\"'Played: ' + learnableInfo.takenCount\" severity=\"secondary\" icon=\"pi pi-play\" />\n        }\n      </div>\n\n      @if (characterData?.tags?.length) {\n      <div class=\"preview-tags\">\n        @for (tag of characterData!.tags; track tag) {\n        <p-tag [value]=\"tag\" severity=\"secondary\" />\n        }\n      </div>\n      }\n    </div>\n  </div>\n\n  <!-- Entity-level description -->\n  @if (entity()?.description) {\n  <div class=\"preview-entity-description\">\n    <p>{{ entity()!.description }}</p>\n  </div>\n  }\n\n  <!-- Motion Videos -->\n  @if (motions.length) {\n  <div class=\"preview-section motions-top-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-video\"></i> Motion Videos ({{ motions.length }})</h4>\n    <div class=\"motions-grid\">\n      @for (motion of motions; track $index) {\n        @if (motion.metadata?.moodState || motion.metadata?.event) {\n        <button class=\"motion-chip\" (click)=\"openMotionVideo(motion)\">\n          <i class=\"pi pi-play-circle\"></i>\n          <span>{{ motion.metadata?.moodState || motion.metadata?.event }}</span>\n        </button>\n        }\n      }\n    </div>\n  </div>\n  }\n\n  <p-divider />\n\n  @if (characterData?.hook) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-bookmark\"></i> Hook</h4>\n    <p>{{ characterData!.hook }}</p>\n  </div>\n  }\n\n  @if (characterData?.instructions) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-info-circle\"></i> Instructions</h4>\n    <p>{{ characterData!.instructions }}</p>\n  </div>\n  }\n\n  @if (characterData?.scenario) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-map\"></i> Scenario</h4>\n    <p>{{ characterData!.scenario }}</p>\n  </div>\n  }\n\n  @if (characterData?.creator_notes) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-file\"></i> Creator Notes</h4>\n    <p>{{ characterData!.creator_notes }}</p>\n  </div>\n  }\n\n  @if (characterData?.description) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-align-left\"></i> Description</h4>\n    <p>{{ characterData!.description }}</p>\n  </div>\n  }\n\n  @if (characterData?.greetings?.length) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-comments\"></i> Greetings</h4>\n    @for (greeting of characterData!.greetings; track $index) {\n    <p class=\"greeting-item\"><i class=\"pi pi-chevron-right\"></i> {{ greeting }}</p>\n    }\n  </div>\n  }\n\n\n  @if (persona) {\n  <p-divider />\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-id-card\"></i> Persona</h4>\n    <div class=\"persona-grid\">\n      @if (persona.identity) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Identity</span>\n        <span>{{ persona.identity }}</span>\n      </div>\n      }\n      @if (persona.physical) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Physical</span>\n        <span>{{ persona.physical }}</span>\n      </div>\n      }\n      @if (persona.personality) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Personality</span>\n        <span>{{ persona.personality }}</span>\n      </div>\n      }\n      @if (persona.communication) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Communication</span>\n        <span>{{ persona.communication }}</span>\n      </div>\n      }\n      @if (persona.background) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Background</span>\n        <span>{{ persona.background }}</span>\n      </div>\n      }\n      @if (persona.psychology) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Psychology</span>\n        <span>{{ persona.psychology }}</span>\n      </div>\n      }\n      @if (persona.capabilities) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Capabilities</span>\n        <span>{{ persona.capabilities }}</span>\n      </div>\n      }\n      @if (persona.social) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Social</span>\n        <span>{{ persona.social }}</span>\n      </div>\n      }\n      @if (persona.preferences) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Preferences</span>\n        <span>{{ persona.preferences }}</span>\n      </div>\n      }\n      @if (persona.situation) {\n      <div class=\"persona-field\">\n        <span class=\"field-label\">Situation</span>\n        <span>{{ persona.situation }}</span>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Conversation Settings -->\n  @if (entity()?.conversationSettings) {\n  <p-divider />\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Conversation Settings</h4>\n    <div class=\"settings-chips\">\n      @if (entity()?.conversationSettings?.conversationType) {\n      <p-tag [value]=\"entity()!.conversationSettings!.conversationType!\" severity=\"info\" icon=\"pi pi-comments\" />\n      }\n      @if (entity()?.conversationSettings?.textEngine) {\n      <p-tag [value]=\"entity()!.conversationSettings!.textEngine!\" severity=\"secondary\" icon=\"pi pi-code\" />\n      }\n      @if (entity()?.conversationSettings?.autoStart) {\n      <p-tag value=\"Auto Start\" severity=\"success\" icon=\"pi pi-play\" />\n      }\n      @if (entity()?.conversationSettings?.userMustStart) {\n      <p-tag value=\"User Starts\" severity=\"warn\" icon=\"pi pi-user\" />\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Voices -->\n  @if (entity()?.voice?.main?.voice || entity()?.conversationSettings?.mainVoice?.voice) {\n  <div class=\"preview-section\">\n    <h4 class=\"section-title\"><i class=\"pi pi-volume-up\"></i> Voices</h4>\n    <div class=\"voice-info\">\n      <p><span class=\"field-label\">Main:</span> {{ entity()?.voice?.main?.voice || entity()?.conversationSettings?.mainVoice?.voice }}</p>\n      @if (entity()?.voice?.secondary?.voice || entity()?.conversationSettings?.secondaryVoice?.voice) {\n      <p><span class=\"field-label\">Secondary:</span> {{ entity()?.voice?.secondary?.voice || entity()?.conversationSettings?.secondaryVoice?.voice }}</p>\n      }\n    </div>\n  </div>\n  }\n\n</div>\n}\n\n@if (entity()?.manageable) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Manageable</h4>\n  <div class=\"settings-chips\">\n    @if (entity()?.manageable?.status) {\n    <p-tag [value]=\"entity()!.manageable!.status!\" severity=\"info\" icon=\"pi pi-comments\" />\n    }\n    @if (entity()?.manageable?.isPublic) {\n    <p-tag [value]=\"'Public'\" severity=\"secondary\" icon=\"pi pi-code\" />\n    }\n  </div>\n</div>\n}\n\n@if (entity()?.learnable) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-sliders-h\"></i> Learnable</h4>\n  <div class=\"settings-chips\">\n    @if (entity()?.learnable?.level) {\n    <p-tag [value]=\"'Level ' + entity()!.learnable!.level!\" severity=\"info\" icon=\"pi pi-comments\" />\n    }\n    @if (entity()?.learnable?.tags) {\n    <p-tag [value]=\"'Public'\" severity=\"secondary\" icon=\"pi pi-code\" />\n    }\n  </div>\n</div>\n}\n\n@if(entity()?.conversationFlow) {\n<p-divider />\n<div class=\"preview-section\">\n  <h4 class=\"section-title\"><i class=\"pi pi-tags\"></i> Conversation Flow</h4>\n\n  @if (entity()?.conversationFlow?.moodState) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-face-smile\"></i> Mood State</h5>\n    <div class=\"settings-chips\">\n      @if (entity()!.conversationFlow!.moodState!.enabled) {\n      <p-tag value=\"Enabled\" severity=\"success\" icon=\"pi pi-check\" />\n      } @else {\n      <p-tag value=\"Disabled\" severity=\"danger\" icon=\"pi pi-times\" />\n      }\n      @if (entity()!.conversationFlow!.moodState!.useAssetStatesOnly) {\n      <p-tag value=\"Asset States Only\" severity=\"warn\" icon=\"pi pi-images\" />\n      }\n    </div>\n    @if (entity()!.conversationFlow!.moodState!.detectableStates?.length) {\n    <div class=\"settings-chips\" style=\"margin-top: 0.5rem;\">\n      @for (state of entity()!.conversationFlow!.moodState!.detectableStates; track $index) {\n      <p-tag [value]=\"state\" severity=\"info\" icon=\"pi pi-tag\" />\n      }\n    </div>\n    }\n  </div>\n  }\n\n  @if (entity()?.conversationFlow?.dynamicConditions?.length) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-sliders-v\"></i> Dynamic Conditions</h5>\n    @for (condition of entity()!.conversationFlow!.dynamicConditions!; track $index) {\n    <div class=\"persona-field\" style=\"margin-bottom: 0.5rem;\">\n      <div class=\"settings-chips\">\n        <p-tag [value]=\"condition.what\" severity=\"info\" icon=\"pi pi-filter\" />\n        <p-tag [value]=\"condition.when\" severity=\"secondary\" />\n        <p-tag [value]=\"condition.value + ''\" severity=\"warn\" />\n      </div>\n      @if (condition.do?.length) {\n      <div class=\"settings-chips\" style=\"margin-top: 0.25rem;\">\n        @for (action of condition.do!; track $index) {\n        <p-tag [value]=\"action.actionType\" severity=\"contrast\" icon=\"pi pi-bolt\" />\n        @if (action.prompt) {\n        <span class=\"field-label\" style=\"font-size: 0.75rem;\">{{ action.prompt | slice:0:60 }}\u2026</span>\n        }\n        }\n      </div>\n      }\n    </div>\n    }\n  </div>\n  }\n\n  @if (entity()?.conversationFlow?.triggerTasks) {\n  <div class=\"preview-section\">\n    <h5 class=\"section-title\"><i class=\"pi pi-bolt\"></i> Trigger Tasks</h5>\n    @for (entry of objectEntries(entity()!.conversationFlow!.triggerTasks!); track $index) {\n    <div class=\"persona-field\" style=\"margin-bottom: 0.5rem;\">\n      <span class=\"field-label\">{{ entry[0] }}</span>\n      <div class=\"settings-chips\" style=\"margin-top: 0.25rem;\">\n        @if (entry[1].enabled) {\n        <p-tag value=\"Enabled\" severity=\"success\" icon=\"pi pi-check\" />\n        } @else {\n        <p-tag value=\"Disabled\" severity=\"secondary\" icon=\"pi pi-times\" />\n        }\n        @if (entry[1].disableFeature) {\n        <p-tag value=\"Feature Disabled\" severity=\"danger\" icon=\"pi pi-ban\" />\n        }\n      </div>\n      @if (entry[1].task) {\n      <p style=\"font-size: 0.8rem; margin: 0.25rem 0 0;\">{{ entry[1].task | slice:0:120 }}\u2026</p>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n\n<!-- Video Dialog -->\n<p-dialog\n  [visible]=\"videoDialogVisible()\"\n  (visibleChange)=\"$event ? null : closeMotionVideo()\"\n  [header]=\"selectedMotion()?.metadata?.moodState || selectedMotion()?.metadata?.event || 'Video'\"\n  [modal]=\"true\"\n  [dismissableMask]=\"true\"\n  [closable]=\"true\"\n  styleClass=\"video-dialog\"\n  [style]=\"{ width: '560px' }\">\n\n  @if (selectedMotion()?.url) {\n  <video\n    class=\"motion-video\"\n    [src]=\"selectedMotion().url\"\n    controls\n    autoplay>\n  </video>\n  }\n</p-dialog>\n", styles: [".preview-container{padding:.5rem}.preview-banner{width:100%;height:210px;overflow:hidden;border-radius:8px;margin-bottom:0}.banner-image{width:100%;height:100%;object-fit:cover;display:block}.preview-header{display:flex;gap:1.5rem;align-items:flex-start;padding:1rem 0 .5rem}.preview-header.has-banner{padding-top:.75rem}.preview-image{width:120px;height:170px;object-fit:cover;border-radius:8px;flex-shrink:0;box-shadow:0 2px 8px #00000026}.preview-header-info{display:flex;flex-direction:column;gap:.5rem}.preview-name{margin:0 0 .25rem;font-size:1.5rem;font-weight:700}.preview-meta-tags{display:flex;flex-wrap:wrap;gap:.35rem}.preview-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}.preview-entity-description{color:var(--p-text-muted-color);font-size:.9rem;margin:.5rem 0}.preview-entity-description p{margin:0}.preview-section{margin-bottom:1rem}.section-title{margin:0 0 .5rem;font-size:.95rem;font-weight:600;color:var(--p-text-muted-color);display:flex;align-items:center;gap:.4rem}.greeting-item{margin:.25rem 0;padding-left:.5rem;border-left:2px solid var(--p-primary-color)}.first-message{background:var(--p-surface-100);border-radius:6px;padding:.75rem;font-style:italic}.persona-grid{display:flex;flex-direction:column;gap:.5rem}.persona-field{display:flex;flex-direction:column;gap:.15rem}.field-label{font-size:.8rem;font-weight:600;color:var(--p-text-muted-color);text-transform:uppercase;letter-spacing:.05em}.motions-top-section{margin-top:.75rem;margin-bottom:0}.motions-grid{display:flex;flex-wrap:wrap;gap:.4rem}.motion-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:20px;border:1px solid var(--p-surface-300);background:var(--p-surface-100);color:var(--p-text-color);font-size:.8rem;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-transform:capitalize}.motion-chip i{font-size:.85rem;color:var(--p-primary-color)}.motion-chip:hover{background:var(--p-primary-50, #f0f4ff);border-color:var(--p-primary-color);transform:translateY(-1px)}.motion-chip:active{transform:translateY(0)}.motion-video{width:100%;border-radius:6px;display:block}.settings-chips{display:flex;flex-wrap:wrap;gap:.4rem}.voice-info{display:flex;flex-direction:column;gap:.25rem}.loading-state{display:flex;justify-content:center;padding:2rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { entityData: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityData", required: false }] }] } });
 
 class ConversationSummaryComponent {
@@ -6292,11 +6610,11 @@ class ConversationInspector {
         this.viewMode.set(this.viewMode() === 'markdown' ? 'regular' : 'markdown');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConversationInspector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ConversationInspector, isStandalone: true, selector: "dc-conversation-info", outputs: { completeEvent: "completeEvent" }, ngImport: i0, template: "<div class=\"info-content\">\n  <p-tabs value=\"0\">\n    <p-tablist>\n      <p-tab value=\"0\">\uD83D\uDCCA Summary</p-tab>\n      <p-tab value=\"1\">\uD83D\uDD00 Dynamic Flow</p-tab>\n      <p-tab value=\"6\">\uD83D\uDCE6 Messages State</p-tab>\n      <p-tab value=\"7\">\uD83D\uDC64 Preview Card</p-tab>\n      <p-tab value=\"5\">\uD83D\uDCBE Conversation State</p-tab>\n      <p-tab value=\"2\">\uD83D\uDCAC Conversation Messages</p-tab>\n      <p-tab value=\"3\">\uD83D\uDCB0 Pricing</p-tab>\n      <p-tab value=\"4\">\uD83D\uDC1B More</p-tab>\n    </p-tablist>\n    <p-tabpanels>\n      <p-tabpanel value=\"0\">\n        <ng-template #content>\n          @if (conversationFlowStateService.flowState(); as flowState) {\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 mt-2\">\n              <!-- Goal State -->\n              <div class=\"p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFAF</span> Goal Progress\n                </h3>\n                <div class=\"flex items-end gap-4 mb-3\">\n                  <div class=\"text-5xl font-black leading-none\">\n                    {{ flowState.goal?.value || 0 }}\n                  </div>\n                  @if (flowState.goal?.deltaPoints !== undefined) {\n                    <div class=\"text-xl font-bold mb-1\" \n                         [class.text-green-600]=\"flowState.goal.deltaPoints > 0\"\n                         [class.text-red-600]=\"flowState.goal.deltaPoints < 0\"\n                         [class.opacity-50]=\"flowState.goal.deltaPoints === 0\">\n                      {{ flowState.goal.deltaPoints > 0 ? '+' : '' }}{{ flowState.goal.deltaPoints }}\n                    </div>\n                  }\n                </div>\n                \n                @if (flowState.intervention?.message) {\n                  <div class=\"mt-4 p-3 rounded border-l-4 text-sm italic shadow-sm opacity-80\">\n                    \"{{ flowState.intervention.message }}\"\n                  </div>\n                }\n              </div>\n\n              <!-- Mood State -->\n              <div class=\"p-4 border rounded-lg shadow-sm flex flex-col\">\n                <h3 class=\"text-lg font-bold mb-2 flex items-center gap-2\">\n                  <span>\uD83C\uDFAD</span> Agent Mood\n                </h3>\n                <div class=\"flex-grow flex items-center justify-center\">\n                  @if (flowState.moodState?.value) {\n                    <div class=\"text-4xl font-black uppercase tracking-widest text-center drop-shadow-sm\">\n                      {{ flowState.moodState.value }}\n                    </div>\n                  } @else {\n                    <div class=\"text-xl font-medium italic opacity-50\">Neutral</div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n          <dc-conversation-summary [agentCard]=\"agentCard\" [parentInjector]=\"config.data.injector\" (completeEvent)=\"complete()\"></dc-conversation-summary>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"1\">\n        <ng-template #content>\n          <!-- Dynamic Flow -->\n\n          <p-divider>Conversation Flow</p-divider>\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (dynamicFlowService.conversationFlowConfig()?.goal?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Goal</p>\n            </div>\n            @if(dynamicFlowService.conversationFlowConfig()?.goal?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.triggerTasks?.onUserMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger User Message</p>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.triggerTasks?.onUserMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.triggerTasks?.onAssistantMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger Assistant Message</p>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.triggerTasks?.onAssistantMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <h3>Herramientas</h3>\n          @for (tool of agentCardStateService.conversationFlow$()?.tools; track tool.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (tool.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">{{ tool.name }}</p>\n            </div>\n            @if(tool.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ tool.description }} </div>\n            }\n          </div>\n          }\n\n          <h3>Challenges Retos</h3>\n          @for (challenge of dynamicFlowService.conversationFlowConfig()?.challenges; track challenge.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (challenge.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n\n              <p class=\"font-semibold\"> {{ challenge.emoji }} {{ challenge.name }}</p>\n            </div>\n            @if(challenge.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ challenge.description }} </div>\n            }\n          </div>\n          }\n          <h5>Conditions</h5>\n\n          @for (condition of dynamicFlowService.conversationFlowConfig()?.dynamicConditions; track $index) {\n          <div class=\"pl-2 mt-1 text-sm text-gray-600 italic\"> When the {{ condition.what }} is {{ condition.when }} than {{ condition.value }} Do </div>\n          <ol>\n            @for (doAction of condition.do; track $index) {\n            <li class=\"pl-5 mt-1 text-sm text-gray-600 italic\">\n              {{ $index }})\n              <span style=\"color: brown\"> {{ doAction.actionType }}</span>\n              <span style=\"color: green\"> {{ doAction.systemPromptType }}</span>\n              <span style=\"color: green\"> {{ doAction.dynamicFlowTaskType }}</span>\n\n              to\n              <span style=\"color: rgb(49, 23, 177)\"> {{ doAction.enabled }}</span>\n              \"{{ doAction.prompt }}\"\n            </li>\n            }\n          </ol>\n          }\n\n          <p>Challenges</p>\n          <pre>{{ agentCardStateService.conversationFlow$()?.challenges | safeJson }}</pre>\n\n          <p-divider>Performance Evaluation</p-divider>\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.enablePerformanceAnalysis !== false) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Performance Prompt</p>\n              <span class=\"text-xs text-gray-400 ml-2\" pTooltip=\"Minimum messages required to trigger evaluation\">(MIN_MESSAGES_EVALUATE: 4 hardcoded)</span>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.enablePerformanceAnalysis !== false) {\n              @if(agentCardStateService.conversationFlow$()?.performancePrompt; as prompt) {\n              <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> \n                <markdown>\n                {{ prompt }} \n                </markdown>\n              </div>\n              } @else {\n              <div class=\"pl-5 mt-1 text-sm text-gray-400 italic\"> No custom performance prompt defined (using default). </div>\n              }\n            } @else {\n            <div class=\"pl-5 mt-1 text-sm text-gray-400 italic\"> Performance analysis disabled. </div>\n            }\n          </div>\n\n          <p-divider>System Evaluation Prompt</p-divider>\n          <details>\n            <summary>Show Prompt</summary>\n            <pre>{{ systemPromptForFlow() }}</pre>\n          </details>\n\n          <!-- Dynamic Flow ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"5\">\n        <ng-template #content>\n          @if (conversationFlowStateService.flowState(); as flowState) {\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 mt-2\">\n              <!-- Goal State -->\n              <div class=\"p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFAF</span> Goal Progress\n                </h3>\n                <div class=\"flex items-end gap-4 mb-3\">\n                  <div class=\"text-5xl font-black leading-none\">\n                    {{ flowState.goal?.value || 0 }}\n                  </div>\n                  @if (flowState.goal?.deltaPoints !== undefined) {\n                    <div class=\"text-xl font-bold mb-1\" \n                         [class.text-green-600]=\"flowState.goal.deltaPoints > 0\"\n                         [class.text-red-600]=\"flowState.goal.deltaPoints < 0\"\n                         [class.opacity-50]=\"flowState.goal.deltaPoints === 0\">\n                      {{ flowState.goal.deltaPoints > 0 ? '+' : '' }}{{ flowState.goal.deltaPoints }}\n                    </div>\n                  }\n                </div>\n                \n                @if (flowState.intervention?.message) {\n                  <div class=\"mt-4 p-3 rounded border-l-4 text-sm italic shadow-sm opacity-80\">\n                    \"{{ flowState.intervention.message }}\"\n                  </div>\n                }\n              </div>\n\n              <!-- Mood State -->\n              <div class=\"p-4 border rounded-lg shadow-sm flex flex-col\">\n                <h3 class=\"text-lg font-bold mb-2 flex items-center gap-2\">\n                  <span>\uD83C\uDFAD</span> Agent Mood\n                </h3>\n                <div class=\"flex-grow flex items-center justify-center\">\n                  @if (flowState.moodState?.value) {\n                    <div class=\"text-4xl font-black uppercase tracking-widest text-center drop-shadow-sm\">\n                      {{ flowState.moodState.value }}\n                    </div>\n                  } @else {\n                    <div class=\"text-xl font-medium italic opacity-50\">Neutral</div>\n                  }\n                </div>\n              </div>\n            </div>\n\n            @if (flowState.challenges?.length) {\n              <div class=\"mb-4 p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFC6</span> Completed Challenges\n                </h3>\n                <ul class=\"list-disc pl-5 space-y-1\">\n                  @for (challenge of flowState.challenges; track challenge) {\n                    <li>{{ challenge }}</li>\n                  }\n                </ul>\n              </div>\n            }\n\n            <details class=\"mt-4\">\n              <summary class=\"cursor-pointer text-sm font-medium\">Raw JSON State</summary>\n              <pre class=\"mt-2 p-2 rounded text-xs overflow-auto\">{{ flowState | safeJson }}</pre>\n            </details>\n          } @else {\n            <p class=\"italic mt-2 opacity-50\">No conversation state available.</p>\n          }\n\n          <details class=\"mt-2\">\n            <summary class=\"cursor-pointer text-sm font-medium\">Current Prompt</summary>\n            <pre class=\"mt-2 p-2 rounded text-xs overflow-auto\">{{ systemPromptForFlow() }}</pre>\n          </details>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"2\">\n        <ng-template #content>\n          <div>\n            <p-button label=\"Exportar todo\" (click)=\"exportChat('all')\" />\n            <p-button label=\"Exportar conversaci\u00F3n\" (click)=\"exportChat('conversation')\" />\n            <p-button [label]=\"'Vista ' + viewMode()\" (click)=\"toggleViewMode()\" />\n          </div>\n          <dc-prompt-preview [messages]=\"messageStateService.getMessagesSignal()()\" [view]=\"viewMode()\"></dc-prompt-preview>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"6\">\n        <ng-template #content>\n          <dc-messages-state-inspector></dc-messages-state-inspector>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"3\">\n        <ng-template #content>\n          <dc-cost-details></dc-cost-details>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"4\">\n        <ng-template #content>\n          <!-- MORE INFO -->\n\n          <details>\n            <summary>Estado Global Conversation Flow</summary>\n            <p>Goal</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.goal | safeJson }}</pre>\n            <p>Trigger User Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.triggerTasks?.onUserMessage | safeJson }}</pre>\n            <p>Trigger Assistant Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.triggerTasks?.onAssistantMessage | safeJson }}</pre>\n            <p>Conditions</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.dynamicConditions | safeJson }}</pre>\n            <p>Tools</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.tools | safeJson }}</pre>\n            <p>Challenges</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.challenges | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>Conversation Settings (Debug)</summary>\n            <pre>{{ conversationService.conversationSettings$() | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>Agent Card</summary>\n            <pre>{{ agentCard | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>User Settings</summary>\n            <pre>{{ chatUserSettings | safeJson }}</pre>\n          </details>\n\n          <!-- MORE INFO ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"7\">\n        <ng-template #content>\n          <dc-agent-card-detail [entityData]=\"agentCardStateService.agentCard$()\" />\n        </ng-template>\n      </p-tabpanel>\n    </p-tabpanels>\n  </p-tabs>\n</div>\n", styles: [":host{overflow-y:scroll}.info-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i2$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: PromptPreviewComponent, selector: "dc-prompt-preview", inputs: ["messages", "jailBrake", "view"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$5.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$5.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$5.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2$5.TabList, selector: "p-tablist" }, { kind: "component", type: i2$5.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: CostDetailsComponent, selector: "dc-cost-details" }, { kind: "component", type: MessagesStateInspectorComponent, selector: "dc-messages-state-inspector" }, { kind: "component", type: DcAgentCardDetailComponent, selector: "dc-agent-card-detail", inputs: ["entityData"] }, { kind: "component", type: ConversationSummaryComponent, selector: "dc-conversation-summary", inputs: ["agentCard", "parentInjector"], outputs: ["completeEvent"] }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ConversationInspector, isStandalone: true, selector: "dc-conversation-info", outputs: { completeEvent: "completeEvent" }, ngImport: i0, template: "<div class=\"info-content\">\n  <p-tabs value=\"0\">\n    <p-tablist>\n      <p-tab value=\"0\">\uD83D\uDCCA Summary</p-tab>\n      <p-tab value=\"1\">\uD83D\uDD00 Dynamic Flow</p-tab>\n      <p-tab value=\"6\">\uD83D\uDCE6 Messages State</p-tab>\n      <p-tab value=\"7\">\uD83D\uDC64 Preview Card</p-tab>\n      <p-tab value=\"5\">\uD83D\uDCBE Conversation State</p-tab>\n      <p-tab value=\"2\">\uD83D\uDCAC Conversation Messages</p-tab>\n      <p-tab value=\"3\">\uD83D\uDCB0 Pricing</p-tab>\n      <p-tab value=\"4\">\uD83D\uDC1B More</p-tab>\n    </p-tablist>\n    <p-tabpanels>\n      <p-tabpanel value=\"0\">\n        <ng-template #content>\n          @if (conversationFlowStateService.flowState(); as flowState) {\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 mt-2\">\n              <!-- Goal State -->\n              <div class=\"p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFAF</span> Goal Progress\n                </h3>\n                <div class=\"flex items-end gap-4 mb-3\">\n                  <div class=\"text-5xl font-black leading-none\">\n                    {{ flowState.goal?.value || 0 }}\n                  </div>\n                  @if (flowState.goal?.deltaPoints !== undefined) {\n                    <div class=\"text-xl font-bold mb-1\" \n                         [class.text-green-600]=\"flowState.goal.deltaPoints > 0\"\n                         [class.text-red-600]=\"flowState.goal.deltaPoints < 0\"\n                         [class.opacity-50]=\"flowState.goal.deltaPoints === 0\">\n                      {{ flowState.goal.deltaPoints > 0 ? '+' : '' }}{{ flowState.goal.deltaPoints }}\n                    </div>\n                  }\n                </div>\n                \n                @if (flowState.intervention?.message) {\n                  <div class=\"mt-4 p-3 rounded border-l-4 text-sm italic shadow-sm opacity-80\">\n                    \"{{ flowState.intervention.message }}\"\n                  </div>\n                }\n              </div>\n\n              <!-- Mood State -->\n              <div class=\"p-4 border rounded-lg shadow-sm flex flex-col\">\n                <h3 class=\"text-lg font-bold mb-2 flex items-center gap-2\">\n                  <span>\uD83C\uDFAD</span> Agent Mood\n                </h3>\n                <div class=\"flex-grow flex items-center justify-center\">\n                  @if (flowState.moodState?.value) {\n                    <div class=\"text-4xl font-black uppercase tracking-widest text-center drop-shadow-sm\">\n                      {{ flowState.moodState.value }}\n                    </div>\n                  } @else {\n                    <div class=\"text-xl font-medium italic opacity-50\">Neutral</div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n          <dc-conversation-summary [agentCard]=\"agentCard\" [parentInjector]=\"config.data.injector\" (completeEvent)=\"complete()\"></dc-conversation-summary>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"1\">\n        <ng-template #content>\n          <!-- Dynamic Flow -->\n\n          <p-divider>Conversation Flow</p-divider>\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (dynamicFlowService.conversationFlowConfig()?.goal?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Goal</p>\n            </div>\n            @if(dynamicFlowService.conversationFlowConfig()?.goal?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.triggerTasks?.onUserMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger User Message</p>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.triggerTasks?.onUserMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.triggerTasks?.onAssistantMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger Assistant Message</p>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.triggerTasks?.onAssistantMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <h3>Herramientas</h3>\n          @for (tool of agentCardStateService.conversationFlow$()?.tools; track tool.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (tool.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">{{ tool.name }}</p>\n            </div>\n            @if(tool.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ tool.description }} </div>\n            }\n          </div>\n          }\n\n          <h3>Challenges Retos</h3>\n          @for (challenge of dynamicFlowService.conversationFlowConfig()?.challenges; track challenge.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (challenge.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n\n              <p class=\"font-semibold\"> {{ challenge.emoji }} {{ challenge.name }}</p>\n            </div>\n            @if(challenge.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ challenge.description }} </div>\n            }\n          </div>\n          }\n          <h5>Conditions</h5>\n\n          @for (condition of dynamicFlowService.conversationFlowConfig()?.dynamicConditions; track $index) {\n          <div class=\"pl-2 mt-1 text-sm text-gray-600 italic\"> When the {{ condition.what }} is {{ condition.when }} than {{ condition.value }} Do </div>\n          <ol>\n            @for (doAction of condition.do; track $index) {\n            <li class=\"pl-5 mt-1 text-sm text-gray-600 italic\">\n              {{ $index }})\n              <span style=\"color: brown\"> {{ doAction.actionType }}</span>\n              <span style=\"color: green\"> {{ doAction.systemPromptType }}</span>\n              <span style=\"color: green\"> {{ doAction.dynamicFlowTaskType }}</span>\n\n              to\n              <span style=\"color: rgb(49, 23, 177)\"> {{ doAction.enabled }}</span>\n              \"{{ doAction.prompt }}\"\n            </li>\n            }\n          </ol>\n          }\n\n          <p>Challenges</p>\n          <pre>{{ agentCardStateService.conversationFlow$()?.challenges | safeJson }}</pre>\n\n          <p-divider>Performance Evaluation</p-divider>\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.enablePerformanceAnalysis !== false) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Performance Prompt</p>\n              <span class=\"text-xs text-gray-400 ml-2\" pTooltip=\"Minimum messages required to trigger evaluation\">(MIN_MESSAGES_EVALUATE: 4 hardcoded)</span>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.enablePerformanceAnalysis !== false) {\n              @if(agentCardStateService.conversationFlow$()?.performancePrompt; as prompt) {\n              <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> \n                <markdown>\n                {{ prompt }} \n                </markdown>\n              </div>\n              } @else {\n              <div class=\"pl-5 mt-1 text-sm text-gray-400 italic\"> No custom performance prompt defined (using default). </div>\n              }\n            } @else {\n            <div class=\"pl-5 mt-1 text-sm text-gray-400 italic\"> Performance analysis disabled. </div>\n            }\n          </div>\n\n          <p-divider>System Evaluation Prompt</p-divider>\n          <details>\n            <summary>Show Prompt</summary>\n            <pre>{{ systemPromptForFlow() }}</pre>\n          </details>\n\n          <!-- Dynamic Flow ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"5\">\n        <ng-template #content>\n          @if (conversationFlowStateService.flowState(); as flowState) {\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 mt-2\">\n              <!-- Goal State -->\n              <div class=\"p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFAF</span> Goal Progress\n                </h3>\n                <div class=\"flex items-end gap-4 mb-3\">\n                  <div class=\"text-5xl font-black leading-none\">\n                    {{ flowState.goal?.value || 0 }}\n                  </div>\n                  @if (flowState.goal?.deltaPoints !== undefined) {\n                    <div class=\"text-xl font-bold mb-1\" \n                         [class.text-green-600]=\"flowState.goal.deltaPoints > 0\"\n                         [class.text-red-600]=\"flowState.goal.deltaPoints < 0\"\n                         [class.opacity-50]=\"flowState.goal.deltaPoints === 0\">\n                      {{ flowState.goal.deltaPoints > 0 ? '+' : '' }}{{ flowState.goal.deltaPoints }}\n                    </div>\n                  }\n                </div>\n                \n                @if (flowState.intervention?.message) {\n                  <div class=\"mt-4 p-3 rounded border-l-4 text-sm italic shadow-sm opacity-80\">\n                    \"{{ flowState.intervention.message }}\"\n                  </div>\n                }\n              </div>\n\n              <!-- Mood State -->\n              <div class=\"p-4 border rounded-lg shadow-sm flex flex-col\">\n                <h3 class=\"text-lg font-bold mb-2 flex items-center gap-2\">\n                  <span>\uD83C\uDFAD</span> Agent Mood\n                </h3>\n                <div class=\"flex-grow flex items-center justify-center\">\n                  @if (flowState.moodState?.value) {\n                    <div class=\"text-4xl font-black uppercase tracking-widest text-center drop-shadow-sm\">\n                      {{ flowState.moodState.value }}\n                    </div>\n                  } @else {\n                    <div class=\"text-xl font-medium italic opacity-50\">Neutral</div>\n                  }\n                </div>\n              </div>\n            </div>\n\n            @if (flowState.challenges?.length) {\n              <div class=\"mb-4 p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFC6</span> Completed Challenges\n                </h3>\n                <ul class=\"list-disc pl-5 space-y-1\">\n                  @for (challenge of flowState.challenges; track challenge) {\n                    <li>{{ challenge }}</li>\n                  }\n                </ul>\n              </div>\n            }\n\n            <details class=\"mt-4\">\n              <summary class=\"cursor-pointer text-sm font-medium\">Raw JSON State</summary>\n              <pre class=\"mt-2 p-2 rounded text-xs overflow-auto\">{{ flowState | safeJson }}</pre>\n            </details>\n          } @else {\n            <p class=\"italic mt-2 opacity-50\">No conversation state available.</p>\n          }\n\n          <details class=\"mt-2\">\n            <summary class=\"cursor-pointer text-sm font-medium\">Current Prompt</summary>\n            <pre class=\"mt-2 p-2 rounded text-xs overflow-auto\">{{ systemPromptForFlow() }}</pre>\n          </details>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"2\">\n        <ng-template #content>\n          <div>\n            <p-button label=\"Exportar todo\" (click)=\"exportChat('all')\" />\n            <p-button label=\"Exportar conversaci\u00F3n\" (click)=\"exportChat('conversation')\" />\n            <p-button [label]=\"'Vista ' + viewMode()\" (click)=\"toggleViewMode()\" />\n          </div>\n          <dc-prompt-preview [messages]=\"messageStateService.getMessagesSignal()()\" [view]=\"viewMode()\"></dc-prompt-preview>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"6\">\n        <ng-template #content>\n          <dc-messages-state-inspector [service]=\"messageStateService\"></dc-messages-state-inspector>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"3\">\n        <ng-template #content>\n          <dc-cost-details></dc-cost-details>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"4\">\n        <ng-template #content>\n          <!-- MORE INFO -->\n\n          <details>\n            <summary>Estado Global Conversation Flow</summary>\n            <p>Goal</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.goal | safeJson }}</pre>\n            <p>Trigger User Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.triggerTasks?.onUserMessage | safeJson }}</pre>\n            <p>Trigger Assistant Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.triggerTasks?.onAssistantMessage | safeJson }}</pre>\n            <p>Conditions</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.dynamicConditions | safeJson }}</pre>\n            <p>Tools</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.tools | safeJson }}</pre>\n            <p>Challenges</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.challenges | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>Conversation Settings (Debug)</summary>\n            <pre>{{ conversationService.conversationSettings$() | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>Agent Card</summary>\n            <pre>{{ agentCard | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>User Settings</summary>\n            <pre>{{ chatUserSettings | safeJson }}</pre>\n          </details>\n\n          <!-- MORE INFO ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"7\">\n        <ng-template #content>\n          <dc-agent-card-detail [entityData]=\"agentCardStateService.agentCard$()\" />\n        </ng-template>\n      </p-tabpanel>\n    </p-tabpanels>\n  </p-tabs>\n</div>\n", styles: [":host{overflow-y:scroll}.info-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "ngmodule", type: SliderModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i2$3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: PromptPreviewComponent, selector: "dc-prompt-preview", inputs: ["messages", "jailBrake", "view"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$5.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$5.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$5.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2$5.TabList, selector: "p-tablist" }, { kind: "component", type: i2$5.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: CostDetailsComponent, selector: "dc-cost-details" }, { kind: "component", type: MessagesStateInspectorComponent, selector: "dc-messages-state-inspector", inputs: ["service"] }, { kind: "component", type: DcAgentCardDetailComponent, selector: "dc-agent-card-detail", inputs: ["entityData"] }, { kind: "component", type: ConversationSummaryComponent, selector: "dc-conversation-summary", inputs: ["agentCard", "parentInjector"], outputs: ["completeEvent"] }, { kind: "pipe", type: SafeJsonPipe, name: "safeJson" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConversationInspector, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-conversation-info', standalone: true, imports: [CommonModule, SafeJsonPipe, MarkdownComponent, SliderModule, ButtonModule, FormsModule, DividerModule, PromptPreviewComponent, TabsModule, CostDetailsComponent, MessagesStateInspectorComponent, DcAgentCardDetailComponent, ConversationSummaryComponent], template: "<div class=\"info-content\">\n  <p-tabs value=\"0\">\n    <p-tablist>\n      <p-tab value=\"0\">\uD83D\uDCCA Summary</p-tab>\n      <p-tab value=\"1\">\uD83D\uDD00 Dynamic Flow</p-tab>\n      <p-tab value=\"6\">\uD83D\uDCE6 Messages State</p-tab>\n      <p-tab value=\"7\">\uD83D\uDC64 Preview Card</p-tab>\n      <p-tab value=\"5\">\uD83D\uDCBE Conversation State</p-tab>\n      <p-tab value=\"2\">\uD83D\uDCAC Conversation Messages</p-tab>\n      <p-tab value=\"3\">\uD83D\uDCB0 Pricing</p-tab>\n      <p-tab value=\"4\">\uD83D\uDC1B More</p-tab>\n    </p-tablist>\n    <p-tabpanels>\n      <p-tabpanel value=\"0\">\n        <ng-template #content>\n          @if (conversationFlowStateService.flowState(); as flowState) {\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 mt-2\">\n              <!-- Goal State -->\n              <div class=\"p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFAF</span> Goal Progress\n                </h3>\n                <div class=\"flex items-end gap-4 mb-3\">\n                  <div class=\"text-5xl font-black leading-none\">\n                    {{ flowState.goal?.value || 0 }}\n                  </div>\n                  @if (flowState.goal?.deltaPoints !== undefined) {\n                    <div class=\"text-xl font-bold mb-1\" \n                         [class.text-green-600]=\"flowState.goal.deltaPoints > 0\"\n                         [class.text-red-600]=\"flowState.goal.deltaPoints < 0\"\n                         [class.opacity-50]=\"flowState.goal.deltaPoints === 0\">\n                      {{ flowState.goal.deltaPoints > 0 ? '+' : '' }}{{ flowState.goal.deltaPoints }}\n                    </div>\n                  }\n                </div>\n                \n                @if (flowState.intervention?.message) {\n                  <div class=\"mt-4 p-3 rounded border-l-4 text-sm italic shadow-sm opacity-80\">\n                    \"{{ flowState.intervention.message }}\"\n                  </div>\n                }\n              </div>\n\n              <!-- Mood State -->\n              <div class=\"p-4 border rounded-lg shadow-sm flex flex-col\">\n                <h3 class=\"text-lg font-bold mb-2 flex items-center gap-2\">\n                  <span>\uD83C\uDFAD</span> Agent Mood\n                </h3>\n                <div class=\"flex-grow flex items-center justify-center\">\n                  @if (flowState.moodState?.value) {\n                    <div class=\"text-4xl font-black uppercase tracking-widest text-center drop-shadow-sm\">\n                      {{ flowState.moodState.value }}\n                    </div>\n                  } @else {\n                    <div class=\"text-xl font-medium italic opacity-50\">Neutral</div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n          <dc-conversation-summary [agentCard]=\"agentCard\" [parentInjector]=\"config.data.injector\" (completeEvent)=\"complete()\"></dc-conversation-summary>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"1\">\n        <ng-template #content>\n          <!-- Dynamic Flow -->\n\n          <p-divider>Conversation Flow</p-divider>\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (dynamicFlowService.conversationFlowConfig()?.goal?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Goal</p>\n            </div>\n            @if(dynamicFlowService.conversationFlowConfig()?.goal?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.triggerTasks?.onUserMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger User Message</p>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.triggerTasks?.onUserMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.triggerTasks?.onAssistantMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger Assistant Message</p>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.triggerTasks?.onAssistantMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <h3>Herramientas</h3>\n          @for (tool of agentCardStateService.conversationFlow$()?.tools; track tool.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (tool.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">{{ tool.name }}</p>\n            </div>\n            @if(tool.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ tool.description }} </div>\n            }\n          </div>\n          }\n\n          <h3>Challenges Retos</h3>\n          @for (challenge of dynamicFlowService.conversationFlowConfig()?.challenges; track challenge.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (challenge.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n\n              <p class=\"font-semibold\"> {{ challenge.emoji }} {{ challenge.name }}</p>\n            </div>\n            @if(challenge.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ challenge.description }} </div>\n            }\n          </div>\n          }\n          <h5>Conditions</h5>\n\n          @for (condition of dynamicFlowService.conversationFlowConfig()?.dynamicConditions; track $index) {\n          <div class=\"pl-2 mt-1 text-sm text-gray-600 italic\"> When the {{ condition.what }} is {{ condition.when }} than {{ condition.value }} Do </div>\n          <ol>\n            @for (doAction of condition.do; track $index) {\n            <li class=\"pl-5 mt-1 text-sm text-gray-600 italic\">\n              {{ $index }})\n              <span style=\"color: brown\"> {{ doAction.actionType }}</span>\n              <span style=\"color: green\"> {{ doAction.systemPromptType }}</span>\n              <span style=\"color: green\"> {{ doAction.dynamicFlowTaskType }}</span>\n\n              to\n              <span style=\"color: rgb(49, 23, 177)\"> {{ doAction.enabled }}</span>\n              \"{{ doAction.prompt }}\"\n            </li>\n            }\n          </ol>\n          }\n\n          <p>Challenges</p>\n          <pre>{{ agentCardStateService.conversationFlow$()?.challenges | safeJson }}</pre>\n\n          <p-divider>Performance Evaluation</p-divider>\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.enablePerformanceAnalysis !== false) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Performance Prompt</p>\n              <span class=\"text-xs text-gray-400 ml-2\" pTooltip=\"Minimum messages required to trigger evaluation\">(MIN_MESSAGES_EVALUATE: 4 hardcoded)</span>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.enablePerformanceAnalysis !== false) {\n              @if(agentCardStateService.conversationFlow$()?.performancePrompt; as prompt) {\n              <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> \n                <markdown>\n                {{ prompt }} \n                </markdown>\n              </div>\n              } @else {\n              <div class=\"pl-5 mt-1 text-sm text-gray-400 italic\"> No custom performance prompt defined (using default). </div>\n              }\n            } @else {\n            <div class=\"pl-5 mt-1 text-sm text-gray-400 italic\"> Performance analysis disabled. </div>\n            }\n          </div>\n\n          <p-divider>System Evaluation Prompt</p-divider>\n          <details>\n            <summary>Show Prompt</summary>\n            <pre>{{ systemPromptForFlow() }}</pre>\n          </details>\n\n          <!-- Dynamic Flow ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"5\">\n        <ng-template #content>\n          @if (conversationFlowStateService.flowState(); as flowState) {\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 mt-2\">\n              <!-- Goal State -->\n              <div class=\"p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFAF</span> Goal Progress\n                </h3>\n                <div class=\"flex items-end gap-4 mb-3\">\n                  <div class=\"text-5xl font-black leading-none\">\n                    {{ flowState.goal?.value || 0 }}\n                  </div>\n                  @if (flowState.goal?.deltaPoints !== undefined) {\n                    <div class=\"text-xl font-bold mb-1\" \n                         [class.text-green-600]=\"flowState.goal.deltaPoints > 0\"\n                         [class.text-red-600]=\"flowState.goal.deltaPoints < 0\"\n                         [class.opacity-50]=\"flowState.goal.deltaPoints === 0\">\n                      {{ flowState.goal.deltaPoints > 0 ? '+' : '' }}{{ flowState.goal.deltaPoints }}\n                    </div>\n                  }\n                </div>\n                \n                @if (flowState.intervention?.message) {\n                  <div class=\"mt-4 p-3 rounded border-l-4 text-sm italic shadow-sm opacity-80\">\n                    \"{{ flowState.intervention.message }}\"\n                  </div>\n                }\n              </div>\n\n              <!-- Mood State -->\n              <div class=\"p-4 border rounded-lg shadow-sm flex flex-col\">\n                <h3 class=\"text-lg font-bold mb-2 flex items-center gap-2\">\n                  <span>\uD83C\uDFAD</span> Agent Mood\n                </h3>\n                <div class=\"flex-grow flex items-center justify-center\">\n                  @if (flowState.moodState?.value) {\n                    <div class=\"text-4xl font-black uppercase tracking-widest text-center drop-shadow-sm\">\n                      {{ flowState.moodState.value }}\n                    </div>\n                  } @else {\n                    <div class=\"text-xl font-medium italic opacity-50\">Neutral</div>\n                  }\n                </div>\n              </div>\n            </div>\n\n            @if (flowState.challenges?.length) {\n              <div class=\"mb-4 p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFC6</span> Completed Challenges\n                </h3>\n                <ul class=\"list-disc pl-5 space-y-1\">\n                  @for (challenge of flowState.challenges; track challenge) {\n                    <li>{{ challenge }}</li>\n                  }\n                </ul>\n              </div>\n            }\n\n            <details class=\"mt-4\">\n              <summary class=\"cursor-pointer text-sm font-medium\">Raw JSON State</summary>\n              <pre class=\"mt-2 p-2 rounded text-xs overflow-auto\">{{ flowState | safeJson }}</pre>\n            </details>\n          } @else {\n            <p class=\"italic mt-2 opacity-50\">No conversation state available.</p>\n          }\n\n          <details class=\"mt-2\">\n            <summary class=\"cursor-pointer text-sm font-medium\">Current Prompt</summary>\n            <pre class=\"mt-2 p-2 rounded text-xs overflow-auto\">{{ systemPromptForFlow() }}</pre>\n          </details>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"2\">\n        <ng-template #content>\n          <div>\n            <p-button label=\"Exportar todo\" (click)=\"exportChat('all')\" />\n            <p-button label=\"Exportar conversaci\u00F3n\" (click)=\"exportChat('conversation')\" />\n            <p-button [label]=\"'Vista ' + viewMode()\" (click)=\"toggleViewMode()\" />\n          </div>\n          <dc-prompt-preview [messages]=\"messageStateService.getMessagesSignal()()\" [view]=\"viewMode()\"></dc-prompt-preview>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"6\">\n        <ng-template #content>\n          <dc-messages-state-inspector></dc-messages-state-inspector>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"3\">\n        <ng-template #content>\n          <dc-cost-details></dc-cost-details>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"4\">\n        <ng-template #content>\n          <!-- MORE INFO -->\n\n          <details>\n            <summary>Estado Global Conversation Flow</summary>\n            <p>Goal</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.goal | safeJson }}</pre>\n            <p>Trigger User Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.triggerTasks?.onUserMessage | safeJson }}</pre>\n            <p>Trigger Assistant Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.triggerTasks?.onAssistantMessage | safeJson }}</pre>\n            <p>Conditions</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.dynamicConditions | safeJson }}</pre>\n            <p>Tools</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.tools | safeJson }}</pre>\n            <p>Challenges</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.challenges | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>Conversation Settings (Debug)</summary>\n            <pre>{{ conversationService.conversationSettings$() | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>Agent Card</summary>\n            <pre>{{ agentCard | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>User Settings</summary>\n            <pre>{{ chatUserSettings | safeJson }}</pre>\n          </details>\n\n          <!-- MORE INFO ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"7\">\n        <ng-template #content>\n          <dc-agent-card-detail [entityData]=\"agentCardStateService.agentCard$()\" />\n        </ng-template>\n      </p-tabpanel>\n    </p-tabpanels>\n  </p-tabs>\n</div>\n", styles: [":host{overflow-y:scroll}.info-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}\n"] }]
+            args: [{ selector: 'dc-conversation-info', standalone: true, imports: [CommonModule, SafeJsonPipe, MarkdownComponent, SliderModule, ButtonModule, FormsModule, DividerModule, PromptPreviewComponent, TabsModule, CostDetailsComponent, MessagesStateInspectorComponent, DcAgentCardDetailComponent, ConversationSummaryComponent], template: "<div class=\"info-content\">\n  <p-tabs value=\"0\">\n    <p-tablist>\n      <p-tab value=\"0\">\uD83D\uDCCA Summary</p-tab>\n      <p-tab value=\"1\">\uD83D\uDD00 Dynamic Flow</p-tab>\n      <p-tab value=\"6\">\uD83D\uDCE6 Messages State</p-tab>\n      <p-tab value=\"7\">\uD83D\uDC64 Preview Card</p-tab>\n      <p-tab value=\"5\">\uD83D\uDCBE Conversation State</p-tab>\n      <p-tab value=\"2\">\uD83D\uDCAC Conversation Messages</p-tab>\n      <p-tab value=\"3\">\uD83D\uDCB0 Pricing</p-tab>\n      <p-tab value=\"4\">\uD83D\uDC1B More</p-tab>\n    </p-tablist>\n    <p-tabpanels>\n      <p-tabpanel value=\"0\">\n        <ng-template #content>\n          @if (conversationFlowStateService.flowState(); as flowState) {\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 mt-2\">\n              <!-- Goal State -->\n              <div class=\"p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFAF</span> Goal Progress\n                </h3>\n                <div class=\"flex items-end gap-4 mb-3\">\n                  <div class=\"text-5xl font-black leading-none\">\n                    {{ flowState.goal?.value || 0 }}\n                  </div>\n                  @if (flowState.goal?.deltaPoints !== undefined) {\n                    <div class=\"text-xl font-bold mb-1\" \n                         [class.text-green-600]=\"flowState.goal.deltaPoints > 0\"\n                         [class.text-red-600]=\"flowState.goal.deltaPoints < 0\"\n                         [class.opacity-50]=\"flowState.goal.deltaPoints === 0\">\n                      {{ flowState.goal.deltaPoints > 0 ? '+' : '' }}{{ flowState.goal.deltaPoints }}\n                    </div>\n                  }\n                </div>\n                \n                @if (flowState.intervention?.message) {\n                  <div class=\"mt-4 p-3 rounded border-l-4 text-sm italic shadow-sm opacity-80\">\n                    \"{{ flowState.intervention.message }}\"\n                  </div>\n                }\n              </div>\n\n              <!-- Mood State -->\n              <div class=\"p-4 border rounded-lg shadow-sm flex flex-col\">\n                <h3 class=\"text-lg font-bold mb-2 flex items-center gap-2\">\n                  <span>\uD83C\uDFAD</span> Agent Mood\n                </h3>\n                <div class=\"flex-grow flex items-center justify-center\">\n                  @if (flowState.moodState?.value) {\n                    <div class=\"text-4xl font-black uppercase tracking-widest text-center drop-shadow-sm\">\n                      {{ flowState.moodState.value }}\n                    </div>\n                  } @else {\n                    <div class=\"text-xl font-medium italic opacity-50\">Neutral</div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n          <dc-conversation-summary [agentCard]=\"agentCard\" [parentInjector]=\"config.data.injector\" (completeEvent)=\"complete()\"></dc-conversation-summary>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"1\">\n        <ng-template #content>\n          <!-- Dynamic Flow -->\n\n          <p-divider>Conversation Flow</p-divider>\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (dynamicFlowService.conversationFlowConfig()?.goal?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Goal</p>\n            </div>\n            @if(dynamicFlowService.conversationFlowConfig()?.goal?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.triggerTasks?.onUserMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger User Message</p>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.triggerTasks?.onUserMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.triggerTasks?.onAssistantMessage?.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Trigger Assistant Message</p>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.triggerTasks?.onAssistantMessage?.task; as task) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ task }} </div>\n            }\n          </div>\n\n          <h3>Herramientas</h3>\n          @for (tool of agentCardStateService.conversationFlow$()?.tools; track tool.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (tool.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">{{ tool.name }}</p>\n            </div>\n            @if(tool.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ tool.description }} </div>\n            }\n          </div>\n          }\n\n          <h3>Challenges Retos</h3>\n          @for (challenge of dynamicFlowService.conversationFlowConfig()?.challenges; track challenge.name) {\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (challenge.enabled) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n\n              <p class=\"font-semibold\"> {{ challenge.emoji }} {{ challenge.name }}</p>\n            </div>\n            @if(challenge.description) {\n            <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> {{ challenge.description }} </div>\n            }\n          </div>\n          }\n          <h5>Conditions</h5>\n\n          @for (condition of dynamicFlowService.conversationFlowConfig()?.dynamicConditions; track $index) {\n          <div class=\"pl-2 mt-1 text-sm text-gray-600 italic\"> When the {{ condition.what }} is {{ condition.when }} than {{ condition.value }} Do </div>\n          <ol>\n            @for (doAction of condition.do; track $index) {\n            <li class=\"pl-5 mt-1 text-sm text-gray-600 italic\">\n              {{ $index }})\n              <span style=\"color: brown\"> {{ doAction.actionType }}</span>\n              <span style=\"color: green\"> {{ doAction.systemPromptType }}</span>\n              <span style=\"color: green\"> {{ doAction.dynamicFlowTaskType }}</span>\n\n              to\n              <span style=\"color: rgb(49, 23, 177)\"> {{ doAction.enabled }}</span>\n              \"{{ doAction.prompt }}\"\n            </li>\n            }\n          </ol>\n          }\n\n          <p>Challenges</p>\n          <pre>{{ agentCardStateService.conversationFlow$()?.challenges | safeJson }}</pre>\n\n          <p-divider>Performance Evaluation</p-divider>\n          <div class=\"mb-2\">\n            <div class=\"flex items-center gap-2\">\n              @if (agentCardStateService.conversationFlow$()?.enablePerformanceAnalysis !== false) {\n              <div class=\"w-3 h-3 bg-green-500 rounded-full\" pTooltip=\"Active\"></div>\n              } @else {\n              <div class=\"w-3 h-3 bg-red-500 rounded-full\" pTooltip=\"Inactive\"></div>\n              }\n              <p class=\"font-semibold\">Performance Prompt</p>\n              <span class=\"text-xs text-gray-400 ml-2\" pTooltip=\"Minimum messages required to trigger evaluation\">(MIN_MESSAGES_EVALUATE: 4 hardcoded)</span>\n            </div>\n            @if(agentCardStateService.conversationFlow$()?.enablePerformanceAnalysis !== false) {\n              @if(agentCardStateService.conversationFlow$()?.performancePrompt; as prompt) {\n              <div class=\"pl-5 mt-1 text-sm text-gray-600 italic\"> \n                <markdown>\n                {{ prompt }} \n                </markdown>\n              </div>\n              } @else {\n              <div class=\"pl-5 mt-1 text-sm text-gray-400 italic\"> No custom performance prompt defined (using default). </div>\n              }\n            } @else {\n            <div class=\"pl-5 mt-1 text-sm text-gray-400 italic\"> Performance analysis disabled. </div>\n            }\n          </div>\n\n          <p-divider>System Evaluation Prompt</p-divider>\n          <details>\n            <summary>Show Prompt</summary>\n            <pre>{{ systemPromptForFlow() }}</pre>\n          </details>\n\n          <!-- Dynamic Flow ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"5\">\n        <ng-template #content>\n          @if (conversationFlowStateService.flowState(); as flowState) {\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 mt-2\">\n              <!-- Goal State -->\n              <div class=\"p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFAF</span> Goal Progress\n                </h3>\n                <div class=\"flex items-end gap-4 mb-3\">\n                  <div class=\"text-5xl font-black leading-none\">\n                    {{ flowState.goal?.value || 0 }}\n                  </div>\n                  @if (flowState.goal?.deltaPoints !== undefined) {\n                    <div class=\"text-xl font-bold mb-1\" \n                         [class.text-green-600]=\"flowState.goal.deltaPoints > 0\"\n                         [class.text-red-600]=\"flowState.goal.deltaPoints < 0\"\n                         [class.opacity-50]=\"flowState.goal.deltaPoints === 0\">\n                      {{ flowState.goal.deltaPoints > 0 ? '+' : '' }}{{ flowState.goal.deltaPoints }}\n                    </div>\n                  }\n                </div>\n                \n                @if (flowState.intervention?.message) {\n                  <div class=\"mt-4 p-3 rounded border-l-4 text-sm italic shadow-sm opacity-80\">\n                    \"{{ flowState.intervention.message }}\"\n                  </div>\n                }\n              </div>\n\n              <!-- Mood State -->\n              <div class=\"p-4 border rounded-lg shadow-sm flex flex-col\">\n                <h3 class=\"text-lg font-bold mb-2 flex items-center gap-2\">\n                  <span>\uD83C\uDFAD</span> Agent Mood\n                </h3>\n                <div class=\"flex-grow flex items-center justify-center\">\n                  @if (flowState.moodState?.value) {\n                    <div class=\"text-4xl font-black uppercase tracking-widest text-center drop-shadow-sm\">\n                      {{ flowState.moodState.value }}\n                    </div>\n                  } @else {\n                    <div class=\"text-xl font-medium italic opacity-50\">Neutral</div>\n                  }\n                </div>\n              </div>\n            </div>\n\n            @if (flowState.challenges?.length) {\n              <div class=\"mb-4 p-4 border rounded-lg shadow-sm\">\n                <h3 class=\"text-lg font-bold mb-3 flex items-center gap-2\">\n                  <span>\uD83C\uDFC6</span> Completed Challenges\n                </h3>\n                <ul class=\"list-disc pl-5 space-y-1\">\n                  @for (challenge of flowState.challenges; track challenge) {\n                    <li>{{ challenge }}</li>\n                  }\n                </ul>\n              </div>\n            }\n\n            <details class=\"mt-4\">\n              <summary class=\"cursor-pointer text-sm font-medium\">Raw JSON State</summary>\n              <pre class=\"mt-2 p-2 rounded text-xs overflow-auto\">{{ flowState | safeJson }}</pre>\n            </details>\n          } @else {\n            <p class=\"italic mt-2 opacity-50\">No conversation state available.</p>\n          }\n\n          <details class=\"mt-2\">\n            <summary class=\"cursor-pointer text-sm font-medium\">Current Prompt</summary>\n            <pre class=\"mt-2 p-2 rounded text-xs overflow-auto\">{{ systemPromptForFlow() }}</pre>\n          </details>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"2\">\n        <ng-template #content>\n          <div>\n            <p-button label=\"Exportar todo\" (click)=\"exportChat('all')\" />\n            <p-button label=\"Exportar conversaci\u00F3n\" (click)=\"exportChat('conversation')\" />\n            <p-button [label]=\"'Vista ' + viewMode()\" (click)=\"toggleViewMode()\" />\n          </div>\n          <dc-prompt-preview [messages]=\"messageStateService.getMessagesSignal()()\" [view]=\"viewMode()\"></dc-prompt-preview>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"6\">\n        <ng-template #content>\n          <dc-messages-state-inspector [service]=\"messageStateService\"></dc-messages-state-inspector>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"3\">\n        <ng-template #content>\n          <dc-cost-details></dc-cost-details>\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"4\">\n        <ng-template #content>\n          <!-- MORE INFO -->\n\n          <details>\n            <summary>Estado Global Conversation Flow</summary>\n            <p>Goal</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.goal | safeJson }}</pre>\n            <p>Trigger User Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.triggerTasks?.onUserMessage | safeJson }}</pre>\n            <p>Trigger Assistant Message</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.triggerTasks?.onAssistantMessage | safeJson }}</pre>\n            <p>Conditions</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.dynamicConditions | safeJson }}</pre>\n            <p>Tools</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.tools | safeJson }}</pre>\n            <p>Challenges</p>\n            <pre>{{ dynamicFlowService.conversationFlowConfig()?.challenges | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>Conversation Settings (Debug)</summary>\n            <pre>{{ conversationService.conversationSettings$() | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>Agent Card</summary>\n            <pre>{{ agentCard | safeJson }}</pre>\n          </details>\n\n          <details>\n            <summary>User Settings</summary>\n            <pre>{{ chatUserSettings | safeJson }}</pre>\n          </details>\n\n          <!-- MORE INFO ends Here -->\n        </ng-template>\n      </p-tabpanel>\n      <p-tabpanel value=\"7\">\n        <ng-template #content>\n          <dc-agent-card-detail [entityData]=\"agentCardStateService.agentCard$()\" />\n        </ng-template>\n      </p-tabpanel>\n    </p-tabpanels>\n  </p-tabs>\n</div>\n", styles: [":host{overflow-y:scroll}.info-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { completeEvent: [{ type: i0.Output, args: ["completeEvent"] }] } });
 
 class ConversationInfoService {
@@ -6347,7 +6665,9 @@ class DCChatComponent {
         // 📥 Input Signals
         this.parseDict = input({}, ...(ngDevMode ? [{ debugName: "parseDict" }] : /* istanbul ignore next */ []));
         // 📤 Outputs
+        /** @deprecated Use ChatMonitorService instead — el canal oficial es el servicio compartido. */
         this.chatEvent = output(); // Notifies about various events happening inside the chat
+        /** @deprecated Use ChatMonitorService instead — el canal oficial es el servicio compartido. */
         this.goalCompleted = output(); // notifies when user completes goal (score reaches 100)
         // readonly wordClicked = output<WordData>(); // Replaced by sendMessage with ChatEventType.WordClicked
         // Signals States
@@ -6360,6 +6680,7 @@ class DCChatComponent {
         effect(() => {
             const score = this.conversationFlowStateService.flowState().goal.value;
             if (score >= 100) {
+                // TODO: check if i can use the monitor in the father so subscribe to this. 
                 this.goalCompleted.emit();
             }
         });
@@ -6373,19 +6694,6 @@ class DCChatComponent {
                 // this.conversationService.notifyWordClicked(null);
             }
         });
-        // Effect to watch for audio playback events
-        effect(() => {
-            const message = this.chatMonitorService.messageAudioWillPlay$();
-            if (message) {
-                this.chatEvent.emit({ type: ChatEventType.AudioStarted, payload: message });
-            }
-        });
-        // Subscribe to mood updates
-        this.moodSubscription = this.conversationFlowStateService.moodUpdated$.subscribe((mood) => {
-            if (mood) {
-                this.chatEvent.emit({ type: ChatEventType.MoodDetected, payload: mood });
-            }
-        });
     }
     async ngOnInit() {
         this.conversationService.setDestroyed(false);
@@ -6406,7 +6714,6 @@ class DCChatComponent {
         // Mark conversation as destroyed to prevent async operations
         this.conversationService.setDestroyed(true);
         this.chatMonitorService.cleanMonitorVars();
-        this.moodSubscription?.unsubscribe();
         // Ensure the microphone is stopped when the chat component is destroyed
         this.chatFooterComponent?.stopMic();
         this.checkPerformanceAnalysis();
@@ -6476,7 +6783,8 @@ class DCChatComponent {
             ConversationFlowStateService,
             DynamicFlowService,
             AgentCardStateService,
-            ChatMonitorService,
+            // ChatMonitorService removido del providers[] local: ahora la instancia la provee el
+            // componente ancestro (ConversationCardDetailsComponent) para compartirla con dc-agent-card-avatar.
             ContextEngineService,
         ], viewQueries: [{ propertyName: "chatFooterComponent", first: true, predicate: ChatFooterComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat-container\">\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [viewMode]=\"viewMode()\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\"\n    (completeEvent)=\"complete()\"\n    (viewModeChanged)=\"viewMode.set($event)\">\n  </dc-chat-header>\n\n  @if (viewMode() === 'chat') {\n    <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\"> </dc-chat-messages-list>\n    <dc-chat-footer [micSettings]=\"micSettings\"> </dc-chat-footer>\n  } @else {\n    <dc-immersive-chat [micSettings]=\"micSettings\"></dc-immersive-chat>\n  }\n\n  <dc-polito-notification></dc-polito-notification>\n  <dc-observer-intervention [customConfig]=\"observerConfig\"></dc-observer-intervention>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent;position:relative}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["alternativeConversation", "agentCard", "viewMode"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent", "viewModeChanged"] }, { kind: "component", type: ChatFooterComponent, selector: "dc-chat-footer", inputs: ["isAIThinking", "micSettings"], outputs: ["sendMessage", "textInputChanged"] }, { kind: "component", type: ChatMessagesListComponent, selector: "dc-chat-messages-list", inputs: ["chatUserSettings"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: DcImmersiveChatComponent, selector: "dc-immersive-chat", inputs: ["micSettings"] }, { kind: "component", type: PolitoNotificationComponent, selector: "dc-polito-notification" }, { kind: "component", type: DcObserverInterventionComponent, selector: "dc-observer-intervention", inputs: ["customConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -6503,7 +6811,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         ConversationFlowStateService,
                         DynamicFlowService,
                         AgentCardStateService,
-                        ChatMonitorService,
+                        // ChatMonitorService removido del providers[] local: ahora la instancia la provee el
+                        // componente ancestro (ConversationCardDetailsComponent) para compartirla con dc-agent-card-avatar.
                         ContextEngineService,
                     ], template: "<div class=\"chat-container\">\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    [viewMode]=\"viewMode()\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\"\n    (completeEvent)=\"complete()\"\n    (viewModeChanged)=\"viewMode.set($event)\">\n  </dc-chat-header>\n\n  @if (viewMode() === 'chat') {\n    <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\"> </dc-chat-messages-list>\n    <dc-chat-footer [micSettings]=\"micSettings\"> </dc-chat-footer>\n  } @else {\n    <dc-immersive-chat [micSettings]=\"micSettings\"></dc-immersive-chat>\n  }\n\n  <dc-polito-notification></dc-polito-notification>\n  <dc-observer-intervention [customConfig]=\"observerConfig\"></dc-observer-intervention>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent;position:relative}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chatFooterComponent: [{
@@ -7496,7 +7805,7 @@ class CharacterFormGroupService {
             conversationFlow: this.createConversationFlowFormGroup(),
             manageable: this.formUtils.createManageableFormGroup(),
             learnable: this.formUtils.createLearnableFormGroup(),
-            voiceCloning: this.createVoiceCloningFormGroup(),
+            voice: this.createAgentVoiceFormGroup(),
             agenticConfig: this.createAgenticConfigFormGroup(),
             live2d: [null],
             avatarType: [null],
@@ -7504,6 +7813,22 @@ class CharacterFormGroupService {
     }
     patchFormWithConversationData(form, agentCard) {
         form.patchValue(agentCard);
+        if (!agentCard.voice) {
+            const voicePatch = {};
+            if (agentCard.conversationSettings?.mainVoice) {
+                voicePatch.main = agentCard.conversationSettings.mainVoice;
+            }
+            if (agentCard.conversationSettings?.secondaryVoice) {
+                voicePatch.secondary = agentCard.conversationSettings.secondaryVoice;
+            }
+            if (agentCard.voiceCloning) {
+                voicePatch.cloning = {
+                    sample: agentCard.voiceCloning.sample,
+                    transcription: agentCard.voiceCloning.transcription
+                };
+            }
+            form.get('voice')?.patchValue(voicePatch);
+        }
         // Patch dynamicConditions FormArray after the main form is patched
         const dynamicConditionsFormArray = form.get('conversationFlow.dynamicConditions');
         dynamicConditionsFormArray.clear(); // Clear any existing default items
@@ -7673,8 +7998,6 @@ class CharacterFormGroupService {
             userMustStart: [false],
             streamResponses: [false],
             displayMode: ['chat'],
-            mainVoice: this.createVoiceTTSFormGroup(),
-            secondaryVoice: this.createVoiceTTSFormGroup(),
             model: createAIModelFormGroup(),
             rules: this.fb.array([]),
             chatMode: ['regular'],
@@ -7777,11 +8100,14 @@ class CharacterFormGroupService {
             emoji: [criteria?.emoji || ''],
         });
     }
-    createVoiceCloningFormGroup() {
+    createAgentVoiceFormGroup(voice) {
         return this.fb.group({
-            sample: [],
-            transcription: [''],
-            main: this.createVoiceTTSFormGroup(),
+            main: this.createVoiceTTSFormGroup(voice?.main),
+            secondary: this.createVoiceTTSFormGroup(voice?.secondary),
+            cloning: this.fb.group({
+                sample: [voice?.cloning?.sample || null],
+                transcription: [voice?.cloning?.transcription || ''],
+            })
         });
     }
     createAgenticConfigFormGroup() {
@@ -8328,47 +8654,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 type: Output
             }] } });
 
-class DcVoiceTtsFormComponent {
-    constructor() {
-        this.dialogService = inject(DialogService);
-        this.cdr = inject(ChangeDetectorRef);
-        this.form = input.required(...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
-        this.title = input('Voice TTS Settings', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.voiceTTSOptions = input([], ...(ngDevMode ? [{ debugName: "voiceTTSOptions" }] : /* istanbul ignore next */ []));
-        this.fullForm = input(false, ...(ngDevMode ? [{ debugName: "fullForm" }] : /* istanbul ignore next */ []));
-        this.providerOptions = [
-            { label: 'Google', value: 'google' },
-            { label: 'Fish Audio', value: 'fish-audio' },
-        ];
-    }
-    openVoiceSelector() {
-        const voiceControl = this.form().get('voice');
-        const dialogRef = this.dialogService.open(VoiceSelectorComponent, {
-            header: 'Select Voice',
-            width: '50vw',
-            maximizable: true,
-            height: '500px',
-            contentStyle: { 'max-height': '90vh', overflow: 'auto', 'min-height': '500px' },
-            baseZIndex: 10000,
-            closable: true,
-            modal: true,
-            data: { currentVoiceId: voiceControl?.value },
-        });
-        dialogRef.onClose.subscribe((selectedVoiceId) => {
-            if (selectedVoiceId) {
-                voiceControl?.setValue(selectedVoiceId);
-                this.cdr.detectChanges();
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcVoiceTtsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcVoiceTtsFormComponent, isStandalone: true, selector: "dc-voice-tts-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, voiceTTSOptions: { classPropertyName: "voiceTTSOptions", publicName: "voiceTTSOptions", isSignal: true, isRequired: false, transformFunction: null }, fullForm: { classPropertyName: "fullForm", publicName: "fullForm", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<h3> {{ title() }}</h3>\n<div [formGroup]=\"form()\" class=\"form-grid\">\n  @if (fullForm()) {\n  <div class=\"form-field\">\n    <label for=\"provider\">Provider <span pTooltip=\"TTS provider\">\u2139\uFE0F</span></label>\n    <p-select id=\"provider\" [options]=\"providerOptions\" formControlName=\"provider\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select Provider\" class=\"w-full\"></p-select>\n  </div>\n  }\n\n  <div class=\"form-field\">\n    <label for=\"voice\">Voice <span pTooltip=\"Select the voice for text-to-speech\">\u2139\uFE0F</span></label>\n    <p-inputgroup>\n      <p-inputgroup-addon>\n        <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector()\" />\n      </p-inputgroup-addon>\n      <p-select\n        id=\"voice\"\n        [editable]=\"true\"\n        [options]=\"voiceTTSOptions()\"\n        formControlName=\"voice\"\n        optionLabel=\"name\"\n        optionValue=\"id\"\n        [placeholder]=\"'Select Voice'\" />\n    </p-inputgroup>\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n    <br />\n    <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n  </div>\n\n  @if (fullForm()) {\n  <div class=\"form-field\">\n    <label for=\"model\">Model <span pTooltip=\"Model ID if the provider requires it\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"model\" type=\"text\" formControlName=\"model\" />\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"lang\">Language <span pTooltip=\"Language code override (optional, usually included in the voice ID)\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"lang\" type=\"text\" formControlName=\"lang\" />\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"effect\">Effect <span pTooltip=\"Platform audio effect\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"effect\" type=\"text\" formControlName=\"effect\" />\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3$4.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i4$4.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CardModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcVoiceTtsFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-voice-tts-form', standalone: true, imports: [ReactiveFormsModule, DynamicDialogModule, ButtonModule, InputGroupModule, InputGroupAddonModule, SelectModule, InputTextModule, CardModule], providers: [DialogService], template: "<h3> {{ title() }}</h3>\n<div [formGroup]=\"form()\" class=\"form-grid\">\n  @if (fullForm()) {\n  <div class=\"form-field\">\n    <label for=\"provider\">Provider <span pTooltip=\"TTS provider\">\u2139\uFE0F</span></label>\n    <p-select id=\"provider\" [options]=\"providerOptions\" formControlName=\"provider\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select Provider\" class=\"w-full\"></p-select>\n  </div>\n  }\n\n  <div class=\"form-field\">\n    <label for=\"voice\">Voice <span pTooltip=\"Select the voice for text-to-speech\">\u2139\uFE0F</span></label>\n    <p-inputgroup>\n      <p-inputgroup-addon>\n        <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector()\" />\n      </p-inputgroup-addon>\n      <p-select\n        id=\"voice\"\n        [editable]=\"true\"\n        [options]=\"voiceTTSOptions()\"\n        formControlName=\"voice\"\n        optionLabel=\"name\"\n        optionValue=\"id\"\n        [placeholder]=\"'Select Voice'\" />\n    </p-inputgroup>\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n    <br />\n    <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n  </div>\n\n  @if (fullForm()) {\n  <div class=\"form-field\">\n    <label for=\"model\">Model <span pTooltip=\"Model ID if the provider requires it\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"model\" type=\"text\" formControlName=\"model\" />\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"lang\">Language <span pTooltip=\"Language code override (optional, usually included in the voice ID)\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"lang\" type=\"text\" formControlName=\"lang\" />\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"effect\">Effect <span pTooltip=\"Platform audio effect\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"effect\" type=\"text\" formControlName=\"effect\" />\n  </div>\n  }\n</div>\n" }]
-        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], voiceTTSOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "voiceTTSOptions", required: false }] }], fullForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullForm", required: false }] }] } });
-
 class PromptConversationTypesDialogComponent {
     constructor() {
         this.dialogRef = inject(DynamicDialogRef);
@@ -8438,12 +8723,6 @@ class DcConversationSettingsFormComponent {
     get rulesFormArray() {
         return this.form.get('rules');
     }
-    get mainVoiceFormGroup() {
-        return this.form.get('mainVoice');
-    }
-    get secondaryVoiceFormGroup() {
-        return this.form.get('secondaryVoice');
-    }
     get modelFormGroup() {
         return this.form.get('model');
     }
@@ -8475,7 +8754,7 @@ class DcConversationSettingsFormComponent {
         this.getRules();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcConversationSettingsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcConversationSettingsFormComponent, isStandalone: true, selector: "dc-conversation-settings-form", inputs: { form: "form", textEngineOptions: "textEngineOptions", conversationOptions: "conversationOptions", voiceTTSOptions: "voiceTTSOptions" }, providers: [DialogService], ngImport: i0, template: "<div [formGroup]=\"form\">\n  <h3 class=\"text-xl font-bold border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div>\n    <label for=\"rules\" class=\"block text-sm font-medium\">\n      Conversation Rules\n      <span pTooltip=\"Add rules to the conversation\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n    </label>\n    <p-select id=\"rules\" [options]=\"rules\" (onChange)=\"addRule($event.value)\" placeholder=\"Select a Rule\" optionLabel=\"name\" class=\"w-full\"></p-select>\n\n    <div formArrayName=\"rules\" class=\"mt-4 space-y-2\">\n      @for (rule of rulesFormArray.controls; track rule; let i = $index) {\n      <div [formGroupName]=\"i\" class=\"flex items-center justify-between p-2 border rounded-md\">\n        <span>{{ rule.value.name }}</span>\n        <button pButton type=\"button\" icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\" (click)=\"removeRule(i)\"></button>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"md:col-span-2\">\n      <label for=\"displayMode\" class=\"block text-sm font-medium text-red-500\">\n        Display Mode (Deprecated Soon)\n        <span pTooltip=\"[Deprecated] Use Chat Mode and Avatar Display Mode instead.\" class=\"text-red-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"displayMode\"\n        [options]=\"displayModeOptions\"\n        formControlName=\"displayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"chatMode\" class=\"block text-sm font-medium\">\n        Chat Mode\n        <span pTooltip=\"regular: standard scrolling message list | immersive: voice-first Heads-Up Display (HUD)\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"chatMode\"\n        [options]=\"chatModeOptions\"\n        formControlName=\"chatMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Chat Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"avatarDisplayMode\" class=\"block text-sm font-medium\">\n        Avatar Display Mode\n        <span pTooltip=\"card: enclosed box layout | transparent: floats overlaying background | fullscreen: stretches model to fill page behind chat\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"avatarDisplayMode\"\n        [options]=\"avatarDisplayModeOptions\"\n        formControlName=\"avatarDisplayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Avatar Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        User Must Start\n        <span pTooltip=\"If true the user must start the conversation, ignoring first message if any.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"userMustStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Stream Responses\n        <span pTooltip=\"Enable real-time token streaming for LLM responses.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"streamResponses\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-voice-tts-form [form]=\"mainVoiceFormGroup\" [title]=\"'Main Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <dc-voice-tts-form [form]=\"secondaryVoiceFormGroup\" [title]=\"'Secondary Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n  <hr />\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i4$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions", "fullForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcConversationSettingsFormComponent, isStandalone: true, selector: "dc-conversation-settings-form", inputs: { form: "form", textEngineOptions: "textEngineOptions", conversationOptions: "conversationOptions", voiceTTSOptions: "voiceTTSOptions" }, providers: [DialogService], ngImport: i0, template: "<div [formGroup]=\"form\">\n  <h3 class=\"text-xl font-bold border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div>\n    <label for=\"rules\" class=\"block text-sm font-medium\">\n      Conversation Rules\n      <span pTooltip=\"Add rules to the conversation\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n    </label>\n    <p-select id=\"rules\" [options]=\"rules\" (onChange)=\"addRule($event.value)\" placeholder=\"Select a Rule\" optionLabel=\"name\" class=\"w-full\"></p-select>\n\n    <div formArrayName=\"rules\" class=\"mt-4 space-y-2\">\n      @for (rule of rulesFormArray.controls; track rule; let i = $index) {\n      <div [formGroupName]=\"i\" class=\"flex items-center justify-between p-2 border rounded-md\">\n        <span>{{ rule.value.name }}</span>\n        <button pButton type=\"button\" icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\" (click)=\"removeRule(i)\"></button>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"md:col-span-2\">\n      <label for=\"displayMode\" class=\"block text-sm font-medium text-red-500\">\n        Display Mode (Deprecated Soon)\n        <span pTooltip=\"[Deprecated] Use Chat Mode and Avatar Display Mode instead.\" class=\"text-red-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"displayMode\"\n        [options]=\"displayModeOptions\"\n        formControlName=\"displayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"chatMode\" class=\"block text-sm font-medium\">\n        Chat Mode\n        <span pTooltip=\"regular: standard scrolling message list | immersive: voice-first Heads-Up Display (HUD)\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"chatMode\"\n        [options]=\"chatModeOptions\"\n        formControlName=\"chatMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Chat Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"avatarDisplayMode\" class=\"block text-sm font-medium\">\n        Avatar Display Mode\n        <span pTooltip=\"card: enclosed box layout | transparent: floats overlaying background | fullscreen: stretches model to fill page behind chat\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"avatarDisplayMode\"\n        [options]=\"avatarDisplayModeOptions\"\n        formControlName=\"avatarDisplayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Avatar Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        User Must Start\n        <span pTooltip=\"If true the user must start the conversation, ignoring first message if any.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"userMustStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Stream Responses\n        <span pTooltip=\"Enable real-time token streaming for LLM responses.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"streamResponses\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n  <hr />\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i4$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcConversationSettingsFormComponent, decorators: [{
             type: Component,
@@ -8489,8 +8768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         PopoverModule,
                         DynamicDialogModule,
                         ModelSelectorComponent,
-                        DcVoiceTtsFormComponent,
-                    ], providers: [DialogService], template: "<div [formGroup]=\"form\">\n  <h3 class=\"text-xl font-bold border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div>\n    <label for=\"rules\" class=\"block text-sm font-medium\">\n      Conversation Rules\n      <span pTooltip=\"Add rules to the conversation\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n    </label>\n    <p-select id=\"rules\" [options]=\"rules\" (onChange)=\"addRule($event.value)\" placeholder=\"Select a Rule\" optionLabel=\"name\" class=\"w-full\"></p-select>\n\n    <div formArrayName=\"rules\" class=\"mt-4 space-y-2\">\n      @for (rule of rulesFormArray.controls; track rule; let i = $index) {\n      <div [formGroupName]=\"i\" class=\"flex items-center justify-between p-2 border rounded-md\">\n        <span>{{ rule.value.name }}</span>\n        <button pButton type=\"button\" icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\" (click)=\"removeRule(i)\"></button>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"md:col-span-2\">\n      <label for=\"displayMode\" class=\"block text-sm font-medium text-red-500\">\n        Display Mode (Deprecated Soon)\n        <span pTooltip=\"[Deprecated] Use Chat Mode and Avatar Display Mode instead.\" class=\"text-red-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"displayMode\"\n        [options]=\"displayModeOptions\"\n        formControlName=\"displayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"chatMode\" class=\"block text-sm font-medium\">\n        Chat Mode\n        <span pTooltip=\"regular: standard scrolling message list | immersive: voice-first Heads-Up Display (HUD)\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"chatMode\"\n        [options]=\"chatModeOptions\"\n        formControlName=\"chatMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Chat Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"avatarDisplayMode\" class=\"block text-sm font-medium\">\n        Avatar Display Mode\n        <span pTooltip=\"card: enclosed box layout | transparent: floats overlaying background | fullscreen: stretches model to fill page behind chat\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"avatarDisplayMode\"\n        [options]=\"avatarDisplayModeOptions\"\n        formControlName=\"avatarDisplayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Avatar Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        User Must Start\n        <span pTooltip=\"If true the user must start the conversation, ignoring first message if any.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"userMustStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Stream Responses\n        <span pTooltip=\"Enable real-time token streaming for LLM responses.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"streamResponses\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-voice-tts-form [form]=\"mainVoiceFormGroup\" [title]=\"'Main Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <dc-voice-tts-form [form]=\"secondaryVoiceFormGroup\" [title]=\"'Secondary Voice TTS Settings'\" [voiceTTSOptions]=\"voiceTTSOptions\"></dc-voice-tts-form>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n  <hr />\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n" }]
+                    ], providers: [DialogService], template: "<div [formGroup]=\"form\">\n  <h3 class=\"text-xl font-bold border-b pb-2\">\n    Chat Conversation Settings\n    <span pTooltip=\"Additional information about the conversation use in the chat\" class=\"text-blue-500 cursor-help text-sm\">\u2139\uFE0F</span>\n  </h3>\n\n  <div>\n    <label for=\"rules\" class=\"block text-sm font-medium\">\n      Conversation Rules\n      <span pTooltip=\"Add rules to the conversation\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n    </label>\n    <p-select id=\"rules\" [options]=\"rules\" (onChange)=\"addRule($event.value)\" placeholder=\"Select a Rule\" optionLabel=\"name\" class=\"w-full\"></p-select>\n\n    <div formArrayName=\"rules\" class=\"mt-4 space-y-2\">\n      @for (rule of rulesFormArray.controls; track rule; let i = $index) {\n      <div [formGroupName]=\"i\" class=\"flex items-center justify-between p-2 border rounded-md\">\n        <span>{{ rule.value.name }}</span>\n        <button pButton type=\"button\" icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\" (click)=\"removeRule(i)\"></button>\n      </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n    <div>\n      <label for=\"conversationType\" class=\"block text-sm font-medium\">\n        Conversation Type\n        <span class=\"cursor-pointer text-blue-500\" (click)=\"openConversationTypeDialog()\" pTooltip=\"Choose the type of conversation interaction\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"conversationType\"\n        [options]=\"conversationOptions\"\n        formControlName=\"conversationType\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Conversation Type'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"textEngine\" class=\"block text-sm font-medium\">\n        Text Engine\n        <span\n          class=\"cursor-pointer text-blue-500\"\n          (click)=\"textEngineDialog.toggle($event)\"\n          pTooltip=\"Sistema de generaci\u00F3n de texto y audios. Client: el cliente llama al servidor en cada dialogo de voz/personaje, es optimo para historias,  Server SSML: se sintetiza todo el audio en uno solo con los distintos cambios de voz/personaje, util para la reflexi\u00F3n porque es bilingue, utiliza dialogos en ingles y espa\u00F1ol en el mismo dialogo/audio\"\n          >\u2139\uFE0F</span\n        >\n      </label>\n      <p-select\n        id=\"textEngine\"\n        [options]=\"textEngineOptions\"\n        formControlName=\"textEngine\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Text Engine'\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Auto Start\n        <span pTooltip=\"Start conversation automatically\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"autoStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"md:col-span-2\">\n      <label for=\"displayMode\" class=\"block text-sm font-medium text-red-500\">\n        Display Mode (Deprecated Soon)\n        <span pTooltip=\"[Deprecated] Use Chat Mode and Avatar Display Mode instead.\" class=\"text-red-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"displayMode\"\n        [options]=\"displayModeOptions\"\n        formControlName=\"displayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"chatMode\" class=\"block text-sm font-medium\">\n        Chat Mode\n        <span pTooltip=\"regular: standard scrolling message list | immersive: voice-first Heads-Up Display (HUD)\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"chatMode\"\n        [options]=\"chatModeOptions\"\n        formControlName=\"chatMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Chat Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div>\n      <label for=\"avatarDisplayMode\" class=\"block text-sm font-medium\">\n        Avatar Display Mode\n        <span pTooltip=\"card: enclosed box layout | transparent: floats overlaying background | fullscreen: stretches model to fill page behind chat\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-select\n        id=\"avatarDisplayMode\"\n        [options]=\"avatarDisplayModeOptions\"\n        formControlName=\"avatarDisplayMode\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        placeholder=\"Select Avatar Display Mode\"\n        class=\"w-full mt-1\"></p-select>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        User Must Start\n        <span pTooltip=\"If true the user must start the conversation, ignoring first message if any.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"userMustStart\"></p-toggleSwitch>\n    </div>\n\n    <div class=\"flex items-center justify-between md:col-span-2\">\n      <label class=\"text-sm font-medium\">\n        Stream Responses\n        <span pTooltip=\"Enable real-time token streaming for LLM responses.\" class=\"text-blue-500 cursor-help\">\u2139\uFE0F</span>\n      </label>\n      <p-toggleSwitch formControlName=\"streamResponses\"></p-toggleSwitch>\n    </div>\n  </div>\n\n  <hr />\n\n  <dc-model-selector [modelForm]=\"modelFormGroup\" [shortForm]=\"true\"></dc-model-selector>\n  <hr />\n</div>\n\n<p-popover #textEngineDialog [style]=\"{ width: '350px' }\" header=\"Text Engine Information\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"p-4\">\n      <h3 class=\"text-md font-semibold mb-3 text-gray-800\">Text Engine Types</h3>\n      <ul class=\"space-y-3 text-sm text-gray-600\">\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Texto Simple:</strong>\n          La conversaci\u00F3n es como chatgpt, preguntas y responde, es la m\u00E1s b\u00E1sica.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">Multi Mensajes:</strong>\n          Utiliza markdown (recomendable entenderlo), para dar formato al texto. El sistema puede partir dialogos con distinto formato (normal, cursiva,\n          negritas) para generar distintas voces y estilos para el narrador y personaje.\n        </li>\n        <li>\n          <strong class=\"font-semibold text-gray-900\">MD SSML:</strong>\n          Markdown con SSML. Similar a Multi Mensajes, pero se presenta en un solo mensaje y la voz se genera para toda la linea. \u00DAtil para conversaciones\n          biling\u00FCes.\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</p-popover>\n" }]
         }], propDecorators: { form: [{
                 type: Input
             }], textEngineOptions: [{
@@ -8501,6 +8779,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 type: Input
             }] } });
 
+class DcVoiceTtsFormComponent {
+    constructor() {
+        this.dialogService = inject(DialogService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.form = input.required(...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+        this.title = input('Voice TTS Settings', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.voiceTTSOptions = input([], ...(ngDevMode ? [{ debugName: "voiceTTSOptions" }] : /* istanbul ignore next */ []));
+        this.fullForm = input(false, ...(ngDevMode ? [{ debugName: "fullForm" }] : /* istanbul ignore next */ []));
+        this.providerOptions = [
+            { label: 'Google', value: 'google' },
+            { label: 'Fish Audio', value: 'fish-audio' },
+        ];
+    }
+    openVoiceSelector() {
+        const voiceControl = this.form().get('voice');
+        const dialogRef = this.dialogService.open(VoiceSelectorComponent, {
+            header: 'Select Voice',
+            width: '50vw',
+            maximizable: true,
+            height: '500px',
+            contentStyle: { 'max-height': '90vh', overflow: 'auto', 'min-height': '500px' },
+            baseZIndex: 10000,
+            closable: true,
+            modal: true,
+            data: { currentVoiceId: voiceControl?.value },
+        });
+        dialogRef.onClose.subscribe((selectedVoiceId) => {
+            if (selectedVoiceId) {
+                voiceControl?.setValue(selectedVoiceId);
+                this.cdr.detectChanges();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcVoiceTtsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcVoiceTtsFormComponent, isStandalone: true, selector: "dc-voice-tts-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, voiceTTSOptions: { classPropertyName: "voiceTTSOptions", publicName: "voiceTTSOptions", isSignal: true, isRequired: false, transformFunction: null }, fullForm: { classPropertyName: "fullForm", publicName: "fullForm", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<h3> {{ title() }}</h3>\n<div [formGroup]=\"form()\" class=\"form-grid\">\n  @if (fullForm()) {\n  <div class=\"form-field\">\n    <label for=\"provider\">Provider <span pTooltip=\"TTS provider\">\u2139\uFE0F</span></label>\n    <p-select id=\"provider\" [options]=\"providerOptions\" formControlName=\"provider\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select Provider\" class=\"w-full\"></p-select>\n  </div>\n  }\n\n  <div class=\"form-field\">\n    <label for=\"voice\">Voice <span pTooltip=\"Select the voice for text-to-speech\">\u2139\uFE0F</span></label>\n    <p-inputgroup>\n      <p-inputgroup-addon>\n        <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector()\" />\n      </p-inputgroup-addon>\n      <p-select\n        id=\"voice\"\n        [editable]=\"true\"\n        [options]=\"voiceTTSOptions()\"\n        formControlName=\"voice\"\n        optionLabel=\"name\"\n        optionValue=\"id\"\n        [placeholder]=\"'Select Voice'\" />\n    </p-inputgroup>\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n    <br />\n    <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n  </div>\n\n  @if (fullForm()) {\n  <div class=\"form-field\">\n    <label for=\"model\">Model <span pTooltip=\"Model ID if the provider requires it\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"model\" type=\"text\" formControlName=\"model\" />\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"lang\">Language <span pTooltip=\"Language code override (optional, usually included in the voice ID)\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"lang\" type=\"text\" formControlName=\"lang\" />\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"effect\">Effect <span pTooltip=\"Platform audio effect\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"effect\" type=\"text\" formControlName=\"effect\" />\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3$4.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i4$4.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CardModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcVoiceTtsFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-voice-tts-form', standalone: true, imports: [ReactiveFormsModule, DynamicDialogModule, ButtonModule, InputGroupModule, InputGroupAddonModule, SelectModule, InputTextModule, CardModule], providers: [DialogService], template: "<h3> {{ title() }}</h3>\n<div [formGroup]=\"form()\" class=\"form-grid\">\n  @if (fullForm()) {\n  <div class=\"form-field\">\n    <label for=\"provider\">Provider <span pTooltip=\"TTS provider\">\u2139\uFE0F</span></label>\n    <p-select id=\"provider\" [options]=\"providerOptions\" formControlName=\"provider\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select Provider\" class=\"w-full\"></p-select>\n  </div>\n  }\n\n  <div class=\"form-field\">\n    <label for=\"voice\">Voice <span pTooltip=\"Select the voice for text-to-speech\">\u2139\uFE0F</span></label>\n    <p-inputgroup>\n      <p-inputgroup-addon>\n        <p-button [rounded]=\"true\" [text]=\"true\" icon=\"pi pi-exclamation-circle\" (click)=\"openVoiceSelector()\" />\n      </p-inputgroup-addon>\n      <p-select\n        id=\"voice\"\n        [editable]=\"true\"\n        [options]=\"voiceTTSOptions()\"\n        formControlName=\"voice\"\n        optionLabel=\"name\"\n        optionValue=\"id\"\n        [placeholder]=\"'Select Voice'\" />\n    </p-inputgroup>\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"speedRate\">Speed Rate <span pTooltip=\"Adjust the rate of speech delivery\">\u2139\uFE0F</span></label>\n    <br />\n    <input pInputText id=\"speedRate\" type=\"number\" formControlName=\"speedRate\" step=\"0.1\" />\n  </div>\n\n  @if (fullForm()) {\n  <div class=\"form-field\">\n    <label for=\"model\">Model <span pTooltip=\"Model ID if the provider requires it\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"model\" type=\"text\" formControlName=\"model\" />\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"lang\">Language <span pTooltip=\"Language code override (optional, usually included in the voice ID)\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"lang\" type=\"text\" formControlName=\"lang\" />\n  </div>\n\n  <div class=\"form-field\">\n    <label for=\"effect\">Effect <span pTooltip=\"Platform audio effect\">\u2139\uFE0F</span></label>\n    <input pInputText id=\"effect\" type=\"text\" formControlName=\"effect\" />\n  </div>\n  }\n</div>\n" }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], voiceTTSOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "voiceTTSOptions", required: false }] }], fullForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullForm", required: false }] }] } });
+
 class DCAgentCardFormComponent extends EntityBaseFormComponent {
     constructor() {
         super(...arguments);
@@ -8539,14 +8858,14 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.isGenerating = signal(false, ...(ngDevMode ? [{ debugName: "isGenerating" }] : /* istanbul ignore next */ []));
         this.isCloningVoice = signal(false, ...(ngDevMode ? [{ debugName: "isCloningVoice" }] : /* istanbul ignore next */ []));
         this.canCloneVoice = computed(() => {
-            const sampleUrl = this.form.get('voiceCloning.sample')?.value?.url;
-            const voiceId = this.form.get('voiceCloning.main.voice')?.value;
+            const sampleUrl = this.form.get('voice.cloning.sample')?.value?.url;
+            const voiceId = this.form.get('voice.main.voice')?.value;
             const canCloneVoiceVar = !!sampleUrl && !voiceId;
             return canCloneVoiceVar;
         }, ...(ngDevMode ? [{ debugName: "canCloneVoice" }] : /* istanbul ignore next */ []));
         this.fishModelId = computed(() => {
-            const voiceId = this.form.get('voiceCloning.main.voice')?.value;
-            const provider = this.form.get('voiceCloning.main.provider')?.value;
+            const voiceId = this.form.get('voice.main.voice')?.value;
+            const provider = this.form.get('voice.main.provider')?.value;
             return voiceId && provider === 'fish-audio' ? voiceId : null;
         }, ...(ngDevMode ? [{ debugName: "fishModelId" }] : /* istanbul ignore next */ []));
     }
@@ -8769,15 +9088,15 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
     }
     onFileUploaded(event) {
         console.log('File uploaded', event);
-        this.form.controls.voiceCloning.patchValue({ sample: event });
+        this.form.get('voice.cloning')?.patchValue({ sample: event });
     }
     async cloneVoice() {
-        const sample = this.form.get('voiceCloning.sample')?.value;
+        const sample = this.form.get('voice.cloning.sample')?.value;
         if (!sample?.url) {
             this.toastService?.error({ title: 'Falta el sample', subtitle: 'Sube un audio antes de crear el modelo' });
             return;
         }
-        const text = this.form.get('voiceCloning.transcription')?.value || '';
+        const text = this.form.get('voice.cloning.transcription')?.value || '';
         const agentName = this.form.get('name')?.value || 'Polilan';
         const title = `${agentName} — voice`;
         this.isCloningVoice.set(true);
@@ -8788,9 +9107,9 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
                 text,
                 trainMode: 'fast',
             });
-            const mainCtrl = this.form.get('voiceCloning.main');
-            mainCtrl?.patchValue({ voice: res._id, provider: 'fish-audio' });
-            mainCtrl?.markAsDirty();
+            const newMainCtrl = this.form.get('voice.main');
+            newMainCtrl?.patchValue({ voice: res._id, provider: 'fish-audio' });
+            newMainCtrl?.markAsDirty();
             this.toastService?.success({ title: 'Modelo de voz creado', subtitle: res._id });
         }
         catch (e) {
@@ -8811,7 +9130,7 @@ class DCAgentCardFormComponent extends EntityBaseFormComponent {
         this.router.navigate(['../../cards-creator'], { relativeTo: this.route });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DCAgentCardFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { inputSettings: { classPropertyName: "inputSettings", publicName: "inputSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSave: "onSave", onSelectLive2d: "onSelectLive2d" }, providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n    <p-button severity=\"danger\" (click)=\"deleteCard()\" icon=\"pi pi-trash\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" >\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"avatarType\">Avatar Type <span pTooltip=\"image: static picture | video: double looping video (ping-pong) | live2d: interactive 2D model with real-time audio lip-sync | vroid: 3D model (future)\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"avatarType\"\n              [options]=\"avatarTypeOptions\"\n              formControlName=\"avatarType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              placeholder=\"Select Avatar Type\"\n              class=\"w-full mt-1\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label>Avatar Live2D <span pTooltip=\"Selecciona el modelo Live2D para este agente\">\u2139\uFE0F</span></label>\n            <div style=\"display: flex; align-items: center; gap: 12px; margin-top: 4px;\">\n              @if (form.get('live2d')?.value; as live2d) {\n                <div style=\"display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--p-border-color); border-radius: 6px; background: var(--p-content-background);\">\n                  <img width=\"36px\" height=\"36px\" style=\"border-radius: 50%; object-fit: cover;\" [src]=\"live2d.image?.url || 'defaults/images/face-3.jpg'\" alt=\"live2d preview\" />\n                  <span style=\"font-weight: 500;\">{{ live2d.name }}</span>\n                  <p-button icon=\"pi pi-times\" [text]=\"true\" severity=\"danger\" (onClick)=\"form.patchValue({ live2d: null })\" />\n                </div>\n              }\n              <p-button (onClick)=\"onSelectLive2d.emit()\" label=\"Seleccionar Live2D\" icon=\"pi pi-search\" [outlined]=\"true\" />\n            </div>\n          </div>\n        </div>\n\n                  <p-accordion [multiple]=\"true\" >\n            <p-accordion-panel value=\"manageable\">\n              <p-accordion-header>\n                <span>Manageable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Controla visibilidad y acceso</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"learnable\">\n              <p-accordion-header>\n                <span>Learnable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Aprendizaje y conocimiento</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"conversationSettings\">\n              <p-accordion-header>\n                <span>Conversation Settings</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Modelo, voz y configuraci\u00F3n del chat</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-settings-form\n                  [form]=\"form.controls.conversationSettings\"\n                  [textEngineOptions]=\"textEngineOptions\"\n                  [conversationOptions]=\"conversationOptions\"\n                  [voiceTTSOptions]=\"voiceTTSOptions\">\n                </dc-conversation-settings-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.conversationFlow){\n            <p-accordion-panel value=\"conversationFlow\">\n              <p-accordion-header>\n                <span>Conversation Flow</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Objetivos, triggers y condiciones din\u00E1micas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n            <p-accordion-panel value=\"accounts\">\n              <p-accordion-header>\n                <span>Gesti\u00F3n de cuentas</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                @if(form.controls.accounts) {\n                <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n                }\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"voiceCloning\">\n              <p-accordion-header>\n                <span>Clonaci\u00F3n de voz</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"voiceCloning\">\n                  <div class=\"form-field\">\n                    <label for=\"transcription\">Transcription</label>\n                    <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n                  </div>\n                  <div class=\"form-field\">\n                    <dc-simple-uploader\n                      buttonLabel=\"Subir audio\"\n                      [storagePath]=\"'conversation-cards/' + entityId()\"\n                      (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n                    @if(form.get('voiceCloning.sample').value?.url){\n                    <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n                    }\n                  </div>\n                  <div class=\"form-field voice-clone-status\">\n                    @if(!form.get('voiceCloning.sample').value?.url){\n                      <small class=\"muted\">Sube un audio para entrenar un modelo de voz.</small>\n                    }\n                    <!-- @if(canCloneVoice()){ -->\n                      <p-button\n                        icon=\"pi pi-bolt\"\n                        severity=\"help\"\n                        [loading]=\"isCloningVoice()\"\n                        label=\"Crear modelo en Fish Audio\"\n                        (click)=\"cloneVoice()\">\n                      </p-button>\n                    <!-- } -->\n                    @if(fishModelId()){\n                      <div class=\"model-tag\">\n                        <span>Modelo Fish Audio: <code>{{ fishModelId() }}</code></span>\n                        <p-button\n                          icon=\"pi pi-refresh\"\n                          severity=\"secondary\"\n                          [text]=\"true\"\n                          [loading]=\"isCloningVoice()\"\n                          label=\"Regenerar\"\n                          (click)=\"cloneVoice()\">\n                        </p-button>\n                      </div>\n                    }\n                  </div>\n                  <dc-voice-tts-form\n                    [form]=\"$any(form.get('voiceCloning.main'))\"\n                    [title]=\"'Voice Cloning \u2014 Main Voice'\"\n                    [voiceTTSOptions]=\"voiceTTSOptions\"\n                    [fullForm]=\"true\">\n                  </dc-voice-tts-form>\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.agenticConfig) {\n            <p-accordion-panel value=\"agenticConfig\">\n              <p-accordion-header>\n                <span>Configuraci\u00F3n Ag\u00E9ntica</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Motor ag\u00E9ntico, patrones y herramientas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"agenticConfig\">\n                  <div class=\"form-field flex items-center gap-2 mb-4\">\n                    <p-checkbox id=\"agenticEnabled\" formControlName=\"enabled\" [binary]=\"true\"></p-checkbox>\n                    <label for=\"agenticEnabled\" class=\"cursor-pointer\">Habilitar Agente Aut\u00F3nomo</label>\n                  </div>\n\n                  @if(form.get('agenticConfig.enabled').value) {\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticEngine\" class=\"block text-sm font-medium mb-1\">Motor Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticEngine\"\n                        [options]=\"agenticEngineOptions\"\n                        formControlName=\"engine\"\n                        [placeholder]=\"'Seleccionar Motor'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticPattern\" class=\"block text-sm font-medium mb-1\">Patr\u00F3n Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticPattern\"\n                        [options]=\"agenticPatternOptions\"\n                        formControlName=\"pattern\"\n                        [placeholder]=\"'Seleccionar Patr\u00F3n'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"maxIterations\" class=\"block text-sm font-medium mb-1\">M\u00E1ximo de Iteraciones</label>\n                      <input pInputText id=\"maxIterations\" type=\"number\" formControlName=\"maxIterations\" class=\"w-full\" />\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label class=\"block text-sm font-medium mb-2\">Herramientas Permitidas</label>\n                      <div class=\"flex flex-col gap-2 mt-2 pl-2\">\n                        @for (toolOpt of allowedToolsOptions; track toolOpt.value) {\n                          <div class=\"flex items-center gap-2\">\n                            <p-checkbox\n                              [inputId]=\"'tool_' + toolOpt.value\"\n                              [binary]=\"true\"\n                              [ngModel]=\"isToolAllowed(toolOpt.value)\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              (onChange)=\"toggleTool(toolOpt.value, $event.checked)\">\n                            </p-checkbox>\n                            <label [for]=\"'tool_' + toolOpt.value\" class=\"cursor-pointer text-sm\">{{ toolOpt.label }}</label>\n                          </div>\n                        }\n                      </div>\n                    </div>\n\n                    @if(form.get('agenticConfig.pattern').value === 'reflection') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"reflectionPrompt\" class=\"block text-sm font-medium mb-1\">Prompt de Reflexi\u00F3n</label>\n                        <textarea pTextarea id=\"reflectionPrompt\" formControlName=\"reflectionPrompt\" rows=\"3\" [autoResize]=\"true\" class=\"w-full\"></textarea>\n                      </div>\n                    }\n\n                    @if(form.get('agenticConfig.engine').value === 'os_hermes') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"connectionUrl\" class=\"block text-sm font-medium mb-1\">URL de Conexi\u00F3n</label>\n                        <input pInputText id=\"connectionUrl\" type=\"text\" formControlName=\"connectionUrl\" placeholder=\"ws://...\" class=\"w-full\" />\n                      </div>\n                    }\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Razonamiento</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.reasoningModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Ejecuci\u00F3n</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.executionModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n                  }\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n          </p-accordion>\n\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media(max-width:768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.voice-clone-status{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}.voice-clone-status .muted{color:var(--p-text-muted-color)}.voice-clone-status .model-tag{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--p-surface-100, #f3f4f6);border-radius:6px;font-size:.9rem}.voice-clone-status .model-tag code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormArrayDirective, selector: "[formArray]", inputs: ["formArray"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$6.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i8.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i8.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i8.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i8.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions", "fullForm"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled", "metadata", "provider"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DCAgentCardFormComponent, isStandalone: true, selector: "dc-agent-form", inputs: { inputSettings: { classPropertyName: "inputSettings", publicName: "inputSettings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSave: "onSave", onSelectLive2d: "onSelectLive2d" }, providers: [DialogService], usesInheritance: true, ngImport: i0, template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n    <p-button severity=\"danger\" (click)=\"deleteCard()\" icon=\"pi pi-trash\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" >\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"avatarType\">Avatar Type <span pTooltip=\"image: static picture | video: double looping video (ping-pong) | live2d: interactive 2D model with real-time audio lip-sync | vroid: 3D model (future)\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"avatarType\"\n              [options]=\"avatarTypeOptions\"\n              formControlName=\"avatarType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              placeholder=\"Select Avatar Type\"\n              class=\"w-full mt-1\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label>Avatar Live2D <span pTooltip=\"Selecciona el modelo Live2D para este agente\">\u2139\uFE0F</span></label>\n            <div style=\"display: flex; align-items: center; gap: 12px; margin-top: 4px;\">\n              @if (form.get('live2d')?.value; as live2d) {\n                <div style=\"display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--p-border-color); border-radius: 6px; background: var(--p-content-background);\">\n                  <img width=\"36px\" height=\"36px\" style=\"border-radius: 50%; object-fit: cover;\" [src]=\"live2d.image?.url || 'defaults/images/face-3.jpg'\" alt=\"live2d preview\" />\n                  <span style=\"font-weight: 500;\">{{ live2d.name }}</span>\n                  <p-button icon=\"pi pi-times\" [text]=\"true\" severity=\"danger\" (onClick)=\"form.patchValue({ live2d: null })\" />\n                </div>\n              }\n              <p-button (onClick)=\"onSelectLive2d.emit()\" label=\"Seleccionar Live2D\" icon=\"pi pi-search\" [outlined]=\"true\" />\n            </div>\n          </div>\n        </div>\n\n                  <p-accordion [multiple]=\"true\" >\n            <p-accordion-panel value=\"manageable\">\n              <p-accordion-header>\n                <span>Manageable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Controla visibilidad y acceso</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"learnable\">\n              <p-accordion-header>\n                <span>Learnable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Aprendizaje y conocimiento</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"conversationSettings\">\n              <p-accordion-header>\n                <span>Conversation Settings</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Modelo, voz y configuraci\u00F3n del chat</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-settings-form\n                  [form]=\"form.controls.conversationSettings\"\n                  [textEngineOptions]=\"textEngineOptions\"\n                  [conversationOptions]=\"conversationOptions\"\n                  [voiceTTSOptions]=\"voiceTTSOptions\">\n                </dc-conversation-settings-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.conversationFlow){\n            <p-accordion-panel value=\"conversationFlow\">\n              <p-accordion-header>\n                <span>Conversation Flow</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Objetivos, triggers y condiciones din\u00E1micas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n            <p-accordion-panel value=\"accounts\">\n              <p-accordion-header>\n                <span>Gesti\u00F3n de cuentas</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                @if(form.controls.accounts) {\n                <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n                }\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"voice\">\n              <p-accordion-header>\n                <span>Voz</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Sintesis y Clonaci\u00F3n</span>\n\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"voice\">\n                  <div formGroupName=\"cloning\">\n                    <div class=\"form-field\">\n                      <label for=\"new_transcription\">Transcription (Voice.Cloning)</label>\n                      <textarea pTextarea id=\"new_transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n                    </div>\n                    <div class=\"form-field\">\n                      <dc-simple-uploader\n                        buttonLabel=\"Subir audio (Voice.Cloning)\"\n                        [storagePath]=\"'conversation-cards/' + entityId()\"\n                        (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n                      @if(form.get('voice.cloning.sample')?.value?.url){\n                      <audio controls [src]=\"form.get('voice.cloning.sample').value.url\"></audio>\n                      }\n                    </div>\n                  </div>\n                  <div class=\"form-field voice-clone-status\">\n                    @if(!form.get('voice.cloning.sample')?.value?.url){\n                      <small class=\"muted\">Sube un audio para entrenar un modelo de voz en la nueva propiedad.</small>\n                    }\n                    <p-button\n                      icon=\"pi pi-bolt\"\n                      severity=\"help\"\n                      [loading]=\"isCloningVoice()\"\n                      label=\"Crear modelo en Fish Audio (Voice)\"\n                      (click)=\"cloneVoice()\">\n                    </p-button>\n                  </div>\n                  \n                  <dc-voice-tts-form\n                    [form]=\"$any(form.get('voice.main'))\"\n                    [title]=\"'Main Voice'\"\n                    [voiceTTSOptions]=\"voiceTTSOptions\"\n                    [fullForm]=\"true\">\n                  </dc-voice-tts-form>\n                  \n                  <dc-voice-tts-form\n                    [form]=\"$any(form.get('voice.secondary'))\"\n                    [title]=\"'Secondary Voice'\"\n                    [voiceTTSOptions]=\"voiceTTSOptions\"\n                    [fullForm]=\"true\">\n                  </dc-voice-tts-form>\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.agenticConfig) {\n            <p-accordion-panel value=\"agenticConfig\">\n              <p-accordion-header>\n                <span>Configuraci\u00F3n Ag\u00E9ntica</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Motor ag\u00E9ntico, patrones y herramientas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"agenticConfig\">\n                  <div class=\"form-field flex items-center gap-2 mb-4\">\n                    <p-checkbox id=\"agenticEnabled\" formControlName=\"enabled\" [binary]=\"true\"></p-checkbox>\n                    <label for=\"agenticEnabled\" class=\"cursor-pointer\">Habilitar Agente Aut\u00F3nomo</label>\n                  </div>\n\n                  @if(form.get('agenticConfig.enabled').value) {\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticEngine\" class=\"block text-sm font-medium mb-1\">Motor Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticEngine\"\n                        [options]=\"agenticEngineOptions\"\n                        formControlName=\"engine\"\n                        [placeholder]=\"'Seleccionar Motor'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticPattern\" class=\"block text-sm font-medium mb-1\">Patr\u00F3n Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticPattern\"\n                        [options]=\"agenticPatternOptions\"\n                        formControlName=\"pattern\"\n                        [placeholder]=\"'Seleccionar Patr\u00F3n'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"maxIterations\" class=\"block text-sm font-medium mb-1\">M\u00E1ximo de Iteraciones</label>\n                      <input pInputText id=\"maxIterations\" type=\"number\" formControlName=\"maxIterations\" class=\"w-full\" />\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label class=\"block text-sm font-medium mb-2\">Herramientas Permitidas</label>\n                      <div class=\"flex flex-col gap-2 mt-2 pl-2\">\n                        @for (toolOpt of allowedToolsOptions; track toolOpt.value) {\n                          <div class=\"flex items-center gap-2\">\n                            <p-checkbox\n                              [inputId]=\"'tool_' + toolOpt.value\"\n                              [binary]=\"true\"\n                              [ngModel]=\"isToolAllowed(toolOpt.value)\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              (onChange)=\"toggleTool(toolOpt.value, $event.checked)\">\n                            </p-checkbox>\n                            <label [for]=\"'tool_' + toolOpt.value\" class=\"cursor-pointer text-sm\">{{ toolOpt.label }}</label>\n                          </div>\n                        }\n                      </div>\n                    </div>\n\n                    @if(form.get('agenticConfig.pattern').value === 'reflection') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"reflectionPrompt\" class=\"block text-sm font-medium mb-1\">Prompt de Reflexi\u00F3n</label>\n                        <textarea pTextarea id=\"reflectionPrompt\" formControlName=\"reflectionPrompt\" rows=\"3\" [autoResize]=\"true\" class=\"w-full\"></textarea>\n                      </div>\n                    }\n\n                    @if(form.get('agenticConfig.engine').value === 'os_hermes') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"connectionUrl\" class=\"block text-sm font-medium mb-1\">URL de Conexi\u00F3n</label>\n                        <input pInputText id=\"connectionUrl\" type=\"text\" formControlName=\"connectionUrl\" placeholder=\"ws://...\" class=\"w-full\" />\n                      </div>\n                    }\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Razonamiento</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.reasoningModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Ejecuci\u00F3n</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.executionModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n                  }\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n          </p-accordion>\n\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media(max-width:768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.voice-clone-status{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}.voice-clone-status .muted{color:var(--p-text-muted-color)}.voice-clone-status .model-tag{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--p-surface-100, #f3f4f6);border-radius:6px;font-size:.9rem}.voice-clone-status .model-tag code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormArrayDirective, selector: "[formArray]", inputs: ["formArray"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: AccountPlatformForm, selector: "account-platform-form", inputs: ["formArray"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$6.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i8.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i8.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i8.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i8.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: DCConversationFlowFormComponent, selector: "dc-conversation-flow-form", inputs: ["formGroup"] }, { kind: "component", type: DcCharacterCardFormComponent, selector: "dc-character-card-form", inputs: ["characterCardForm"], outputs: ["generateMissingDataRequest"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: DcConversationSettingsFormComponent, selector: "dc-conversation-settings-form", inputs: ["form", "textEngineOptions", "conversationOptions", "voiceTTSOptions"] }, { kind: "component", type: DcVoiceTtsFormComponent, selector: "dc-voice-tts-form", inputs: ["form", "title", "voiceTTSOptions", "fullForm"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }, { kind: "component", type: SimpleUploaderComponent, selector: "dc-simple-uploader", inputs: ["storagePath", "buttonLabel", "accept", "disabled", "metadata", "provider"], outputs: ["fileUploaded", "uploadError"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DCAgentCardFormComponent, decorators: [{
             type: Component,
@@ -8839,7 +9158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         SimpleUploaderComponent,
                         TextareaModule,
                         ModelSelectorComponent,
-                    ], template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n    <p-button severity=\"danger\" (click)=\"deleteCard()\" icon=\"pi pi-trash\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" >\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"avatarType\">Avatar Type <span pTooltip=\"image: static picture | video: double looping video (ping-pong) | live2d: interactive 2D model with real-time audio lip-sync | vroid: 3D model (future)\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"avatarType\"\n              [options]=\"avatarTypeOptions\"\n              formControlName=\"avatarType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              placeholder=\"Select Avatar Type\"\n              class=\"w-full mt-1\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label>Avatar Live2D <span pTooltip=\"Selecciona el modelo Live2D para este agente\">\u2139\uFE0F</span></label>\n            <div style=\"display: flex; align-items: center; gap: 12px; margin-top: 4px;\">\n              @if (form.get('live2d')?.value; as live2d) {\n                <div style=\"display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--p-border-color); border-radius: 6px; background: var(--p-content-background);\">\n                  <img width=\"36px\" height=\"36px\" style=\"border-radius: 50%; object-fit: cover;\" [src]=\"live2d.image?.url || 'defaults/images/face-3.jpg'\" alt=\"live2d preview\" />\n                  <span style=\"font-weight: 500;\">{{ live2d.name }}</span>\n                  <p-button icon=\"pi pi-times\" [text]=\"true\" severity=\"danger\" (onClick)=\"form.patchValue({ live2d: null })\" />\n                </div>\n              }\n              <p-button (onClick)=\"onSelectLive2d.emit()\" label=\"Seleccionar Live2D\" icon=\"pi pi-search\" [outlined]=\"true\" />\n            </div>\n          </div>\n        </div>\n\n                  <p-accordion [multiple]=\"true\" >\n            <p-accordion-panel value=\"manageable\">\n              <p-accordion-header>\n                <span>Manageable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Controla visibilidad y acceso</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"learnable\">\n              <p-accordion-header>\n                <span>Learnable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Aprendizaje y conocimiento</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"conversationSettings\">\n              <p-accordion-header>\n                <span>Conversation Settings</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Modelo, voz y configuraci\u00F3n del chat</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-settings-form\n                  [form]=\"form.controls.conversationSettings\"\n                  [textEngineOptions]=\"textEngineOptions\"\n                  [conversationOptions]=\"conversationOptions\"\n                  [voiceTTSOptions]=\"voiceTTSOptions\">\n                </dc-conversation-settings-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.conversationFlow){\n            <p-accordion-panel value=\"conversationFlow\">\n              <p-accordion-header>\n                <span>Conversation Flow</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Objetivos, triggers y condiciones din\u00E1micas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n            <p-accordion-panel value=\"accounts\">\n              <p-accordion-header>\n                <span>Gesti\u00F3n de cuentas</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                @if(form.controls.accounts) {\n                <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n                }\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"voiceCloning\">\n              <p-accordion-header>\n                <span>Clonaci\u00F3n de voz</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"voiceCloning\">\n                  <div class=\"form-field\">\n                    <label for=\"transcription\">Transcription</label>\n                    <textarea pTextarea id=\"transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n                  </div>\n                  <div class=\"form-field\">\n                    <dc-simple-uploader\n                      buttonLabel=\"Subir audio\"\n                      [storagePath]=\"'conversation-cards/' + entityId()\"\n                      (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n                    @if(form.get('voiceCloning.sample').value?.url){\n                    <audio controls [src]=\"form.get('voiceCloning.sample').value.url\"></audio>\n                    }\n                  </div>\n                  <div class=\"form-field voice-clone-status\">\n                    @if(!form.get('voiceCloning.sample').value?.url){\n                      <small class=\"muted\">Sube un audio para entrenar un modelo de voz.</small>\n                    }\n                    <!-- @if(canCloneVoice()){ -->\n                      <p-button\n                        icon=\"pi pi-bolt\"\n                        severity=\"help\"\n                        [loading]=\"isCloningVoice()\"\n                        label=\"Crear modelo en Fish Audio\"\n                        (click)=\"cloneVoice()\">\n                      </p-button>\n                    <!-- } -->\n                    @if(fishModelId()){\n                      <div class=\"model-tag\">\n                        <span>Modelo Fish Audio: <code>{{ fishModelId() }}</code></span>\n                        <p-button\n                          icon=\"pi pi-refresh\"\n                          severity=\"secondary\"\n                          [text]=\"true\"\n                          [loading]=\"isCloningVoice()\"\n                          label=\"Regenerar\"\n                          (click)=\"cloneVoice()\">\n                        </p-button>\n                      </div>\n                    }\n                  </div>\n                  <dc-voice-tts-form\n                    [form]=\"$any(form.get('voiceCloning.main'))\"\n                    [title]=\"'Voice Cloning \u2014 Main Voice'\"\n                    [voiceTTSOptions]=\"voiceTTSOptions\"\n                    [fullForm]=\"true\">\n                  </dc-voice-tts-form>\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.agenticConfig) {\n            <p-accordion-panel value=\"agenticConfig\">\n              <p-accordion-header>\n                <span>Configuraci\u00F3n Ag\u00E9ntica</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Motor ag\u00E9ntico, patrones y herramientas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"agenticConfig\">\n                  <div class=\"form-field flex items-center gap-2 mb-4\">\n                    <p-checkbox id=\"agenticEnabled\" formControlName=\"enabled\" [binary]=\"true\"></p-checkbox>\n                    <label for=\"agenticEnabled\" class=\"cursor-pointer\">Habilitar Agente Aut\u00F3nomo</label>\n                  </div>\n\n                  @if(form.get('agenticConfig.enabled').value) {\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticEngine\" class=\"block text-sm font-medium mb-1\">Motor Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticEngine\"\n                        [options]=\"agenticEngineOptions\"\n                        formControlName=\"engine\"\n                        [placeholder]=\"'Seleccionar Motor'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticPattern\" class=\"block text-sm font-medium mb-1\">Patr\u00F3n Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticPattern\"\n                        [options]=\"agenticPatternOptions\"\n                        formControlName=\"pattern\"\n                        [placeholder]=\"'Seleccionar Patr\u00F3n'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"maxIterations\" class=\"block text-sm font-medium mb-1\">M\u00E1ximo de Iteraciones</label>\n                      <input pInputText id=\"maxIterations\" type=\"number\" formControlName=\"maxIterations\" class=\"w-full\" />\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label class=\"block text-sm font-medium mb-2\">Herramientas Permitidas</label>\n                      <div class=\"flex flex-col gap-2 mt-2 pl-2\">\n                        @for (toolOpt of allowedToolsOptions; track toolOpt.value) {\n                          <div class=\"flex items-center gap-2\">\n                            <p-checkbox\n                              [inputId]=\"'tool_' + toolOpt.value\"\n                              [binary]=\"true\"\n                              [ngModel]=\"isToolAllowed(toolOpt.value)\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              (onChange)=\"toggleTool(toolOpt.value, $event.checked)\">\n                            </p-checkbox>\n                            <label [for]=\"'tool_' + toolOpt.value\" class=\"cursor-pointer text-sm\">{{ toolOpt.label }}</label>\n                          </div>\n                        }\n                      </div>\n                    </div>\n\n                    @if(form.get('agenticConfig.pattern').value === 'reflection') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"reflectionPrompt\" class=\"block text-sm font-medium mb-1\">Prompt de Reflexi\u00F3n</label>\n                        <textarea pTextarea id=\"reflectionPrompt\" formControlName=\"reflectionPrompt\" rows=\"3\" [autoResize]=\"true\" class=\"w-full\"></textarea>\n                      </div>\n                    }\n\n                    @if(form.get('agenticConfig.engine').value === 'os_hermes') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"connectionUrl\" class=\"block text-sm font-medium mb-1\">URL de Conexi\u00F3n</label>\n                        <input pInputText id=\"connectionUrl\" type=\"text\" formControlName=\"connectionUrl\" placeholder=\"ws://...\" class=\"w-full\" />\n                      </div>\n                    }\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Razonamiento</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.reasoningModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Ejecuci\u00F3n</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.executionModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n                  }\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n          </p-accordion>\n\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media(max-width:768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.voice-clone-status{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}.voice-clone-status .muted{color:var(--p-text-muted-color)}.voice-clone-status .model-tag{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--p-surface-100, #f3f4f6);border-radius:6px;font-size:.9rem}.voice-clone-status .model-tag code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}\n"] }]
+                    ], template: "<p-card>\n  <div class=\"top-buttons\">\n    <button pButton severity=\"info\" (click)=\"checkPrompt()\" label=\"\uD83D\uDC41\uFE0F Ver instrucciones finales \uD83D\uDCD3\"></button>\n\n    <button pButton severity=\"info\" (click)=\"goToDetails()\" label=\"\uD83D\uDCAC Conversar\"></button>\n    <button pButton severity=\"primary\" (click)=\"save()\" label=\"\uD83D\uDCBE Guardar cambios\"></button>\n  </div>\n\n  <div class=\"top-buttons\">\n    <p-button [loading]=\"isGenerating()\" severity=\"help\" (click)=\"generateCharacter()\" label=\"Generar \uD83E\uDDBE\"></p-button>\n    <p-button severity=\"help\" (click)=\"goToCardsCreator()\" label=\" Creador masivo \"></p-button>\n\n    <p-button severity=\"info\" (click)=\"downloadConversation()\" label=\"\uD83D\uDCC1 Exportar \u2B07\uFE0F\"></p-button>\n    <p-button severity=\"info\" (click)=\"importConversation()\" label=\"\uD83C\uDCCF Importar \u2B06\uFE0F\"></p-button>\n    <p-button severity=\"danger\" (click)=\"deleteCard()\" icon=\"pi pi-trash\"></p-button>\n  </div>\n\n  <br />\n  <br />\n  <form [formGroup]=\"form\" class=\"conversation-form\">\n    <div class=\"form-grid\">\n      <div class=\"left-column\">\n        <div title=\"Main data\" >\n          <div style=\"display: flex; gap: 15px\">\n            <div class=\"form-field\">\n              <label for=\"version\">Version: {{ form.get('version').value }} <span pTooltip=\"Version number of the conversation\">\u2139\uFE0F</span></label>\n            </div>\n\n            <div class=\"form-field\">\n              <label for=\"id\"\n                >ID: <span pTooltip=\"Unique identifier for this conversation\"> {{ form.get('id').value }} \u2139\uFE0F</span></label\n              >\n            </div>\n          </div>\n\n\n          <div class=\"form-field\">\n            <label for=\"name\">Card Name <span pTooltip=\"Name of the Agent Card\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" />\n            @if(form.get('name').errors?.['required'] && form.get('name').touched){\n            <div class=\"error\"> Name is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\"> Description <span pTooltip=\"Description of the conversation\">\u2139\uFE0F</span></label>\n            <input pInputText id=\"description\" type=\"text\" formControlName=\"description\" />\n            @if(form.get('description').errors?.['required'] && form.get('description').touched){\n            <div class=\"error\"> Description is required </div>\n            }\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"lang\">Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"lang\"\n              [options]=\"languageOptions\"\n              [filter]=\"true\"\n              formControlName=\"lang\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [placeholder]=\"'Select Language'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"agentType\">Agent Type <span pTooltip=\"Select the type of agent\">\u2139\uFE0F</span></label>\n            <p-select id=\"agentType\" [options]=\"agentTypeOptions\" formControlName=\"agentType\" [placeholder]=\"'Select Agent Type'\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"avatarType\">Avatar Type <span pTooltip=\"image: static picture | video: double looping video (ping-pong) | live2d: interactive 2D model with real-time audio lip-sync | vroid: 3D model (future)\">\u2139\uFE0F</span></label>\n            <p-select\n              id=\"avatarType\"\n              [options]=\"avatarTypeOptions\"\n              formControlName=\"avatarType\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              placeholder=\"Select Avatar Type\"\n              class=\"w-full mt-1\"></p-select>\n          </div>\n\n          <div class=\"form-field\">\n            <label>Avatar Live2D <span pTooltip=\"Selecciona el modelo Live2D para este agente\">\u2139\uFE0F</span></label>\n            <div style=\"display: flex; align-items: center; gap: 12px; margin-top: 4px;\">\n              @if (form.get('live2d')?.value; as live2d) {\n                <div style=\"display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--p-border-color); border-radius: 6px; background: var(--p-content-background);\">\n                  <img width=\"36px\" height=\"36px\" style=\"border-radius: 50%; object-fit: cover;\" [src]=\"live2d.image?.url || 'defaults/images/face-3.jpg'\" alt=\"live2d preview\" />\n                  <span style=\"font-weight: 500;\">{{ live2d.name }}</span>\n                  <p-button icon=\"pi pi-times\" [text]=\"true\" severity=\"danger\" (onClick)=\"form.patchValue({ live2d: null })\" />\n                </div>\n              }\n              <p-button (onClick)=\"onSelectLive2d.emit()\" label=\"Seleccionar Live2D\" icon=\"pi pi-search\" [outlined]=\"true\" />\n            </div>\n          </div>\n        </div>\n\n                  <p-accordion [multiple]=\"true\" >\n            <p-accordion-panel value=\"manageable\">\n              <p-accordion-header>\n                <span>Manageable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Controla visibilidad y acceso</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"learnable\">\n              <p-accordion-header>\n                <span>Learnable</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Aprendizaje y conocimiento</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"conversationSettings\">\n              <p-accordion-header>\n                <span>Conversation Settings</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Modelo, voz y configuraci\u00F3n del chat</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-settings-form\n                  [form]=\"form.controls.conversationSettings\"\n                  [textEngineOptions]=\"textEngineOptions\"\n                  [conversationOptions]=\"conversationOptions\"\n                  [voiceTTSOptions]=\"voiceTTSOptions\">\n                </dc-conversation-settings-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.conversationFlow){\n            <p-accordion-panel value=\"conversationFlow\">\n              <p-accordion-header>\n                <span>Conversation Flow</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Objetivos, triggers y condiciones din\u00E1micas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <dc-conversation-flow-form [formGroup]=\"form.controls.conversationFlow\"></dc-conversation-flow-form>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n            <p-accordion-panel value=\"accounts\">\n              <p-accordion-header>\n                <span>Gesti\u00F3n de cuentas</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Beta</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                @if(form.controls.accounts) {\n                <account-platform-form [formArray]=\"form.controls.accounts\"></account-platform-form>\n                }\n              </p-accordion-content>\n            </p-accordion-panel>\n            <p-accordion-panel value=\"voice\">\n              <p-accordion-header>\n                <span>Voz</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Sintesis y Clonaci\u00F3n</span>\n\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"voice\">\n                  <div formGroupName=\"cloning\">\n                    <div class=\"form-field\">\n                      <label for=\"new_transcription\">Transcription (Voice.Cloning)</label>\n                      <textarea pTextarea id=\"new_transcription\" formControlName=\"transcription\" rows=\"3\"></textarea>\n                    </div>\n                    <div class=\"form-field\">\n                      <dc-simple-uploader\n                        buttonLabel=\"Subir audio (Voice.Cloning)\"\n                        [storagePath]=\"'conversation-cards/' + entityId()\"\n                        (fileUploaded)=\"onFileUploaded($event)\"></dc-simple-uploader>\n                      @if(form.get('voice.cloning.sample')?.value?.url){\n                      <audio controls [src]=\"form.get('voice.cloning.sample').value.url\"></audio>\n                      }\n                    </div>\n                  </div>\n                  <div class=\"form-field voice-clone-status\">\n                    @if(!form.get('voice.cloning.sample')?.value?.url){\n                      <small class=\"muted\">Sube un audio para entrenar un modelo de voz en la nueva propiedad.</small>\n                    }\n                    <p-button\n                      icon=\"pi pi-bolt\"\n                      severity=\"help\"\n                      [loading]=\"isCloningVoice()\"\n                      label=\"Crear modelo en Fish Audio (Voice)\"\n                      (click)=\"cloneVoice()\">\n                    </p-button>\n                  </div>\n                  \n                  <dc-voice-tts-form\n                    [form]=\"$any(form.get('voice.main'))\"\n                    [title]=\"'Main Voice'\"\n                    [voiceTTSOptions]=\"voiceTTSOptions\"\n                    [fullForm]=\"true\">\n                  </dc-voice-tts-form>\n                  \n                  <dc-voice-tts-form\n                    [form]=\"$any(form.get('voice.secondary'))\"\n                    [title]=\"'Secondary Voice'\"\n                    [voiceTTSOptions]=\"voiceTTSOptions\"\n                    [fullForm]=\"true\">\n                  </dc-voice-tts-form>\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            @if(form.controls.agenticConfig) {\n            <p-accordion-panel value=\"agenticConfig\">\n              <p-accordion-header>\n                <span>Configuraci\u00F3n Ag\u00E9ntica</span>\n                <span style=\"margin-left: 8px; font-size: 0.75rem; color: var(--p-text-muted-color); font-weight: normal\">Motor ag\u00E9ntico, patrones y herramientas</span>\n              </p-accordion-header>\n              <p-accordion-content>\n                <div formGroupName=\"agenticConfig\">\n                  <div class=\"form-field flex items-center gap-2 mb-4\">\n                    <p-checkbox id=\"agenticEnabled\" formControlName=\"enabled\" [binary]=\"true\"></p-checkbox>\n                    <label for=\"agenticEnabled\" class=\"cursor-pointer\">Habilitar Agente Aut\u00F3nomo</label>\n                  </div>\n\n                  @if(form.get('agenticConfig.enabled').value) {\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticEngine\" class=\"block text-sm font-medium mb-1\">Motor Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticEngine\"\n                        [options]=\"agenticEngineOptions\"\n                        formControlName=\"engine\"\n                        [placeholder]=\"'Seleccionar Motor'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"agenticPattern\" class=\"block text-sm font-medium mb-1\">Patr\u00F3n Ag\u00E9ntico</label>\n                      <p-select\n                        id=\"agenticPattern\"\n                        [options]=\"agenticPatternOptions\"\n                        formControlName=\"pattern\"\n                        [placeholder]=\"'Seleccionar Patr\u00F3n'\"\n                        class=\"w-full\"></p-select>\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label for=\"maxIterations\" class=\"block text-sm font-medium mb-1\">M\u00E1ximo de Iteraciones</label>\n                      <input pInputText id=\"maxIterations\" type=\"number\" formControlName=\"maxIterations\" class=\"w-full\" />\n                    </div>\n\n                    <div class=\"form-field mb-4\">\n                      <label class=\"block text-sm font-medium mb-2\">Herramientas Permitidas</label>\n                      <div class=\"flex flex-col gap-2 mt-2 pl-2\">\n                        @for (toolOpt of allowedToolsOptions; track toolOpt.value) {\n                          <div class=\"flex items-center gap-2\">\n                            <p-checkbox\n                              [inputId]=\"'tool_' + toolOpt.value\"\n                              [binary]=\"true\"\n                              [ngModel]=\"isToolAllowed(toolOpt.value)\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              (onChange)=\"toggleTool(toolOpt.value, $event.checked)\">\n                            </p-checkbox>\n                            <label [for]=\"'tool_' + toolOpt.value\" class=\"cursor-pointer text-sm\">{{ toolOpt.label }}</label>\n                          </div>\n                        }\n                      </div>\n                    </div>\n\n                    @if(form.get('agenticConfig.pattern').value === 'reflection') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"reflectionPrompt\" class=\"block text-sm font-medium mb-1\">Prompt de Reflexi\u00F3n</label>\n                        <textarea pTextarea id=\"reflectionPrompt\" formControlName=\"reflectionPrompt\" rows=\"3\" [autoResize]=\"true\" class=\"w-full\"></textarea>\n                      </div>\n                    }\n\n                    @if(form.get('agenticConfig.engine').value === 'os_hermes') {\n                      <div class=\"form-field mb-4\">\n                        <label for=\"connectionUrl\" class=\"block text-sm font-medium mb-1\">URL de Conexi\u00F3n</label>\n                        <input pInputText id=\"connectionUrl\" type=\"text\" formControlName=\"connectionUrl\" placeholder=\"ws://...\" class=\"w-full\" />\n                      </div>\n                    }\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Razonamiento</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.reasoningModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n\n                    <div class=\"form-field mt-6\">\n                      <h4 class=\"font-semibold text-base mb-2\">Modelo de Ejecuci\u00F3n</h4>\n                      <dc-model-selector [modelForm]=\"$any(form.get('agenticConfig.executionModel'))\" [shortForm]=\"true\"></dc-model-selector>\n                    </div>\n                  }\n                </div>\n              </p-accordion-content>\n            </p-accordion-panel>\n            }\n          </p-accordion>\n\n      </div>\n\n      <div class=\"right-column\">\n        @if(entity() && entityId()){\n        <assets-loader\n          [assets]=\"entity().assets\"\n          [storagePath]=\"'conversation-cards/' + entityId()\"\n          (assetsChange)=\"onAssetsChange($event)\"\n          (assetUpdate)=\"onUpdateAsset($event)\"\n          (onFileSelected)=\"onImageSelected($event)\"></assets-loader>\n        } @if(form.controls.characterCard){\n\n        <br />\n        <dc-character-card-form [characterCardForm]=\"form.controls.characterCard\" (generateMissingDataRequest)=\"generateMissingData()\">\n        </dc-character-card-form>\n        }\n      </div>\n    </div>\n  </form>\n\n  <div class=\"float-button\">\n    <p-button icon=\"pi pi-eye\" (click)=\"inspect()\" severity=\"secondary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Inspeccionar\"> </p-button>\n\n    <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n  </div>\n</p-card>\n", styles: [".conversation-form{max-width:100%;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.conversation-form .card-group{padding:20px;border-radius:6px;margin-bottom:24px}.conversation-form .card-group h3{margin:0 0 20px;color:#2c3e50;font-size:1.25rem}.conversation-form .form-grid{display:flex;flex-wrap:wrap;gap:2rem;width:100%}.conversation-form .form-field{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.conversation-form .form-field label{font-weight:500}.conversation-form .form-field.checkbox{flex-direction:row;align-items:center;gap:.5rem}.conversation-form .form-field.checkbox input[type=checkbox]{width:auto}.conversation-form .form-field .error{color:#dc3545;font-size:.875rem;margin-top:.25rem}.conversation-form .form-field .remove-button{position:absolute;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;top:-10px;right:-10px}.conversation-form .left-column,.conversation-form .right-column{display:flex;flex-direction:column;flex:1 1 calc(50% - 1rem);min-width:300px}@media(max-width:768px){.conversation-form .left-column,.conversation-form .right-column{flex:1 1 100%}}.conversation-form .card-group{padding:1rem;margin-bottom:1.5rem}.conversation-form .card-group h3{margin-top:0;margin-bottom:1rem}.top-buttons{display:flex;justify-content:space-between;margin-bottom:2rem;gap:1rem}.top-buttons button{flex:1}::ng-deep em{font-weight:900;color:#014a93}.float-button{position:fixed;bottom:4rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.voice-clone-status{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}.voice-clone-status .muted{color:var(--p-text-muted-color)}.voice-clone-status .model-tag{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--p-surface-100, #f3f4f6);border-radius:6px;font-size:.9rem}.voice-clone-status .model-tag code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}\n"] }]
         }], propDecorators: { onSave: [{ type: i0.Output, args: ["onSave"] }], inputSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputSettings", required: false }] }], onSelectLive2d: [{ type: i0.Output, args: ["onSelectLive2d"] }] } });
 
 class TruncatePipe {
@@ -9014,7 +9333,7 @@ class AgentCardListComponent extends EntityBaseListV2Component {
             const adminFilters = [
                 {
                     name: 'Voz Única',
-                    field: 'voiceCloning.sample',
+                    field: 'voice.cloning.sample',
                     type: 'select',
                     operator: '$not_null',
                     options: [
@@ -9271,7 +9590,7 @@ class Live2dModelComponent {
             this.playAnimation(group);
         }
     }
-    speak(audioUrl, options) {
+    async speak(audioUrl, options) {
         if (!this.model)
             return;
         if (options?.focus !== false) {
@@ -9280,8 +9599,21 @@ class Live2dModelComponent {
                 this.viewStateChanged.emit(transform);
             }
         }
+        this.stopSpeaking();
+        const targetVolume = options?.volume !== undefined ? options.volume : 1.0;
+        if (this.live2dConfig) {
+            try {
+                const live2dEngine = await this.live2dConfig.Live2DModel();
+                if (live2dEngine && live2dEngine.SoundManager) {
+                    live2dEngine.SoundManager.volume = targetVolume;
+                }
+            }
+            catch (e) {
+                console.warn('Failed to set SoundManager volume', e);
+            }
+        }
         this.model.speak(audioUrl, {
-            volume: 0,
+            volume: targetVolume,
             crossOrigin: options?.crossOrigin || 'anonymous',
         });
     }
@@ -9440,7 +9772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 args: ['canvas']
             }], modelPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelPath", required: true }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: false }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], modelLoaded: [{ type: i0.Output, args: ["modelLoaded"] }], viewStateChanged: [{ type: i0.Output, args: ["viewStateChanged"] }] } });
 
-class DcAgentCardConverseComponent {
+class DcAgentCardAvatarComponent {
     set isConversationActive(val) {
         this._isConversationActive.set(val);
     }
@@ -9462,8 +9794,8 @@ class DcAgentCardConverseComponent {
         this.videoPlayerService = inject(VideoPlayerNativeService);
         this.agentCardId = '';
         this.useNativePlayer = true;
-        this.activeAudioMessage = null;
         this._isConversationActive = signal(false, ...(ngDevMode ? [{ debugName: "_isConversationActive" }] : /* istanbul ignore next */ []));
+        /** @deprecated Use ChatMonitorService instead — el canal oficial es el servicio compartido. */
         this.onStartConversation = output();
         this.videoPlayerA = viewChild('videoPlayerA', ...(ngDevMode ? [{ debugName: "videoPlayerA" }] : /* istanbul ignore next */ []));
         this.videoPlayerB = viewChild('videoPlayerB', ...(ngDevMode ? [{ debugName: "videoPlayerB" }] : /* istanbul ignore next */ []));
@@ -9544,25 +9876,48 @@ class DcAgentCardConverseComponent {
                 this.videoPlayerService.setAgentCard(card);
             }
         });
-        // Live2D Speak (Lip-Sync) effect
+        // Live2D Speak (Lip-Sync) effect — listening directly to ChatMonitorService's activeAudioMessage
         effect(() => {
-            const audioMsg = this.activeAudioMessage;
+            const audioMsg = this.chatMonitorService.activeAudioMessage();
+            console.log('DcAgentCardAvatarComponent: Speak effect triggered. activeAudioMessage:', audioMsg ? {
+                messageId: audioMsg.messageId,
+                audioUrl: audioMsg.audioUrl
+            } : null);
             const type = this.avatarType();
             const l2d = this.live2dModel();
-            if (type === 'live2d' && audioMsg?.audioUrl && l2d) {
-                l2d.stopSpeaking();
-                l2d.speak(audioMsg.audioUrl, { volume: 0.0 });
+            if (type === 'live2d' && l2d) {
+                if (audioMsg && audioMsg.audioUrl) {
+                    console.log('DcAgentCardAvatarComponent: Live2D speak started with URL:', audioMsg.audioUrl);
+                    l2d.stopSpeaking();
+                    l2d.speak(audioMsg.audioUrl, { volume: 0.0 });
+                }
+                else {
+                    console.log('DcAgentCardAvatarComponent: Live2D speak stopped (no active message or no audioUrl)');
+                    l2d.stopSpeaking();
+                }
             }
         });
         // Live2D Mood state emotion updates mapping
         effect(() => {
-            const mood = this.conversationFlowStateService.flowState().moodState?.value;
+            const mood = this.chatMonitorService.currentMood();
             const type = this.avatarType();
             const l2d = this.live2dModel();
             if (type === 'live2d' && mood && l2d) {
                 l2d.setExpression(mood);
             }
         });
+        // Native Video player mood state updates mapping
+        effect(() => {
+            const mood = this.chatMonitorService.currentMood();
+            const card = this.agentCard();
+            const type = this.avatarType();
+            if (type === 'video' && mood && card?.assets?.motions) {
+                const motionUrl = card.assets.motions.find((m) => m.metadata?.moodState === mood)?.url;
+                if (motionUrl) {
+                    this.videoPlayerService.setVideoSource(motionUrl);
+                }
+            }
+        });
     }
     ngOnDestroy() {
         this.videoPlayerService.cleanUp();
@@ -9626,6 +9981,18 @@ class DcAgentCardConverseComponent {
                 cardTranslated.conversationSettings.secondaryVoice.voice = transformedSecondaryVoice;
             }
         }
+        if (cardTranslated.voice?.main) {
+            const transformedMainVoice = this._transformVoice(cardTranslated.voice.main.voice, locale);
+            if (transformedMainVoice) {
+                cardTranslated.voice.main.voice = transformedMainVoice;
+            }
+        }
+        if (cardTranslated.voice?.secondary) {
+            const transformedSecondaryVoice = this._transformVoice(cardTranslated.voice.secondary.voice, locale);
+            if (transformedSecondaryVoice) {
+                cardTranslated.voice.secondary.voice = transformedSecondaryVoice;
+            }
+        }
         return cardTranslated;
     }
     _transformVoice(voice, locale) {
@@ -9656,18 +10023,16 @@ class DcAgentCardConverseComponent {
     toggleInfoLayer() {
         this.showInfoLayer.update((value) => !value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcAgentCardConverseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcAgentCardConverseComponent, isStandalone: true, selector: "dc-agent-card-converse", inputs: { agentCardId: "agentCardId", useNativePlayer: "useNativePlayer", activeAudioMessage: "activeAudioMessage", isConversationActive: "isConversationActive" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayerA", first: true, predicate: ["videoPlayerA"], descendants: true, isSignal: true }, { propertyName: "videoPlayerB", first: true, predicate: ["videoPlayerB"], descendants: true, isSignal: true }, { propertyName: "live2dModel", first: true, predicate: Live2dModelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #cardContent>\n  <div class=\"card-container\">\n    <!-- CASO 1: Renderizado por Video (Ping-pong nativo) -->\n    @if (avatarType() === 'video') {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" [style.opacity]=\"videoPlayerService.isVideoPlaying() ? 0 : 1\" style=\"transition: opacity 0.5s ease-in-out;\" alt=\"\" />\n      <video #videoPlayerA class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 1; z-index: 1;\" playsinline></video>\n      <video #videoPlayerB class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 0; z-index: 2;\" playsinline></video>\n    }\n\n    <!-- CASO 2: Renderizado por Live2D (PixiJS Canvas) -->\n    @else if (avatarType() === 'live2d') {\n      @if (model3JsonUrl(); as modelPath) {\n        <app-live2d-model\n          #live2dModel\n          class=\"card-image\"\n          style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: all; z-index: 2;\"\n          [modelPath]=\"modelPath\"\n          [zoom]=\"live2dZoomState()\"\n          [x]=\"live2dXState()\"\n          [y]=\"live2dYState()\"\n          (viewStateChanged)=\"onViewStateChanged($event)\">\n        </app-live2d-model>\n      } @else {\n        <!-- Fallback si no tiene manifest -->\n        <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      }\n    }\n\n    <!-- CASO 3: Renderizado por VRoid (WebGL 3D - Placeholder) -->\n    @else if (avatarType() === 'vroid') {\n      <div class=\"card-image\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; display: flex; align-items: center; justify-content: center; color: white; z-index: 2;\">\n        <span>[3D VRoid Avatar Canvas]</span>\n      </div>\n    }\n\n    <!-- CASO 4: Imagen Est\u00E1tica Est\u00E1ndar -->\n    @else {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n    }\n\n\n\n    @if (!isChatActive()) {\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\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n    }\n\n    <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n      <div class=\"info-content\">\n        <h1\n          ><strong>{{ agentCard()?.name || agentCard()?.characterCard?.data?.name }}</strong></h1\n        >\n\n        @if (agentCard()?.characterCard?.data?.instructions) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.instructions' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.instructions | parseCard: agentCard() }}</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div \n  style=\"display: flex; justify-content: center; align-items: center\" \n  [class.transparent-mode]=\"avatarDisplay() === 'transparent'\"\n  [class.fullscreen-mode]=\"avatarDisplay() === 'fullscreen'\"\n  [class.card-mode]=\"avatarDisplay() === 'card'\"\n>\n  @if (avatarDisplay() === 'transparent' || avatarDisplay() === 'fullscreen') {\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  } @else {\n    <p-card>\n      <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    </p-card>\n  }\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}:host{display:block;width:100%;height:100%}.transparent-mode .card-container{width:420px;height:700px;position:relative}.transparent-mode .card-image{background:transparent}.fullscreen-mode{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.fullscreen-mode .card-container{width:100%;height:100%;position:relative}.fullscreen-mode .card-image{background:transparent}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{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:var(--chat-user-message-bg);color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$6.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Live2dModelComponent, selector: "app-live2d-model", inputs: ["modelPath", "scale", "zoom", "x", "y"], outputs: ["modelLoaded", "viewStateChanged"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }, { kind: "pipe", type: i3$6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcAgentCardAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DcAgentCardAvatarComponent, isStandalone: true, selector: "dc-agent-card-avatar", inputs: { agentCardId: "agentCardId", useNativePlayer: "useNativePlayer", isConversationActive: "isConversationActive" }, outputs: { onStartConversation: "onStartConversation" }, viewQueries: [{ propertyName: "videoPlayerA", first: true, predicate: ["videoPlayerA"], descendants: true, isSignal: true }, { propertyName: "videoPlayerB", first: true, predicate: ["videoPlayerB"], descendants: true, isSignal: true }, { propertyName: "live2dModel", first: true, predicate: Live2dModelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #cardContent>\n  <div class=\"card-container\">\n    <!-- CASO 1: Renderizado por Video (Ping-pong nativo) -->\n    @if (avatarType() === 'video') {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" [style.opacity]=\"videoPlayerService.isVideoPlaying() ? 0 : 1\" style=\"transition: opacity 0.5s ease-in-out;\" alt=\"\" />\n      <video #videoPlayerA class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 1; z-index: 1;\" playsinline></video>\n      <video #videoPlayerB class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 0; z-index: 2;\" playsinline></video>\n    }\n\n    <!-- CASO 2: Renderizado por Live2D (PixiJS Canvas) -->\n    @else if (avatarType() === 'live2d') {\n      @if (model3JsonUrl(); as modelPath) {\n        <app-live2d-model\n          #live2dModel\n          class=\"card-image\"\n          style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: all; z-index: 2;\"\n          [modelPath]=\"modelPath\"\n          [zoom]=\"live2dZoomState()\"\n          [x]=\"live2dXState()\"\n          [y]=\"live2dYState()\"\n          (viewStateChanged)=\"onViewStateChanged($event)\">\n        </app-live2d-model>\n      } @else {\n        <!-- Fallback si no tiene manifest -->\n        <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      }\n    }\n\n    <!-- CASO 3: Renderizado por VRoid (WebGL 3D - Placeholder) -->\n    @else if (avatarType() === 'vroid') {\n      <div class=\"card-image\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; display: flex; align-items: center; justify-content: center; color: white; z-index: 2;\">\n        <span>[3D VRoid Avatar Canvas]</span>\n      </div>\n    }\n\n    <!-- CASO 4: Imagen Est\u00E1tica Est\u00E1ndar -->\n    @else {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n    }\n\n\n\n    @if (!isChatActive()) {\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\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n    }\n\n    <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n      <div class=\"info-content\">\n        <h1\n          ><strong>{{ agentCard()?.name || agentCard()?.characterCard?.data?.name }}</strong></h1\n        >\n\n        @if (agentCard()?.characterCard?.data?.instructions) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.instructions' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.instructions | parseCard: agentCard() }}</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div \n  style=\"display: flex; justify-content: center; align-items: center\" \n  [class.transparent-mode]=\"avatarDisplay() === 'transparent'\"\n  [class.fullscreen-mode]=\"avatarDisplay() === 'fullscreen'\"\n  [class.card-mode]=\"avatarDisplay() === 'card'\"\n>\n  @if (avatarDisplay() === 'transparent' || avatarDisplay() === 'fullscreen') {\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  } @else {\n    <p-card>\n      <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    </p-card>\n  }\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}:host{display:block;width:100%;height:100%}.transparent-mode .card-container{width:420px;height:700px;position:relative}.transparent-mode .card-image{background:transparent}.fullscreen-mode{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.fullscreen-mode .card-container{width:100%;height:100%;position:relative}.fullscreen-mode .card-image{background:transparent}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{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:var(--chat-user-message-bg);color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$6.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Live2dModelComponent, selector: "app-live2d-model", inputs: ["modelPath", "scale", "zoom", "x", "y"], outputs: ["modelLoaded", "viewStateChanged"] }, { kind: "pipe", type: ParseCardPipe, name: "parseCard" }, { kind: "pipe", type: i3$6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcAgentCardConverseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DcAgentCardAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-agent-card-converse', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe, TranslateModule, NgTemplateOutlet, Live2dModelComponent], template: "<ng-template #cardContent>\n  <div class=\"card-container\">\n    <!-- CASO 1: Renderizado por Video (Ping-pong nativo) -->\n    @if (avatarType() === 'video') {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" [style.opacity]=\"videoPlayerService.isVideoPlaying() ? 0 : 1\" style=\"transition: opacity 0.5s ease-in-out;\" alt=\"\" />\n      <video #videoPlayerA class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 1; z-index: 1;\" playsinline></video>\n      <video #videoPlayerB class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 0; z-index: 2;\" playsinline></video>\n    }\n\n    <!-- CASO 2: Renderizado por Live2D (PixiJS Canvas) -->\n    @else if (avatarType() === 'live2d') {\n      @if (model3JsonUrl(); as modelPath) {\n        <app-live2d-model\n          #live2dModel\n          class=\"card-image\"\n          style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: all; z-index: 2;\"\n          [modelPath]=\"modelPath\"\n          [zoom]=\"live2dZoomState()\"\n          [x]=\"live2dXState()\"\n          [y]=\"live2dYState()\"\n          (viewStateChanged)=\"onViewStateChanged($event)\">\n        </app-live2d-model>\n      } @else {\n        <!-- Fallback si no tiene manifest -->\n        <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      }\n    }\n\n    <!-- CASO 3: Renderizado por VRoid (WebGL 3D - Placeholder) -->\n    @else if (avatarType() === 'vroid') {\n      <div class=\"card-image\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; display: flex; align-items: center; justify-content: center; color: white; z-index: 2;\">\n        <span>[3D VRoid Avatar Canvas]</span>\n      </div>\n    }\n\n    <!-- CASO 4: Imagen Est\u00E1tica Est\u00E1ndar -->\n    @else {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n    }\n\n\n\n    @if (!isChatActive()) {\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\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n    }\n\n    <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n      <div class=\"info-content\">\n        <h1\n          ><strong>{{ agentCard()?.name || agentCard()?.characterCard?.data?.name }}</strong></h1\n        >\n\n        @if (agentCard()?.characterCard?.data?.instructions) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.instructions' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.instructions | parseCard: agentCard() }}</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div \n  style=\"display: flex; justify-content: center; align-items: center\" \n  [class.transparent-mode]=\"avatarDisplay() === 'transparent'\"\n  [class.fullscreen-mode]=\"avatarDisplay() === 'fullscreen'\"\n  [class.card-mode]=\"avatarDisplay() === 'card'\"\n>\n  @if (avatarDisplay() === 'transparent' || avatarDisplay() === 'fullscreen') {\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  } @else {\n    <p-card>\n      <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    </p-card>\n  }\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}:host{display:block;width:100%;height:100%}.transparent-mode .card-container{width:420px;height:700px;position:relative}.transparent-mode .card-image{background:transparent}.fullscreen-mode{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.fullscreen-mode .card-container{width:100%;height:100%;position:relative}.fullscreen-mode .card-image{background:transparent}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{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:var(--chat-user-message-bg);color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
+            args: [{ selector: 'dc-agent-card-avatar', standalone: true, imports: [ButtonModule, CardModule, ParseCardPipe, TranslateModule, NgTemplateOutlet, Live2dModelComponent], template: "<ng-template #cardContent>\n  <div class=\"card-container\">\n    <!-- CASO 1: Renderizado por Video (Ping-pong nativo) -->\n    @if (avatarType() === 'video') {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" [style.opacity]=\"videoPlayerService.isVideoPlaying() ? 0 : 1\" style=\"transition: opacity 0.5s ease-in-out;\" alt=\"\" />\n      <video #videoPlayerA class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 1; z-index: 1;\" playsinline></video>\n      <video #videoPlayerB class=\"card-image\" style=\"position: absolute; top: 0; left: 0; transition: opacity 0.3s ease-in-out; opacity: 0; z-index: 2;\" playsinline></video>\n    }\n\n    <!-- CASO 2: Renderizado por Live2D (PixiJS Canvas) -->\n    @else if (avatarType() === 'live2d') {\n      @if (model3JsonUrl(); as modelPath) {\n        <app-live2d-model\n          #live2dModel\n          class=\"card-image\"\n          style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: all; z-index: 2;\"\n          [modelPath]=\"modelPath\"\n          [zoom]=\"live2dZoomState()\"\n          [x]=\"live2dXState()\"\n          [y]=\"live2dYState()\"\n          (viewStateChanged)=\"onViewStateChanged($event)\">\n        </app-live2d-model>\n      } @else {\n        <!-- Fallback si no tiene manifest -->\n        <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n      }\n    }\n\n    <!-- CASO 3: Renderizado por VRoid (WebGL 3D - Placeholder) -->\n    @else if (avatarType() === 'vroid') {\n      <div class=\"card-image\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; display: flex; align-items: center; justify-content: center; color: white; z-index: 2;\">\n        <span>[3D VRoid Avatar Canvas]</span>\n      </div>\n    }\n\n    <!-- CASO 4: Imagen Est\u00E1tica Est\u00E1ndar -->\n    @else {\n      <img class=\"card-image\" [src]=\"agentCard()?.assets?.image?.url\" alt=\"\" />\n    }\n\n\n\n    @if (!isChatActive()) {\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\n          size=\"large\"\n          [label]=\"'dataclouder.agentCards.dcAgentCardDetails.startConversation' | translate\"\n          [rounded]=\"true\"\n          (click)=\"startConversation()\" />\n      </div>\n    }\n\n    <div class=\"info-layer\" [class.active]=\"showInfoLayer()\">\n      <div class=\"info-content\">\n        <h1\n          ><strong>{{ agentCard()?.name || agentCard()?.characterCard?.data?.name }}</strong></h1\n        >\n\n        @if (agentCard()?.characterCard?.data?.instructions) {\n          <div class=\"scenario\">\n            <h4>{{ 'dataclouder.agentCards.dcAgentCardDetails.instructions' | translate }}</h4>\n            <p>{{ agentCard()?.characterCard?.data?.instructions | parseCard: agentCard() }}</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div \n  style=\"display: flex; justify-content: center; align-items: center\" \n  [class.transparent-mode]=\"avatarDisplay() === 'transparent'\"\n  [class.fullscreen-mode]=\"avatarDisplay() === 'fullscreen'\"\n  [class.card-mode]=\"avatarDisplay() === 'card'\"\n>\n  @if (avatarDisplay() === 'transparent' || avatarDisplay() === 'fullscreen') {\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  } @else {\n    <p-card>\n      <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    </p-card>\n  }\n</div>\n", styles: ["::ng-deep .p-card{width:420px;height:700px}::ng-deep .p-card .p-card-body{width:100%;height:100%}:host{display:block;width:100%;height:100%}.transparent-mode .card-container{width:420px;height:700px;position:relative}.transparent-mode .card-image{background:transparent}.fullscreen-mode{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.fullscreen-mode .card-container{width:100%;height:100%;position:relative}.fullscreen-mode .card-image{background:transparent}.card-image{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transition:filter .3s ease}::ng-deep .plyr--full-ui{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:var(--chat-user-message-bg);color:#fff;opacity:1;clip-path:circle(0% at top right);transition:clip-path .5s cubic-bezier(.25,1,.5,1);pointer-events:none}.info-layer.active{clip-path:circle(150% at top right);pointer-events:auto}.info-content{padding:15px;text-align:center;max-width:90%}.info-content h1{margin-top:0;font-size:18px;margin-bottom:10px}.info-content p{font-size:12px;margin:0}::ng-deep .info-button .p-button{background-color:#ffffff47}\n"] }]
         }], ctorParameters: () => [], propDecorators: { agentCardId: [{
                 type: Input
             }], useNativePlayer: [{
                 type: Input
-            }], activeAudioMessage: [{
-                type: Input
             }], isConversationActive: [{
                 type: Input
             }], onStartConversation: [{ type: i0.Output, args: ["onStartConversation"] }], videoPlayerA: [{ type: i0.ViewChild, args: ['videoPlayerA', { isSignal: true }] }], videoPlayerB: [{ type: i0.ViewChild, args: ['videoPlayerB', { isSignal: true }] }], live2dModel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Live2dModelComponent), { isSignal: true }] }] } });
@@ -10289,5 +10654,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACCDataGenerationComponent, AGENT_CARDS_STATE_SERVICE, AIGenerationService, AgentCardListComponent, AgentCardUI, AgentCardsGenerationService, AgenticEngine, AgenticPattern, AudioService, AudioSpeed, BACKGROUND_SERVICE_TOKEN, CHAT_OBSERVER_CONFIG, CONVERSATION_AI_TOKEN, CardRouteService, CardRoutesComponent, CardsCreatorComponent, ChatEngineTestComponent, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationFlowStateService, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationRuleService, ConversationRulesComponent, ConversationStatus, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardConverseComponent, DcAgentCardDetailComponent, DcObserverInterventionComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EAgentType, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, LIVE2D_CONFIG, Live2dModelComponent, MessageContent, MessageContentDisplayer, MessagesStateService, ModelSelectorComponent, PolitoNotificationComponent, PopupService, PromptPreviewComponent, SectionType, SystemPromptType, TextEngineOptions, TextEngines, VIDEO_PLAYER_SERVICE_TOKEN, VideoPlayerNativeService, VideoPlayerService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, XKillsAgentCardsService, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, getMoodStatePrompt, markdownToHtml, matchTranscription, provideAgentCardService, provideLive2D, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
+export { ACCDataGenerationComponent, AGENT_CARDS_STATE_SERVICE, AIGenerationService, AgentCardListComponent, AgentCardUI, AgentCardsGenerationService, AgenticEngine, AgenticPattern, AudioService, AudioSpeed, BACKGROUND_SERVICE_TOKEN, CHAT_OBSERVER_CONFIG, CONVERSATION_AI_TOKEN, CardRouteService, CardRoutesComponent, CardsCreatorComponent, ChatEngineTestComponent, ChatEventType, ChatMessage, ChatMessageOrchestratorComponent, ChatMonitorService, ChatRole, ConditionOperator, ConditionType, ContextEngineService, ContextType, ConversationDTO, ConversationEvents, ConversationFlowStateService, ConversationMessagesDTO, ConversationPromptBuilderService, ConversationRuleService, ConversationRulesComponent, ConversationStatus, ConversationType, ConversationTypeOptions, DCAgentCardFormComponent, DCChatComponent, DCConversationUserChatSettingsComponent, DcAgentCardAvatarComponent, DcAgentCardDetailComponent, DcObserverInterventionComponent, DefaultAgentCardsService, DoActionTypeOptions, DynamicFlowService, DynamicFlowTaskTypeOptions, EAccountsPlatform, EAgentType, EDoActionType, EDynamicFlowTaskType, EntityThen, EntityWhatOptions, EntityWhenOptions, EvalResultStringDefinition, GlobalToolsService, LIVE2D_CONFIG, Live2dModelComponent, MessageContent, MessageContentDisplayer, MessagesStateService, ModelSelectorComponent, PolitoNotificationComponent, PopupService, PromptPreviewComponent, SectionType, SystemPromptType, TextEngineOptions, TextEngines, VIDEO_PLAYER_SERVICE_TOKEN, VideoPlayerNativeService, VideoPlayerService, VoiceTTSOption, VoiceTTSOptions, WordTimestamps, XKillsAgentCardsService, buildObjectTTSRequest, characterCardStringDataDefinition, convertToHTML, createAIModelFormGroup, defaultconvUserSettings, extractAudioAndTranscription, extractJsonFromResponse, getMoodStateLabelsAsString, getMoodStatePrompt, markdownToHtml, matchTranscription, provideAgentCardService, provideLive2D, removeEmojis, removeEmojisAndSpecialCharacters, removeSpecialCharacters };
 //# sourceMappingURL=dataclouder-ngx-agent-cards.mjs.map