@dataclouder/ngx-lessons 0.0.34 → 0.0.35

package/fesm2022/dataclouder-ngx-lessons.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ChangeDetectionStrategy, signal, InjectionToken, Pipe, EventEmitter, Output, ViewChildren, Inject, inject, Injectable, input, Renderer2, ViewContainerRef, computed, effect, ViewChild } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, signal, InjectionToken, Pipe, EventEmitter, Output, ViewChildren, Inject, inject, Injectable, input, Renderer2, ViewContainerRef, computed, effect, ViewChild, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, UntypedFormControl, FormsModule, ReactiveFormsModule, Validators, FormGroup } from '@angular/forms';
 import * as i4 from 'primeng/inputtext';
@@ -21,7 +21,7 @@ import { DatePipe, NgComponentOutlet, KeyValuePipe, CommonModule } from '@angula
 import * as i1$2 from '@angular/router';
 import { RouterModule, ActivatedRoute, Router } from '@angular/router';
 import * as i4$2 from '@dataclouder/ngx-core';
-import { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent, QuickTableComponent, LoadingBarService, HttpCoreService } from '@dataclouder/ngx-core';
+import { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent, QuickTableComponent, LoadingBarService, HttpCoreService, PromptService } from '@dataclouder/ngx-core';
 import { PopoverModule } from 'primeng/popover';
 import * as i4$1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
@@ -42,10 +42,13 @@ import { ResolutionType, AspectType, CropperComponentModal } from '@dataclouder/
 import { TextEngines, ConversationType, USER_DATA_EXCHANGE, ChatRole, EvalResultStringDefinition, DCChatComponent, CONVERSATION_AI_TOKEN } from '@dataclouder/ngx-agent-cards';
 import * as i2$4 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
+import * as i7 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
 import TurndownService from 'turndown';
 import { marked } from 'marked';
 import * as i5$1 from 'primeng/inputgroup';
 import { InputGroupModule } from 'primeng/inputgroup';
+import { NgxVertexService, ChatRoleVertex } from '@dataclouder/ngx-vertex';
 import * as i2$6 from 'primeng/api';
 
 class ComponentBuilder {
@@ -573,23 +576,26 @@ You incorporate visual dividers to separate major content sections
 
 When responding to requests, you'll first understand the subject matter, then organize it into a logical structure with clear headings, appropriate formatting elements, and helpful visual enhancements. Your goal is always to create content that's not only informative but also visually engaging and accessible to all readers.
 `;
-const EnglishLessonSkill = `
+const UserRequirements = `
+  User also can provide additional instructions or requirements for the lesson or current lesson to improve it.
+`;
+const LanguageLessonSkill = (langBase, langTarget) => `
 
-You are also an English lesson professor, you write lessons for Spanish learners.
-explain the best you can will all your experience teaching. 
+You are also a ${langTarget} lesson professor, you write lessons for ${langBase} learners.
+explain the best you can will all your experience teaching.
 
 You can infer the level of the lesson from the content or user request, so can increase difficulty
 
-For Basic Level: generate an English lesson for Spanish learners at a basic level (A1-A2).
+For Basic Level: generate a ${langTarget} lesson for ${langBase} learners at a basic level (A1-A2).
 
 Include:
 
 - Simple dialogues or short texts.
-- Key vocabulary with simple definitions or Spanish translations.
+- Key vocabulary with simple definitions or ${langBase} translations.
 - Basic grammar points explained simply (e.g., "to be" verb, simple present).
 - Practice exercises (e.g., fill-in-the-blanks, simple questions).
 
-For Intermediate Level: generate an English lesson for Spanish learners at a medium level (B1-B2).
+For Intermediate Level: generate a ${langTarget} lesson for ${langBase} learners at a medium level (B1-B2).
 
 Include:
 
@@ -599,7 +605,7 @@ Include:
 - Exercises that require more detailed responses or understanding.
 - The content should be engaging and cover topics relevant to daily life, work, or hobbies.
 
-For Advanced Level: generate an English lesson for Spanish learners at an advanced level (C1-C2).
+For Advanced Level: generate a ${langTarget} lesson for ${langBase} learners at an advanced level (C1-C2).
 
 Include:
 
@@ -608,19 +614,17 @@ Include:
 - Exploration of complex grammar or stylistic points.
 - Exercises that encourage critical thinking, debate, or detailed writing.
 - The content should be stimulating and cover a wide range of topics, including academic or professional contexts.
-
 `;
-const UserRequirements = `
-  User also can provide additional instructions or requirements for the lesson or current lesson to improve it.
-`;
-const BasicAgentCard$1 = {
-    systemPrompt: `
-  ${MarkdownWriterSkill}
-  ${EnglishLessonSkill}
-  ${UserRequirements}
-  
-`,
-    model: { id: 'gemini-2.5-flash-preview-04-17', provider: 'google' },
+const getLanguageSimpleAgent = (langBase, langTarget) => {
+    return {
+        systemPrompt: `
+    ${MarkdownWriterSkill}
+    ${LanguageLessonSkill(langBase, langTarget)}
+    ${UserRequirements}
+
+  `,
+        model: { id: 'gemini-2.5-flash-preview-04-17', provider: 'google' },
+    };
 };
 
 var EventCard;
@@ -633,6 +637,7 @@ var EventCard;
 class DcLessonCardComponent {
     constructor() {
         this.showOptions = true;
+        this.cardHeight = '200px';
         this.onAction = new EventEmitter();
         this.coverUrl = 'assets/background/default-background.webp';
         this.eventType = EventCard;
@@ -662,9 +667,7 @@ class DcLessonCardComponent {
     }
     ngOnInit() {
         console.log(this.lesson);
-        if (this.lesson?.media?.images[0]?.url) {
-            this.coverUrl = this.lesson.media.images[0].url;
-        }
+        this.coverUrl = this.lesson?.banner?.url || this.lesson?.media?.images?.[0]?.url || 'assets/background/default-background.webp';
     }
     eventCard(eventType) {
         switch (eventType) {
@@ -683,15 +686,17 @@ class DcLessonCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DcLessonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", showOptions: "showOptions" }, 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  }\n  <p-card>\n    <div class=\"lesson-card\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson.title }}</h1>\n        <p>{{ lesson.description }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\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=\"info\" value=\"\uD83D\uDCD6\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div class=\"actions\">\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}.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}.description p{margin-bottom:1rem;flex-grow:1}.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}.actions ::ng-deep .p-button{font-size:.9rem}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$2.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: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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  }\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.createdDate | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson.title }}</h1>\n        <p>{{ lesson.description }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\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            }\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}.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}.description p{margin-bottom:1rem;flex-grow:1;font-weight:600}.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: "pipe", type: DatePipe, name: "date" }, { 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$2.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: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", 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  }\n  <p-card>\n    <div class=\"lesson-card\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson.title }}</h1>\n        <p>{{ lesson.description }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\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=\"info\" value=\"\uD83D\uDCD6\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div class=\"actions\">\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}.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}.description p{margin-bottom:1rem;flex-grow:1}.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}.actions ::ng-deep .p-button{font-size:.9rem}\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  }\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.createdDate | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson.title }}</h1>\n        <p>{{ lesson.description }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\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            }\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}.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}.description p{margin-bottom:1rem;flex-grow:1;font-weight:600}.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: [{
                 type: Input
+            }], cardHeight: [{
+                type: Input
             }], onAction: [{
                 type: Output
             }] } });
