@dataclouder/ngx-lessons 0.1.14 → 0.1.15

package/fesm2022/dataclouder-ngx-lessons.mjs

@@ -1,20 +1,23 @@
 import * as i0 from '@angular/core';
-import { Pipe, InjectionToken, inject, Input, Component, ChangeDetectionStrategy, signal, EventEmitter, Output, Injectable, effect, ViewChildren, input, viewChild, Renderer2, ViewContainerRef, computed, ChangeDetectorRef, output } from '@angular/core';
-import { DatePipe, NgComponentOutlet, KeyValuePipe, CommonModule, SlicePipe } from '@angular/common';
-import * as i1$4 from '@angular/router';
+import { Pipe, InjectionToken, inject, Input, Component, ChangeDetectionStrategy, signal, EventEmitter, Output, Injectable, effect, ViewChildren, ViewContainerRef, ViewChild, input, viewChild, Renderer2, computed, ChangeDetectorRef, output } from '@angular/core';
+import { DatePipe, NgComponentOutlet, CommonModule, KeyValuePipe, SlicePipe } from '@angular/common';
+import * as i1$6 from '@angular/router';
 import { RouterModule, ActivatedRoute, RouterOutlet, RouterLink } from '@angular/router';
-import { EntityCommunicationService, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, TOAST_ALERTS_TOKEN, EModelQuality, UiStateService, MobileService, LoadingBarService, FormUtilsService, EntityBaseFormComponent, PromptService, DcManageableFormComponent, DcLearnableFormComponent, HttpCoreService, PaginationBase, LangDescTranslation, getSupportedLanguageOptions } from '@dataclouder/ngx-core';
+import { EntityCommunicationService, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, TOAST_ALERTS_TOKEN, LoadingBarService, FormUtilsService, EModelQuality, UiStateService, MobileService, EntityBaseFormComponent, PromptService, DcManageableFormComponent, DcLearnableFormComponent, HttpCoreService, PaginationBase, LangDescTranslation, getSupportedLanguageOptions } from '@dataclouder/ngx-core';
 import * as i1 from '@angular/forms';
 import { FormBuilder, FormControl, FormArray, FormsModule, ReactiveFormsModule, UntypedFormControl, FormGroup, Validators } from '@angular/forms';
 import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i3 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import { DynamicDialogRef, DialogService } from 'primeng/dynamicdialog';
+import * as i1$4 from 'primeng/dynamicdialog';
+import { DynamicDialogRef, DialogService, DynamicDialogConfig } from 'primeng/dynamicdialog';
 import { nanoid } from 'nanoid';
 import * as i2 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import { TtsPlaygroundComponent, getRandomQuickVoice, NgxVertexService, ChatRoleVertex } from '@dataclouder/ngx-vertex';
+import { TtsPlaygroundComponent, getRandomQuickVoice, NgxAiServicesService, ChatRoleVertex } from '@dataclouder/ngx-ai-services';
+import * as i1$2 from 'primeng/card';
+import { CardModule } from 'primeng/card';
 import * as i4 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
 import { PopoverModule } from 'primeng/popover';
@@ -22,39 +25,37 @@ import * as i4$1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import * as i2$1 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
-import * as i1$2 from 'primeng/card';
-import { CardModule } from 'primeng/card';
 import { UserService } from '@dataclouder/ngx-users';
 import * as i1$3 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
-import * as i3$1 from '@ckeditor/ckeditor5-angular';
-import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
-import * as i5$1 from 'primeng/selectbutton';
+import * as i3$2 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import * as i6$1 from 'primeng/splitter';
-import { SplitterModule } from 'primeng/splitter';
-import * as i7 from 'primeng/tooltip';
+import * as i4$2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import { ResolutionType, AspectType, AssetsLoaderComponent, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
-import { EvalResultStringDefinition, SystemPromptType, EDoActionType, ConditionOperator, ConditionType, ConversationEvents, ChatRole, TextEngines, ConversationType, ChatEventType, DCChatComponent, CONVERSATION_AI_TOKEN } from '@dataclouder/ngx-agent-cards';
-import * as i2$2 from 'primeng/drawer';
-import { DrawerModule } from 'primeng/drawer';
-import { MarkdownComponent, MarkdownService } from 'ngx-markdown';
 import { DialogModule } from 'primeng/dialog';
+import { CONVERSATION_AI_TOKEN, ChatRole, EvalResultStringDefinition, SystemPromptType, EDoActionType, ConditionOperator, ConditionType, ConversationEvents, TextEngines, ConversationType, ChatEventType, DCChatComponent } from '@dataclouder/ngx-agent-cards';
 import * as i5 from 'primeng/inputgroup';
 import { InputGroupModule } from 'primeng/inputgroup';
 import * as i6 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
-import * as i2$3 from 'primeng/api';
+import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
+import * as i1$5 from '@ckeditor/ckeditor5-angular';
+import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+import * as i3$1 from 'primeng/splitter';
+import { SplitterModule } from 'primeng/splitter';
+import * as i2$2 from 'primeng/drawer';
+import { DrawerModule } from 'primeng/drawer';
+import { MarkdownComponent, MarkdownService } from 'ngx-markdown';
+import * as i4$3 from 'primeng/api';
 import { MessageService } from 'primeng/api';
 import { TableModule } from 'primeng/table';
-import * as i3$2 from 'primeng/panel';
+import * as i3$3 from 'primeng/panel';
 import { PanelModule } from 'primeng/panel';
-import * as i5$2 from 'primeng/progressspinner';
+import * as i5$1 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { ToastModule } from 'primeng/toast';
-import * as i3$3 from 'primeng/textarea';
+import * as i3$4 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { ChipModule } from 'primeng/chip';
 
@@ -433,7 +434,7 @@ class SpeakerBuilderComponent extends ComponentBuilder {
         return code;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SpeakerBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SpeakerBuilderComponent, isStandalone: true, selector: "app-speaker-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n  <div>\r\n    <h5>Constructor de Speaker</h5>\r\n  </div>\r\n\r\n  <dc-tts-playground (ttsGenerated)=\"handleTtsGenerated($event)\"></dc-tts-playground>\r\n\r\n  <br />\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"!tts()\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: TtsPlaygroundComponent, selector: "dc-tts-playground", inputs: ["settings"], outputs: ["ttsGenerated"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SpeakerBuilderComponent, isStandalone: true, selector: "app-speaker-builder", usesInheritance: true, ngImport: i0, template: "<div>\r\n  <div>\r\n    <h5>Constructor de Speaker</h5>\r\n  </div>\r\n\r\n  <dc-tts-playground (ttsGenerated)=\"handleTtsGenerated($event)\"></dc-tts-playground>\r\n\r\n  <br />\r\n  <div>\r\n    <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\r\n    <p-button (click)=\"showCode()\" [disabled]=\"!tts()\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: TtsPlaygroundComponent, selector: "dc-tts-playground", inputs: ["settings", "emitValues"], outputs: ["ttsGenerated", "formValues"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SpeakerBuilderComponent, decorators: [{
             type: Component,
@@ -452,11 +453,11 @@ class SpeakerComponent {
         console.log('should speech but will do in next version');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SpeakerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SpeakerComponent, isStandalone: true, selector: "app-speaker", inputs: { config: "config", tts: "tts" }, ngImport: i0, template: "<button\r\n  pButton\r\n  style=\"padding: 0px 2px\"\r\n  severity=\"help\"\r\n  size=\"small\"\r\n  (click)=\"speach()\"\r\n  [label]=\"config?.settings?.text\"\r\n  [text]=\"true\"\r\n  [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: SpeakerComponent, isStandalone: true, selector: "app-speaker", inputs: { config: "config", tts: "tts" }, ngImport: i0, template: "<h4>Speacker component</h4>\r\n\r\n<!-- <p-button severity=\"help\" [label]=\"config?.settings?.text\" (click)=\"speach()\" /> -->\r\n\r\n<button pButton style=\"padding: 0px 2px\" severity=\"help\" size=\"small\" (click)=\"speach()\" [label]=\"config?.settings?.text\" [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SpeakerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-speaker', standalone: true, imports: [ButtonModule], template: "<button\r\n  pButton\r\n  style=\"padding: 0px 2px\"\r\n  severity=\"help\"\r\n  size=\"small\"\r\n  (click)=\"speach()\"\r\n  [label]=\"config?.settings?.text\"\r\n  [text]=\"true\"\r\n  [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"] }]
+            args: [{ selector: 'app-speaker', standalone: true, imports: [ButtonModule], template: "<h4>Speacker component</h4>\r\n\r\n<!-- <p-button severity=\"help\" [label]=\"config?.settings?.text\" (click)=\"speach()\" /> -->\r\n\r\n<button pButton style=\"padding: 0px 2px\" severity=\"help\" size=\"small\" (click)=\"speach()\" [label]=\"config?.settings?.text\" [rounded]=\"true\"></button>\r\n", styles: [".lisen{cursor:pointer}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], tts: [{
@@ -518,12 +519,6 @@ class SelectorBuilderComponent extends ComponentBuilder {
             },
         };
     }
-    // public formGroup = this.formBuilder.group({
-    //   options: this.formBuilder.array([]),
-    //   response: ['', Validators.required],
-    //   hint: [],
-    //   explanation: [],
-    // });
     ngOnInit() {
         this.formGroup.get('response');
     }
@@ -540,11 +535,11 @@ class SelectorBuilderComponent extends ComponentBuilder {
         return this.formGroup.get('options');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectorBuilderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: SelectorBuilderComponent, isStandalone: true, selector: "app-selector-builder", usesInheritance: true, ngImport: i0, template: "<div>\n  <div>\n    <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\n  </div>\n\n  <div>\n    <span>En que a\u00F1o lleg\u00F3 cristobal colon a america?</span>\n    <app-selector [config]=\"sampleConfig\"></app-selector>\n  </div>\n\n  <hr />\n\n  <div>\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <input class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\n      <br />\n\n      <input class=\"form-input\" type=\"\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\n\n      <br />\n      <input\n        class=\"form-input\"\n        type=\"text\"\n        pInputText\n        fullWidth\n        formControlName=\"explanation\"\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\n\n        <hr />\n        <h6>Opciones</h6>\n\n        <div class=\"form-group\" formArrayName=\"options\">\n          @for (item of optionsForm.controls; track item; let i = $index) {\n            <div\n              style=\"display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-direction: column\"\n              >\n              <div>\n                <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\n                <p-button (click)=\"deleteFormArrayByIndex('options', i)\" icon=\"pi pi-times\" severity=\"danger\"></p-button>\n              </div>\n            </div>\n          }\n        </div>\n\n        <p-button (click)=\"pushControlToFormArray('options')\" label=\"Agregar Opci\u00F3n\" [text]=\"true\" severity=\"help\"></p-button>\n      </form>\n\n      <!-- <button nbButton (click)=\"isRendered = !isRendered\"> Renderizar </button> -->\n\n      @if (isRendered) {\n        <div>\n          <!-- TODO:  probably i need to pass some params -->\n          <app-selector></app-selector>\n        </div>\n      }\n    </div>\n\n    <div>\n      <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\n      <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\n    </div>\n  </div>\n", styles: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: SelectorComponent, selector: "app-selector", inputs: ["config"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: SelectorBuilderComponent, isStandalone: true, selector: "app-selector-builder", usesInheritance: true, ngImport: i0, template: "<div class=\"p-fluid grid\">\n  <div class=\"col-12 md:col-6\">\n    <p-card header=\"Ejemplo de componente\">\n      <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\n      <div class=\"mt-4\">\n        <p>En que a\u00F1o lleg\u00F3 cristobal colon a america?</p>\n        <app-selector [config]=\"sampleConfig\"></app-selector>\n      </div>\n    </p-card>\n  </div>\n\n  <hr />\n\n  <div class=\"col-12 md:col-6\">\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <div class=\"field\">\n        <label for=\"response\">Respuesta Correcta</label>\n        <input id=\"response\" class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\n      </div>\n\n      <div class=\"field\">\n        <label for=\"hint\">Pista</label>\n        <input id=\"hint\" class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\n      </div>\n\n      <div class=\"field\">\n        <label for=\"explanation\">Explicaci\u00F3n</label>\n        <input\n          id=\"explanation\"\n          class=\"form-input\"\n          type=\"text\"\n          pInputText\n          fullWidth\n          formControlName=\"explanation\"\n          placeholder=\"Escribe una explicaci\u00F3n para la respuesta\" />\n      </div>\n\n      <hr />\n      <h6>Opciones</h6>\n\n      <div class=\"form-group\" formArrayName=\"options\">\n        @for (item of optionsForm.controls; track item; let i = $index) {\n        <div class=\"field grid align-items-center\">\n          <div class=\"col\">\n            <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\n          </div>\n          <div class=\"col-fixed\" style=\"width: auto\">\n            <p-button (click)=\"deleteFormArrayByIndex('options', i)\" icon=\"pi pi-times\" severity=\"danger\"></p-button>\n          </div>\n        </div>\n        }\n      </div>\n\n      <p-button (click)=\"pushControlToFormArray('options')\" label=\"Agregar Opci\u00F3n\" [text]=\"true\" severity=\"help\"></p-button>\n    </form>\n\n    @if (isRendered) {\n    <div class=\"mt-4\">\n      <app-selector></app-selector>\n    </div>\n    }\n\n    <div class=\"mt-4 flex justify-content-end gap-2\">\n      <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\n      <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\n    </div>\n  </div>\n</div>\n", styles: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: SelectorComponent, selector: "app-selector", inputs: ["config"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: SelectorBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-selector-builder', standalone: true, imports: [FormsModule, ReactiveFormsModule, SelectorComponent, InputTextModule, ButtonModule, MessageModule], template: "<div>\n  <div>\n    <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\n  </div>\n\n  <div>\n    <span>En que a\u00F1o lleg\u00F3 cristobal colon a america?</span>\n    <app-selector [config]=\"sampleConfig\"></app-selector>\n  </div>\n\n  <hr />\n\n  <div>\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <input class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\n      <br />\n\n      <input class=\"form-input\" type=\"\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\n\n      <br />\n      <input\n        class=\"form-input\"\n        type=\"text\"\n        pInputText\n        fullWidth\n        formControlName=\"explanation\"\n        placeholder=\"Excribe una explicaci\u00F3n para la respuesta\" />\n\n        <hr />\n        <h6>Opciones</h6>\n\n        <div class=\"form-group\" formArrayName=\"options\">\n          @for (item of optionsForm.controls; track item; let i = $index) {\n            <div\n              style=\"display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-direction: column\"\n              >\n              <div>\n                <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\n                <p-button (click)=\"deleteFormArrayByIndex('options', i)\" icon=\"pi pi-times\" severity=\"danger\"></p-button>\n              </div>\n            </div>\n          }\n        </div>\n\n        <p-button (click)=\"pushControlToFormArray('options')\" label=\"Agregar Opci\u00F3n\" [text]=\"true\" severity=\"help\"></p-button>\n      </form>\n\n      <!-- <button nbButton (click)=\"isRendered = !isRendered\"> Renderizar </button> -->\n\n      @if (isRendered) {\n        <div>\n          <!-- TODO:  probably i need to pass some params -->\n          <app-selector></app-selector>\n        </div>\n      }\n    </div>\n\n    <div>\n      <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\n      <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\n    </div>\n  </div>\n", styles: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"] }]
+            args: [{ selector: 'app-selector-builder', standalone: true, imports: [FormsModule, ReactiveFormsModule, SelectorComponent, InputTextModule, ButtonModule, MessageModule, CardModule], template: "<div class=\"p-fluid grid\">\n  <div class=\"col-12 md:col-6\">\n    <p-card header=\"Ejemplo de componente\">\n      <p-message>Construcci\u00F3n del componente de Selecci\u00F3n, sirve para hacer una pregunta y mostrar varias opciones, ejemplo:</p-message>\n      <div class=\"mt-4\">\n        <p>En que a\u00F1o lleg\u00F3 cristobal colon a america?</p>\n        <app-selector [config]=\"sampleConfig\"></app-selector>\n      </div>\n    </p-card>\n  </div>\n\n  <hr />\n\n  <div class=\"col-12 md:col-6\">\n    <form class=\"builder-form\" [formGroup]=\"formGroup\">\n      <div class=\"field\">\n        <label for=\"response\">Respuesta Correcta</label>\n        <input id=\"response\" class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"response\" placeholder=\"Respuesta Correcta...\" />\n      </div>\n\n      <div class=\"field\">\n        <label for=\"hint\">Pista</label>\n        <input id=\"hint\" class=\"form-input\" type=\"text\" pInputText fullWidth formControlName=\"hint\" placeholder=\"Escribe una pista para esta pregunta\" />\n      </div>\n\n      <div class=\"field\">\n        <label for=\"explanation\">Explicaci\u00F3n</label>\n        <input\n          id=\"explanation\"\n          class=\"form-input\"\n          type=\"text\"\n          pInputText\n          fullWidth\n          formControlName=\"explanation\"\n          placeholder=\"Escribe una explicaci\u00F3n para la respuesta\" />\n      </div>\n\n      <hr />\n      <h6>Opciones</h6>\n\n      <div class=\"form-group\" formArrayName=\"options\">\n        @for (item of optionsForm.controls; track item; let i = $index) {\n        <div class=\"field grid align-items-center\">\n          <div class=\"col\">\n            <input type=\"text\" pInputText fullWidth [formControlName]=\"i\" />\n          </div>\n          <div class=\"col-fixed\" style=\"width: auto\">\n            <p-button (click)=\"deleteFormArrayByIndex('options', i)\" icon=\"pi pi-times\" severity=\"danger\"></p-button>\n          </div>\n        </div>\n        }\n      </div>\n\n      <p-button (click)=\"pushControlToFormArray('options')\" label=\"Agregar Opci\u00F3n\" [text]=\"true\" severity=\"help\"></p-button>\n    </form>\n\n    @if (isRendered) {\n    <div class=\"mt-4\">\n      <app-selector></app-selector>\n    </div>\n    }\n\n    <div class=\"mt-4 flex justify-content-end gap-2\">\n      <p-button (click)=\"copyToClipboard()\" [disabled]=\"formGroup.invalid\" label=\"Copia C\u00F3digo\" [rounded]=\"true\"></p-button>\n      <p-button (click)=\"showCode()\" [disabled]=\"formGroup.invalid\" label=\"Mostrar\" [rounded]=\"true\" severity=\"secondary\"></p-button>\n    </div>\n  </div>\n</div>\n", styles: ["nb-card{width:60vw}.builder-form{padding:5px}.form-input{margin-top:10px}.mar-top{margin:5px}\n"] }]
         }] });
 
 var LessonComponentEnum;
@@ -631,11 +626,11 @@ class DcLessonCardComponent {
         this.onAction.emit({ action: eventType, item: this.lesson });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", showOptions: "showOptions", cardHeight: "cardHeight" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson?.name || 'No title available' }}</h1>\n        <p>{{ lesson.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px;min-width:400px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", showOptions: "showOptions", cardHeight: "cardHeight" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson?.name || 'No title available' }}</h1>\n        <p>{{ lesson.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status || 'No status'\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px;min-width:400px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule, TagModule], template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson?.name || 'No title available' }}</h1>\n        <p>{{ lesson.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px;min-width:400px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"] }]
+            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule, TagModule], template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson?.name || 'No title available' }}</h1>\n        <p>{{ lesson.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status || 'No status'\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px;min-width:400px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"] }]
         }], propDecorators: { lesson: [{
                 type: Input
             }], showOptions: [{
@@ -765,10 +760,10 @@ class DCLessonListComponent extends EntityBaseListComponent {
             title: 1,
             name: 1,
             description: 1,
-            media: 1,
             manageable: 1,
             learnable: 1,
             assets: 1,
+            level: 1,
             _id: 1,
             id: 1,
         };
@@ -863,1279 +858,1419 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             args: [{ selector: 'dc-lesson-form', standalone: true, imports: [ReactiveFormsModule], template: "<div class=\"lesson-form-container\">\n  <h2>Lesson Form</h2>\n  <p>Esto es dentro del componente de la leccion</p>\n  <!-- Form implementation will go here -->\n</div>\n", styles: [".lesson-form-container{padding:1rem}\n"] }]
         }] });
 
