@dataclouder/ngx-agent-cards 0.1.75 → 0.1.78

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

@@ -7,11 +7,11 @@ import { AiWhisperService, TtsService, NgxAiServicesService, GeneratedAssetsServ
 import * as i2$1 from '@angular/common';
 import { DOCUMENT, CommonModule, DecimalPipe, KeyValuePipe, DatePipe, SlicePipe, JsonPipe } from '@angular/common';
 import { nanoid } from 'nanoid';
+import { Subject, fromEvent, filter } from 'rxjs';
 import { DynamicDialogRef, DynamicDialogConfig, DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
 import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as Plyr from 'plyr';
-import { Subject, fromEvent, filter } from 'rxjs';
 import * as i2$2 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
 import * as i1$1 from '@angular/forms';
@@ -1741,6 +1741,9 @@ class ConversationFlowStateService {
          * Components and services can subscribe to this signal to get real-time updates.
          */
         this.flowState = signal(this.initialState, ...(ngDevMode ? [{ debugName: "flowState" }] : []));
+        this.currentMood = computed(() => this.flowState().moodState.value, ...(ngDevMode ? [{ debugName: "currentMood" }] : []));
+        this.moodUpdated = new Subject();
+        this.moodUpdated$ = this.moodUpdated.asObservable();
     }
     /**
      * @description
@@ -1757,6 +1760,9 @@ class ConversationFlowStateService {
      */
     updateState(newState) {
         this.flowState.update((current) => ({ ...current, ...newState }));
+        if (newState.moodState?.value) {
+            this.moodUpdated.next(newState.moodState.value);
+        }
     }
     /**
      * @description
@@ -1801,6 +1807,9 @@ class ConversationFlowStateService {
             ...current,
             moodState: { ...current.moodState, ...moodState },
         }));
+        if (moodState.value) {
+            this.moodUpdated.next(moodState.value);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConversationFlowStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConversationFlowStateService, providedIn: 'root' }); }
@@ -2158,6 +2167,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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.
@@ -2914,36 +2926,16 @@ class DynamicFlowTaskService {
         this.messagesStateService = inject(MessagesStateService);
         this.userService = inject(UserService);
     }
-    async evaluateAssistantTaskTrigger(message) {
-        const canTriggerAssistant = this.userService.user()?.settings?.conversation?.assistantMessageTask;
-        if (!canTriggerAssistant) {
-            return;
-        }
-        const conversationFlow = this.dynamicFlowService.conversationFlowConfig();
-        if (!conversationFlow)
-            return;
-        const dynamicFlowTask = conversationFlow.triggerTasks.onAssistantMessage;
-        console.log('Trigger:', dynamicFlowTask);
-        if (dynamicFlowTask && message.messageId) {
-            const messageId = message.messageId;
-            // const contextMessages = this.contextEngineService.getContextMessages(this.messagesStateService.getMessagesSignal()(), ContextType.LastAssistantMessage);
-            // i cant override task in trigger.
-            const task = dynamicFlowTask.task + ' Here is the text: ' + (message.text || message.content);
-            const result = await this.evaluationService.evaluateWithTask({ model: dynamicFlowTask.model, task });
-            console.log('Assistant trigger evaluation result:', result);
-            message.evaluation = result;
-            this.messagesStateService.updateMessage(messageId, message);
-        }
+    async triggerAfterAssistantMessage(message) {
+        this.evaluateAssistantMessage(message);
+        this.evaluateFlow();
+    }
+    async triggerAfterUserMessage(message) {
+        this.evaluateUserMessage(message);
     }
-    async evaluateUserTaskTrigger(message) {
+    async evaluateFlow() {
         const conversationFlow = this.dynamicFlowService.conversationFlowConfig();
-        if (!conversationFlow)
-            return;
         const goal = conversationFlow.goal;
-        // 1) Run Goal Evaluation
-        // TODO probably i need a different method for the goal.
-        // this.evaluationService.evaluateGoal(goal);
-        // Update Dynamic Flow State
         try {
             const messages = this.messagesStateService.getMessagesSignal()();
             const flowPrompt = this.dynamicFlowService.generateSystemPromptForFlow(messages);
@@ -2958,6 +2950,9 @@ class DynamicFlowTaskService {
         catch (err) {
             console.error('Error updating dynamic flow:', err);
         }
+    }
+    async evaluateUserMessage(message) {
+        const conversationFlow = this.dynamicFlowService.conversationFlowConfig();
         // 2) Run User Trigger Evaluation only if user allows it
         const chatUserSettings = this.userService.user()?.settings?.conversation;
         if (chatUserSettings?.userMessageTask) {
@@ -2974,6 +2969,27 @@ class DynamicFlowTaskService {
             }
         }
     }
+    async evaluateAssistantMessage(message) {
+        const canTriggerAssistant = this.userService.user()?.settings?.conversation?.assistantMessageTask;
+        if (!canTriggerAssistant) {
+            return;
+        }
+        const conversationFlow = this.dynamicFlowService.conversationFlowConfig();
+        if (!conversationFlow)
+            return;
+        const dynamicFlowTask = conversationFlow.triggerTasks.onAssistantMessage;
+        console.log('Trigger:', dynamicFlowTask);
+        if (dynamicFlowTask && message.messageId) {
+            const messageId = message.messageId;
+            // const contextMessages = this.contextEngineService.getContextMessages(this.messagesStateService.getMessagesSignal()(), ContextType.LastAssistantMessage);
+            // i cant override task in trigger.
+            const task = dynamicFlowTask.task + ' Here is the text: ' + (message.text || message.content);
+            const result = await this.evaluationService.evaluateWithTask({ model: dynamicFlowTask.model, task });
+            console.log('Assistant trigger evaluation result:', result);
+            message.evaluation = result;
+            this.messagesStateService.updateMessage(messageId, message);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicFlowTaskService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicFlowTaskService }); }
 }
@@ -3062,12 +3078,23 @@ class ConversationService {
         if (!mergedFlow.triggerTasks) {
             mergedFlow.triggerTasks = {};
         }
-        mergedFlow.triggerTasks.onUserMessage = agentFlow?.triggerTasks?.onUserMessage?.task
-            ? agentFlow.triggerTasks.onUserMessage
-            : defaultFlow.triggerTasks?.onUserMessage;
-        mergedFlow.triggerTasks.onAssistantMessage = agentFlow?.triggerTasks?.onAssistantMessage?.task
-            ? agentFlow.triggerTasks.onAssistantMessage
-            : defaultFlow.triggerTasks?.onAssistantMessage;
+        if (agentFlow?.triggerTasks?.onUserMessage?.disableFeature) {
+            // just setting to null disables de feature, this is is card demands.
+            mergedFlow.triggerTasks.onUserMessage = null;
+        }
+        else {
+            mergedFlow.triggerTasks.onUserMessage = agentFlow?.triggerTasks?.onUserMessage?.task
+                ? agentFlow.triggerTasks.onUserMessage
+                : defaultFlow.triggerTasks?.onUserMessage;
+        }
+        if (agentFlow?.triggerTasks?.onAssistantMessage?.disableFeature) {
+            mergedFlow.triggerTasks.onAssistantMessage = null;
+        }
+        else {
+            mergedFlow.triggerTasks.onAssistantMessage = agentFlow?.triggerTasks?.onAssistantMessage?.task
+                ? agentFlow.triggerTasks.onAssistantMessage
+                : defaultFlow.triggerTasks?.onAssistantMessage;
+        }
         return mergedFlow;
     }
     async initConversationWithSettings(conversationSettings, conversationFlow) {
@@ -3109,7 +3136,7 @@ class ConversationService {
                 if (messageIndex !== -1) {
                     conversationSettings.messages[messageIndex] = processedMessage;
                 }
-                this.dynamicFlowTaskService.evaluateAssistantTaskTrigger(firstAssistantMsg);
+                this.dynamicFlowTaskService.triggerAfterAssistantMessage(firstAssistantMsg);
             }
             else if (conversationSettings?.autoStart) {
                 // Auto-start conversation if configured and no assistant message is present.
@@ -3160,7 +3187,7 @@ class ConversationService {
         this.isThinkingSignal.set(true);
         let assistantMessageId = null;
         // Trigger are asyn Run triggers in background
-        this.dynamicFlowTaskService.evaluateUserTaskTrigger({ messageId: userMessageId, role: ChatRole.User });
+        this.dynamicFlowTaskService.triggerAfterUserMessage({ messageId: userMessageId, role: ChatRole.User });
         try {
             assistantMessageId = await this.requestAssistantConversationResponse();
         }
@@ -3212,11 +3239,7 @@ class ConversationService {
         this.messagesStateService.addMessage(newMessage);
         this.isThinkingSignal.set(false);
         // Run Dynamic Flow Evaluations
-        this.dynamicFlowTaskService.evaluateAssistantTaskTrigger(newMessage); // Not waiting should be parallel.
-        // this.dynamicCriteriaService.evaluateUsingTools();
-        if (this.dynamicFlowService.conversationFlowConfig()?.moodState.enabled) {
-            this.dynamicFlowService.syncMoodToLatestMessage(newMessage.messageId);
-        }
+        this.dynamicFlowTaskService.triggerAfterAssistantMessage(newMessage); // Not waiting should be parallel.
         return newMessage.messageId;
     }
     // Reset conversation
@@ -4666,9 +4689,8 @@ class DCChatComponent {
                 this.chatEvent.emit({ type: ChatEventType.AudioStarted, payload: message });
             }
         });
-        // Effect to watch for mood changes
-        effect(() => {
-            const mood = this.chatMonitorService.currentMood();
+        // Subscribe to mood updates
+        this.moodSubscription = this.conversationFlowStateService.moodUpdated$.subscribe((mood) => {
             if (mood) {
                 this.chatEvent.emit({ type: ChatEventType.MoodDetected, payload: mood });
             }
@@ -4693,6 +4715,7 @@ 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.evaluationService.analylizePerformance();
@@ -4739,11 +4762,11 @@ class DCChatComponent {
         this.goalCompleted.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationSettings: { classPropertyName: "conversationSettings", publicName: "conversationSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationFlow: { classPropertyName: "conversationFlow", publicName: "conversationFlow", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chatEvent: "chatEvent", goalCompleted: "goalCompleted" }, providers: [ConversationService, AIGenerationService, EvaluationService, DynamicFlowTaskService, ConversationInfoService, ChatMonitorService], viewQueries: [{ propertyName: "chatFooterComponent", first: true, predicate: ChatFooterComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat-container\">\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\"\n    (completeEvent)=\"complete()\">\n  </dc-chat-header>\n\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\"> </dc-chat-messages-list>\n\n  <dc-chat-footer [micSettings]=\"micSettings\"> </dc-chat-footer>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent"] }, { 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DCChatComponent, isStandalone: true, selector: "dc-chat", inputs: { chatUserSettings: { classPropertyName: "chatUserSettings", publicName: "chatUserSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationSettings: { classPropertyName: "conversationSettings", publicName: "conversationSettings", isSignal: false, isRequired: false, transformFunction: null }, conversationFlow: { classPropertyName: "conversationFlow", publicName: "conversationFlow", isSignal: false, isRequired: false, transformFunction: null }, agentCard: { classPropertyName: "agentCard", publicName: "agentCard", isSignal: false, isRequired: false, transformFunction: null }, parseDict: { classPropertyName: "parseDict", publicName: "parseDict", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chatEvent: "chatEvent", goalCompleted: "goalCompleted" }, providers: [ConversationService, AIGenerationService, EvaluationService, DynamicFlowTaskService, ConversationInfoService], viewQueries: [{ propertyName: "chatFooterComponent", first: true, predicate: ChatFooterComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat-container\">\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\"\n    (completeEvent)=\"complete()\">\n  </dc-chat-header>\n\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\"> </dc-chat-messages-list>\n\n  <dc-chat-footer [micSettings]=\"micSettings\"> </dc-chat-footer>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "dc-chat-header", inputs: ["alternativeConversation", "agentCard"], outputs: ["restartConversationEvent", "showInfoEvent", "settingsClickEvent"] }, { 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, ChatHeaderComponent, ChatFooterComponent, ChatMessagesListComponent, ProgressBarModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConversationService, AIGenerationService, EvaluationService, DynamicFlowTaskService, ConversationInfoService, ChatMonitorService], template: "<div class=\"chat-container\">\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\"\n    (completeEvent)=\"complete()\">\n  </dc-chat-header>\n\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\"> </dc-chat-messages-list>\n\n  <dc-chat-footer [micSettings]=\"micSettings\"> </dc-chat-footer>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
+            args: [{ selector: 'dc-chat', standalone: true, imports: [CommonModule, ChatHeaderComponent, ChatFooterComponent, ChatMessagesListComponent, ProgressBarModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConversationService, AIGenerationService, EvaluationService, DynamicFlowTaskService, ConversationInfoService], template: "<div class=\"chat-container\">\n  <dc-chat-header\n    [agentCard]=\"agentCard\"\n    (showInfoEvent)=\"showInfo()\"\n    (settingsClickEvent)=\"changeUserChatSettings()\"\n    (restartConversationEvent)=\"restartConversation($event)\"\n    (completeEvent)=\"complete()\">\n  </dc-chat-header>\n\n  <dc-chat-messages-list [chatUserSettings]=\"chatUserSettings\"> </dc-chat-messages-list>\n\n  <dc-chat-footer [micSettings]=\"micSettings\"> </dc-chat-footer>\n</div>\n", styles: ["::ng-deep .p-drawer-content{padding:0!important}::ng-deep .p-dialog-content{display:contents}.chat-container{display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;background-color:transparent}dc-chat-messages-list{flex:1;overflow-y:auto;padding:.5rem}.score-container{padding:.5rem 1rem;background-color:var(--surface-card, #ffffff);border-top:1px solid var(--surface-border, #dee2e6)}.info-content{max-height:70vh;overflow-y:auto;padding:1rem}.info-content h3{margin-top:1rem;margin-bottom:.5rem;font-size:1.2rem}.info-content pre{background-color:var(--surface-hover, #f1f1f1);padding:1rem;border-radius:4px;overflow-x:auto;font-size:.9rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chatFooterComponent: [{
                 type: ViewChild,
                 args: [ChatFooterComponent]
@@ -5927,6 +5950,7 @@ class CharacterFormGroupService {
             modelQuality: this.fb.control(task?.modelQuality || EModelQuality.FAST),
             model: this.createModelFormGroup(task?.model),
             enabled: this.fb.control(task?.enabled ?? false),
+            disableFeature: this.fb.control(false),
         });
     }
     createDynamicCriteriaFormGroup(criteria) {
@@ -6019,11 +6043,11 @@ class AgentTaskFormComponent {
         this.shortForm = false; // is short means AITask else SimpleAgentTask AiTaks is shorter
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AgentTaskFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AgentTaskFormComponent, isStandalone: true, selector: "agent-task-form", inputs: { formGroup: "formGroup", shortForm: "shortForm" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"space-y-6 p-4\">\n  @if(formGroup.controls?.task) {\n  <div class=\"form-field\">\n    <div> <p-checkbox id=\"enabled\" [formControl]=\"formGroup.controls.enabled\" binary=\"true\" class=\"w-full\" /> Activada </div>\n\n    <label for=\"task\" class=\"block text-sm font-medium text-gray-700\">Descripci\u00F3n de la evaluaci\u00F3n para el objetivo</label>\n\n    <textarea pTextarea [autoResize]=\"true\" class=\"w-full\" [formControl]=\"formGroup.controls?.task\"></textarea>\n  </div>\n  } @if(!shortForm && formGroup.controls?.expectedResponseType) {\n  <div class=\"form-field\">\n    <label for=\"expectedResponseType\" class=\"block text-sm font-medium text-gray-700\">Expected Response Type</label>\n    <input pInputText id=\"expectedResponseType\" type=\"text\" [formControl]=\"formGroup.controls?.expectedResponseType\" class=\"w-full\" />\n  </div>\n  } @if (formGroup.controls?.model) {\n\n  <dc-model-selector [modelForm]=\"formGroup.controls.model\" [shortForm]=\"shortForm\"></dc-model-selector>\n  } @if (!shortForm && formGroup.controls?.systemPrompt) {\n  <div class=\"form-field\">\n    <label for=\"systemPrompt\" class=\"block text-sm font-medium text-gray-700 mb-1\">System Prompt</label>\n    <input pInputText id=\"systemPrompt\" [formControl]=\"formGroup.controls?.systemPrompt\" class=\"w-full\" />\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.form-field{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AgentTaskFormComponent, isStandalone: true, selector: "agent-task-form", inputs: { formGroup: "formGroup", shortForm: "shortForm" }, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"space-y-6 p-4\">\n  @if(formGroup.controls?.task) {\n  <div class=\"form-field\">\n    <div class=\"flex space-x-4\">\n      <div> <p-checkbox id=\"enabled\" [formControl]=\"formGroup.controls.enabled\" binary=\"true\" /> Activada </div>\n\n      <div> <p-checkbox id=\"enabled\" [formControl]=\"formGroup.controls.disableFeature\" binary=\"true\" /> Disable Feature </div>\n    </div>\n\n    <label for=\"task\" class=\"block text-sm font-medium text-gray-700\">Descripci\u00F3n de la evaluaci\u00F3n para el objetivo</label>\n\n    <textarea pTextarea [autoResize]=\"true\" class=\"w-full\" [formControl]=\"formGroup.controls?.task\"></textarea>\n  </div>\n  } @if(!shortForm && formGroup.controls?.expectedResponseType) {\n  <div class=\"form-field\">\n    <label for=\"expectedResponseType\" class=\"block text-sm font-medium text-gray-700\">Expected Response Type</label>\n    <input pInputText id=\"expectedResponseType\" type=\"text\" [formControl]=\"formGroup.controls?.expectedResponseType\" class=\"w-full\" />\n  </div>\n  } @if (formGroup.controls?.model) {\n\n  <dc-model-selector [modelForm]=\"formGroup.controls.model\" [shortForm]=\"shortForm\"></dc-model-selector>\n  } @if (!shortForm && formGroup.controls?.systemPrompt) {\n  <div class=\"form-field\">\n    <label for=\"systemPrompt\" class=\"block text-sm font-medium text-gray-700 mb-1\">System Prompt</label>\n    <input pInputText id=\"systemPrompt\" [formControl]=\"formGroup.controls?.systemPrompt\" class=\"w-full\" />\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.form-field{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: ModelSelectorComponent, selector: "dc-model-selector", inputs: ["modelForm", "shortForm"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AgentTaskFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'agent-task-form', imports: [TextareaModule, InputTextModule, ReactiveFormsModule, SelectModule, ModelSelectorComponent, ModelSelectorComponent, CheckboxModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"formGroup\" class=\"space-y-6 p-4\">\n  @if(formGroup.controls?.task) {\n  <div class=\"form-field\">\n    <div> <p-checkbox id=\"enabled\" [formControl]=\"formGroup.controls.enabled\" binary=\"true\" class=\"w-full\" /> Activada </div>\n\n    <label for=\"task\" class=\"block text-sm font-medium text-gray-700\">Descripci\u00F3n de la evaluaci\u00F3n para el objetivo</label>\n\n    <textarea pTextarea [autoResize]=\"true\" class=\"w-full\" [formControl]=\"formGroup.controls?.task\"></textarea>\n  </div>\n  } @if(!shortForm && formGroup.controls?.expectedResponseType) {\n  <div class=\"form-field\">\n    <label for=\"expectedResponseType\" class=\"block text-sm font-medium text-gray-700\">Expected Response Type</label>\n    <input pInputText id=\"expectedResponseType\" type=\"text\" [formControl]=\"formGroup.controls?.expectedResponseType\" class=\"w-full\" />\n  </div>\n  } @if (formGroup.controls?.model) {\n\n  <dc-model-selector [modelForm]=\"formGroup.controls.model\" [shortForm]=\"shortForm\"></dc-model-selector>\n  } @if (!shortForm && formGroup.controls?.systemPrompt) {\n  <div class=\"form-field\">\n    <label for=\"systemPrompt\" class=\"block text-sm font-medium text-gray-700 mb-1\">System Prompt</label>\n    <input pInputText id=\"systemPrompt\" [formControl]=\"formGroup.controls?.systemPrompt\" class=\"w-full\" />\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.form-field{margin:0}\n"] }]
+            args: [{ selector: 'agent-task-form', imports: [TextareaModule, InputTextModule, ReactiveFormsModule, SelectModule, ModelSelectorComponent, ModelSelectorComponent, CheckboxModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"formGroup\" class=\"space-y-6 p-4\">\n  @if(formGroup.controls?.task) {\n  <div class=\"form-field\">\n    <div class=\"flex space-x-4\">\n      <div> <p-checkbox id=\"enabled\" [formControl]=\"formGroup.controls.enabled\" binary=\"true\" /> Activada </div>\n\n      <div> <p-checkbox id=\"enabled\" [formControl]=\"formGroup.controls.disableFeature\" binary=\"true\" /> Disable Feature </div>\n    </div>\n\n    <label for=\"task\" class=\"block text-sm font-medium text-gray-700\">Descripci\u00F3n de la evaluaci\u00F3n para el objetivo</label>\n\n    <textarea pTextarea [autoResize]=\"true\" class=\"w-full\" [formControl]=\"formGroup.controls?.task\"></textarea>\n  </div>\n  } @if(!shortForm && formGroup.controls?.expectedResponseType) {\n  <div class=\"form-field\">\n    <label for=\"expectedResponseType\" class=\"block text-sm font-medium text-gray-700\">Expected Response Type</label>\n    <input pInputText id=\"expectedResponseType\" type=\"text\" [formControl]=\"formGroup.controls?.expectedResponseType\" class=\"w-full\" />\n  </div>\n  } @if (formGroup.controls?.model) {\n\n  <dc-model-selector [modelForm]=\"formGroup.controls.model\" [shortForm]=\"shortForm\"></dc-model-selector>\n  } @if (!shortForm && formGroup.controls?.systemPrompt) {\n  <div class=\"form-field\">\n    <label for=\"systemPrompt\" class=\"block text-sm font-medium text-gray-700 mb-1\">System Prompt</label>\n    <input pInputText id=\"systemPrompt\" [formControl]=\"formGroup.controls?.systemPrompt\" class=\"w-full\" />\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.form-field{margin:0}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], shortForm: [{
@@ -7160,21 +7184,19 @@ class DcAgentCardDetailsComponent {
         this.route = inject(ActivatedRoute);
         this.toastService = inject(TOAST_ALERTS_TOKEN);
         this.chatMonitorService = inject(ChatMonitorService);
+        this.conversationFlowStateService = inject(ConversationFlowStateService);
         this.userService = inject(UserService);
         this.videoPlayerService = inject(VideoPlayerService);
         this.agentCardId = '';
         this.onStartConversation = output();
         this.agentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "agentCard" }] : []));
         this.showInfoLayer = signal(false, ...(ngDevMode ? [{ debugName: "showInfoLayer" }] : []));
-        effect(() => {
-            const mood = this.chatMonitorService.currentMood();
+        this.moodSubscription = this.conversationFlowStateService.moodUpdated$.subscribe((mood) => {
             const card = this.agentCard();
             if (mood && card?.assets?.motions) {
-                const motions = mood
-                    .map((currentMood) => card.assets.motions.find((m) => m.metadata?.moodState === currentMood)?.url)
-                    .filter((url) => !!url);
-                if (motions.length > 0) {
-                    this.videoPlayerService.addVideosToQueue(motions);
+                const motionUrl = card.assets.motions.find((m) => m.metadata?.moodState === mood)?.url;
+                if (motionUrl) {
+                    this.videoPlayerService.addVideosToQueue([motionUrl]);
                     this.videoPlayerService.playAndRewind();
                 }
             }
@@ -7189,6 +7211,7 @@ class DcAgentCardDetailsComponent {
     ngOnDestroy() {
         this.videoPlayerService.cleanUp();
         this.chatMonitorService.setBackground(undefined);
+        this.moodSubscription?.unsubscribe();
     }
     ngAfterViewInit() {
         if (this.videoPlayer) {