@@ -1284,9 +1289,9 @@ class DCLessonRendererComponent {
     handleGoalCompleted(event) {
         console.log('Goal completed:', event);
         const lesson = this.lesson();
-        const dummy = { id: lesson.id, goalCompleted: null, score: 100, status: 'finished', lastAccess: new Date() };
-        // TODO: finish this implementation
+        const dummy = { id: lesson.id, goalCompleted: true, score: 100, status: 'finished', lastAccess: new Date() };
         this.lessonService.saveTakenLesson(dummy);
+        this.toastrService.success({ subtitle: '¡Has completado la lección! , pero puedes seguir conversando', title: '¡Muy bien, guardaremos tu progreso!' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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 }, test: { classPropertyName: "test", publicName: "test", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dynamicLesson", first: true, predicate: ["dynamicLesson"], descendants: true, static: true }], ngImport: i0, template: "<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\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(chatVisible()) {\n<p-drawer header=\"Conversation\" [visible]=\"chatVisible()\" (visibleChange)=\"onVisibleChange($event)\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat [appAgentTask]=\"evalAgentTask()\" [conversationSettings]=\"conversationSettings()\" (goalCompleted)=\"handleGoalCompleted($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: [".evaluate{float:right}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "agentCard", "evaluatorAgentCard", "appAgentTask", "parseDict"], outputs: ["sendMessage", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$4.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"] }] }); }
@@ -1464,6 +1469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             type: Injectable
         }] });
 
+// import { UserDataExchangeService } from '@dataclouder/ngx-agent-cards';
 class LessonUtilsService {
     constructor() {
         this.#lessonService = inject(LESSONS_TOKEN);
@@ -1486,15 +1492,6 @@ class LessonUtilsService {
         }
         // Placeholder logic - adapt as needed from original component
         console.log('Validating audios for lesson:', lesson.id);
-        // Original logic commented out - requires SpeakerCompConfiguration type
-        // const needsGeneration = lesson.components.some((component: any) => // Use 'any' or define SpeakerCompConfiguration
-        //   component.component === 'speaker' && component.settings?.voice && !component.audio
-        // );
-        // if (needsGeneration) {
-        //   this.#toastService.warn({ title: 'Audios por generar', subtitle: 'Se encontraron audios pendientes' });
-        //   // Consider calling generation service here or returning a flag
-        //   // this.#lessonService.generateAudiosForLesson(lesson.id).then(res => { ... });
-        // }
     }
     /**
      * Updates the lesson signal with a new cover image.
@@ -1544,7 +1541,9 @@ class LessonUtilsService {
         });
         // Note: Saving the lesson should be triggered from the component after calling this.
     }
+    // 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.
@@ -1589,18 +1588,10 @@ class LessonUtilsService {
         }
         try {
             this.loadingBarService.showIndeterminate();
-            const agentCard = BasicAgentCard$1;
-            let task = `Improve the following lesson return only the lesson markdown: ${markdownText}`;
-            if (lesson.prompt) {
-                task = `${task} Also consider the original prompt: ${lesson.prompt} when improving the lesson.`;
-            }
-            const appTask = { task: task };
-            const messages = [
-                { content: agentCard.systemPrompt, role: ChatRole.System },
-                { content: appTask.task, role: ChatRole.User },
-            ];
-            const response = await this.#agentService.callChatCompletion({ messages, model: agentCard.model });
-            let improvedMarkdown = response.content;
+            const textPrompt = this.#lessonService.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```';
@@ -1649,22 +1640,9 @@ class LessonUtilsService {
                 this.#toastService.warn({ title: 'Texto Vacío', subtitle: 'No se pudo extraer texto útil del contenido de la lección.' });
                 return null;
             }
-            const agentCard = BasicAgentCard$1; // Use the same agent card for consistency
-            // Craft the prompt specifically for description generation
-            // TODO: languages shoudl be in Target language, not hardcoded
-            const languageDescription = LangCodeDescription[lesson?.baseLang] || 'Spanish';
-            const task = `Generate a concise and engaging description (max 3-5 sentences, ~250 characters) for a language lesson based on the following content summary. 
-      Focus on the key learning points or topic. Return ONLY the description text, without any labels or markdown formatting:
-      and the description should be in ${languageDescription}.
-      \n\n${plainTextContent.substring(0, 1500)}`; // Limit input text length
-            const appTask = { task: task };
-            const messages = [
-                { content: agentCard.systemPrompt, role: ChatRole.System },
-                // Optional: Add a more specific system message for description generation if needed
-                // { content: "You are an AI assistant specialized in creating brief, compelling descriptions for educational language lessons.", role: ChatRole.System },
-                { content: appTask.task, role: ChatRole.User },
-            ];
-            const response = await this.#agentService.callChatCompletion({ messages, model: agentCard.model }); // Use the model defined in BasicAgentCard
+            const descriptionPrompt = this.#lessonService.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('"')) {
@@ -1755,7 +1733,6 @@ class LessonUtilsService {
                 orphanedIds.push(componentId);
             }
         }
-        // Log a warning if any orphaned components were found
         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({
@@ -1823,6 +1800,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Output
             }] } });
 
+// TODO @DEPRECATED in favor to lesson appingles prompts. for english.
+const PROMPTS = {
+    generateLesson: ``,
+    GetImageSuggestion: ``,
+};
+const getImageSuggestion = (language, lessonTopic) => `
+Create a prompt  for a visually engaging banner image for a language learning app. The image should:
+
+- Feature vibrant colors and clean design that draws attention
+- Include subtle visual elements representing language learning (books, speech bubbles, or writing implements)
+- Incorporate one or more of the following focal elements:
+  * A friendly animal character (like an owl, fox, or parrot) that could serve as a mascot
+  * A scenic landscape that represents cultural context (like iconic landmarks or natural settings)
+  * Key objects that relate to the specific lesson topics
+- Have a balanced composition with room for text overlay
+- Evoke a sense of curiosity and learning
+- Use a modern, minimalist art style with defined shapes
+
+The banner relates to lessons about ${lessonTopic}, this lesson is to learn ${language}.
+
+return only the text for the description, no explanation, no comments, just the prompt to directly generate the image
+`;
+const getPromptGenerateLesson = (baseLang, targetLang, lessonTopic, aditionalPrompt) => `
+Create a prompt for a Lesson for a language learning app. 
+ - the topic is ${lessonTopic}, 
+ - the language to learn is ${targetLang}
+ - the lesson is for beginners
+ - write lesson in ${baseLang}, but show a lot of vocabulary in ${targetLang}
+ - create sections
+ - use markdown to format it, sections and titles 
+ - Create exercises for each section
+ 
+${aditionalPrompt}
+`;
+
 class DCLessonMetadataEditorComponent {
     constructor() {
         // Use signal for input lesson data
@@ -1833,22 +1845,50 @@ class DCLessonMetadataEditorComponent {
         this.importNotionRequest = new EventEmitter();
         this.improveNotionRequest = new EventEmitter();
         // Removed generateAIRequest Output as it's handled internally now
-        // Output for property changes
-        this.propertyChange = new EventEmitter(); // To update parent signal
+        // Output removed as the component now updates the input signal directly.
+        // @Output() propertyChange = new EventEmitter<{ propertyPath: string; value: any }>();
         // Injected Services
         this.#lessonUtilsService = inject(LessonUtilsService);
         this.#toastService = inject(TOAST_ALERTS_TOKEN);
         this.#lessonService = inject(LESSONS_TOKEN);
         this.#turndownService = new TurndownService(); // Instantiate TurndownService
     }
+    // Removed generateAIRequest Output as it's handled internally now
+    // Output removed as the component now updates the input signal directly.
+    // @Output() propertyChange = new EventEmitter<{ propertyPath: string; value: any }>();
     // Injected Services
     #lessonUtilsService;
     #toastService;
     #lessonService;
     #turndownService; // Instantiate TurndownService
-    // Method to emit property changes, called by ngModelChange in the template
-    onPropertyChange(property, value) {
-        this.propertyChange.emit({ property, value });
+    // Method to handle property changes for ROOT properties (e.g., level)
+    onRootPropertyChange(property, value) {
+        this.lesson.update((current) => {
+            if (!current)
+                return undefined;
+            // Avoid updating metadata directly here
+            if (property === 'metadata') {
+                console.warn('Direct metadata updates should use onMetadataPropertyChange');
+                return current;
+            }
+            return { ...current, [property]: value };
+        });
+        // Emit removed - signal is updated directly above.
+        // this.propertyChange.emit({ propertyPath: property, value });
+    }
+    // Method to handle property changes for METADATA properties
+    onMetadataPropertyChange(property, value) {
+        this.lesson.update((current) => {
+            if (!current)
+                return undefined;
+            // Ensure metadata object exists and update the specific property
+            // Note: Ensure ContentMetadata interface is imported or defined locally if not already.
+            // Assuming ContentMetadata is imported from '../../lesson-mini-components/components/lessons.clases'
+            const updatedMetadata = { ...(current.metadata ?? {}), [property]: value };
+            return { ...current, metadata: updatedMetadata };
+        });
+        // Emit removed - signal is updated directly above.
+        // this.propertyChange.emit({ propertyPath: `metadata.${String(property)}`, value });
     }
     // Methods to emit action requests
     emitSaveRequest() {
@@ -1865,48 +1905,51 @@ class DCLessonMetadataEditorComponent {
      * Moved from DCLessonEditorComponent.
      */
     async generateByAI() {
-        const currentLessonValue = this.lesson(); // Get current value
-        if (!currentLessonValue?.id) {
+        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.set(true);
         try {
-            // Ensure latest changes are saved before generating
-            // Clean orphaned components before saving (using the injected service)
-            const lessonToSave = this.#lessonUtilsService.cleanOrphanedComponents(currentLessonValue);
-            const savedLesson = await this.#lessonService.postLesson(lessonToSave);
-            if (!savedLesson) {
-                // Handle save error - toast is shown in saveLesson (assuming postLesson shows toast on error)
-                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');
-            }
-            // Update the signal with the saved lesson data before proceeding
-            this.lesson.set(savedLesson);
-            const rawHtmlContent = savedLesson.textCoded || '';
+            const rawHtmlContent = currentLesson.textCoded || '';
             if (!rawHtmlContent) {
-                console.warn('No HTML content found in lesson to process.');
-                this.isLoadingLesson.set(false);
-                return; // Exit if no content
-            }
-            // 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);
-            if (improvedMarkdown) {
-                // Convert the improved Markdown back to HTML before setting it
-                const improvedHtml = marked(improvedMarkdown);
-                // Update the signal directly
-                this.lesson.update((current) => (current ? { ...current, textCoded: improvedHtml } : undefined));
-                // Save the AI-generated content
-                await this.#lessonService.postLesson(this.lesson());
-                this.#toastService.success({ title: 'Contenido generado', subtitle: 'Se generó y guardó el contenido con IA.' });
+                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' });
+                // this.us
+                // Use metadata description, provide empty string if metadata or description is missing
+                const prompt = getPromptGenerateLesson('portugues', 'espanhol', currentLesson.metadata?.description ?? '', '');
+                debugger;
+                await this.#lessonUtilsService.generateByAI(currentLesson.id);
             }
             else {
-                // Toast error is handled by the service
-                throw new Error('AI generation failed or lesson fetch failed after generation.');
+                // Clean orphaned and Save before Improve
+                const lessonToSave = this.#lessonUtilsService.cleanOrphanedComponents(currentLesson);
+                const savedLesson = await this.#lessonService.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.set(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);
+                if (improvedMarkdown) {
+                    // Convert the improved Markdown back to HTML before setting it
+                    const improvedHtml = marked(improvedMarkdown);
+                    // Update the signal directly
+                    this.lesson.update((current) => (current ? { ...current, textCoded: improvedHtml } : undefined));
+                    // Save the AI-generated content
+                    await this.#lessonService.postLesson(this.lesson());
+                    this.#toastService.success({ title: 'Contenido generado', subtitle: 'Se generó y guardó el contenido con IA.' });
+                }
+                else {
+                    // Toast error is handled by the service
+                    throw new Error('AI generation failed or lesson fetch failed after generation.');
+                }
             }
         }
         catch (error) {
@@ -1952,13 +1995,12 @@ class DCLessonMetadataEditorComponent {
         }
         const generatedDescription = await this.#lessonUtilsService.generateDescriptionWithAI(currentLesson);
         if (generatedDescription) {
-            // Use the existing propertyChange emitter to update the parent signal
-            this.onPropertyChange('description', generatedDescription);
-            // this.emitSaveRequest(); // optional do something to automatically save
+            // Use the new method for metadata properties
+            this.onMetadataPropertyChange('description', generatedDescription);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonMetadataEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCLessonMetadataEditorComponent, isStandalone: true, selector: "dc-lesson-metadata-editor", inputs: { lesson: "lesson", isLoadingLesson: "isLoadingLesson" }, outputs: { saveRequest: "saveRequest", importNotionRequest: "importNotionRequest", improveNotionRequest: "improveNotionRequest", propertyChange: "propertyChange" }, ngImport: i0, template: "@if (lesson(); as currentLesson) {\n<div>\n  <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    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.title\"\n        (ngModelChange)=\"onPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input\n          pInputText\n          style=\"width: 100%\"\n          [ngModel]=\"currentLesson.description\"\n          (ngModelChange)=\"onPropertyChange('description', $event)\"\n          type=\"text\"\n          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\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.prompt\"\n        (ngModelChange)=\"onPropertyChange('prompt', $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    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.isPublished\"\n          (ngModelChange)=\"onPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.level\"\n        (ngModelChange)=\"onPropertyChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n    </div>\n\n    <!-- Access signal values -->\n    <div style=\"margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)\">\n      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden\n      {{ currentLesson.targetLang | langDesc : 'es' }}\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: // Added TooltipModule
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCLessonMetadataEditorComponent, isStandalone: true, selector: "dc-lesson-metadata-editor", inputs: { lesson: "lesson", isLoadingLesson: "isLoadingLesson" }, outputs: { saveRequest: "saveRequest", importNotionRequest: "importNotionRequest", improveNotionRequest: "improveNotionRequest" }, ngImport: i0, template: "@if (lesson(); as currentLesson) {\n<div>\n  <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    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.metadata?.title\"\n        (ngModelChange)=\"onMetadataPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input\n          pInputText\n          style=\"width: 100%\"\n          [ngModel]=\"currentLesson.metadata?.description\"\n          (ngModelChange)=\"onMetadataPropertyChange('description', $event)\"\n          type=\"text\"\n          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\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.metadata?.prompt\"\n        (ngModelChange)=\"onMetadataPropertyChange('prompt', $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    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.metadata?.isPublished\"\n          (ngModelChange)=\"onMetadataPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.level\"\n        (ngModelChange)=\"onRootPropertyChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n    </div>\n\n    <!-- Access signal values -->\n    <div style=\"margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)\">\n      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden\n      {{ currentLesson.targetLang | langDesc : 'es' }}\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: // Added TooltipModule
                 FlagLanguagePipe, name: "flagEmoji" }, { kind: "pipe", type: // Added Pipe
                 LangDescTranslationPipe, name: "langDesc" }, { kind: "ngmodule", type: // Added Pipe
                 InputGroupModule }, { kind: "component", type: i5$1.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["style", "styleClass"] }] }); }
@@ -1974,7 +2016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         FlagLanguagePipe, // Added Pipe
                         LangDescTranslationPipe, // Added Pipe
                         InputGroupModule,
-                    ], template: "@if (lesson(); as currentLesson) {\n<div>\n  <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    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.title\"\n        (ngModelChange)=\"onPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input\n          pInputText\n          style=\"width: 100%\"\n          [ngModel]=\"currentLesson.description\"\n          (ngModelChange)=\"onPropertyChange('description', $event)\"\n          type=\"text\"\n          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\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.prompt\"\n        (ngModelChange)=\"onPropertyChange('prompt', $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    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.isPublished\"\n          (ngModelChange)=\"onPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.level\"\n        (ngModelChange)=\"onPropertyChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n    </div>\n\n    <!-- Access signal values -->\n    <div style=\"margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)\">\n      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden\n      {{ currentLesson.targetLang | langDesc : 'es' }}\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n" }]
+                    ], template: "@if (lesson(); as currentLesson) {\n<div>\n  <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    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.metadata?.title\"\n        (ngModelChange)=\"onMetadataPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input\n          pInputText\n          style=\"width: 100%\"\n          [ngModel]=\"currentLesson.metadata?.description\"\n          (ngModelChange)=\"onMetadataPropertyChange('description', $event)\"\n          type=\"text\"\n          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\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.metadata?.prompt\"\n        (ngModelChange)=\"onMetadataPropertyChange('prompt', $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    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.metadata?.isPublished\"\n          (ngModelChange)=\"onMetadataPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.level\"\n        (ngModelChange)=\"onRootPropertyChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n    </div>\n\n    <!-- Access signal values -->\n    <div style=\"margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)\">\n      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden\n      {{ currentLesson.targetLang | langDesc : 'es' }}\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n" }]
         }], propDecorators: { lesson: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1987,10 +2029,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Output
             }], improveNotionRequest: [{
                 type: Output
-            }], propertyChange: [{
-                type: Output
             }] } });
 