-// TODO: check LessonComponentBuilders in lessons.clases.ts for origianl implementation
-const DynamicComponentBuilders = {
-    [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
-};
-const DynamicComponents = {
-    [LessonComponentEnum.Speaker]: SpeakerComponent,
-};
-class DynamicComponentsService {
+class LessonNotionService {
     constructor() {
-        this._dynamicComponentBuilders = { ...DynamicComponentBuilders };
-        this._dynamicComponents = { ...DynamicComponents };
+        this.#notionService = inject(NOTION_SERVICE_TOKEN);
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
+        this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        // Keep track of loading state specific to Notion operations
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     }
-    registerCustomComponent(component, name) {
-        // this._dynamicComponentBuilders[name || component.name] = component;
-        this._dynamicComponents[name || component.name] = component;
+    #notionService;
+    #toastService;
+    /**
+     * Extracts the Notion Page ID from a URL.
+     * @param url The Notion page URL.
+     * @returns The extracted page ID or null if invalid.
+     */
+    extractNotionPageId(url) {
+        const notionIdRegex = /[a-f0-9]{32}(?=\?|$)/;
+        const match = url.match(notionIdRegex);
+        const notionId = match ? match[0] : null;
+        if (!notionId) {
+            this.#toastService.error({
+                title: 'URL inválido',
+                subtitle: 'Por favor ingresa una URL válida de Notion.',
+            });
+            return null;
+        }
+        return notionId;
     }
-    registerCustomComponentBuilder(component, name) {
-        this._dynamicComponentBuilders[name || component.name] = component;
+    /**
+     * Links an existing lesson with a Notion page ID by updating the lesson's extras.
+     * @param lesson The current lesson data.
+     * @param notionPageId The Notion page ID to link.
+     * @returns The updated lesson data from the backend or undefined on failure.
+     */
+    async linkLessonWithNotion(lesson, notionPageId) {
+        if (!lesson || !lesson.id) {
+            // Ensure lesson exists and has an ID
+            this.#toastService.warn({ title: 'No se puede enlazar', subtitle: 'La lección debe existir y tener un ID.' });
+            return undefined;
+        }
+        const updatedLesson = {
+            ...lesson,
+            extensions: {
+                ...(lesson.extensions || {}),
+                extras: {
+                    ...(lesson.extensions?.['extras'] || {}),
+                    notionPageId: notionPageId,
+                },
+            },
+        };
+        this.isLoading.set(true);
+        try {
+            const savedLesson = await this.lessonsService.postLesson(updatedLesson);
+            this.#toastService.success({ title: 'Listo', subtitle: 'Se enlazó la lección con Notion.' });
+            return savedLesson;
+        }
+        catch (error) {
+            // Remove explicit type, rely on tsconfig setting
+            console.error('Error linking with Notion:', error);
+            this.#toastService.error({ title: 'Error al enlazar', subtitle: 'Ocurrió un error inesperado.' });
+            return undefined;
+        }
+        finally {
+            this.isLoading.set(false);
+        }
     }
-    getDynamicComponentBuilders(type) {
-        return this._dynamicComponentBuilders[type];
+    /**
+     * Handles the process of importing lesson content from Notion.
+     * It prompts the user for a URL if necessary, extracts the ID, fetches content,
+     * and potentially links the lesson if it's an existing one.
+     * @param currentLesson The current lesson data (can be a new or existing lesson).
+     * @param lessonId The current lesson ID (null if it's a new lesson).
+     * @returns The fetched HTML content from Notion, or null if the process fails.
+     */
+    async importAndLinkLessonFromNotion(currentLesson, lessonId) {
+        if (!currentLesson)
+            return null;
+        let notionPageId = null;
+        if (currentLesson.extensions?.['extras']?.['notionPageId']) {
+            const useExisting = confirm(`Ya tenemos el id ${currentLesson.extensions?.['extras']?.['notionPageId']} ¿Quieres usar este id para importar?`);
+            if (useExisting) {
+                notionPageId = currentLesson.extensions?.['extras']?.['notionPageId'];
+            }
+            else {
+                const inputUrl = prompt('Ingresa la NUEVA URL de Notion para importar (este ID NO se guardará automáticamente si la lección ya existe)');
+                if (!inputUrl)
+                    return null; // User cancelled
+                notionPageId = this.extractNotionPageId(inputUrl);
+            }
+        }
+        else {
+            const inputUrl = prompt('Ingresa el URL de Notion para importar la lección (se enlazará si la lección ya existe)');
+            if (!inputUrl)
+                return null; // User cancelled
+            notionPageId = this.extractNotionPageId(inputUrl);
+            // Link automatically only if we got a valid Notion ID AND the lesson already exists (has an ID)
+            if (notionPageId && lessonId) {
+                const linkedLesson = await this.linkLessonWithNotion(currentLesson, notionPageId);
+                if (!linkedLesson) {
+                    // Linking failed, maybe stop the import? Or proceed without linking?
+                    // For now, let's stop.
+                    this.#toastService.error({ title: 'Error de Enlace', subtitle: 'No se pudo enlazar con Notion antes de importar.' });
+                    return null;
+                }
+                // If linking succeeded, the lesson object might have changed, but we proceed with the import using the notionPageId.
+            }
+        }
+        if (!notionPageId) {
+            this.#toastService.warn({ title: 'Sin ID de Notion', subtitle: 'No se proporcionó un ID de Notion válido para importar.' });
+            return null;
+        }
+        this.isLoading.set(true);
+        try {
+            this.#toastService.info({ title: 'Importando lección...', subtitle: 'Espera unos segundos' });
+            const md = await this.#notionService.getPageInSpecificFormat(notionPageId, NotionExportType.HTML);
+            console.log('Imported MD/HTML:', md);
+            this.#toastService.success({ title: 'Contenido Importado', subtitle: 'Contenido de Notion obtenido.' });
+            return md.content; // Return the fetched content
+        }
+        catch (error) {
+            // Remove explicit type, rely on tsconfig setting
+            console.error('Error importing from Notion:', error);
+            this.#toastService.error({ title: 'Error de importación', subtitle: 'Ocurrió un error inesperado.' });
+            return null; // Return null on failure
+        }
+        finally {
+            this.isLoading.set(false);
+        }
     }
-    getDynamicComponentClass(type) {
-        return this._dynamicComponents[type];
+    /**
+     * Fetches content from the linked Notion page for AI improvement (placeholder).
+     * @param lesson The current lesson data.
+     */
+    async improveLessonWithNotionAI(lesson) {
+        if (!lesson)
+            return;
+        const notionId = lesson.extensions?.['extras']?.['notionPageId'];
+        if (!notionId) {
+            this.#toastService.warn({ title: 'Sin ID de Notion', subtitle: 'Enlaza la lección con Notion primero.' });
+            return;
+        }
+        this.isLoading.set(true);
+        try {
+            this.#toastService.info({ title: 'Mejorando con IA...', subtitle: 'Obteniendo contenido de Notion.' });
+            const md = await this.#notionService.getPageInSpecificFormat(notionId, NotionExportType.HTML);
+            console.log('Content to improve:', md);
+            // TODO: Add actual AI improvement logic here
+            // e.g., call another service: await this.aiImprovementService.improve(md.content);
+            // Then potentially update the lesson via lessonService or return data
+            this.#toastService.success({ title: 'Contenido Obtenido', subtitle: 'Listo para mejorar con IA (lógica no implementada).' });
+        }
+        catch (error) {
+            // Remove explicit type, rely on tsconfig setting
+            console.error('Error improving with AI:', error);
+            this.#toastService.error({ title: 'Error de IA', subtitle: 'Ocurrió un error inesperado.' });
+        }
+        finally {
+            this.isLoading.set(false);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class LessonRendererService {
+class LessonUtilsService {
     constructor() {
-        this.dynamicComponentsService = inject(DynamicComponentsService);
-        this.toastrService = inject(TOAST_ALERTS_TOKEN);
-        this.components = {};
-        this.mainForm = new FormGroup({});
-    }
-    renderLesson(lessonData, viewContainerRef, dynamicLessonElement, renderer) {
-        this.clearLessonRendering(dynamicLessonElement);
-        console.log('Rendering lesson:', lessonData.id);
-        const { htmlContent, components } = this.parseAndCreateComponents(lessonData, viewContainerRef);
-        this.components = components;
-        this.aggregateFormControls(this.components);
-        dynamicLessonElement.innerHTML = htmlContent;
-        this.injectComponentsIntoDom(this.components, renderer);
-        return this.components;
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
+        this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        this.#agentService = inject(CONVERSATION_AI_TOKEN);
+        this.loadingBarService = inject(LoadingBarService);
     }
-    clearLessonRendering(dynamicLessonElement) {
-        Object.values(this.components).forEach((compRef) => compRef.destroy());
-        this.components = {};
-        this.mainForm = new FormGroup({});
-        if (dynamicLessonElement) {
-            dynamicLessonElement.innerHTML = '';
-        }
+    #toastService;
+    #agentService;
+    /**
+     * Validates if audios need generation for the given lesson.
+     * Currently logs a placeholder message.
+     * @param lesson The lesson object (or signal) to validate.
+     */
+    validateAudios(lesson) {
+        // Access lesson data directly
+        // if (!lesson?.components) {
+        //   return;
+        // }
+        alert('I need to refactor this part');
+        // Placeholder logic - adapt as needed from original component
+        console.log('Validating audios for lesson:', lesson.id);
     }
-    parseAndCreateComponents(lessonData, viewContainerRef) {
-        const r1 = new RegExp('~(.+?)~', 'g');
-        let count = 0;
-        const createdComponents = {};
-        const htmlContent = lessonData.textCoded.replace(r1, (_matching, jsonCoded) => {
-            const componentName = `dynamicComp${count}`;
-            count++;
-            const componentRef = this.createComponentReferenceWithJson(jsonCoded, lessonData, viewContainerRef);
-            if (!componentRef) {
-                console.error(`Failed to create component for: ${jsonCoded}`);
-                return '<!-- component creation failed -->';
-            }
-            createdComponents[componentName] = componentRef;
-            return `<span id="${componentName}"></span>`;
+    /**
+     * Updates the lesson signal with a new banner image in metadata.
+     * @param lessonSignal The signal holding the lesson data.
+     * @param imageUploaded The image data object from the upload event. Should conform to LessonImage structure partially.
+     */
+    uploadCover(lessonSignal, imageUploaded) {
+        lessonSignal.update((currentLesson) => {
+            if (!currentLesson)
+                return undefined;
+            const assets = { ...(currentLesson.assets ?? {}) };
+            assets.banner = imageUploaded;
+            return {
+                ...currentLesson,
+                assets,
+            };
         });
-        return { htmlContent, components: createdComponents };
     }
-    createComponentReferenceWithJson(json, currentLesson, viewContainerRef) {
-        try {
-            let lessonCodedConfig = JSON.parse(json);
-            if (lessonCodedConfig.id && currentLesson?.dynamicComponents[lessonCodedConfig.id]) {
-                const foundConfig = currentLesson.dynamicComponents[lessonCodedConfig.id];
-                if (foundConfig) {
-                    lessonCodedConfig = { ...lessonCodedConfig, ...foundConfig };
+    // I want to deprecate this method
+    /**
+     * @deprecated Use create new method.
+     * Generates lesson content using AI. Assumes the lesson is already saved.
+     * @param lessonId The ID of the lesson to generate content for.
+     * @returns The updated lesson object after AI generation, or null on failure.
+     */
+    async generateByAI(lessonId) {
+        if (!lessonId) {
+            this.#toastService.warn({ title: 'ID Requerido', subtitle: 'Se necesita un ID de lección para usar IA.' });
+            return null;
+        }
+        // No need to save here, component should ensure it's saved before calling.
+        try {
+            await this.lessonsService.postGenerateByAI(lessonId);
+            // Re-fetch the lesson data to get AI updates
+            const updatedLesson = await this.lessonsService.getLesson(lessonId);
+            if (updatedLesson) {
+                this.#toastService.success({ title: 'IA completada', subtitle: 'Lección actualizada con IA.' });
+                return updatedLesson;
+            }
+            else {
+                throw new Error('Failed to fetch lesson after AI generation');
+            }
+        }
+        catch (error) {
+            // Type the error object
+            console.error('Error during AI generation in service:', error);
+            this.#toastService.error({ title: 'Error de IA', subtitle: 'No se pudo generar la lección con IA.' });
+            return null; // Return null in catch block
+        }
+        // Loading state should be managed by the component calling this service.
+    }
+    /**
+     * Improves the provided Markdown text using AI and updates the lesson.
+     * Assumes the lesson is already saved before calling this.
+     * @param lesson The lesson object containing the prompt and other context.
+     * @param markdownText The Markdown text generated from the lesson's HTML content.
+     * @returns The improved Markdown string, or null on failure.
+     */
+    async improveMDWithAI(lesson, markdownText) {
+        if (!markdownText) {
+            this.#toastService.warn({ title: 'Texto Requerido', subtitle: 'Se necesita texto Markdown para mejorar con IA.' });
+            return null;
+        }
+        try {
+            this.loadingBarService.showIndeterminate();
+            const textPrompt = this.lessonsService.getPrompts().content(lesson);
+            const messages = [{ content: textPrompt, role: ChatRole.User }];
+            const response = await this.#agentService.callChatCompletion({ messages, model: { provider: 'google' } });
+            let improvedMarkdown = response.content?.trim() ?? null;
+            // Remove potential markdown fences
+            const markdownFenceStart = '```markdown\n';
+            const markdownFenceEnd = '\n```';
+            if (improvedMarkdown?.startsWith(markdownFenceStart) && improvedMarkdown.endsWith(markdownFenceEnd)) {
+                improvedMarkdown = improvedMarkdown.slice(markdownFenceStart.length, -markdownFenceEnd.length);
+            }
+            else {
+                // Also handle cases where it might just be ``` at the start/end
+                const simpleFence = '```';
+                if (improvedMarkdown?.startsWith(simpleFence)) {
+                    improvedMarkdown = improvedMarkdown.slice(simpleFence.length);
+                }
+                if (improvedMarkdown?.endsWith(simpleFence)) {
+                    improvedMarkdown = improvedMarkdown.slice(0, -simpleFence.length);
                 }
             }
-            const LessonClass = this.dynamicComponentsService.getDynamicComponentClass(lessonCodedConfig.component);
-            if (!LessonClass) {
-                console.error(`Component class not found for type: ${lessonCodedConfig.component}. JSON: ${json}`);
+            // Trim any leading/trailing whitespace that might remain after removing fences
+            improvedMarkdown = improvedMarkdown?.trim() ?? null;
+            console.log('Improved Markdown:', improvedMarkdown);
+            return improvedMarkdown; // Return only the string
+        }
+        catch (error) {
+            console.error('Error during AI Markdown improvement in service:', error);
+            this.#toastService.error({ title: 'Error de IA', subtitle: 'No se pudo mejorar la lección con IA.' });
+            return null; // Return null in catch block
+        }
+        finally {
+            this.loadingBarService.successAndHide();
+        }
+    }
+    /**
+     * Generates a concise description for the lesson using AI based on its content.
+     * @param lesson The lesson object containing the content.
+     * @returns A promise resolving to the generated description string, or null on failure.
+     */
+    async generateDescriptionWithAI(lesson) {
+        if (!lesson || !lesson.textCoded) {
+            this.#toastService.warn({ title: 'Contenido Requerido', subtitle: 'Se necesita contenido en la lección para generar una descripción.' });
+            return null;
+        }
+        try {
+            this.loadingBarService.showIndeterminate(); // Corrected: No argument needed
+            // Extract plain text from the lesson's HTML content
+            const plainTextContent = this._extractTextFromHtml(lesson.textCoded);
+            if (!plainTextContent || plainTextContent.trim().length === 0) {
+                this.#toastService.warn({ title: 'Texto Vacío', subtitle: 'No se pudo extraer texto útil del contenido de la lección.' });
                 return null;
             }
-            const componentRef = viewContainerRef.createComponent(LessonClass);
-            if (lessonCodedConfig.inputs) {
-                for (const key in lessonCodedConfig.inputs) {
-                    if (lessonCodedConfig.inputs.hasOwnProperty(key)) {
-                        componentRef.instance[key] = lessonCodedConfig.inputs[key];
-                    }
-                }
+            const descriptionPrompt = this.lessonsService.getPrompts().description(lesson);
+            const messages = [{ content: descriptionPrompt, role: ChatRole.User }];
+            const response = await this.#agentService.callChatCompletion({ messages, model: { provider: 'google' } });
+            let generatedDescription = response.content?.trim() ?? null;
+            // Basic cleanup (remove potential quotes if the AI wraps the response)
+            if (generatedDescription && generatedDescription.startsWith('"') && generatedDescription.endsWith('"')) {
+                generatedDescription = generatedDescription.substring(1, generatedDescription.length - 1);
             }
-            if (lessonCodedConfig.settings) {
-                componentRef.instance.config = lessonCodedConfig;
+            if (generatedDescription) {
+                this.#toastService.success({ title: 'Descripción Generada', subtitle: 'Se generó la descripción con IA.' });
+                return generatedDescription;
+            }
+            else {
+                throw new Error('AI did not return a valid description.');
             }
-            return componentRef;
         }
         catch (error) {
-            console.error(`Error processing component JSON: ${json}`, error);
+            console.error('Error during AI description generation in service:', error);
+            this.#toastService.error({ title: 'Error de IA', subtitle: 'No se pudo generar la descripción con IA.' });
             return null;
         }
+        finally {
+            this.loadingBarService.successAndHide();
+        }
     }
-    aggregateFormControls(components) {
-        const newFormControls = {};
-        Object.entries(components).forEach(([name, componentRef]) => {
-            if (componentRef.instance?.control instanceof FormControl) {
-                newFormControls[name] = componentRef.instance.control;
-                newFormControls[name].addValidators(Validators.required);
+    /**
+     * Extracts plain text from an HTML string, removing encoded JSON components.
+     * @param htmlInput The HTML string potentially containing encoded JSON (~...~).
+     * @returns The plain text representation.
+     */
+    _extractTextFromHtml(htmlInput) {
+        if (!htmlInput)
+            return '';
+        // 1. Replace encoded JSON blocks with their 'settings.text' or an empty string
+        const jsonRegex = /~(.+?)~/g;
+        const textWithPlaceholders = htmlInput.replace(jsonRegex, (match, jsonCoded) => {
+            try {
+                const decodedJson = jsonCoded.replace(/"/g, '"').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+                const data = JSON.parse(decodedJson);
+                return data?.settings?.text || ''; // Return text or empty string if not found
+            }
+            catch (error) {
+                console.error('Failed to parse JSON inside HTML during text extraction:', jsonCoded, error);
+                return ''; // Return empty string on error
             }
         });
-        this.mainForm = new FormGroup(newFormControls);
+        // 2. Strip remaining HTML tags to get plain text
+        // Create a temporary DOM element to parse the HTML
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = textWithPlaceholders;
+        // Use textContent to get the plain text, effectively stripping tags
+        // Replace multiple whitespace characters (including newlines) with a single space
+        return (tempDiv.textContent || tempDiv.innerText || '').replace(/\s+/g, ' ').trim();
     }
-    injectComponentsIntoDom(components, renderer) {
-        Object.entries(components).forEach(([name, componentRef]) => {
-            const elementRef = document.getElementById(name);
-            if (elementRef) {
-                this.addComponentToNode(componentRef, elementRef, renderer);
+    /**
+     * Cleans orphaned components from the lesson's dynamicComponents.
+     * An orphaned component is one present in dynamicComponents but its ID is not found in the textCoded HTML.
+     * @param lesson The lesson object to clean.
+     * @returns A new lesson object with orphaned components removed from dynamicComponents.
+     */
+    cleanOrphanedComponents(lesson) {
+        if (!lesson || !lesson.textCoded || !lesson.dynamicComponents) {
+            // Return the original lesson if essential parts are missing
+            return lesson;
+        }
+        const textCoded = lesson.textCoded;
+        const existingComponents = lesson.dynamicComponents;
+        const existingComponentIds = new Set(Object.keys(existingComponents));
+        // Regex to find "id":"<component_id>" within the textCoded string
+        const idRegex = /"id":"([^"]+)"/g;
+        const foundIdsInText = new Set();
+        let match;
+        while ((match = idRegex.exec(textCoded)) !== null) {
+            const potentialId = match[1];
+            // Check if the found ID actually exists in our dynamic components map
+            // This ensures we only count IDs that correspond to known components.
+            if (existingComponentIds.has(potentialId)) {
+                foundIdsInText.add(potentialId);
+            }
+        }
+        const orphanedIds = [];
+        const cleanedDynamicComponents = {};
+        // Iterate through existing component IDs
+        for (const componentId of existingComponentIds) {
+            if (foundIdsInText.has(componentId)) {
+                // Keep the component if its ID was found in the text
+                cleanedDynamicComponents[componentId] = existingComponents[componentId];
             }
             else {
-                console.warn(`Placeholder element with ID '${name}' not found in the DOM.`);
+                // Mark as orphaned if not found
+                orphanedIds.push(componentId);
             }
+        }
+        if (orphanedIds.length > 0) {
+            console.warn(`[LessonUtilsService] Orphaned components detected and will be removed from lesson data (IDs not found in textCoded):`, orphanedIds);
+            this.#toastService.warn({
+                title: 'Componentes Huérfanos Detectados',
+                subtitle: `Se removerán ${orphanedIds.length} componentes no usados del editor.`,
+                // life: 5000, // Removed 'life' property as it might not be supported by ToastData
+            });
+        }
+        // Return a new lesson object with the cleaned components
+        return {
+            ...lesson,
+            dynamicComponents: cleanedDynamicComponents,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonUtilsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonUtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root', // Provide globally or in a specific module if preferred
+                }]
+        }] });
+
+// TODO: check LessonComponentBuilders in lessons.clases.ts for origianl implementation
+const DefaultDynamicComponentBuilders = {
+    [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
+    [LessonComponentEnum.Selector]: SelectorBuilderComponent,
+};
+const DefaultDynamicComponents = {
+    [LessonComponentEnum.Speaker]: SpeakerComponent,
+    [LessonComponentEnum.Selector]: SelectorComponent,
+};
+class DynamicComponentsRegisterService {
+    constructor() {
+        this._dynamicComponentBuilders = {};
+        this._dynamicComponents = {};
+        this.registerComponentAndBuilder(DefaultDynamicComponents, DefaultDynamicComponentBuilders);
+    }
+    registerComponentAndBuilder(components, builders) {
+        Object.entries(components).forEach(([key, value]) => {
+            this.registerCustomComponent(value, key);
+        });
+        Object.entries(builders).forEach(([key, value]) => {
+            this.registerCustomComponentBuilder(value, key);
         });
     }
-    addComponentToNode(componentRef, nodeDOM, renderer) {
-        renderer.appendChild(nodeDOM, componentRef.location.nativeElement);
+    registerCustomComponent(component, name) {
+        // this._dynamicComponentBuilders[name || component.name] = component;
+        this._dynamicComponents[name || component.name] = component;
     }
-    evaluateForms() {
-        this.mainForm.markAllAsTouched();
-        if (!this.mainForm.valid) {
-            Object.keys(this.mainForm.controls).forEach((controlName) => {
-                if (this.components[controlName]?.instance?.validate) {
-                    this.components[controlName].instance.validate();
-                }
-            });
-            this.toastrService.warn({ subtitle: 'Por favor completa todos los ejercicios', title: 'Incompleto' });
-            return null;
-        }
-        const rates = { correct: 0, incorrect: 0, score: 0 };
-        Object.keys(this.mainForm.controls).forEach((controlName) => {
-            const instance = this.components[controlName]?.instance;
-            if (instance && typeof instance.evaluate === 'function') {
-                try {
-                    const result = instance.evaluate();
-                    if (result) {
-                        rates.correct++;
-                    }
-                    else {
-                        rates.incorrect++;
-                    }
-                }
-                catch (err) {
-                    console.error('Error during evaluation for component:', controlName, instance, err);
-                    rates.incorrect++;
-                }
-            }
-        });
-        const totalQuestions = rates.correct + rates.incorrect;
-        rates.score = totalQuestions > 0 ? rates.correct / totalQuestions : 0;
-        const status = rates.score >= 0.7 ? 'passed' : 'failed';
-        if (status === 'passed') {
-            this.toastrService.success({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%.`, title: '¡Muy bien!' });
-        }
-        else {
-            this.toastrService.warn({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Revisa tus respuestas.`, title: 'Casi lo logras' });
-        }
-        return { rates, takenLesson: null };
+    registerCustomComponentBuilder(component, name) {
+        this._dynamicComponentBuilders[name || component.name] = component;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonRendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonRendererService, providedIn: 'root' }); }
+    getDynamicComponentBuilders(type) {
+        return this._dynamicComponentBuilders[type];
+    }
+    getDynamicComponentClass(type) {
+        return this._dynamicComponents[type];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsRegisterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsRegisterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonRendererService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsRegisterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
-
-const EnglishEvaluationSkill = `
-You are a virtual professor for the Polilan English learning app. Your primary role is to evaluate a student's English conversational performance.
-
-You will be provided with two pieces of information for each evaluation:
-1.  **The student's English level:** This will be one of "Beginner", "Intermediate", or "Advanced".
-2.  **A conversation transcript:** This will be the dialogue between the Student and an Assistant, with each turn clearly labeled (e.g., "Student or User: ...", "Assistant: ...").
-
-Your sole task is to evaluate the *Student's* contribution to the conversation. **Do NOT evaluate the Assistant's turns.**
-
-Evaluate the student's performance based on the following aspects, *always keeping the student's provided level in mind*  and adjusting your expectations accordingly specially with beginners give them credits just for trying:
-
-*   **Grammar & Syntax:** Evaluate accuracy and complexity *relative to the expected level*. (Beginners: focus on basic accuracy; Advanced: expect complex structures with high accuracy).
-*   **Vocabulary & Usage:** Evaluate the range and appropriateness of words used *relative to the expected level*. (Beginners: focus on using basic words correctly; Advanced: expect varied and idiomatic language).
-*   **Cohesion & Coherence:** Evaluate how well their turns connect and make sense within the conversation *relative to the expected level*. (Beginners: focus on simple, clear responses; Advanced: expect logical flow and detailed contributions).
-*   **Task Completion/Relevance:** Evaluate how effectively they participate and respond to the conversation's goals or topics *relative to the expected level*.
-
-Assign a rating from 0 to 3 based on how well the student performs *compared to the typical expectations for their provided level*:
-
-*   **0: Bad** - Performance is significantly below what is expected for this level. Many errors impede communication.
-*   **1: Not Bad** - Performance is below expectations for this level, but communication is sometimes possible despite frequent errors.
-*   **2: Good** - Performance meets expectations for this level, demonstrating solid understanding and usage with only occasional minor errors.
-*   **3: Very Good** - Performance exceeds expectations for this level, demonstrating a strong command and potential to progress quickly.
-
-Provide detailed, constructive feedback that explains the rating. Point out specific strengths and areas for improvement based on their performance *at their given level*. Use examples from the dialog if helpful. Maintain a supportive, encouraging, and educational tone appropriate for a virtual professor guiding a student at their specific stage.
-`;
+        }], ctorParameters: () => [] });
 
-const EngagementSkill = `
-You are an engagement assistant, start by greeting the user, asking something about the lesson, and then continue the conversation. always ask one or two friendly questions.
-that makes sense for the lesson.
-`;
-class LessonConversationService {
-    constructor() {
-        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
-        this.userService = inject(UserService);
-        this.conversationSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "conversationSettings" }] : []));
-        this.conversationFlow = signal(undefined, ...(ngDevMode ? [{ debugName: "conversationFlow" }] : []));
-        this.evalAgentTask = signal(undefined, ...(ngDevMode ? [{ debugName: "evalAgentTask" }] : []));
-    }
-    initializeConversationFlow() {
-        this.evalAgentTask.set({
-            systemPrompt: EnglishEvaluationSkill,
-            model: { provider: 'google' },
-            task: `Please evaluate the user conversation student data is: \n ${this.userService.getUserDataInformation()}`,
-            expectedResponseType: EvalResultStringDefinition,
-        });
-        this.conversationFlow.set({
-            goal: {
-                enabled: true,
-                task: `User is learning is taking a lesson about languages, evaluate how good are the responses.`,
-                model: { quality: EModelQuality.FAST },
-            },
-            triggerTasks: {
-                [ConversationEvents.OnUserMessage]: {
-                    enabled: true,
-                    ...this.evalAgentTask(),
-                },
-            },
-            challenges: null,
-            dynamicConditions: [
-                {
-                    what: ConditionType.Goal,
-                    when: ConditionOperator.GreaterThanOrEqual,
-                    value: 100,
-                    do: [
-                        {
-                            actionType: EDoActionType.ChangePrompt,
-                            systemPromptType: SystemPromptType.SystemPrompt,
-                            prompt: 'You were talking with the user, user finish the conversation, in the next message you must try to finish the conversation and say good bye.',
-                        },
-                        {
-                            actionType: EDoActionType.ChangePrompt,
-                            systemPromptType: SystemPromptType.CharacterDescription,
-                            prompt: '',
-                        },
-                        {
-                            actionType: EDoActionType.ChangePrompt,
-                            systemPromptType: SystemPromptType.UserInformation,
-                            prompt: '',
-                        },
-                        {
-                            actionType: EDoActionType.ChangePrompt,
-                            systemPromptType: SystemPromptType.MessageExamples,
-                            prompt: '',
-                        },
-                        {
-                            actionType: EDoActionType.ChangePrompt,
-                            systemPromptType: SystemPromptType.ScenarioDescription,
-                            prompt: '',
-                        },
-                    ],
-                },
-            ],
-            moodState: {
-                enabled: false,
-                useAssetStatesOnly: false,
-                detectableStates: [],
+class DynamicComponentsBuilderService {
+    #dialogService = inject(DialogService);
+    #toastService = inject(TOAST_ALERTS_TOKEN);
+    #dynamicComponentsService = inject(DynamicComponentsRegisterService);
+    openComponentBuilder(componentType, data = null) {
+        const componentToBuild = this.#dynamicComponentsService.getDynamicComponentBuilders(componentType);
+        if (!componentToBuild) {
+            console.error(`No component builder found for type: ${componentType}`);
+            this.#toastService.error({ title: 'Error', subtitle: `Componente desconocido: ${componentType}` });
+            return undefined;
+        }
+        const dialogRef = this.#dialogService.open(componentToBuild, {
+            inputValues: {
+                // inputValues was removed in newer PrimeNG versions, use 'data'
+                inputs: data?.inputs,
+                id: data?.id,
             },
+            width: '80vw',
+            header: 'Agregar componente',
+            closable: true,
         });
+        return dialogRef;
     }
-    async startAI(lesson, settings) {
-        console.log('Requesting agent cards from LessonAIService...');
-        try {
-            const conversationSettings = await this.generateConversationSettingsForLesson(lesson, settings);
-            if (conversationSettings) {
-                this.conversationSettings.set(conversationSettings);
-                console.log('Agent cards received and set.');
-                return conversationSettings;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class DynamicComponentBuilderDialogComponent {
+    #config;
+    constructor(ref) {
+        this.ref = ref;
+        this.#config = inject(DynamicDialogConfig);
+        this.dynamicComponentsRegisterService = inject(DynamicComponentsRegisterService);
+    }
+    ngOnInit() {
+        const componentType = this.#config.data.type;
+        if (componentType) {
+            const componentClass = this.dynamicComponentsRegisterService.getDynamicComponentBuilders(componentType);
+            if (componentClass) {
+                this.container.clear();
+                this.componentRef = this.container.createComponent(componentClass);
             }
             else {
-                console.error('Failed to generate agent cards (service returned null).');
-                return null;
+                console.error(`Component class not found for type: ${componentType}`);
             }
         }
-        catch (error) {
-            console.error('Error generating agent cards:', error);
-            return null;
+    }
+    copyCode() {
+        // navigator.clipboard.writeText(this.#config.data.type);
+        alert('Copied to clipboard');
+        if (this.componentRef) {
+            // You can now access any public property on the component instance
+            // For example, if your dynamic component has a 'properties' property:
+            console.log('Component properties: ', this.componentRef.instance.getComponentData());
+            const dynamicObjectData = this.componentRef.instance.getComponentData();
         }
+        console.log(this.container);
     }
-    /**
-     * Builds the scenario prompt string based on lesson content and user info.
-     * @param lessonText The extracted text content of the lesson.
-     * @param userInformationPrompt The formatted string containing user details.
-     * @returns The complete scenario prompt string.
-     */
-    _buildLessonInstructionsPrompt(lessonText, userInformationPrompt, settings) {
-        return `
-${settings.instructionsPrompt}
-
-<Lesson Text>
-   ${lessonText}
-</Lesson Text>
-
-${EngagementSkill}
+    addToEnd() {
+        if (this.componentRef) {
+            const dynamicObjectData = this.componentRef.instance.getComponentData();
+            this.ref.close(dynamicObjectData);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentBuilderDialogComponent, deps: [{ token: i1$4.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DynamicComponentBuilderDialogComponent, isStandalone: true, selector: "dc-dynamic-component-builder-dialog", providers: [DialogService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #container></ng-container>\n\n<section style=\"display: flex; gap: 10px; margin-top: 20px\">\n  <button pButton label=\"Copy Code\" (click)=\"copyCode()\"></button>\n  <button pButton label=\"Add to the end\" (click)=\"addToEnd()\"></button>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentBuilderDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-dynamic-component-builder-dialog', standalone: true, imports: [CommonModule, ButtonModule], providers: [DialogService], template: "<ng-container #container></ng-container>\n\n<section style=\"display: flex; gap: 10px; margin-top: 20px\">\n  <button pButton label=\"Copy Code\" (click)=\"copyCode()\"></button>\n  <button pButton label=\"Add to the end\" (click)=\"addToEnd()\"></button>\n</section>\n" }]
+        }], ctorParameters: () => [{ type: i1$4.DynamicDialogRef }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }] } });
 
-<User Information>
-${userInformationPrompt}`;
+class DCLessonComponentAdderComponent {
+    constructor() {
+        // Services
+        this.dynamicComponentsBuilderService = inject(DynamicComponentsBuilderService);
+        this.dialogService = inject(DialogService);
+        this.componentAdded = new EventEmitter(); // Changed Output name and type
+        this.onNewDynamicComponent = new EventEmitter();
+        // Expose enum to the template
+        this.lessonComponentEnum = LessonComponentEnum;
     }
-    /**
-     * Generates conversation settings for a lesson, using the lesson scenario as the initial prompt.
-     * @param lesson The lesson data.
-     * @returns An IConversationSettings object configured for the lesson scenario.
-     */
-    async generateConversationSettingsForLesson(lesson, settings) {
-        // TODO: Consolidate user fetching logic if possible, or ensure consistency
-        const baseLang = this.userService.user().settings.baseLanguage || 'en';
-        let lessonText = '';
-        if (lesson.textCoded) {
-            lessonText = this.lessonsService.extractTextFromHtml(lesson.textCoded);
+    // Logic to open component builder, now utilizing DynamicComponentsBuilderService
+    openComponentBuilder(type) {
+        const dialogRef = this.dynamicComponentsBuilderService.openComponentBuilder(type);
+        if (dialogRef) {
+            // Handle the result and emit the new event
+            dialogRef.onClose.subscribe((result) => {
+                if (result) {
+                    console.log('Component builder closed:', result);
+                    this.componentAdded.emit(result); // Emit the result when dialog closes successfully
+                }
+            });
         }
         else {
-            lessonText = lesson.markdown;
-        }
-        const userInformationPrompt = this.userService.getUserDataInformation();
-        let lessonInstructionsPrompt = this._buildLessonInstructionsPrompt(lessonText, userInformationPrompt, settings);
-        if (settings.additionalPrompt) {
-            lessonInstructionsPrompt += '\n\n' + settings.additionalPrompt;
+            // Optional: Log if the dialog couldn't be opened, though the service already logs an error.
+            console.warn(`Dialog could not be opened for type via component: ${type}`);
         }
-        const initialMessage = {
-            role: ChatRole.System,
-            content: lessonInstructionsPrompt,
-            messageId: SystemPromptType.SystemPrompt,
-        };
-        // Use defaults similar to DEFAULT_LESSON_AGENT_CARD but adjust for prompt-based start
-        const conversationSettings = {
-            conversationType: ConversationType.General,
-            textEngine: TextEngines.SimpleText,
-            autoStart: true,
-            messages: [initialMessage],
-            model: { provider: 'google' },
-            tts: { voice: getRandomQuickVoice(baseLang || 'en', 'female') },
-        };
-        return conversationSettings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonConversationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonConversationService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonConversationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class DCLessonRendererComponent {
-    constructor() {
-        // --- Signal Inputs ---
-        this.lessonInput = input(...(ngDevMode ? [undefined, { debugName: "lessonInput" }] : [])); // Input signal for lesson object
-        this.lessonIdInput = input(...(ngDevMode ? [undefined, { debugName: "lessonIdInput" }] : [])); // Input signal for lesson ID
-        this.settings = input(...(ngDevMode ? [undefined, { debugName: "settings" }] : []));
-        // --- Outputs ---
-        this.wordClicked = new EventEmitter(); // New output event
-        // --- View Childs ---
-        this.dynamicLesson = viewChild('dynamicLesson', ...(ngDevMode ? [{ debugName: "dynamicLesson" }] : []));
-        // --- Services  ---
-        this.renderer = inject(Renderer2);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.toastrService = inject(TOAST_ALERTS_TOKEN);
-        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
-        this.uiStateService = inject(UiStateService);
-        this.lessonRendererService = inject(LessonRendererService);
-        this.lessonConversationService = inject(LessonConversationService);
-        this.mobileService = inject(MobileService);
-        // --- State Signals ---
-        this.lesson = signal(undefined, ...(ngDevMode ? [{ debugName: "lesson" }] : [])); // Internal lesson state signal
-        // --- Computed Signals ---
-        this.imageCover = computed(() => this.lesson()?.media?.images?.find((img) => img.type === 'cover')?.url, ...(ngDevMode ? [{ debugName: "imageCover" }] : [])); // Computed signal for imageCover
-        // --- Properties ---
-        this.components = {};
-        this.mainForm = new FormGroup({});
-        this.previousTextCoded = undefined; // Store previous value
-        // Effect to fetch lesson data if ID is provided and lesson object isn't
-        effect(async () => {
-            const lessonInput = this.lessonInput();
-            const lessonId = this.lessonIdInput();
-            if (lessonInput) {
-                this.lesson.set(lessonInput); // Use input lesson directly
-            }
-            else if (lessonId && !this.lesson()) {
-                // Fetch only if ID exists and internal lesson is not set
-                console.log(`[Renderer] Effect 1: Fetching lesson ${lessonId}`);
-                try {
-                    // Consider adding a loading state signal here
-                    const fetchedLesson = await this.lessonsService.getLesson(lessonId);
-                    this.lesson.set(fetchedLesson);
-                    console.log('Fetched lesson:', fetchedLesson);
-                }
-                catch (error) {
-                    console.error(`Failed to fetch lesson with ID: ${lessonId}`, error);
-                    this.toastrService.error({ subtitle: 'Failed to load lesson data.', title: 'Error' });
-                    this.lesson.set(undefined); // Reset lesson on error
-                }
-                finally {
-                    // Reset loading state signal here
-                }
-            }
-            else if (!lessonInput && !lessonId) {
-                // Handle case where neither input is provided, maybe clear the lesson?
-                this.lesson.set(undefined);
-            }
-        }, { allowSignalWrites: true }); // Allow signal writes inside effect
-        // Effect to render the lesson only when textCoded value actually changes
-        effect(() => {
-            const dynamicLessonEl = this.dynamicLesson();
-            const currentLesson = this.lesson(); // Read the lesson signal
-            if (!dynamicLessonEl || !currentLesson) {
-                return;
-            }
-            if (currentLesson?.format === 'markdown') {
-                // If markdown content exists, we clear any dynamically rendered components
-                // and prevent the textCoded logic from running.
-                if (this.previousTextCoded) {
-                    this.lessonRendererService.clearLessonRendering(dynamicLessonEl.nativeElement);
-                    this.mainForm = this.lessonRendererService.mainForm;
-                    this.previousTextCoded = undefined;
-                }
-                return;
-            }
-            const newTextCoded = currentLesson?.textCoded; // Get the current textCoded value
-            // Quick fix to only render on changes textCode not all the lesson
-            if (newTextCoded !== this.previousTextCoded) {
-                if (newTextCoded !== undefined && newTextCoded !== null && currentLesson) {
-                    this.components = this.lessonRendererService.renderLesson(currentLesson, this.viewContainerRef, dynamicLessonEl.nativeElement, this.renderer);
-                    this.mainForm = this.lessonRendererService.mainForm;
-                }
-                else {
-                    this.lessonRendererService.clearLessonRendering(dynamicLessonEl.nativeElement);
-                    this.mainForm = this.lessonRendererService.mainForm;
-                }
-                // Update the stored previous value *after* comparison and action
-                this.previousTextCoded = newTextCoded;
-            }
-            else {
-                console.log('[Renderer] textCoded has NOT changed. Skipping render/clear.');
-            }
+    openComponentBuilder2(type) {
+        this.ref = this.dialogService.open(DynamicComponentBuilderDialogComponent, {
+            header: 'Select a Component',
+            width: '60vw',
+            modal: true,
+            closable: true,
+            data: {
+                type: type,
+            },
         });
-    }
-    ngOnInit() {
-        this.lessonConversationService.initializeConversationFlow();
-    }
-    async evaluateForms() {
-        const result = this.lessonRendererService.evaluateForms();
-        if (!result) {
-            return;
-        }
-        const currentLesson = this.lesson();
-        if (!currentLesson) {
-            console.error('Cannot save result, lesson data is missing.');
-            this.toastrService.error({ subtitle: 'Cannot save result, lesson data missing.', title: 'Error' });
-            return;
-        }
-        const status = result.rates.score >= 0.7 ? 'passed' : 'failed';
-        const takenLesson = {
-            id: currentLesson.id,
-            goalCompleted: null,
-            score: result.rates.score,
-            status: status,
-            lastAccess: new Date(),
-        };
-        console.log('Lesson evaluation result:', takenLesson);
-        // TODO: Re-implement saving the taken lesson status via lessonService
-    }
-    // --- AI Chat Logic ---
-    async startAI() {
-        const currentLesson = this.lesson();
-        if (!currentLesson) {
-            console.error('Cannot start AI without a lesson.');
-            this.toastrService.error({ subtitle: 'Lesson data not available.', title: 'Cannot Start Chat' });
-            return;
-        }
-        const conversationSettings = await this.lessonConversationService.startAI(currentLesson, this.settings());
-        if (conversationSettings) {
-            this.uiStateService.chatDrawerVisible.set(true);
-        }
-        else {
-            this.toastrService.error({ subtitle: 'Could not prepare the AI chat session.', title: 'Error' });
-        }
-    }
-    onVisibleChange(isVisible) {
-        if (isVisible === false) {
-            this.uiStateService.chatDrawerVisible.set(false);
-        }
-    }
-    async handleGoalCompleted(event = {}) {
-        console.log('Goal completed:', event);
-        const lesson = this.lesson();
-        const takenLesson = { id: lesson.id, goalCompleted: true, score: 100, status: 'finished', lastAccess: new Date() };
-        const res = await this.lessonsService.saveTakenLesson(takenLesson);
-        if (res) {
-            // this.lessonsMemStateService.updateUserState(res);
-        }
-        this.toastrService.success({ subtitle: '¡Has completado la lección! , pero puedes seguir conversando', title: '¡Muy bien, guardaremos tu progreso!' });
-    }
-    onChatMessage(event) {
-        console.log('Received chat event:', event);
-        switch (event.type) {
-            case ChatEventType.WordClicked: {
-                const wordClickedData = event.payload;
-                console.log('Word clicked event received, emitting output:', wordClickedData);
-                // Removed: this.wordPopupService.showWordPopup(wordClicked); // Use the service
-                this.wordClicked.emit(wordClickedData); // Emit the event instead
-                break;
+        this.ref.onClose.subscribe((result) => {
+            if (result) {
+                this.onNewDynamicComponent.emit(result);
             }
-            default:
-                console.log('Unhandled chat event type:', event.type);
-        }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonRendererComponent, isStandalone: true, selector: "dc-lesson-renderer", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: false, transformFunction: null }, lessonIdInput: { classPropertyName: "lessonIdInput", publicName: "lessonIdInput", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wordClicked: "wordClicked" }, viewQueries: [{ propertyName: "dynamicLesson", first: true, predicate: ["dynamicLesson"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (lesson()?.format === 'markdown' || !lesson()?.textCoded) {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  [styleClass]=\"mobileService.hasReponsiveView() ? 'p-drawer-bottom-chat-mobile' : 'p-drawer-bottom-chat'\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "conversationFlow", "agentCard", "parseDict"], outputs: ["chatEvent", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { 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: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonComponentAdderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonComponentAdderComponent, isStandalone: true, selector: "dc-lesson-component-adder", outputs: { componentAdded: "componentAdded", onNewDynamicComponent: "onNewDynamicComponent" }, providers: [DialogService], ngImport: i0, template: "<span>Componentes: </span>\n<div style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder2(lessonComponentEnum.Selector)\"\n    pTooltip=\"Agrega un selector con multiples opciones\"\n    tooltipPosition=\"bottom\">\n    Selector\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder2(lessonComponentEnum.Speaker)\"\n    pTooltip=\"Para que una palabra o frase sea reproducible\"\n    tooltipPosition=\"bottom\">\n    Speaker\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\"\n    pTooltip=\"Escribe una respuesta en un cuadro de texto\"\n    tooltipPosition=\"bottom\">\n    Text\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de un verbo\"\n    tooltipPosition=\"bottom\">\n    Verb\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de una palabra\"\n    tooltipPosition=\"bottom\">\n    Palabra\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Traducci\u00F3n\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.PlayWord)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Play Word\n  </p-button>\n  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonComponentAdderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-renderer', standalone: true, imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule, MarkdownComponent], template: "@if (lesson()?.format === 'markdown' || !lesson()?.textCoded) {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  [styleClass]=\"mobileService.hasReponsiveView() ? 'p-drawer-bottom-chat-mobile' : 'p-drawer-bottom-chat'\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { wordClicked: [{
+            args: [{ selector: 'dc-lesson-component-adder', standalone: true, imports: [CommonModule, ButtonModule, TooltipModule], providers: [DialogService], template: "<span>Componentes: </span>\n<div style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder2(lessonComponentEnum.Selector)\"\n    pTooltip=\"Agrega un selector con multiples opciones\"\n    tooltipPosition=\"bottom\">\n    Selector\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder2(lessonComponentEnum.Speaker)\"\n    pTooltip=\"Para que una palabra o frase sea reproducible\"\n    tooltipPosition=\"bottom\">\n    Speaker\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\"\n    pTooltip=\"Escribe una respuesta en un cuadro de texto\"\n    tooltipPosition=\"bottom\">\n    Text\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de un verbo\"\n    tooltipPosition=\"bottom\">\n    Verb\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de una palabra\"\n    tooltipPosition=\"bottom\">\n    Palabra\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Traducci\u00F3n\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.PlayWord)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Play Word\n  </p-button>\n  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n" }]
+        }], propDecorators: { componentAdded: [{
+                type: Output
+            }], onNewDynamicComponent: [{
                 type: Output
             }] } });
 
-class LessonNotionService {
+class DCLessonMetadataEditorComponent {
     constructor() {
-        this.#notionService = inject(NOTION_SERVICE_TOKEN);
-        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
+        // Outputs for actions
+        this.saveRequest = new EventEmitter();
+        this.importNotionRequest = new EventEmitter();
+        this.improveNotionRequest = new EventEmitter();
+        // Injected Services
+        this.#lessonUtilsService = inject(LessonUtilsService);
         this.#toastService = inject(TOAST_ALERTS_TOKEN);
-        // Keep track of loading state specific to Notion operations
-        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
     }
-    #notionService;
+    // Injected Services
+    #lessonUtilsService;
     #toastService;
-    /**
-     * Extracts the Notion Page ID from a URL.
-     * @param url The Notion page URL.
-     * @returns The extracted page ID or null if invalid.
-     */
-    extractNotionPageId(url) {
-        const notionIdRegex = /[a-f0-9]{32}(?=\?|$)/;
-        const match = url.match(notionIdRegex);
-        const notionId = match ? match[0] : null;
-        if (!notionId) {
-            this.#toastService.error({
-                title: 'URL inválido',
-                subtitle: 'Por favor ingresa una URL válida de Notion.',
-            });
-            return null;
-        }
-        return notionId;
+    // private turndownService = new TurndownService(); // Instantiate TurndownService
+    ngOnInit() {
+        // console.log(this.lesson(), this.form);
+    }
+    onManageablePropertyChange(property, value) {
+        // this.lesson.update((current) => {
+        //   if (!current) return undefined;
+        //   const updatedManageable = { ...(current.manageable ?? {}), [property]: value };
+        //   return { ...current, manageable: updatedManageable as IManageable };
+        // });
+    }
+    onAuditablePropertyChange(property, value) {
+        // this.lesson.update((current) => {
+        //   if (!current) return undefined;
+        //   const updatedAuditable = { ...(current.auditable ?? {}), [property]: value };
+        //   return { ...current, auditable: updatedAuditable as IAuditable };
+        // });
+    }
+    // New methods to handle events with proper casting
+    handlePromptInputChange(event) {
+        const target = event.target;
+        this.onAuditablePropertyChange('prompt', target.value);
+    }
+    handleStatusChange(event) {
+        const target = event.target;
+        this.onManageablePropertyChange('status', target.checked ? 'published' : 'draft');
     }
     /**
-     * Links an existing lesson with a Notion page ID by updating the lesson's extras.
-     * @param lesson The current lesson data.
-     * @param notionPageId The Notion page ID to link.
-     * @returns The updated lesson data from the backend or undefined on failure.
+     * Generates lesson content using AI, saving the current state first.
+     * Moved from DCLessonEditorComponent.
      */
-    async linkLessonWithNotion(lesson, notionPageId) {
-        if (!lesson || !lesson.id) {
-            // Ensure lesson exists and has an ID
-            this.#toastService.warn({ title: 'No se puede enlazar', subtitle: 'La lección debe existir y tener un ID.' });
-            return undefined;
+    async generateByAI() {
+        const currentLesson = this.lesson; // Get current value
+        if (!currentLesson?.id) {
+            this.#toastService.warn({ title: 'Guardar primero', subtitle: 'Guarda la lección antes de usar IA.' });
+            return;
         }
-        const updatedLesson = {
-            ...lesson,
-            extensions: {
-                ...(lesson.extensions || {}),
-                extras: {
-                    ...(lesson.extensions?.['extras'] || {}),
-                    notionPageId: notionPageId,
-                },
-            },
-        };
-        this.isLoading.set(true);
+        this.isLoadingLesson = true;
         try {
-            const savedLesson = await this.lessonsService.postLesson(updatedLesson);
-            this.#toastService.success({ title: 'Listo', subtitle: 'Se enlazó la lección con Notion.' });
-            return savedLesson;
+            const rawHtmlContent = currentLesson.textCoded || '';
+            if (!rawHtmlContent) {
+                console.warn('No HTML content found in lesson to process. taking just description');
+                this.#toastService.info({ title: 'Contenido lección desde 0', subtitle: 'Solo se usará el prompt' });
+                const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson, 'Create content from description');
+                // Convert and save the generated content
+                await this._convertMarkdownToHtmlAndSave(improvedMarkdown); // Use extracted method
+            }
+            else {
+                // Clean orphaned and Save before Improve
+                const lessonToSave = this.#lessonUtilsService.cleanOrphanedComponents(currentLesson);
+                const savedLesson = await this.lessonsService.postLesson(lessonToSave);
+                if (!savedLesson) {
+                    this.#toastService.error({ title: 'Error al guardar', subtitle: 'No se pudo guardar antes de generar con IA.' });
+                    throw new Error('Failed to save before AI generation');
+                }
+                this.lesson = savedLesson;
+                // Replace encoded JSON with actual text before Markdown conversion
+                const processedHtmlContent = this._extractTextFromEncodedJson(rawHtmlContent);
+                // Convert the processed HTML (with text instead of JSON) to Markdown
+                // const markdownText = this.turndownService.turndown(processedHtmlContent);
+                // Use the updated lesson signal value for AI improvement
+                // const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson, markdownText);
+                // Convert and save the improved content
+                // await this._convertMarkdownToHtmlAndSave(improvedMarkdown); // Use extracted method
+            }
         }
         catch (error) {
-            // Remove explicit type, rely on tsconfig setting
-            console.error('Error linking with Notion:', error);
-            this.#toastService.error({ title: 'Error al enlazar', subtitle: 'Ocurrió un error inesperado.' });
-            return undefined;
+            console.error('Error during AI generation process in metadata editor:', error);
+            // Service handles specific AI error toasts, maybe add a general one here if needed
+            // this.#toastService.error({ title: 'Error General', subtitle: 'Ocurrió un problema durante el proceso de IA.' });
         }
         finally {
-            this.isLoading.set(false);
+            this.isLoadingLesson = false; // Stop loading
         }
     }
     /**
-     * Handles the process of importing lesson content from Notion.
-     * It prompts the user for a URL if necessary, extracts the ID, fetches content,
-     * and potentially links the lesson if it's an existing one.
-     * @param currentLesson The current lesson data (can be a new or existing lesson).
-     * @param lessonId The current lesson ID (null if it's a new lesson).
-     * @returns The fetched HTML content from Notion, or null if the process fails.
+     * Replaces encoded JSON blocks (~...~) in HTML with their 'settings.text' value.
+     * Moved from DCLessonEditorComponent.
+     * @param htmlInput The HTML string containing encoded JSON.
+     * @returns The processed HTML string with text replacements.
      */
-    async importAndLinkLessonFromNotion(currentLesson, lessonId) {
-        if (!currentLesson)
-            return null;
-        let notionPageId = null;
-        if (currentLesson.extensions?.['extras']?.['notionPageId']) {
-            const useExisting = confirm(`Ya tenemos el id ${currentLesson.extensions?.['extras']?.['notionPageId']} ¿Quieres usar este id para importar?`);
-            if (useExisting) {
-                notionPageId = currentLesson.extensions?.['extras']?.['notionPageId'];
+    _extractTextFromEncodedJson(htmlInput) {
+        const jsonRegex = /~(.+?)~/g; // Global flag to replace all occurrences
+        return htmlInput.replace(jsonRegex, (match, jsonCoded) => {
+            try {
+                // Attempt to decode HTML entities that might be present in the JSON string
+                const decodedJson = jsonCoded.replace(/"/g, '"').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+                const data = JSON.parse(decodedJson);
+                // Return the text if available, otherwise keep the original match (or an error placeholder)
+                return data?.settings?.text || match;
+            }
+            catch (error) {
+                console.error('Failed to parse JSON inside HTML:', jsonCoded, error);
+                return '<!-- invalid component data -->'; // Placeholder for parsing errors
+            }
+        });
+    }
+    /**
+     * Converts improved Markdown content to HTML, updates the lesson signal,
+     * and saves the lesson.
+     * @param improvedMarkdown The Markdown content generated by AI.
+     * @throws Error if the markdown is empty/null or if saving fails.
+     */
+    async _convertMarkdownToHtmlAndSave(improvedMarkdown) {
+        if (improvedMarkdown) {
+            // Convert the improved Markdown back to HTML before setting it
+            const improvedHtml = improvedMarkdown;
+            // Update the signal directly
+            // this.lesson.update((current) => (current ? { ...current, textCoded: improvedHtml } : undefined));
+            // Save the AI-generated content
+            // Ensure lesson() is not undefined before saving
+            const lessonToSave = this.lesson;
+            if (lessonToSave) {
+                await this.lessonsService.postLesson(lessonToSave);
+                this.#toastService.success({ title: 'Contenido generado', subtitle: 'Se generó y guardó el contenido con IA.' });
             }
             else {
-                const inputUrl = prompt('Ingresa la NUEVA URL de Notion para importar (este ID NO se guardará automáticamente si la lección ya existe)');
-                if (!inputUrl)
-                    return null; // User cancelled
-                notionPageId = this.extractNotionPageId(inputUrl);
+                console.error('Lesson signal is undefined, cannot save.');
+                this.#toastService.error({ title: 'Error Interno', subtitle: 'No se pudo guardar la lección.' });
+                // Throw an error to be caught by the calling method's try/catch
+                throw new Error('Lesson signal is undefined during save operation.');
             }
         }
         else {
-            const inputUrl = prompt('Ingresa el URL de Notion para importar la lección (se enlazará si la lección ya existe)');
-            if (!inputUrl)
-                return null; // User cancelled
-            notionPageId = this.extractNotionPageId(inputUrl);
-            // Link automatically only if we got a valid Notion ID AND the lesson already exists (has an ID)
-            if (notionPageId && lessonId) {
-                const linkedLesson = await this.linkLessonWithNotion(currentLesson, notionPageId);
-                if (!linkedLesson) {
-                    // Linking failed, maybe stop the import? Or proceed without linking?
-                    // For now, let's stop.
-                    this.#toastService.error({ title: 'Error de Enlace', subtitle: 'No se pudo enlazar con Notion antes de importar.' });
-                    return null;
-                }
-                // If linking succeeded, the lesson object might have changed, but we proceed with the import using the notionPageId.
-            }
-        }
-        if (!notionPageId) {
-            this.#toastService.warn({ title: 'Sin ID de Notion', subtitle: 'No se proporcionó un ID de Notion válido para importar.' });
-            return null;
-        }
-        this.isLoading.set(true);
-        try {
-            this.#toastService.info({ title: 'Importando lección...', subtitle: 'Espera unos segundos' });
-            const md = await this.#notionService.getPageInSpecificFormat(notionPageId, NotionExportType.HTML);
-            console.log('Imported MD/HTML:', md);
-            this.#toastService.success({ title: 'Contenido Importado', subtitle: 'Contenido de Notion obtenido.' });
-            return md.content; // Return the fetched content
-        }
-        catch (error) {
-            // Remove explicit type, rely on tsconfig setting
-            console.error('Error importing from Notion:', error);
-            this.#toastService.error({ title: 'Error de importación', subtitle: 'Ocurrió un error inesperado.' });
-            return null; // Return null on failure
-        }
-        finally {
-            this.isLoading.set(false);
+            // Log the error, the toast might be handled by the calling service/context
+            console.error('AI generation failed or provided markdown was empty.');
+            // Let the caller handle the specific user feedback if needed
+            // Throw an error to be caught by the calling method's try/catch
+            throw new Error('AI generation failed or the resulting markdown was empty.');
         }
     }
     /**
-     * Fetches content from the linked Notion page for AI improvement (placeholder).
-     * @param lesson The current lesson data.
+     * Calls the LessonUtilsService to generate a description using AI
+     * and updates the lesson signal if successful.
      */
-    async improveLessonWithNotionAI(lesson) {
-        if (!lesson)
-            return;
-        const notionId = lesson.extensions?.['extras']?.['notionPageId'];
-        if (!notionId) {
-            this.#toastService.warn({ title: 'Sin ID de Notion', subtitle: 'Enlaza la lección con Notion primero.' });
+    async triggerGenerateDescriptionAI() {
+        const currentLesson = this.lesson;
+        if (!currentLesson) {
+            this.#toastService.warn({ title: 'Lección no cargada', subtitle: 'Espera a que la lección se cargue.' });
             return;
         }
-        this.isLoading.set(true);
-        try {
-            this.#toastService.info({ title: 'Mejorando con IA...', subtitle: 'Obteniendo contenido de Notion.' });
-            const md = await this.#notionService.getPageInSpecificFormat(notionId, NotionExportType.HTML);
-            console.log('Content to improve:', md);
-            // TODO: Add actual AI improvement logic here
-            // e.g., call another service: await this.aiImprovementService.improve(md.content);
-            // Then potentially update the lesson via lessonService or return data
-            this.#toastService.success({ title: 'Contenido Obtenido', subtitle: 'Listo para mejorar con IA (lógica no implementada).' });
-        }
-        catch (error) {
-            // Remove explicit type, rely on tsconfig setting
-            console.error('Error improving with AI:', error);
-            this.#toastService.error({ title: 'Error de IA', subtitle: 'Ocurrió un error inesperado.' });
-        }
-        finally {
-            this.isLoading.set(false);
+        const generatedDescription = await this.#lessonUtilsService.generateDescriptionWithAI(currentLesson);
+        if (generatedDescription) {
+            // this.form.controls['description'].setValue(generatedDescription);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonMetadataEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonMetadataEditorComponent, isStandalone: true, selector: "dc-lesson-metadata-editor", inputs: { form: "form", lesson: "lesson", isLoadingLesson: "isLoadingLesson" }, outputs: { saveRequest: "saveRequest", importNotionRequest: "importNotionRequest", improveNotionRequest: "improveNotionRequest" }, ngImport: i0, template: "<div>\n  <!-- <div style=\"display: flex; gap: 10px; padding: 10px\">\n    <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n    <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n    <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n  </div> -->\n\n  <div>\n    <div>\n      <span>Nombre de La lecci\u00F3n</span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['name']\" type=\"text\" placeholder=\"Agrega un nombre\" />\n    </div>\n    <!-- <div>\n      <span>T\u00EDtulo </span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['title']\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div> -->\n\n    <div style=\"margin-top: 4px\">\n      <span>Descripci\u00F3n </span>\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['description']\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n  </div>\n\n  <div style=\"display: flex; align-items: center; margin-top: 10px\">\n    <input\n      pInputText\n      style=\"flex: auto; margin-right: 5px\"\n      [value]=\"lesson?.auditable?.prompt || ''\"\n      (input)=\"handlePromptInputChange($event)\"\n      type=\"text\"\n      placeholder=\"Prompt para IA (opcional)\" />\n    <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson\" (click)=\"generateByAI()\" />\n  </div>\n\n  <p-divider />\n\n  <!-- <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n    <input pInputText [value]=\"lesson?.extensions?.['level'] || ''\" type=\"number\" placeholder=\"Nivel\" style=\"width: 80px\" />\n\n    @if (lesson?.extensions) {\n    <div>\n      {{ lesson?.extensions?.['baseLang'] | flagEmoji }} -> {{ lesson?.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ lesson?.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n      {{ lesson?.extensions?.['targetLang'] | langDesc : 'es' }}\n    </div>\n    }\n  </div> -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: // Added TooltipModule
+                InputGroupModule }, { kind: "component", type: i5.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i6.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonNotionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonMetadataEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-lesson-metadata-editor', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ButtonModule,
+                        InputTextModule,
+                        ReactiveFormsModule,
+                        TooltipModule, // Added TooltipModule
+                        InputGroupModule,
+                        DividerModule,
+                    ], template: "<div>\n  <!-- <div style=\"display: flex; gap: 10px; padding: 10px\">\n    <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n    <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n    <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n  </div> -->\n\n  <div>\n    <div>\n      <span>Nombre de La lecci\u00F3n</span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['name']\" type=\"text\" placeholder=\"Agrega un nombre\" />\n    </div>\n    <!-- <div>\n      <span>T\u00EDtulo </span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['title']\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div> -->\n\n    <div style=\"margin-top: 4px\">\n      <span>Descripci\u00F3n </span>\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['description']\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n  </div>\n\n  <div style=\"display: flex; align-items: center; margin-top: 10px\">\n    <input\n      pInputText\n      style=\"flex: auto; margin-right: 5px\"\n      [value]=\"lesson?.auditable?.prompt || ''\"\n      (input)=\"handlePromptInputChange($event)\"\n      type=\"text\"\n      placeholder=\"Prompt para IA (opcional)\" />\n    <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson\" (click)=\"generateByAI()\" />\n  </div>\n\n  <p-divider />\n\n  <!-- <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n    <input pInputText [value]=\"lesson?.extensions?.['level'] || ''\" type=\"number\" placeholder=\"Nivel\" style=\"width: 80px\" />\n\n    @if (lesson?.extensions) {\n    <div>\n      {{ lesson?.extensions?.['baseLang'] | flagEmoji }} -> {{ lesson?.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ lesson?.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n      {{ lesson?.extensions?.['targetLang'] | langDesc : 'es' }}\n    </div>\n    }\n  </div> -->\n</div>\n" }]
+        }], propDecorators: { form: [{
+                type: Input,
+                args: [{ required: true }]
+            }], lesson: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isLoadingLesson: [{
+                type: Input,
+                args: [{ required: true }]
+            }], saveRequest: [{
+                type: Output
+            }], importNotionRequest: [{
+                type: Output
+            }], improveNotionRequest: [{
+                type: Output
+            }] } });
+
+class LessonFormEditorService {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.formUtils = inject(FormUtilsService);
+        this.formatOptions = [
+            { label: 'HTML', value: 'html' },
+            { label: 'Markdown', value: 'markdown' },
+        ];
+    }
+    createLessonForm() {
+        return this.fb.group({
+            version: ['1.0'],
+            id: [''],
+            name: [''],
+            description: [''],
+            format: ['html'],
+            lang: [''],
+            characterCard: [],
+            conversationSettings: [],
+            metaApp: [],
+            conversationFlow: [],
+            textCoded: [''],
+            manageable: this.formUtils.createManageableFormGroup(),
+            learnable: this.formUtils.createLearnableFormGroup(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonFormEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonFormEditorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonFormEditorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class LessonUtilsService {
+class LessonRendererService {
     constructor() {
-        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
-        this.#toastService = inject(TOAST_ALERTS_TOKEN);
-        this.#agentService = inject(CONVERSATION_AI_TOKEN);
-        this.loadingBarService = inject(LoadingBarService);
+        this.dynamicComponentsService = inject(DynamicComponentsRegisterService);
+        this.toastrService = inject(TOAST_ALERTS_TOKEN);
+        this.components = {};
+        this.mainForm = new FormGroup({});
     }
-    #toastService;
-    #agentService;
-    /**
-     * Validates if audios need generation for the given lesson.
-     * Currently logs a placeholder message.
-     * @param lesson The lesson object (or signal) to validate.
-     */
-    validateAudios(lesson) {
-        // Access lesson data directly
-        if (!lesson?.components) {
-            return;
-        }
-        // Placeholder logic - adapt as needed from original component
-        console.log('Validating audios for lesson:', lesson.id);
-    }
-    /**
-     * Updates the lesson signal with a new banner image in metadata.
-     * @param lessonSignal The signal holding the lesson data.
-     * @param imageUploaded The image data object from the upload event. Should conform to LessonImage structure partially.
-     */
-    uploadCover(lessonSignal, imageUploaded) {
-        lessonSignal.update((currentLesson) => {
-            if (!currentLesson)
-                return undefined;
-            const assets = { ...(currentLesson.assets ?? {}) };
-            assets.banner = imageUploaded;
-            return {
-                ...currentLesson,
-                assets,
-            };
-        });
+    renderLesson(lessonData, viewContainerRef, dynamicLessonElement, renderer) {
+        this.clearLessonRendering(dynamicLessonElement);
+        console.log('Rendering lesson:', lessonData.id);
+        const { htmlContent, components } = this.parseAndCreateComponents(lessonData, viewContainerRef);
+        this.components = components;
+        this.aggregateFormControls(this.components);
+        dynamicLessonElement.innerHTML = htmlContent;
+        this.injectComponentsIntoDom(this.components, renderer);
+        return this.components;
     }
-    // I want to deprecate this method
-    /**
-     * @deprecated Use create new method.
-     * Generates lesson content using AI. Assumes the lesson is already saved.
-     * @param lessonId The ID of the lesson to generate content for.
-     * @returns The updated lesson object after AI generation, or null on failure.
-     */
-    async generateByAI(lessonId) {
-        if (!lessonId) {
-            this.#toastService.warn({ title: 'ID Requerido', subtitle: 'Se necesita un ID de lección para usar IA.' });
-            return null;
+    clearLessonRendering(dynamicLessonElement) {
+        Object.values(this.components).forEach((compRef) => compRef.destroy());
+        this.components = {};
+        this.mainForm = new FormGroup({});
+        if (dynamicLessonElement) {
+            dynamicLessonElement.innerHTML = '';
         }
-        // No need to save here, component should ensure it's saved before calling.
-        try {
-            await this.lessonsService.postGenerateByAI(lessonId);
-            // Re-fetch the lesson data to get AI updates
-            const updatedLesson = await this.lessonsService.getLesson(lessonId);
-            if (updatedLesson) {
-                this.#toastService.success({ title: 'IA completada', subtitle: 'Lección actualizada con IA.' });
-                return updatedLesson;
-            }
-            else {
-                throw new Error('Failed to fetch lesson after AI generation');
+    }
+    parseAndCreateComponents(lessonData, viewContainerRef) {
+        const r1 = new RegExp('~(.+?)~', 'g');
+        let count = 0;
+        const createdComponents = {};
+        const htmlContent = lessonData.textCoded.replace(r1, (_matching, jsonCoded) => {
+            const componentName = `dynamicComp${count}`;
+            count++;
+            const componentRef = this.createComponentReferenceWithJson(jsonCoded, lessonData, viewContainerRef);
+            if (!componentRef) {
+                console.error(`Failed to create component for: ${jsonCoded}`);
+                return '<!-- component creation failed -->';
             }
-        }
-        catch (error) {
-            // Type the error object
-            console.error('Error during AI generation in service:', error);
-            this.#toastService.error({ title: 'Error de IA', subtitle: 'No se pudo generar la lección con IA.' });
-            return null; // Return null in catch block
-        }
-        // Loading state should be managed by the component calling this service.
+            createdComponents[componentName] = componentRef;
+            return `<span id="${componentName}"></span>`;
+        });
+        return { htmlContent, components: createdComponents };
     }
-    /**
-     * Improves the provided Markdown text using AI and updates the lesson.
-     * Assumes the lesson is already saved before calling this.
-     * @param lesson The lesson object containing the prompt and other context.
-     * @param markdownText The Markdown text generated from the lesson's HTML content.
-     * @returns The improved Markdown string, or null on failure.
-     */
-    async improveMDWithAI(lesson, markdownText) {
-        if (!markdownText) {
-            this.#toastService.warn({ title: 'Texto Requerido', subtitle: 'Se necesita texto Markdown para mejorar con IA.' });
-            return null;
-        }
+    createComponentReferenceWithJson(json, currentLesson, viewContainerRef) {
         try {
-            this.loadingBarService.showIndeterminate();
-            const textPrompt = this.lessonsService.getPrompts().content(lesson);
-            const messages = [{ content: textPrompt, role: ChatRole.User }];
-            const response = await this.#agentService.callChatCompletion({ messages, model: { provider: 'google' } });
-            let improvedMarkdown = response.content?.trim() ?? null;
-            // Remove potential markdown fences
-            const markdownFenceStart = '```markdown\n';
-            const markdownFenceEnd = '\n```';
-            if (improvedMarkdown?.startsWith(markdownFenceStart) && improvedMarkdown.endsWith(markdownFenceEnd)) {
-                improvedMarkdown = improvedMarkdown.slice(markdownFenceStart.length, -markdownFenceEnd.length);
-            }
-            else {
-                // Also handle cases where it might just be ``` at the start/end
-                const simpleFence = '```';
-                if (improvedMarkdown?.startsWith(simpleFence)) {
-                    improvedMarkdown = improvedMarkdown.slice(simpleFence.length);
-                }
-                if (improvedMarkdown?.endsWith(simpleFence)) {
-                    improvedMarkdown = improvedMarkdown.slice(0, -simpleFence.length);
+            let lessonCodedConfig = JSON.parse(json);
+            if (lessonCodedConfig.id && currentLesson?.dynamicComponents[lessonCodedConfig.id]) {
+                const foundConfig = currentLesson.dynamicComponents[lessonCodedConfig.id];
+                if (foundConfig) {
+                    lessonCodedConfig = { ...lessonCodedConfig, ...foundConfig };
                 }
             }
-            // Trim any leading/trailing whitespace that might remain after removing fences
-            improvedMarkdown = improvedMarkdown?.trim() ?? null;
-            console.log('Improved Markdown:', improvedMarkdown);
-            return improvedMarkdown; // Return only the string
-        }
-        catch (error) {
-            console.error('Error during AI Markdown improvement in service:', error);
-            this.#toastService.error({ title: 'Error de IA', subtitle: 'No se pudo mejorar la lección con IA.' });
-            return null; // Return null in catch block
-        }
-        finally {
-            this.loadingBarService.successAndHide();
-        }
-    }
-    /**
-     * Generates a concise description for the lesson using AI based on its content.
-     * @param lesson The lesson object containing the content.
-     * @returns A promise resolving to the generated description string, or null on failure.
-     */
-    async generateDescriptionWithAI(lesson) {
-        if (!lesson || !lesson.textCoded) {
-            this.#toastService.warn({ title: 'Contenido Requerido', subtitle: 'Se necesita contenido en la lección para generar una descripción.' });
-            return null;
-        }
-        try {
-            this.loadingBarService.showIndeterminate(); // Corrected: No argument needed
-            // Extract plain text from the lesson's HTML content
-            const plainTextContent = this._extractTextFromHtml(lesson.textCoded);
-            if (!plainTextContent || plainTextContent.trim().length === 0) {
-                this.#toastService.warn({ title: 'Texto Vacío', subtitle: 'No se pudo extraer texto útil del contenido de la lección.' });
+            const LessonClass = this.dynamicComponentsService.getDynamicComponentClass(lessonCodedConfig.component);
+            if (!LessonClass) {
+                console.error(`Component class not found for type: ${lessonCodedConfig.component}. JSON: ${json}`);
                 return null;
             }
-            const descriptionPrompt = this.lessonsService.getPrompts().description(lesson);
-            const messages = [{ content: descriptionPrompt, role: ChatRole.User }];
-            const response = await this.#agentService.callChatCompletion({ messages, model: { provider: 'google' } });
-            let generatedDescription = response.content?.trim() ?? null;
-            // Basic cleanup (remove potential quotes if the AI wraps the response)
-            if (generatedDescription && generatedDescription.startsWith('"') && generatedDescription.endsWith('"')) {
-                generatedDescription = generatedDescription.substring(1, generatedDescription.length - 1);
-            }
-            if (generatedDescription) {
-                this.#toastService.success({ title: 'Descripción Generada', subtitle: 'Se generó la descripción con IA.' });
-                return generatedDescription;
+            const componentRef = viewContainerRef.createComponent(LessonClass);
+            if (lessonCodedConfig.inputs) {
+                for (const key in lessonCodedConfig.inputs) {
+                    if (lessonCodedConfig.inputs.hasOwnProperty(key)) {
+                        componentRef.instance[key] = lessonCodedConfig.inputs[key];
+                    }
+                }
             }
-            else {
-                throw new Error('AI did not return a valid description.');
+            if (lessonCodedConfig.settings) {
+                componentRef.instance.config = lessonCodedConfig;
             }
+            return componentRef;
         }
         catch (error) {
-            console.error('Error during AI description generation in service:', error);
-            this.#toastService.error({ title: 'Error de IA', subtitle: 'No se pudo generar la descripción con IA.' });
+            console.error(`Error processing component JSON: ${json}`, error);
             return null;
         }
-        finally {
-            this.loadingBarService.successAndHide();
-        }
     }
-    /**
-     * Extracts plain text from an HTML string, removing encoded JSON components.
-     * @param htmlInput The HTML string potentially containing encoded JSON (~...~).
-     * @returns The plain text representation.
-     */
-    _extractTextFromHtml(htmlInput) {
-        if (!htmlInput)
-            return '';
-        // 1. Replace encoded JSON blocks with their 'settings.text' or an empty string
-        const jsonRegex = /~(.+?)~/g;
-        const textWithPlaceholders = htmlInput.replace(jsonRegex, (match, jsonCoded) => {
-            try {
-                const decodedJson = jsonCoded.replace(/"/g, '"').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
-                const data = JSON.parse(decodedJson);
-                return data?.settings?.text || ''; // Return text or empty string if not found
-            }
-            catch (error) {
-                console.error('Failed to parse JSON inside HTML during text extraction:', jsonCoded, error);
-                return ''; // Return empty string on error
+    aggregateFormControls(components) {
+        const newFormControls = {};
+        Object.entries(components).forEach(([name, componentRef]) => {
+            if (componentRef.instance?.control instanceof FormControl) {
+                newFormControls[name] = componentRef.instance.control;
+                newFormControls[name].addValidators(Validators.required);
             }
         });
-        // 2. Strip remaining HTML tags to get plain text
-        // Create a temporary DOM element to parse the HTML
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = textWithPlaceholders;
-        // Use textContent to get the plain text, effectively stripping tags
-        // Replace multiple whitespace characters (including newlines) with a single space
-        return (tempDiv.textContent || tempDiv.innerText || '').replace(/\s+/g, ' ').trim();
+        this.mainForm = new FormGroup(newFormControls);
     }
-    /**
-     * Cleans orphaned components from the lesson's dynamicComponents.
-     * An orphaned component is one present in dynamicComponents but its ID is not found in the textCoded HTML.
-     * @param lesson The lesson object to clean.
-     * @returns A new lesson object with orphaned components removed from dynamicComponents.
-     */
-    cleanOrphanedComponents(lesson) {
-        if (!lesson || !lesson.textCoded || !lesson.dynamicComponents) {
-            // Return the original lesson if essential parts are missing
-            return lesson;
-        }
-        const textCoded = lesson.textCoded;
-        const existingComponents = lesson.dynamicComponents;
-        const existingComponentIds = new Set(Object.keys(existingComponents));
-        // Regex to find "id":"<component_id>" within the textCoded string
-        const idRegex = /"id":"([^"]+)"/g;
-        const foundIdsInText = new Set();
-        let match;
-        while ((match = idRegex.exec(textCoded)) !== null) {
-            const potentialId = match[1];
-            // Check if the found ID actually exists in our dynamic components map
-            // This ensures we only count IDs that correspond to known components.
-            if (existingComponentIds.has(potentialId)) {
-                foundIdsInText.add(potentialId);
-            }
-        }
-        const orphanedIds = [];
-        const cleanedDynamicComponents = {};
-        // Iterate through existing component IDs
-        for (const componentId of existingComponentIds) {
-            if (foundIdsInText.has(componentId)) {
-                // Keep the component if its ID was found in the text
-                cleanedDynamicComponents[componentId] = existingComponents[componentId];
+    injectComponentsIntoDom(components, renderer) {
+        Object.entries(components).forEach(([name, componentRef]) => {
+            const elementRef = document.getElementById(name); // Uses Document Object to Find the Node Ref if exits.
+            if (elementRef) {
+                this.addComponentToNode(componentRef, elementRef, renderer);
             }
             else {
-                // Mark as orphaned if not found
-                orphanedIds.push(componentId);
+                console.warn(`Placeholder element with ID '${name}' not found in the DOM.`);
             }
-        }
-        if (orphanedIds.length > 0) {
-            console.warn(`[LessonUtilsService] Orphaned components detected and will be removed from lesson data (IDs not found in textCoded):`, orphanedIds);
-            this.#toastService.warn({
-                title: 'Componentes Huérfanos Detectados',
-                subtitle: `Se removerán ${orphanedIds.length} componentes no usados del editor.`,
-                // life: 5000, // Removed 'life' property as it might not be supported by ToastData
+        });
+    }
+    addComponentToNode(componentRef, nodeDOM, renderer) {
+        renderer.appendChild(nodeDOM, componentRef.location.nativeElement);
+    }
+    evaluateForms() {
+        this.mainForm.markAllAsTouched();
+        if (!this.mainForm.valid) {
+            Object.keys(this.mainForm.controls).forEach((controlName) => {
+                if (this.components[controlName]?.instance?.validate) {
+                    this.components[controlName].instance.validate();
+                }
             });
+            this.toastrService.warn({ subtitle: 'Por favor completa todos los ejercicios', title: 'Incompleto' });
+            return null;
         }
-        // Return a new lesson object with the cleaned components
-        return {
-            ...lesson,
-            dynamicComponents: cleanedDynamicComponents,
-        };
+        const rates = { correct: 0, incorrect: 0, score: 0 };
+        Object.keys(this.mainForm.controls).forEach((controlName) => {
+            const instance = this.components[controlName]?.instance;
+            if (instance && typeof instance.evaluate === 'function') {
+                try {
+                    const result = instance.evaluate();
+                    if (result) {
+                        rates.correct++;
+                    }
+                    else {
+                        rates.incorrect++;
+                    }
+                }
+                catch (err) {
+                    console.error('Error during evaluation for component:', controlName, instance, err);
+                    rates.incorrect++;
+                }
+            }
+        });
+        const totalQuestions = rates.correct + rates.incorrect;
+        rates.score = totalQuestions > 0 ? rates.correct / totalQuestions : 0;
+        const status = rates.score >= 0.7 ? 'passed' : 'failed';
+        if (status === 'passed') {
+            this.toastrService.success({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%.`, title: '¡Muy bien!' });
+        }
+        else {
+            this.toastrService.warn({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Revisa tus respuestas.`, title: 'Casi lo logras' });
+        }
+        return { rates, takenLesson: null };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonUtilsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonRendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonRendererService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonUtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonRendererService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root', // Provide globally or in a specific module if preferred
+                    providedIn: 'root',
                 }]
         }] });
 
-class DynamicComponentsBuilderService {
-    #dialogService = inject(DialogService);
-    #toastService = inject(TOAST_ALERTS_TOKEN);
-    #dynamicComponentsService = inject(DynamicComponentsService);
-    openComponentBuilder(componentType, data = null) {
-        const componentToBuild = this.#dynamicComponentsService.getDynamicComponentBuilders(componentType);
-        if (!componentToBuild) {
-            console.error(`No component builder found for type: ${componentType}`);
-            this.#toastService.error({ title: 'Error', subtitle: `Componente desconocido: ${componentType}` });
-            return undefined;
-        }
-        const dialogRef = this.#dialogService.open(componentToBuild, {
-            inputValues: {
-                // inputValues was removed in newer PrimeNG versions, use 'data'
-                inputs: data.inputs,
-                id: data.id,
+const EnglishEvaluationSkill = `
+You are a virtual professor for the Polilan English learning app. Your primary role is to evaluate a student's English conversational performance.
+
+You will be provided with two pieces of information for each evaluation:
+1.  **The student's English level:** This will be one of "Beginner", "Intermediate", or "Advanced".
+2.  **A conversation transcript:** This will be the dialogue between the Student and an Assistant, with each turn clearly labeled (e.g., "Student or User: ...", "Assistant: ...").
+
+Your sole task is to evaluate the *Student's* contribution to the conversation. **Do NOT evaluate the Assistant's turns.**
+
+Evaluate the student's performance based on the following aspects, *always keeping the student's provided level in mind*  and adjusting your expectations accordingly specially with beginners give them credits just for trying:
+
+*   **Grammar & Syntax:** Evaluate accuracy and complexity *relative to the expected level*. (Beginners: focus on basic accuracy; Advanced: expect complex structures with high accuracy).
+*   **Vocabulary & Usage:** Evaluate the range and appropriateness of words used *relative to the expected level*. (Beginners: focus on using basic words correctly; Advanced: expect varied and idiomatic language).
+*   **Cohesion & Coherence:** Evaluate how well their turns connect and make sense within the conversation *relative to the expected level*. (Beginners: focus on simple, clear responses; Advanced: expect logical flow and detailed contributions).
+*   **Task Completion/Relevance:** Evaluate how effectively they participate and respond to the conversation's goals or topics *relative to the expected level*.
+
+Assign a rating from 0 to 3 based on how well the student performs *compared to the typical expectations for their provided level*:
+
+*   **0: Bad** - Performance is significantly below what is expected for this level. Many errors impede communication.
+*   **1: Not Bad** - Performance is below expectations for this level, but communication is sometimes possible despite frequent errors.
+*   **2: Good** - Performance meets expectations for this level, demonstrating solid understanding and usage with only occasional minor errors.
+*   **3: Very Good** - Performance exceeds expectations for this level, demonstrating a strong command and potential to progress quickly.
+
+Provide detailed, constructive feedback that explains the rating. Point out specific strengths and areas for improvement based on their performance *at their given level*. Use examples from the dialog if helpful. Maintain a supportive, encouraging, and educational tone appropriate for a virtual professor guiding a student at their specific stage.
+`;
+
+const EngagementSkill = `
+You are an engagement assistant, start by greeting the user, asking something about the lesson, and then continue the conversation. always ask one or two friendly questions.
+that makes sense for the lesson.
+`;
+class LessonConversationService {
+    constructor() {
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
+        this.userService = inject(UserService);
+        this.conversationSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "conversationSettings" }] : []));
+        this.conversationFlow = signal(undefined, ...(ngDevMode ? [{ debugName: "conversationFlow" }] : []));
+        this.evalAgentTask = signal(undefined, ...(ngDevMode ? [{ debugName: "evalAgentTask" }] : []));
+    }
+    initializeConversationFlow() {
+        this.evalAgentTask.set({
+            systemPrompt: EnglishEvaluationSkill,
+            model: { provider: 'google' },
+            task: `Please evaluate the user conversation student data is: \n ${this.userService.getUserDataInformation()}`,
+            expectedResponseType: EvalResultStringDefinition,
+        });
+        this.conversationFlow.set({
+            goal: {
+                enabled: true,
+                task: `User is learning is taking a lesson about languages, evaluate how good are the responses.`,
+                model: { quality: EModelQuality.FAST },
+            },
+            triggerTasks: {
+                [ConversationEvents.OnUserMessage]: {
+                    enabled: true,
+                    ...this.evalAgentTask(),
+                },
+            },
+            challenges: null,
+            dynamicConditions: [
+                {
+                    what: ConditionType.Goal,
+                    when: ConditionOperator.GreaterThanOrEqual,
+                    value: 100,
+                    do: [
+                        {
+                            actionType: EDoActionType.ChangePrompt,
+                            systemPromptType: SystemPromptType.SystemPrompt,
+                            prompt: 'You were talking with the user, user finish the conversation, in the next message you must try to finish the conversation and say good bye.',
+                        },
+                        {
+                            actionType: EDoActionType.ChangePrompt,
+                            systemPromptType: SystemPromptType.CharacterDescription,
+                            prompt: '',
+                        },
+                        {
+                            actionType: EDoActionType.ChangePrompt,
+                            systemPromptType: SystemPromptType.UserInformation,
+                            prompt: '',
+                        },
+                        {
+                            actionType: EDoActionType.ChangePrompt,
+                            systemPromptType: SystemPromptType.MessageExamples,
+                            prompt: '',
+                        },
+                        {
+                            actionType: EDoActionType.ChangePrompt,
+                            systemPromptType: SystemPromptType.ScenarioDescription,
+                            prompt: '',
+                        },
+                    ],
+                },
+            ],
+            moodState: {
+                enabled: false,
+                useAssetStatesOnly: false,
+                detectableStates: [],
             },
-            width: '80vw',
-            header: 'Agregar componente',
-            closable: true,
         });
-        return dialogRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsBuilderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+    async startAI(lesson, settings) {
+        console.log('Requesting agent cards from LessonAIService...');
+        try {
+            const conversationSettings = await this.generateConversationSettingsForLesson(lesson, settings);
+            if (conversationSettings) {
+                this.conversationSettings.set(conversationSettings);
+                console.log('Agent cards received and set.');
+                return conversationSettings;
+            }
+            else {
+                console.error('Failed to generate agent cards (service returned null).');
+                return null;
+            }
+        }
+        catch (error) {
+            console.error('Error generating agent cards:', error);
+            return null;
+        }
+    }
+    /**
+     * Builds the scenario prompt string based on lesson content and user info.
+     * @param lessonText The extracted text content of the lesson.
+     * @param userInformationPrompt The formatted string containing user details.
+     * @returns The complete scenario prompt string.
+     */
+    _buildLessonInstructionsPrompt(lessonText, userInformationPrompt, settings) {
+        return `
+${settings.instructionsPrompt}
 
-class DCLessonComponentAdderComponent {
-    constructor() {
-        // Services
-        this.#dynamicComponentsBuilderService = inject(DynamicComponentsBuilderService);
-        this.componentAdded = new EventEmitter(); // Changed Output name and type
-        // Expose enum to the template
-        this.lessonComponentEnum = LessonComponentEnum;
+<Lesson Text>
+   ${lessonText}
+</Lesson Text>
+
+${EngagementSkill}
+
+<User Information>
+${userInformationPrompt}`;
     }
-    // Services
-    #dynamicComponentsBuilderService;
-    // Logic to open component builder, now utilizing DynamicComponentsBuilderService
-    openComponentBuilder(type) {
-        const dialogRef = this.#dynamicComponentsBuilderService.openComponentBuilder(type);
-        if (dialogRef) {
-            // Handle the result and emit the new event
-            dialogRef.onClose.subscribe((result) => {
-                if (result) {
-                    console.log('Component builder closed:', result);
-                    this.componentAdded.emit(result); // Emit the result when dialog closes successfully
-                }
-            });
+    /**
+     * Generates conversation settings for a lesson, using the lesson scenario as the initial prompt.
+     * @param lesson The lesson data.
+     * @returns An IConversationSettings object configured for the lesson scenario.
+     */
+    async generateConversationSettingsForLesson(lesson, settings) {
+        // TODO: Consolidate user fetching logic if possible, or ensure consistency
+        const baseLang = this.userService.user().settings.baseLanguage || 'en';
+        let lessonText = '';
+        if (lesson.textCoded) {
+            lessonText = this.lessonsService.extractTextFromHtml(lesson.textCoded);
         }
         else {
-            // Optional: Log if the dialog couldn't be opened, though the service already logs an error.
-            console.warn(`Dialog could not be opened for type via component: ${type}`);
+            lessonText = lesson.markdown;
+        }
+        const userInformationPrompt = this.userService.getUserDataInformation();
+        let lessonInstructionsPrompt = this._buildLessonInstructionsPrompt(lessonText, userInformationPrompt, settings);
+        if (settings.additionalPrompt) {
+            lessonInstructionsPrompt += '\n\n' + settings.additionalPrompt;
         }
+        const initialMessage = {
+            role: ChatRole.System,
+            content: lessonInstructionsPrompt,
+            messageId: SystemPromptType.SystemPrompt,
+        };
+        // Use defaults similar to DEFAULT_LESSON_AGENT_CARD but adjust for prompt-based start
+        const conversationSettings = {
+            conversationType: ConversationType.General,
+            textEngine: TextEngines.SimpleText,
+            autoStart: true,
+            messages: [initialMessage],
+            model: { provider: 'google' },
+            tts: { voice: getRandomQuickVoice(baseLang || 'en', 'female') },
+        };
+        return conversationSettings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonComponentAdderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonComponentAdderComponent, isStandalone: true, selector: "dc-lesson-component-adder", outputs: { componentAdded: "componentAdded" }, providers: [DialogService], ngImport: i0, template: "<span>Componentes: </span>\n<div style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Selector)\"\n    pTooltip=\"Agrega un selector con multiples opciones\"\n    tooltipPosition=\"bottom\">\n    Selector\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Speaker)\"\n    pTooltip=\"Para que una palabra o frase sea reproducible\"\n    tooltipPosition=\"bottom\">\n    Speaker\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\"\n    pTooltip=\"Escribe una respuesta en un cuadro de texto\"\n    tooltipPosition=\"bottom\">\n    Text\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de un verbo\"\n    tooltipPosition=\"bottom\">\n    Verb\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de una palabra\"\n    tooltipPosition=\"bottom\">\n    Palabra\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Traducci\u00F3n\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.PlayWord)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Play Word\n  </p-button>\n  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonConversationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonConversationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonComponentAdderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-lesson-component-adder', standalone: true, imports: [CommonModule, ButtonModule, TooltipModule], providers: [DialogService], template: "<span>Componentes: </span>\n<div style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Selector)\"\n    pTooltip=\"Agrega un selector con multiples opciones\"\n    tooltipPosition=\"bottom\">\n    Selector\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Speaker)\"\n    pTooltip=\"Para que una palabra o frase sea reproducible\"\n    tooltipPosition=\"bottom\">\n    Speaker\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\"\n    pTooltip=\"Escribe una respuesta en un cuadro de texto\"\n    tooltipPosition=\"bottom\">\n    Text\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de un verbo\"\n    tooltipPosition=\"bottom\">\n    Verb\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de una palabra\"\n    tooltipPosition=\"bottom\">\n    Palabra\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Traducci\u00F3n\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.PlayWord)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Play Word\n  </p-button>\n  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n" }]
-        }], propDecorators: { componentAdded: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonConversationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
-class DCLessonMetadataEditorComponent {
+class DCLessonRendererComponent {
     constructor() {
-        // Outputs for actions
-        this.saveRequest = new EventEmitter();
-        this.importNotionRequest = new EventEmitter();
-        this.improveNotionRequest = new EventEmitter();
-        // Injected Services
-        this.#lessonUtilsService = inject(LessonUtilsService);
-        this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        // --- Signal Inputs ---
+        this.lessonInput = input(...(ngDevMode ? [undefined, { debugName: "lessonInput" }] : [])); // Input signal for lesson object
+        this.lessonIdInput = input(...(ngDevMode ? [undefined, { debugName: "lessonIdInput" }] : [])); // Input signal for lesson ID
+        this.settings = input(...(ngDevMode ? [undefined, { debugName: "settings" }] : []));
+        // --- Outputs ---
+        this.wordClicked = new EventEmitter(); // New output event
+        // --- View Childs ---
+        this.dynamicLessonRef = viewChild('dynamicLessonRef', ...(ngDevMode ? [{ debugName: "dynamicLessonRef" }] : []));
+        // --- Services  ---
+        this.renderer = inject(Renderer2);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.toastrService = inject(TOAST_ALERTS_TOKEN);
         this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
-    }
-    // Injected Services
-    #lessonUtilsService;
-    #toastService;
-    // private turndownService = new TurndownService(); // Instantiate TurndownService
-    ngOnInit() {
-        // console.log(this.lesson(), this.form);
-    }
-    onManageablePropertyChange(property, value) {
-        // this.lesson.update((current) => {
-        //   if (!current) return undefined;
-        //   const updatedManageable = { ...(current.manageable ?? {}), [property]: value };
-        //   return { ...current, manageable: updatedManageable as IManageable };
-        // });
-    }
-    onAuditablePropertyChange(property, value) {
-        // this.lesson.update((current) => {
-        //   if (!current) return undefined;
-        //   const updatedAuditable = { ...(current.auditable ?? {}), [property]: value };
-        //   return { ...current, auditable: updatedAuditable as IAuditable };
-        // });
-    }
-    // New methods to handle events with proper casting
-    handlePromptInputChange(event) {
-        const target = event.target;
-        this.onAuditablePropertyChange('prompt', target.value);
-    }
-    handleStatusChange(event) {
-        const target = event.target;
-        this.onManageablePropertyChange('status', target.checked ? 'published' : 'draft');
-    }
-    /**
-     * Generates lesson content using AI, saving the current state first.
-     * Moved from DCLessonEditorComponent.
-     */
-    async generateByAI() {
-        const currentLesson = this.lesson; // Get current value
-        if (!currentLesson?.id) {
-            this.#toastService.warn({ title: 'Guardar primero', subtitle: 'Guarda la lección antes de usar IA.' });
-            return;
-        }
-        this.isLoadingLesson = true;
-        try {
-            const rawHtmlContent = currentLesson.textCoded || '';
-            if (!rawHtmlContent) {
-                console.warn('No HTML content found in lesson to process. taking just description');
-                this.#toastService.info({ title: 'Contenido lección desde 0', subtitle: 'Solo se usará el prompt' });
-                const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson, 'Create content from description');
-                // Convert and save the generated content
-                await this._convertMarkdownToHtmlAndSave(improvedMarkdown); // Use extracted method
+        this.uiStateService = inject(UiStateService);
+        this.lessonRendererService = inject(LessonRendererService);
+        this.lessonConversationService = inject(LessonConversationService);
+        this.mobileService = inject(MobileService);
+        // --- State Signals ---
+        this.lesson = signal(undefined, ...(ngDevMode ? [{ debugName: "lesson" }] : [])); // Internal lesson state signal
+        // --- Computed Signals ---
+        this.imageCover = computed(() => this.lesson()?.media?.images?.find((img) => img.type === 'cover')?.url, ...(ngDevMode ? [{ debugName: "imageCover" }] : [])); // Computed signal for imageCover
+        // --- Properties ---
+        this.components = {};
+        this.mainForm = new FormGroup({});
+        this.previousTextCoded = undefined; // Store previous value
+        // Effect to fetch lesson data if ID is provided and lesson object isn't
+        effect(async () => {
+            const lessonInput = this.lessonInput();
+            const lessonId = this.lessonIdInput();
+            if (lessonInput) {
+                this.lesson.set(lessonInput); // Use input lesson directly
+            }
+            else if (lessonId && !this.lesson()) {
+                // Fetch only if ID exists and internal lesson is not set
+                console.log(`[Renderer] Effect 1: Fetching lesson ${lessonId}`);
+                try {
+                    // Consider adding a loading state signal here
+                    const fetchedLesson = await this.lessonsService.getLesson(lessonId);
+                    this.lesson.set(fetchedLesson);
+                    console.log('Fetched lesson:', fetchedLesson);
+                }
+                catch (error) {
+                    console.error(`Failed to fetch lesson with ID: ${lessonId}`, error);
+                    this.toastrService.error({ subtitle: 'Failed to load lesson data.', title: 'Error' });
+                    this.lesson.set(undefined); // Reset lesson on error
+                }
+                finally {
+                    // Reset loading state signal here
+                }
+            }
+            else if (!lessonInput && !lessonId) {
+                // Handle case where neither input is provided, maybe clear the lesson?
+                this.lesson.set(undefined);
+            }
+        }, { allowSignalWrites: true }); // Allow signal writes inside effect
+        // Effect to render the lesson only when textCoded value actually changes
+        effect(() => {
+            const dynamicLessonRefEl = this.dynamicLessonRef();
+            const currentLesson = this.lesson(); // Read the lesson signal
+            if (!dynamicLessonRefEl || !currentLesson) {
+                return;
+            }
+            if (currentLesson?.format === 'markdown') {
+                // If markdown content exists, we clear any dynamically rendered components
+                // and prevent the textCoded logic from running.
+                if (this.previousTextCoded) {
+                    this.lessonRendererService.clearLessonRendering(dynamicLessonRefEl.nativeElement);
+                    this.mainForm = this.lessonRendererService.mainForm;
+                    this.previousTextCoded = undefined;
+                }
+                return;
+            }
+            const newTextCoded = currentLesson?.textCoded; // Get the current textCoded value
+            // Quick fix to only render on changes textCode not all the lesson
+            if (newTextCoded !== this.previousTextCoded) {
+                if (newTextCoded !== undefined && newTextCoded !== null && currentLesson) {
+                    this.components = this.lessonRendererService.renderLesson(currentLesson, this.viewContainerRef, dynamicLessonRefEl.nativeElement, this.renderer);
+                    this.mainForm = this.lessonRendererService.mainForm;
+                }
+                else {
+                    this.lessonRendererService.clearLessonRendering(dynamicLessonRefEl.nativeElement);
+                    this.mainForm = this.lessonRendererService.mainForm;
+                }
+                // Update the stored previous value *after* comparison and action
+                this.previousTextCoded = newTextCoded;
             }
             else {
-                // Clean orphaned and Save before Improve
-                const lessonToSave = this.#lessonUtilsService.cleanOrphanedComponents(currentLesson);
-                const savedLesson = await this.lessonsService.postLesson(lessonToSave);
-                if (!savedLesson) {
-                    this.#toastService.error({ title: 'Error al guardar', subtitle: 'No se pudo guardar antes de generar con IA.' });
-                    throw new Error('Failed to save before AI generation');
-                }
-                this.lesson = savedLesson;
-                // Replace encoded JSON with actual text before Markdown conversion
-                const processedHtmlContent = this._extractTextFromEncodedJson(rawHtmlContent);
-                // Convert the processed HTML (with text instead of JSON) to Markdown
-                // const markdownText = this.turndownService.turndown(processedHtmlContent);
-                // Use the updated lesson signal value for AI improvement
-                // const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson, markdownText);
-                // Convert and save the improved content
-                // await this._convertMarkdownToHtmlAndSave(improvedMarkdown); // Use extracted method
+                console.log('[Renderer] textCoded has NOT changed. Skipping render/clear.');
             }
+        });
+    }
+    ngOnInit() {
+        this.lessonConversationService.initializeConversationFlow();
+    }
+    async evaluateForms() {
+        const result = this.lessonRendererService.evaluateForms();
+        if (!result) {
+            return;
         }
-        catch (error) {
-            console.error('Error during AI generation process in metadata editor:', error);
-            // Service handles specific AI error toasts, maybe add a general one here if needed
-            // this.#toastService.error({ title: 'Error General', subtitle: 'Ocurrió un problema durante el proceso de IA.' });
+        const currentLesson = this.lesson();
+        if (!currentLesson) {
+            console.error('Cannot save result, lesson data is missing.');
+            this.toastrService.error({ subtitle: 'Cannot save result, lesson data missing.', title: 'Error' });
+            return;
         }
-        finally {
-            this.isLoadingLesson = false; // Stop loading
+        const status = result.rates.score >= 0.7 ? 'passed' : 'failed';
+        const takenLesson = {
+            id: currentLesson.id,
+            goalCompleted: null,
+            score: result.rates.score,
+            status: status,
+            lastAccess: new Date(),
+        };
+        console.log('Lesson evaluation result:', takenLesson);
+        // TODO: Re-implement saving the taken lesson status via lessonService
+    }
+    // --- AI Chat Logic ---
+    async startAI() {
+        const currentLesson = this.lesson();
+        if (!currentLesson) {
+            console.error('Cannot start AI without a lesson.');
+            this.toastrService.error({ subtitle: 'Lesson data not available.', title: 'Cannot Start Chat' });
+            return;
+        }
+        const conversationSettings = await this.lessonConversationService.startAI(currentLesson, this.settings());
+        if (conversationSettings) {
+            this.uiStateService.chatDrawerVisible.set(true);
+        }
+        else {
+            this.toastrService.error({ subtitle: 'Could not prepare the AI chat session.', title: 'Error' });
         }
     }
-    /**
-     * Replaces encoded JSON blocks (~...~) in HTML with their 'settings.text' value.
-     * Moved from DCLessonEditorComponent.
-     * @param htmlInput The HTML string containing encoded JSON.
-     * @returns The processed HTML string with text replacements.
-     */
-    _extractTextFromEncodedJson(htmlInput) {
-        const jsonRegex = /~(.+?)~/g; // Global flag to replace all occurrences
-        return htmlInput.replace(jsonRegex, (match, jsonCoded) => {
-            try {
-                // Attempt to decode HTML entities that might be present in the JSON string
-                const decodedJson = jsonCoded.replace(/"/g, '"').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
-                const data = JSON.parse(decodedJson);
-                // Return the text if available, otherwise keep the original match (or an error placeholder)
-                return data?.settings?.text || match;
+    onVisibleChange(isVisible) {
+        if (isVisible === false) {
+            this.uiStateService.chatDrawerVisible.set(false);
+        }
+    }
+    async handleGoalCompleted(event = {}) {
+        console.log('Goal completed:', event);
+        const lesson = this.lesson();
+        const takenLesson = { id: lesson.id, goalCompleted: true, score: 100, status: 'finished', lastAccess: new Date() };
+        const res = await this.lessonsService.saveTakenLesson(takenLesson);
+        if (res) {
+            // this.lessonsMemStateService.updateUserState(res);
+        }
+        this.toastrService.success({ subtitle: '¡Has completado la lección! , pero puedes seguir conversando', title: '¡Muy bien, guardaremos tu progreso!' });
+    }
+    onChatMessage(event) {
+        console.log('Received chat event:', event);
+        switch (event.type) {
+            case ChatEventType.WordClicked: {
+                const wordClickedData = event.payload;
+                console.log('Word clicked event received, emitting output:', wordClickedData);
+                // Removed: this.wordPopupService.showWordPopup(wordClicked); // Use the service
+                this.wordClicked.emit(wordClickedData); // Emit the event instead
+                break;
             }
-            catch (error) {
-                console.error('Failed to parse JSON inside HTML:', jsonCoded, error);
-                return '<!-- invalid component data -->'; // Placeholder for parsing errors
+            default:
+                console.log('Unhandled chat event type:', event.type);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonRendererComponent, isStandalone: true, selector: "dc-lesson-renderer", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: false, transformFunction: null }, lessonIdInput: { classPropertyName: "lessonIdInput", publicName: "lessonIdInput", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wordClicked: "wordClicked" }, viewQueries: [{ propertyName: "dynamicLessonRef", first: true, predicate: ["dynamicLessonRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (lesson()?.format === 'markdown' || !lesson()?.textCoded) {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLessonRef class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  [styleClass]=\"mobileService.hasReponsiveView() ? 'p-drawer-bottom-chat-mobile' : 'p-drawer-bottom-chat'\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "conversationFlow", "agentCard", "parseDict"], outputs: ["chatEvent", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { 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: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-lesson-renderer', standalone: true, imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule, MarkdownComponent], template: "@if (lesson()?.format === 'markdown' || !lesson()?.textCoded) {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLessonRef class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  [styleClass]=\"mobileService.hasReponsiveView() ? 'p-drawer-bottom-chat-mobile' : 'p-drawer-bottom-chat'\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { wordClicked: [{
+                type: Output
+            }] } });
+
+class DcLessonTextEditorComponent {
+    constructor() {
+        this.lessonInput = input.required(...(ngDevMode ? [{ debugName: "lessonInput" }] : []));
+        this.lesson = signal({}, ...(ngDevMode ? [{ debugName: "lesson" }] : []));
+        this.markdownService = inject(MarkdownService);
+        this.saveLesson = new EventEmitter();
+        this.updateLesson = new EventEmitter();
+        this.editor = BalloonEditor;
+        effect(() => {
+            this.lesson.set(this.lessonInput());
+            if (this.lessonInput()) {
+                this.parseHttp(this.lessonInput());
             }
         });
     }
-    /**
-     * Converts improved Markdown content to HTML, updates the lesson signal,
-     * and saves the lesson.
-     * @param improvedMarkdown The Markdown content generated by AI.
-     * @throws Error if the markdown is empty/null or if saving fails.
-     */
-    async _convertMarkdownToHtmlAndSave(improvedMarkdown) {
-        if (improvedMarkdown) {
-            // Convert the improved Markdown back to HTML before setting it
-            const improvedHtml = improvedMarkdown;
-            // Update the signal directly
-            // this.lesson.update((current) => (current ? { ...current, textCoded: improvedHtml } : undefined));
-            // Save the AI-generated content
-            // Ensure lesson() is not undefined before saving
-            const lessonToSave = this.lesson;
-            if (lessonToSave) {
-                await this.lessonsService.postLesson(lessonToSave);
-                this.#toastService.success({ title: 'Contenido generado', subtitle: 'Se generó y guardó el contenido con IA.' });
-            }
-            else {
-                console.error('Lesson signal is undefined, cannot save.');
-                this.#toastService.error({ title: 'Error Interno', subtitle: 'No se pudo guardar la lección.' });
-                // Throw an error to be caught by the calling method's try/catch
-                throw new Error('Lesson signal is undefined during save operation.');
-            }
-        }
-        else {
-            // Log the error, the toast might be handled by the calling service/context
-            console.error('AI generation failed or provided markdown was empty.');
-            // Let the caller handle the specific user feedback if needed
-            // Throw an error to be caught by the calling method's try/catch
-            throw new Error('AI generation failed or the resulting markdown was empty.');
-        }
+    updateHtmlTextCoded(key, value) {
+        this.lesson.update((lesson) => ({ ...lesson, [key]: value }));
+        this.updateLesson.emit(this.lesson());
     }
-    /**
-     * Calls the LessonUtilsService to generate a description using AI
-     * and updates the lesson signal if successful.
-     */
-    async triggerGenerateDescriptionAI() {
-        const currentLesson = this.lesson;
-        if (!currentLesson) {
-            this.#toastService.warn({ title: 'Lección no cargada', subtitle: 'Espera a que la lección se cargue.' });
-            return;
+    parseHttp(entity) {
+        if (this.lessonInput().format === 'markdown') {
+            this.httpTemporalModel = this.markdownService.parse(entity.markdown);
         }
-        const generatedDescription = await this.#lessonUtilsService.generateDescriptionWithAI(currentLesson);
-        if (generatedDescription) {
-            // this.form.controls['description'].setValue(generatedDescription);
+        else {
+            this.httpTemporalModel = entity.textCoded;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonMetadataEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonMetadataEditorComponent, isStandalone: true, selector: "dc-lesson-metadata-editor", inputs: { form: "form", lesson: "lesson", isLoadingLesson: "isLoadingLesson" }, outputs: { saveRequest: "saveRequest", importNotionRequest: "importNotionRequest", improveNotionRequest: "improveNotionRequest" }, ngImport: i0, template: "<div>\n  <!-- <div style=\"display: flex; gap: 10px; padding: 10px\">\n    <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n    <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n    <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n  </div> -->\n\n  <div>\n    <div>\n      <span>Nombre de La lecci\u00F3n</span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['name']\" type=\"text\" placeholder=\"Agrega un nombre\" />\n    </div>\n    <!-- <div>\n      <span>T\u00EDtulo </span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['title']\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div> -->\n\n    <div style=\"margin-top: 4px\">\n      <span>Descripci\u00F3n </span>\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['description']\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n  </div>\n\n  <div style=\"display: flex; align-items: center; margin-top: 10px\">\n    <input\n      pInputText\n      style=\"flex: auto; margin-right: 5px\"\n      [value]=\"lesson?.auditable?.prompt || ''\"\n      (input)=\"handlePromptInputChange($event)\"\n      type=\"text\"\n      placeholder=\"Prompt para IA (opcional)\" />\n    <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson\" (click)=\"generateByAI()\" />\n  </div>\n\n  <p-divider />\n\n  <!-- <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n    <input pInputText [value]=\"lesson?.extensions?.['level'] || ''\" type=\"number\" placeholder=\"Nivel\" style=\"width: 80px\" />\n\n    @if (lesson?.extensions) {\n    <div>\n      {{ lesson?.extensions?.['baseLang'] | flagEmoji }} -> {{ lesson?.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ lesson?.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n      {{ lesson?.extensions?.['targetLang'] | langDesc : 'es' }}\n    </div>\n    }\n  </div> -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: // Added TooltipModule
-                InputGroupModule }, { kind: "component", type: i5.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i6.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcLessonTextEditorComponent, isStandalone: true, selector: "dc-lesson-text-editor", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { saveLesson: "saveLesson", updateLesson: "updateLesson" }, ngImport: i0, template: "<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson.emit($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [(ngModel)]=\"httpTemporalModel\"\n      (ngModelChange)=\"updateHtmlTextCoded('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n", dependencies: [{ kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1$5.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "settings"], outputs: ["wordClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i3$1.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i4$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonMetadataEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonTextEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-metadata-editor', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        ButtonModule,
-                        InputTextModule,
-                        ReactiveFormsModule,
-                        TooltipModule, // Added TooltipModule
-                        InputGroupModule,
-                        DividerModule,
-                    ], template: "<div>\n  <!-- <div style=\"display: flex; gap: 10px; padding: 10px\">\n    <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n    <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n    <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n  </div> -->\n\n  <div>\n    <div>\n      <span>Nombre de La lecci\u00F3n</span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['name']\" type=\"text\" placeholder=\"Agrega un nombre\" />\n    </div>\n    <!-- <div>\n      <span>T\u00EDtulo </span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['title']\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div> -->\n\n    <div style=\"margin-top: 4px\">\n      <span>Descripci\u00F3n </span>\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['description']\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n  </div>\n\n  <div style=\"display: flex; align-items: center; margin-top: 10px\">\n    <input\n      pInputText\n      style=\"flex: auto; margin-right: 5px\"\n      [value]=\"lesson?.auditable?.prompt || ''\"\n      (input)=\"handlePromptInputChange($event)\"\n      type=\"text\"\n      placeholder=\"Prompt para IA (opcional)\" />\n    <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson\" (click)=\"generateByAI()\" />\n  </div>\n\n  <p-divider />\n\n  <!-- <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n    <input pInputText [value]=\"lesson?.extensions?.['level'] || ''\" type=\"number\" placeholder=\"Nivel\" style=\"width: 80px\" />\n\n    @if (lesson?.extensions) {\n    <div>\n      {{ lesson?.extensions?.['baseLang'] | flagEmoji }} -> {{ lesson?.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ lesson?.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n      {{ lesson?.extensions?.['targetLang'] | langDesc : 'es' }}\n    </div>\n    }\n  </div> -->\n</div>\n" }]
-        }], propDecorators: { form: [{
-                type: Input,
-                args: [{ required: true }]
-            }], lesson: [{
-                type: Input,
-                args: [{ required: true }]
-            }], isLoadingLesson: [{
-                type: Input,
-                args: [{ required: true }]
-            }], saveRequest: [{
-                type: Output
-            }], importNotionRequest: [{
+            args: [{ selector: 'dc-lesson-text-editor', standalone: true, imports: [CKEditorModule, DCLessonRendererComponent, FormsModule, SplitterModule], template: "<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson.emit($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [(ngModel)]=\"httpTemporalModel\"\n      (ngModelChange)=\"updateHtmlTextCoded('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n" }]
+        }], ctorParameters: () => [], propDecorators: { saveLesson: [{
                 type: Output
-            }], improveNotionRequest: [{
+            }], updateLesson: [{
                 type: Output
             }] } });
 
-class LessonFormEditorService {
+class DcDynamicComponentPreviewComponent {
     constructor() {
-        this.fb = inject(FormBuilder);
-        this.formUtils = inject(FormUtilsService);
-        this.formatOptions = [
-            { label: 'HTML', value: 'html' },
-            { label: 'Markdown', value: 'markdown' },
-        ];
+        this.showComponentDetails = new EventEmitter();
+        this.editComponent = new EventEmitter();
     }
-    createLessonForm() {
-        return this.fb.group({
-            version: ['1.0'],
-            id: [''],
-            name: [''],
-            description: [''],
-            format: ['html'],
-            lang: [''],
-            characterCard: [],
-            conversationSettings: [],
-            metaApp: [],
-            conversationFlow: [],
-            textCoded: [''],
-            manageable: this.formUtils.createManageableFormGroup(),
-            learnable: this.formUtils.createLearnableFormGroup(),
-        });
+    onShowComponentDetails(component) {
+        this.showComponentDetails.emit(component);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonFormEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonFormEditorService, providedIn: 'root' }); }
+    onEditComponent(component) {
+        this.editComponent.emit(component);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDynamicComponentPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcDynamicComponentPreviewComponent, isStandalone: true, selector: "dc-dynamic-component-preview", inputs: { dynamicComponentsArray: "dynamicComponentsArray" }, outputs: { showComponentDetails: "showComponentDetails", editComponent: "editComponent" }, ngImport: i0, template: "<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li>\n      ID: {{ comp.id }} - Tipo: {{ comp.component }}\n\n      <button pButton icon=\"pi pi-info\" (click)=\"onShowComponentDetails(comp)\"></button>\n      <p-button icon=\"pi pi-pencil\" [rounded]=\"true\" severity=\"warn\" (click)=\"onEditComponent(comp)\"></p-button>\n    </li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonFormEditorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcDynamicComponentPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-dynamic-component-preview', standalone: true, imports: [CommonModule, ButtonModule], template: "<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li>\n      ID: {{ comp.id }} - Tipo: {{ comp.component }}\n\n      <button pButton icon=\"pi pi-info\" (click)=\"onShowComponentDetails(comp)\"></button>\n      <p-button icon=\"pi pi-pencil\" [rounded]=\"true\" severity=\"warn\" (click)=\"onEditComponent(comp)\"></p-button>\n    </li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { dynamicComponentsArray: [{
+                type: Input
+            }], showComponentDetails: [{
+                type: Output
+            }], editComponent: [{
+                type: Output
+            }] } });
 
 class DCLessonEditorComponent extends EntityBaseFormComponent {
     constructor() {
         super(...arguments);
         this.lessonFormEditorService = inject(LessonFormEditorService);
-        this.markdownService = inject(MarkdownService);
         this.form = this.lessonFormEditorService.createLessonForm();
         this.formatOptions = this.lessonFormEditorService.formatOptions;
         this.entityCommunicationService = inject(LESSONS_TOKEN);
-        this.htmlTemporal = '';
         // Services
         this.activatedRoute = inject(ActivatedRoute); // Re-inject as it's needed for navigation
         this.lessonNotionService = inject(LessonNotionService);
@@ -2144,20 +2279,19 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
         this.loadingBarService = inject(LoadingBarService);
         this.defaultLessonsService = inject(DefaultLessonsService);
         this.promptService = inject(PromptService);
-        this.ngxVertexService = inject(NgxVertexService);
+        this.ngxVertexService = inject(NgxAiServicesService);
         this.dynamicComponentsBuilderService = inject(DynamicComponentsBuilderService);
         this.isLoadingLesson = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingLesson" }] : []));
         // Computed signal to get dynamic components as an array for easier iteration in the template
         this.dynamicComponentsArray = computed(() => {
-            // const currentLesson = this.lesson();
-            // if (currentLesson?.dynamicComponents) {
-            //   return Object.values(currentLesson.dynamicComponents);
-            // }
+            const currentLesson = this.entity();
+            if (currentLesson?.dynamicComponents) {
+                return Object.values(currentLesson.dynamicComponents);
+            }
             return []; // Return empty array if no lesson or no dynamic components
         }, ...(ngDevMode ? [{ debugName: "dynamicComponentsArray" }] : []));
         // States
         this.components = {}; // Current Dynamic components
-        this.editor = BalloonEditor;
         this.lessonComponentEnum = LessonComponentEnum;
         this.coverStorageSettings = {
             path: `lessons/${this.entityId()}/covers`,
@@ -2166,14 +2300,6 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
         };
     }
     patchForm(entity) {
-        console.log(this.form);
-        if (this.entity().format === 'markdown') {
-            this.htmlTemporal = this.markdownService.parse(entity.markdown);
-        }
-        else {
-            this.htmlTemporal = entity.textCoded;
-        }
-        // console.log(this.htmlTemporal);
         this.form.patchValue(entity);
     }
     /**
@@ -2190,20 +2316,19 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
             return { ...currentLesson, [property]: value };
         });
     }
-    updateHtmlTextCoded(_, value) {
+    onAssetsChange(updatedAssets) {
+        console.log(updatedAssets);
         this.entity.update((currentLesson) => {
             if (!currentLesson)
                 return undefined;
-            return { ...currentLesson, textCoded: value };
+            return { ...currentLesson, assets: updatedAssets };
         });
-        this.form.controls.textCoded.setValue(value);
     }
-    onAssetsChange(updatedAssets) {
-        console.log(updatedAssets);
+    updateLesson(event) {
         this.entity.update((currentLesson) => {
             if (!currentLesson)
                 return undefined;
-            return { ...currentLesson, assets: updatedAssets };
+            return { ...currentLesson, ...event };
         });
     }
     async saveLesson(event) {
@@ -2278,6 +2403,28 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
     async improveNotionWithAI() {
         await this.lessonNotionService.improveLessonWithNotionAI(this.entity());
     }
+    onNewDynamicComponent(result) {
+        const newComponentConfig = result?.obj;
+        if (newComponentConfig?.id) {
+            this.entity.update((currentLesson) => {
+                if (!currentLesson)
+                    return undefined;
+                const newDynamicComponent = {
+                    id: newComponentConfig.id,
+                    component: newComponentConfig.component,
+                    inputs: newComponentConfig.inputs || {},
+                    config: newComponentConfig,
+                };
+                const currentDynamicComponents = currentLesson.dynamicComponents || {};
+                const updatedDynamicComponents = {
+                    ...currentDynamicComponents,
+                    [newComponentConfig.id]: newDynamicComponent,
+                };
+                const updatedTextCoded = (currentLesson.textCoded || '') + result.str;
+                return { ...currentLesson, dynamicComponents: updatedDynamicComponents, textCoded: updatedTextCoded };
+            });
+        }
+    }
     showComponentDetails(data) {
         alert('showComponentDetails' + JSON.stringify(data));
     }
@@ -2316,20 +2463,17 @@ class DCLessonEditorComponent extends EntityBaseFormComponent {
         this.entityCommunicationService.partialUpdate(this.entityId(), { assets: event.assets });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", providers: [LessonNotionService], usesInheritance: true, ngImport: i0, template: "<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader\n      [assets]=\"entity()?.assets\"\n      storagePath=\"lessons/{{ entityId() }}\"\n      (assetsChange)=\"onAssetsChange($event)\"\n      (assetUpdate)=\"onAssetUpdate($event)\"></assets-loader>\n  </div>\n\n  <!-- <div class=\"p-col-4\">\n    <h3>Auditable</h3>\n    <dc-auditable-viewer [data]=\"entity()?.auditable\"></dc-auditable-viewer>\n  </div> -->\n  <div class=\"p-col-4\">\n    <h3>Gesti\u00F3n</h3>\n    <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Categorias y Etiquetas</h3>\n    <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n  </div>\n  <!-- <div class=\"p-col-4\">\n    <h3>Reactions</h3>\n    <dc-reactions-viewer [data]=\"entity()?.reactions\"></dc-reactions-viewer>\n  </div> -->\n\n  <!-- <div class=\"p-col-4\">\n    <h3>Extensions</h3>\n    <dc-extensions-viewer [data]=\"entity()?.extensions\"></dc-extensions-viewer>\n  </div> -->\n</div>\n\n<!-- Lesson Metadata Editor -->\n<br />\n<div [formGroup]=\"form\">\n  <p-selectButton [options]=\"formatOptions\" formControlName=\"format\" optionLabel=\"label\" optionValue=\"value\" />\n</div>\n<dc-lesson-metadata-editor [lesson]=\"entity()\" [form]=\"form\" [isLoadingLesson]=\"isLoadingLesson()\"></dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li\n      >ID: {{ comp.id }} - Tipo: {{ comp.component }}\n\n      <button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button>\n      <p-button icon=\"pi pi-pencil\" [rounded]=\"true\" severity=\"warn\" (click)=\"editComponent(comp)\"></p-button>\n    </li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"htmlTemporal\"\n      (ngModelChange)=\"updateHtmlTextCoded('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"entity()\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n\n<!-- <p-dialog header=\"Prompts\" [modal]=\"true\" [(visible)]=\"promptsVisible\" [style]=\"{ width: '70%' }\">\n  <div>\n    <h1>Banner</h1>\n    <p>{{ prompts?.banner }}</p>\n    <h1>Contenido</h1>\n    <p>{{ prompts?.content }}</p>\n    <h1>Descripci\u00F3n</h1>\n    <p>{{ prompts?.description }}</p>\n  </div>\n</p-dialog> -->\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}::ng-deep .p-splitter .p-splitterpanel{overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i3$1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "settings"], outputs: ["wordClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i6$1.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DCLessonComponentAdderComponent, selector: "dc-lesson-component-adder", outputs: ["componentAdded"] }, { kind: "ngmodule", type: // Add the component adder here
-                DialogModule }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "component", type: DCLessonMetadataEditorComponent, selector: "dc-lesson-metadata-editor", inputs: ["form", "lesson", "isLoadingLesson"], outputs: ["saveRequest", "importNotionRequest", "improveNotionRequest"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader\n      [assets]=\"entity()?.assets\"\n      storagePath=\"lessons/{{ entityId() }}\"\n      (assetsChange)=\"onAssetsChange($event)\"\n      (assetUpdate)=\"onAssetUpdate($event)\"></assets-loader>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Gesti\u00F3n</h3>\n    <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Categorias y Etiquetas</h3>\n    <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<br />\n<div [formGroup]=\"form\">\n  <p-selectButton [options]=\"formatOptions\" formControlName=\"format\" optionLabel=\"label\" optionValue=\"value\" />\n</div>\n<dc-lesson-metadata-editor [lesson]=\"entity()\" [form]=\"form\" [isLoadingLesson]=\"isLoadingLesson()\"></dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\" (onNewDynamicComponent)=\"onNewDynamicComponent($event)\"></dc-lesson-component-adder>\n\n<dc-dynamic-component-preview\n  [dynamicComponentsArray]=\"dynamicComponentsArray\"\n  (showComponentDetails)=\"showComponentDetails($event)\"\n  (editComponent)=\"editComponent($event)\"></dc-dynamic-component-preview>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<dc-lesson-text-editor [lessonInput]=\"entity()\" (updateLesson)=\"updateLesson($event)\"></dc-lesson-text-editor>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}::ng-deep .p-splitter .p-splitterpanel{overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DCLessonComponentAdderComponent, selector: "dc-lesson-component-adder", outputs: ["componentAdded", "onNewDynamicComponent"] }, { kind: "ngmodule", type: // Add the component adder here
+                DialogModule }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "component", type: DCLessonMetadataEditorComponent, selector: "dc-lesson-metadata-editor", inputs: ["form", "lesson", "isLoadingLesson"], outputs: ["saveRequest", "importNotionRequest", "improveNotionRequest"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }, { kind: "component", type: DcLessonTextEditorComponent, selector: "dc-lesson-text-editor", inputs: ["lessonInput"], outputs: ["saveLesson", "updateLesson"] }, { kind: "component", type: DcDynamicComponentPreviewComponent, selector: "dc-dynamic-component-preview", inputs: ["dynamicComponentsArray"], outputs: ["showComponentDetails", "editComponent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-lesson-editor', standalone: true, imports: [
                         ButtonModule,
-                        CKEditorModule,
-                        DCLessonRendererComponent,
                         FormsModule,
                         InputTextModule,
                         ReactiveFormsModule,
                         SelectButtonModule,
-                        SplitterModule,
                         TooltipModule,
                         DCLessonComponentAdderComponent, // Add the component adder here
                         DialogModule,
@@ -2337,7 +2481,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         DCLessonMetadataEditorComponent,
                         DcManageableFormComponent,
                         DcLearnableFormComponent,
-                    ], providers: [LessonNotionService], template: "<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader\n      [assets]=\"entity()?.assets\"\n      storagePath=\"lessons/{{ entityId() }}\"\n      (assetsChange)=\"onAssetsChange($event)\"\n      (assetUpdate)=\"onAssetUpdate($event)\"></assets-loader>\n  </div>\n\n  <!-- <div class=\"p-col-4\">\n    <h3>Auditable</h3>\n    <dc-auditable-viewer [data]=\"entity()?.auditable\"></dc-auditable-viewer>\n  </div> -->\n  <div class=\"p-col-4\">\n    <h3>Gesti\u00F3n</h3>\n    <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Categorias y Etiquetas</h3>\n    <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n  </div>\n  <!-- <div class=\"p-col-4\">\n    <h3>Reactions</h3>\n    <dc-reactions-viewer [data]=\"entity()?.reactions\"></dc-reactions-viewer>\n  </div> -->\n\n  <!-- <div class=\"p-col-4\">\n    <h3>Extensions</h3>\n    <dc-extensions-viewer [data]=\"entity()?.extensions\"></dc-extensions-viewer>\n  </div> -->\n</div>\n\n<!-- Lesson Metadata Editor -->\n<br />\n<div [formGroup]=\"form\">\n  <p-selectButton [options]=\"formatOptions\" formControlName=\"format\" optionLabel=\"label\" optionValue=\"value\" />\n</div>\n<dc-lesson-metadata-editor [lesson]=\"entity()\" [form]=\"form\" [isLoadingLesson]=\"isLoadingLesson()\"></dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li\n      >ID: {{ comp.id }} - Tipo: {{ comp.component }}\n\n      <button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button>\n      <p-button icon=\"pi pi-pencil\" [rounded]=\"true\" severity=\"warn\" (click)=\"editComponent(comp)\"></p-button>\n    </li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"htmlTemporal\"\n      (ngModelChange)=\"updateHtmlTextCoded('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"entity()\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n\n<!-- <p-dialog header=\"Prompts\" [modal]=\"true\" [(visible)]=\"promptsVisible\" [style]=\"{ width: '70%' }\">\n  <div>\n    <h1>Banner</h1>\n    <p>{{ prompts?.banner }}</p>\n    <h1>Contenido</h1>\n    <p>{{ prompts?.content }}</p>\n    <h1>Descripci\u00F3n</h1>\n    <p>{{ prompts?.description }}</p>\n  </div>\n</p-dialog> -->\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}::ng-deep .p-splitter .p-splitterpanel{overflow:auto!important}\n"] }]
+                        DcLessonTextEditorComponent,
+                        DcDynamicComponentPreviewComponent,
+                    ], template: "<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader\n      [assets]=\"entity()?.assets\"\n      storagePath=\"lessons/{{ entityId() }}\"\n      (assetsChange)=\"onAssetsChange($event)\"\n      (assetUpdate)=\"onAssetUpdate($event)\"></assets-loader>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Gesti\u00F3n</h3>\n    <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Categorias y Etiquetas</h3>\n    <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<br />\n<div [formGroup]=\"form\">\n  <p-selectButton [options]=\"formatOptions\" formControlName=\"format\" optionLabel=\"label\" optionValue=\"value\" />\n</div>\n<dc-lesson-metadata-editor [lesson]=\"entity()\" [form]=\"form\" [isLoadingLesson]=\"isLoadingLesson()\"></dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\" (onNewDynamicComponent)=\"onNewDynamicComponent($event)\"></dc-lesson-component-adder>\n\n<dc-dynamic-component-preview\n  [dynamicComponentsArray]=\"dynamicComponentsArray\"\n  (showComponentDetails)=\"showComponentDetails($event)\"\n  (editComponent)=\"editComponent($event)\"></dc-dynamic-component-preview>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<dc-lesson-text-editor [lessonInput]=\"entity()\" (updateLesson)=\"updateLesson($event)\"></dc-lesson-text-editor>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}::ng-deep .p-splitter .p-splitterpanel{overflow:auto!important}\n"] }]
         }] });
 
 class LessonsV2Component {
@@ -2593,7 +2739,7 @@ class CourseDetailComponent {
         this.course.set(course);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseDetailComponent, isStandalone: true, selector: "app-course-detail", providers: [MessageService], ngImport: i0, template: "@if (course(); as course) {\n<div class=\"course-detail-container p-4\">\n  <p-card>\n    <ng-template pTemplate=\"title\">\n      <div class=\"flex justify-content-between align-items-center\">\n        <span>{{ course.name }}</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"subtitle\">\n      <div class=\"flex align-items-center gap-2\">\n        <i class=\"pi pi-book\"></i>\n        <span>{{ course.moduleCount }} Modules / {{ course.totalLessons }} Lessons</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"content\">\n      <p>{{ course.description }}</p>\n\n      <div class=\"grid mt-3\">\n        @for (module of course.modules; track module.id) {\n        <div class=\"col-12 md:col-6\">\n          <p-panel [toggleable]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"flex align-items-center gap-2 w-full\">\n                <i class=\"pi pi-list\"></i>\n                <span class=\"font-bold white-space-nowrap\">{{ module.title }} {{ module.name }}</span>\n                <span class=\"text-sm text-color-secondary ml-auto\">{{ module.lessonCount }} lessons</span>\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <p>{{ module.description }}</p>\n              <ul class=\"list-none p-0 m-0 lessons-list\">\n                @for (lesson of module.lessons; track lesson.id) {\n                <li class=\"flex align-items-center justify-content-between p-2 border-bottom-1 surface-border\">\n                  <div class=\"flex align-items-center gap-2\">\n                    @if(lesson.generated) {\n                    <i class=\"pi pi-play-circle text-green-500\"></i>\n                    } @else {\n                    <i class=\"pi pi-lock text-gray-500\"></i>\n                    }\n                    <span>{{ lesson.title }} {{ lesson.name }}</span>\n                  </div>\n                  @if(lesson.generated) {\n                  <p-button icon=\"pi pi-chevron-right\" [text]=\"true\" [rounded]=\"true\"></p-button>\n                  } @else {\n                  <p-button label=\"Generate\" icon=\"pi pi-cog\" [text]=\"true\" size=\"small\"></p-button>\n                  }\n                </li>\n                }\n              </ul>\n            </ng-template>\n          </p-panel>\n        </div>\n        }\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"footer\">\n      <div class=\"flex justify-content-end\">\n        <p-button label=\"Generate Pending Lessons\" icon=\"pi pi-cogs\" (onClick)=\"generatePendingLessons()\" [loading]=\"generatingLessons()\"></p-button>\n      </div>\n    </ng-template>\n  </p-card>\n</div>\n} @else {\n<div class=\"flex justify-content-center align-items-center h-full\">\n  <p-progressSpinner></p-progressSpinner>\n</div>\n}\n", styles: [":host{display:block;height:100%}.course-detail-container{max-width:960px;margin:auto}.lessons-list li:last-child{border-bottom:none!important}.modules-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem}.modules-container .p-panel{flex:0 0 48%;max-width:48%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i3$2.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "id", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5$2.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: TagModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseDetailComponent, isStandalone: true, selector: "app-course-detail", providers: [MessageService], ngImport: i0, template: "@if (course(); as course) {\n<div class=\"course-detail-container p-4\">\n  <p-card>\n    <ng-template pTemplate=\"title\">\n      <div class=\"flex justify-content-between align-items-center\">\n        <span>{{ course.name }}</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"subtitle\">\n      <div class=\"flex align-items-center gap-2\">\n        <i class=\"pi pi-book\"></i>\n        <span>{{ course.moduleCount }} Modules / {{ course.totalLessons }} Lessons</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"content\">\n      <p>{{ course.description }}</p>\n\n      <div class=\"grid mt-3\">\n        @for (module of course.modules; track module.id) {\n        <div class=\"col-12 md:col-6\">\n          <p-panel [toggleable]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"flex align-items-center gap-2 w-full\">\n                <i class=\"pi pi-list\"></i>\n                <span class=\"font-bold white-space-nowrap\">{{ module.title }} {{ module.name }}</span>\n                <span class=\"text-sm text-color-secondary ml-auto\">{{ module.lessonCount }} lessons</span>\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <p>{{ module.description }}</p>\n              <ul class=\"list-none p-0 m-0 lessons-list\">\n                @for (lesson of module.lessons; track lesson.id) {\n                <li class=\"flex align-items-center justify-content-between p-2 border-bottom-1 surface-border\">\n                  <div class=\"flex align-items-center gap-2\">\n                    @if(lesson.generated) {\n                    <i class=\"pi pi-play-circle text-green-500\"></i>\n                    } @else {\n                    <i class=\"pi pi-lock text-gray-500\"></i>\n                    }\n                    <span>{{ lesson.title }} {{ lesson.name }}</span>\n                  </div>\n                  @if(lesson.generated) {\n                  <p-button icon=\"pi pi-chevron-right\" [text]=\"true\" [rounded]=\"true\"></p-button>\n                  } @else {\n                  <p-button label=\"Generate\" icon=\"pi pi-cog\" [text]=\"true\" size=\"small\"></p-button>\n                  }\n                </li>\n                }\n              </ul>\n            </ng-template>\n          </p-panel>\n        </div>\n        }\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"footer\">\n      <div class=\"flex justify-content-end\">\n        <p-button label=\"Generate Pending Lessons\" icon=\"pi pi-cogs\" (onClick)=\"generatePendingLessons()\" [loading]=\"generatingLessons()\"></p-button>\n      </div>\n    </ng-template>\n  </p-card>\n</div>\n} @else {\n<div class=\"flex justify-content-center align-items-center h-full\">\n  <p-progressSpinner></p-progressSpinner>\n</div>\n}\n", styles: [":host{display:block;height:100%}.course-detail-container{max-width:960px;margin:auto}.lessons-list li:last-child{border-bottom:none!important}.modules-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem}.modules-container .p-panel{flex:0 0 48%;max-width:48%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i3$3.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "id", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: TagModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseDetailComponent, decorators: [{
             type: Component,
@@ -2658,7 +2804,7 @@ class CourseFormComponent extends EntityBaseFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseFormComponent, isStandalone: true, selector: "app-source-form", outputs: { onSave: "onSave" }, usesInheritance: true, ngImport: i0, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"form\">\n      <div class=\"form-field\">\n        <label for=\"baseLang\">Base Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"baseLang\"\n          [options]=\"languageOptions\"\n          [filter]=\"true\"\n          formControlName=\"baseLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"targetLang\">Target Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"targetLang\"\n          [filter]=\"true\"\n          [options]=\"languageOptions\"\n          formControlName=\"targetLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div style=\"display: flex; gap: 10px\">\n        <div class=\"form-field\">\n          <label class=\"block\" pTooltip=\"Image should be handle after upload\">Subir imagen</label>\n          <img width=\"218px\" src=\"assets/images/face-3.jpg\" />\n          <dc-cropper-modal [imgStorageSettings]=\"storageImgSettings\" (imageUploaded)=\"handleImageUpload($event)\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"5\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div>\n      @if (entity()?.modules?.length > 0) {\n      <p-message severity=\"info\"\n        >El curso ya tiene modulos,\n\n        <a routerLink=\"../../details/{{ entity()?.id }}\"> <p-button icon=\"pi pi-eye\" label=\"Ver a los detalles\" [link]=\"true\"></p-button></a>\n      </p-message>\n      } @else {\n      <p-message severity=\"warn\">Este curso no tiene modulos intentega generalos abajo.</p-message>\n      }\n    </div>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button\n        (click)=\"generateCourse()\"\n        label=\"Generate Course\"\n        [disabled]=\"!form.controls['baseLang'].valid || !form.controls['targetLang'].valid\"\n        icon=\"pi pi-sparkles\"\n        iconPos=\"right\"\n        styleClass=\"p-button-secondary\"></p-button>\n      <p-button (click)=\"save()\" label=\"Save Course\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.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"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseFormComponent, isStandalone: true, selector: "app-source-form", outputs: { onSave: "onSave" }, usesInheritance: true, ngImport: i0, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"form\">\n      <div class=\"form-field\">\n        <label for=\"baseLang\">Base Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"baseLang\"\n          [options]=\"languageOptions\"\n          [filter]=\"true\"\n          formControlName=\"baseLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"targetLang\">Target Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"targetLang\"\n          [filter]=\"true\"\n          [options]=\"languageOptions\"\n          formControlName=\"targetLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div style=\"display: flex; gap: 10px\">\n        <div class=\"form-field\">\n          <label class=\"block\" pTooltip=\"Image should be handle after upload\">Subir imagen</label>\n          <img width=\"218px\" src=\"assets/images/face-3.jpg\" />\n          <dc-cropper-modal [imgStorageSettings]=\"storageImgSettings\" (imageUploaded)=\"handleImageUpload($event)\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"5\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div>\n      @if (entity()?.modules?.length > 0) {\n      <p-message severity=\"info\"\n        >El curso ya tiene modulos,\n\n        <a routerLink=\"../../details/{{ entity()?.id }}\"> <p-button icon=\"pi pi-eye\" label=\"Ver a los detalles\" [link]=\"true\"></p-button></a>\n      </p-message>\n      } @else {\n      <p-message severity=\"warn\">Este curso no tiene modulos intentega generalos abajo.</p-message>\n      }\n    </div>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button\n        (click)=\"generateCourse()\"\n        label=\"Generate Course\"\n        [disabled]=\"!form.controls['baseLang'].valid || !form.controls['targetLang'].valid\"\n        icon=\"pi pi-sparkles\"\n        iconPos=\"right\"\n        styleClass=\"p-button-secondary\"></p-button>\n      <p-button (click)=\"save()\" label=\"Save Course\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.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"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, decorators: [{
             type: Component,
@@ -2706,7 +2852,7 @@ const COURSES_ROUTES = [
 class CoursesComponent {
     static { this.routes = COURSES_ROUTES; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: CoursesComponent, isStandalone: true, selector: "app-courses", ngImport: i0, template: "<router-outlet />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: CoursesComponent, isStandalone: true, selector: "app-courses", ngImport: i0, template: "<router-outlet />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesComponent, decorators: [{
             type: Component,
@@ -2721,5 +2867,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ComponentBuilder, ComponentWithForm, CourseDetailComponent, CourseFormComponent, CourseListComponent, CourseService, CoursesAdminComponent, CoursesComponent, CoursesService, DCLessonEditorComponent, DCLessonFormComponent, DCLessonListComponent, DCLessonRendererComponent, DcLessonCardComponent, DefaultLessonsService, DynamicComponentBuilders, DynamicComponents, DynamicComponentsService, FlagLanguagePipe, LESSONS_TOKEN, LangCodeDescription, LangCodeDescriptionEs, LessonComponentBuilders, LessonComponentEnum, LessonComponents, LessonConversationService, LessonDynamicComponent, LessonRendererService, LessonsV2Component, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLanguageSimpleAgent, getLessonComponentClass, provideLessonsService, provideNotionService };
+export { ComponentBuilder, ComponentWithForm, CourseDetailComponent, CourseFormComponent, CourseListComponent, CourseService, CoursesAdminComponent, CoursesComponent, CoursesService, DCLessonEditorComponent, DCLessonFormComponent, DCLessonListComponent, DCLessonRendererComponent, DcLessonCardComponent, DefaultDynamicComponentBuilders, DefaultDynamicComponents, DefaultLessonsService, DynamicComponentsRegisterService, FlagLanguagePipe, LESSONS_TOKEN, LangCodeDescription, LangCodeDescriptionEs, LessonComponentBuilders, LessonComponentEnum, LessonComponents, LessonConversationService, LessonDynamicComponent, LessonRendererService, LessonsV2Component, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLanguageSimpleAgent, getLessonComponentClass, provideLessonsService, provideNotionService };
 //# sourceMappingURL=dataclouder-ngx-lessons.mjs.map