+// Define placeholder endpoints - these should be configured appropriately
+const LESSONS_BASE_PATH = 'api/lesson'; // Example base path
+class DefaultLessonsService {
+    constructor() {
+        this.httpCoreService = inject(HttpCoreService);
+        // --- Endpoint Definitions (Hardcoded as requested) ---
+        this.endpoints = {
+            queryLessons: `${LESSONS_BASE_PATH}/query`,
+            getLesson: (id) => `${LESSONS_BASE_PATH}/${id}`,
+            saveLesson: `api/user/saveLesson`,
+            updateLesson: (id) => `${LESSONS_BASE_PATH}/${id}`, // Assuming PUT to /lessons/:id
+            deleteLesson: (id) => `${LESSONS_BASE_PATH}/${id}`, // Assuming DELETE to /lessons/:id
+            generateLesson: `${LESSONS_BASE_PATH}/generate`, // Placeholder
+            generateByAI: `${LESSONS_BASE_PATH}/generate-ai`, // Placeholder
+            improveMDWithAI: `${LESSONS_BASE_PATH}/improve-markdown-ai`, // Placeholder
+            QueryLessons: 'api/lesson/query',
+            Lesson: 'api/lesson',
+            SaveLesson: 'api/lesson-polilan',
+            GetPublicLessons: 'api/lesson/publicLessons',
+            GetUnpublishedLessons: 'api/lesson/unpublished',
+            TakenLesson: 'api/lesson/taken',
+            DeleteLesson: 'api/lesson',
+            Base: 'api/lesson',
+            GenerateBanner: 'api/lesson/generate-banner',
+        };
+    }
+    saveTakenLesson(lesson) {
+        // Not sure how to implement this yet.
+        return this.httpCoreService.post(this.endpoints.saveLesson, lesson);
+    }
+    // --- Method Implementations ---
+    async getLessons(paginator) {
+        // Assuming paginator is the body for a POST request based on the example
+        return this.httpCoreService.post(this.endpoints.queryLessons, paginator || {});
+    }
+    async getLesson(id) {
+        return this.httpCoreService.get(this.endpoints.getLesson(id));
+    }
+    async postLesson(lesson) {
+        return this.httpCoreService.post(this.endpoints.saveLesson, lesson);
+    }
+    async updateLesson(lesson) {
+        if (!lesson._id) {
+            throw new Error('Lesson ID is required for update.');
+        }
+        // Assuming _id is the identifier
+        return this.httpCoreService.put(this.endpoints.updateLesson(lesson._id), lesson);
+    }
+    async deleteLesson(id) {
+        return this.httpCoreService.delete(this.endpoints.deleteLesson(id));
+    }
+    async generateLesson(lesson) {
+        // This endpoint might need specific data or structure
+        return this.httpCoreService.post(this.endpoints.generateLesson, lesson);
+    }
+    async postGenerateByAI(id) {
+        return this.httpCoreService.post(this.endpoints.generateByAI, { id });
+    }
+    async postImproveMDWithAI(lessonId, markdownText) {
+        return this.httpCoreService.post(this.endpoints.improveMDWithAI, { id: lessonId, markdown: markdownText });
+    }
+    extractTextFromHtml(html) {
+        // Copied from src/app/core/data-services/lessons.service.ts
+        const r1 = new RegExp('~(.+?)~', 'g');
+        const lessonHtml = html.replace(r1, (_matching, jsonCoded) => {
+            try {
+                const data = JSON.parse(jsonCoded);
+                return `<span>${data?.settings?.text || ''}</span>`; // Added default empty string
+            }
+            catch (e) {
+                console.error('Error parsing JSON in extractTextFromHtml:', jsonCoded, e);
+                return ''; // Return empty string on error
+            }
+        });
+        // Remove HTML tags
+        let text = lessonHtml.replace(/<[^>]*>/g, ' ');
+        // Remove style and script content
+        text = text.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, ' ');
+        text = text.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, ' ');
+        // Decode HTML entities
+        text = text.replace(/&nbsp;/g, ' ');
+        text = text.replace(/&/g, '&');
+        text = text.replace(/</g, '<');
+        text = text.replace(/>/g, '>');
+        // Remove extra whitespace
+        text = text.replace(/\s+/g, ' ').trim();
+        return text;
+    }
+    generateBanner(prompt, lessonId) {
+        return this.httpCoreService.post(this.endpoints.GenerateBanner, { prompt, lessonId });
+    }
+    getPrompts() {
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class DCLessonEditorComponent {
     // Services
     #activatedRoute; // Re-inject as it's needed for navigation
@@ -1999,6 +2143,7 @@ class DCLessonEditorComponent {
     #router;
     #lessonService;
     #toastService;
+    #loadingBarService;
     constructor() {
         // Services
         this.#activatedRoute = inject(ActivatedRoute); // Re-inject as it's needed for navigation
@@ -2007,15 +2152,31 @@ class DCLessonEditorComponent {
         this.#router = inject(Router);
         this.#lessonService = inject(LESSONS_TOKEN);
         this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        this.#loadingBarService = inject(LoadingBarService);
+        this.defaultLessonsService = inject(DefaultLessonsService);
+        this.promptService = inject(PromptService);
+        this.agentChatService = inject(CONVERSATION_AI_TOKEN);
+        this.ngxVertexService = inject(NgxVertexService);
+        this.cdr = inject(ChangeDetectorRef);
         // Signals States
         this.lessonId = toSignal(inject(ActivatedRoute).paramMap.pipe(map((params) => params.get('id'))));
         this.lesson = signal(undefined); // Initialize as undefined
         this.isLoadingLesson = signal(false);
         // Computed Signals
         this.coverImageUrl = computed(() => {
+            // Priority Order 1 Metadata Banner, 2 Banner, 3 Media First Images, 4 Default Banner TODO: reveme banner after migration to Content
             const currentLesson = this.lesson();
-            const coverImage = currentLesson?.media?.images?.find((img) => img.type === 'cover');
-            return coverImage?.url || '/assets/images/default_banner.webp';
+            if (currentLesson?.metadata?.banner?.url) {
+                return currentLesson.metadata.banner.url;
+            }
+            else if (currentLesson?.banner?.url) {
+                return currentLesson.banner.url;
+            }
+            else if (currentLesson?.media?.images?.find((img) => img.type === 'cover')) {
+                // 3 Media First Images
+                return currentLesson.media.images.find((img) => img.type === 'cover')?.url;
+            }
+            return '/assets/images/default_banner.webp';
         });
         // Computed signal to get dynamic components as an array for easier iteration in the template
         this.dynamicComponentsArray = computed(() => {
@@ -2034,6 +2195,7 @@ class DCLessonEditorComponent {
             fileName: 'cover',
             cropSettings: { resizeToWidth: 850, aspectRatio: AspectType.RectangleLarge, resolutions: [ResolutionType.Medium] },
         };
+        this.promptsVisible = false;
         // Effect to fetch lesson data when ID changes
         effect(async () => {
             const id = this.lessonId();
@@ -2157,15 +2319,6 @@ class DCLessonEditorComponent {
         const newComponent = result?.obj;
         if (newComponent?.id) {
             console.log('Component builder closed, result received in editor:', newComponent);
-            // // Transform LessonComponentConfiguration to DynamicContentComponent
-            // const dynamicComponentToAdd: DynamicContentComponent = {
-            //   id: componentConfig.id,
-            //   component: componentConfig.component,
-            //   inputs: {
-            //     config: componentConfig, // Pass the original config object as an input named 'config'
-            //     // Add other potential inputs if needed based on component type later
-            //   },
-            // };
             // Update the lesson signal, adding the transformed component to the dynamicComponents object
             this.lesson.update((currentLesson) => {
                 if (!currentLesson)
@@ -2228,9 +2381,51 @@ class DCLessonEditorComponent {
     showComponentDetails(data) {
         alert('showComponentDetails' + JSON.stringify(data));
     }
+    async generateBanner() {
+        this.#toastService.info({ title: 'Generando prompt de sugerencia', subtitle: 'Por favor, espera' });
+        const prompt = getImageSuggestion('portugues', this.lesson().description);
+        const geminiRes = await this.ngxVertexService.generateText([{ role: ChatRoleVertex.User, content: prompt }]);
+        this.promptService
+            .openPrompt({
+            title: 'Generar Banner',
+            initialValue: geminiRes.content || '',
+            message: 'Ingresa una idea de lo que quieres ver',
+            acceptText: 'Generar',
+            cancelText: 'Cancelar',
+        })
+            .then((promptResult) => {
+            if (promptResult) {
+                this.#loadingBarService.showIndeterminate();
+                this.defaultLessonsService.generateBanner(promptResult, this.lessonId()).then((result) => {
+                    if (result) {
+                        this.updateLessonProperty('banner', result.banner);
+                    }
+                    this.#loadingBarService.successAndHide();
+                });
+            }
+        });
+        // const imagePrompt = prompt('alguna idea de lo que quieres ver?');
+        // this.#loadingBarService.showIndeterminate();
+        // const result = await this.defaultLessonsService.generateBanner(imagePrompt, this.lessonId());
+        // if (result) {
+        //   this.updateLessonProperty('banner', result.banner);
+        // }
+        // console.log('Generated banner:', result);
+        //
+        // this.#loadingBarService.successAndHide();
+    }
+    showPrompts() {
+        this.promptsVisible = true;
+        const promptsFn = this.#lessonService.getPrompts();
+        this.prompts = { banner: promptsFn.banner(this.lesson()), content: promptsFn.content(this.lesson()), description: promptsFn.description(this.lesson()) };
+        debugger;
+        console.log(this.prompts);
+        this.cdr.markForCheck();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", providers: [LessonNotionService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }, { propertyName: "dhtml", first: true, predicate: ["dhtml"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n</div>\n\n<br />\n\n<!-- Lesson Metadata Editor -->\n<dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\"\n  (propertyChange)=\"updateLessonProperty($event.property, $event.value)\">\n</dc-lesson-metadata-editor>\n\n<hr />\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>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button></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]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\" [test]=\"true\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\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}.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;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.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}\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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$6.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: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "test"] }, { 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: InputTextModule }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i5$2.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "style", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: DCLessonComponentAdderComponent, selector: "dc-lesson-component-adder", outputs: ["componentAdded"] }, { kind: "component", type: // Add the component adder here
-                DCLessonMetadataEditorComponent, selector: "dc-lesson-metadata-editor", inputs: ["lesson", "isLoadingLesson"], outputs: ["saveRequest", "importNotionRequest", "improveNotionRequest", "propertyChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", providers: [LessonNotionService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }, { propertyName: "dhtml", first: true, predicate: ["dhtml"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n\n  <p-button\n    (click)=\"generateBanner()\"\n    class=\"generate-banner-btn\"\n    icon=\"pi pi-sparkles\"\n    severity=\"primary\"\n    [rounded]=\"true\"\n    [raised]=\"true\"\n    pTooltip=\"Generar Banner AI\"\n    tooltipPosition=\"left\"></p-button>\n\n  <p-button class=\"prompt-visual\" icon=\"pi pi-info\" label=\"Ver Prompts\" [link]=\"true\" (click)=\"showPrompts()\" />\n</div>\n\n<br />\n\n<!-- Lesson Metadata Editor -->\n<dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\">\n</dc-lesson-metadata-editor>\n\n<hr />\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>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button></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]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\" [test]=\"true\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\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\n<div>\n  <h4>Aqui estan los prompts</h4>\n</div>\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}\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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$6.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: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "test"] }, { 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: InputTextModule }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i5$2.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "style", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: DCLessonComponentAdderComponent, selector: "dc-lesson-component-adder", outputs: ["componentAdded"] }, { kind: "component", type: // Add the component adder here
+                DCLessonMetadataEditorComponent, selector: "dc-lesson-metadata-editor", inputs: ["lesson", "isLoadingLesson"], outputs: ["saveRequest", "importNotionRequest", "improveNotionRequest"] }, { kind: "ngmodule", type: // Add the metadata editor here
+                DialogModule }, { kind: "component", type: i7.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
             type: Component,
@@ -2245,7 +2440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         TooltipModule,
                         DCLessonComponentAdderComponent, // Add the component adder here
                         DCLessonMetadataEditorComponent, // Add the metadata editor here
-                    ], providers: [LessonNotionService], template: "<div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n</div>\n\n<br />\n\n<!-- Lesson Metadata Editor -->\n<dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\"\n  (propertyChange)=\"updateLessonProperty($event.property, $event.value)\">\n</dc-lesson-metadata-editor>\n\n<hr />\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>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button></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]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\" [test]=\"true\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\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}.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;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.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}\n"] }]
+                        DialogModule,
+                    ], providers: [LessonNotionService], template: "<div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n\n  <p-button\n    (click)=\"generateBanner()\"\n    class=\"generate-banner-btn\"\n    icon=\"pi pi-sparkles\"\n    severity=\"primary\"\n    [rounded]=\"true\"\n    [raised]=\"true\"\n    pTooltip=\"Generar Banner AI\"\n    tooltipPosition=\"left\"></p-button>\n\n  <p-button class=\"prompt-visual\" icon=\"pi pi-info\" label=\"Ver Prompts\" [link]=\"true\" (click)=\"showPrompts()\" />\n</div>\n\n<br />\n\n<!-- Lesson Metadata Editor -->\n<dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\">\n</dc-lesson-metadata-editor>\n\n<hr />\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>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button></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]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\" [test]=\"true\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\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\n<div>\n  <h4>Aqui estan los prompts</h4>\n</div>\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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', { read: ViewContainerRef }]
@@ -2254,103 +2450,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 args: ['dhtml', { static: true }]
             }] } });
 
-// Define placeholder endpoints - these should be configured appropriately
-const LESSONS_BASE_PATH = 'api/lesson'; // Example base path
-class DefaultLessonsService {
-    constructor() {
-        this.httpCoreService = inject(HttpCoreService);
-        // --- Endpoint Definitions (Hardcoded as requested) ---
-        this.endpoints = {
-            queryLessons: `${LESSONS_BASE_PATH}/query`,
-            getLesson: (id) => `${LESSONS_BASE_PATH}/${id}`,
-            saveLesson: `api/user/saveLesson`,
-            updateLesson: (id) => `${LESSONS_BASE_PATH}/${id}`, // Assuming PUT to /lessons/:id
-            deleteLesson: (id) => `${LESSONS_BASE_PATH}/${id}`, // Assuming DELETE to /lessons/:id
-            generateLesson: `${LESSONS_BASE_PATH}/generate`, // Placeholder
-            generateByAI: `${LESSONS_BASE_PATH}/generate-ai`, // Placeholder
-            improveMDWithAI: `${LESSONS_BASE_PATH}/improve-markdown-ai`, // Placeholder
-            QueryLessons: 'api/lesson/query',
-            Lesson: 'api/lesson',
-            SaveLesson: 'api/lesson-polilan',
-            GetPublicLessons: 'api/lesson/publicLessons',
-            GetUnpublishedLessons: 'api/lesson/unpublished',
-            TakenLesson: 'api/lesson/taken',
-            DeleteLesson: 'api/lesson',
-            Base: 'api/lesson',
-        };
-    }
-    saveTakenLesson(lesson) {
-        // Not sure how to implement this yet.
-        return this.httpCoreService.post(this.endpoints.saveLesson, lesson);
-    }
-    // --- Method Implementations ---
-    async getLessons(paginator) {
-        // Assuming paginator is the body for a POST request based on the example
-        return this.httpCoreService.post(this.endpoints.queryLessons, paginator || {});
-    }
-    async getLesson(id) {
-        return this.httpCoreService.get(this.endpoints.getLesson(id));
-    }
-    async postLesson(lesson) {
-        return this.httpCoreService.post(this.endpoints.saveLesson, lesson);
-    }
-    async updateLesson(lesson) {
-        if (!lesson._id) {
-            throw new Error('Lesson ID is required for update.');
-        }
-        // Assuming _id is the identifier
-        return this.httpCoreService.put(this.endpoints.updateLesson(lesson._id), lesson);
-    }
-    async deleteLesson(id) {
-        return this.httpCoreService.delete(this.endpoints.deleteLesson(id));
-    }
-    async generateLesson(lesson) {
-        // This endpoint might need specific data or structure
-        return this.httpCoreService.post(this.endpoints.generateLesson, lesson);
-    }
-    async postGenerateByAI(id) {
-        return this.httpCoreService.post(this.endpoints.generateByAI, { id });
-    }
-    async postImproveMDWithAI(lessonId, markdownText) {
-        return this.httpCoreService.post(this.endpoints.improveMDWithAI, { id: lessonId, markdown: markdownText });
-    }
-    extractTextFromHtml(html) {
-        // Copied from src/app/core/data-services/lessons.service.ts
-        const r1 = new RegExp('~(.+?)~', 'g');
-        const lessonHtml = html.replace(r1, (_matching, jsonCoded) => {
-            try {
-                const data = JSON.parse(jsonCoded);
-                return `<span>${data?.settings?.text || ''}</span>`; // Added default empty string
-            }
-            catch (e) {
-                console.error('Error parsing JSON in extractTextFromHtml:', jsonCoded, e);
-                return ''; // Return empty string on error
-            }
-        });
-        // Remove HTML tags
-        let text = lessonHtml.replace(/<[^>]*>/g, ' ');
-        // Remove style and script content
-        text = text.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, ' ');
-        text = text.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, ' ');
-        // Decode HTML entities
-        text = text.replace(/&nbsp;/g, ' ');
-        text = text.replace(/&/g, '&');
-        text = text.replace(/</g, '<');
-        text = text.replace(/>/g, '>');
-        // Remove extra whitespace
-        text = text.replace(/\s+/g, ' ').trim();
-        return text;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 // This is the base class for all the components that are going to be used in the lessons.
 class LessonDynamicComponent {
     constructor() {
@@ -2378,5 +2477,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BasicAgentCard$1 as BasicAgentCard, ComponentBuilder, ComponentWithForm, DCLessonEditorComponent, DCLessonFormComponent, DCLessonListComponent, DCLessonRendererComponent, DcLessonCardComponent, DefaultLessonsService, FlagLanguagePipe, LESSONS_TOKEN, LangCodeDescription, LangCodeDescriptionEs, LangDescTranslationPipe, LessonComponentBuilders, LessonComponentEnum, LessonComponents, LessonDynamicComponent, LessonsAbstractService, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLessonComponentClass, provideLessonsService, provideNotionService };
+export { ComponentBuilder, ComponentWithForm, DCLessonEditorComponent, DCLessonFormComponent, DCLessonListComponent, DCLessonRendererComponent, DcLessonCardComponent, DefaultLessonsService, FlagLanguagePipe, LESSONS_TOKEN, LangCodeDescription, LangCodeDescriptionEs, LangDescTranslationPipe, LessonComponentBuilders, LessonComponentEnum, LessonComponents, LessonDynamicComponent, LessonsAbstractService, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLanguageSimpleAgent, getLessonComponentClass, provideLessonsService, provideNotionService };
 //# sourceMappingURL=dataclouder-ngx-lessons.mjs.map