@dataclouder/ngx-lessons 0.0.33 → 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';
@@ -20,9 +20,11 @@ import { PaginatorModule } from 'primeng/paginator';
 import { DatePipe, NgComponentOutlet, KeyValuePipe, CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/router';
 import { RouterModule, ActivatedRoute, Router } from '@angular/router';
-import * as i4$1 from '@dataclouder/ngx-core';
-import { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent, QuickTableComponent, LoadingBarService } from '@dataclouder/ngx-core';
+import * as i4$2 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';
 import * as i2$2 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
 import * as i3 from 'primeng/card';
@@ -32,16 +34,21 @@ import { map } from 'rxjs';
 import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
 import * as i3$1 from '@ckeditor/ckeditor5-angular';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
-import * as i5$1 from 'primeng/splitter';
+import * as i5$2 from 'primeng/splitter';
 import { SplitterModule } from 'primeng/splitter';
 import * as i2$5 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import { ResolutionType, AspectType, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
-import { TextEngines, ConversationType, USER_DATA_EXCHANGE, ChatRole, DCChatComponent, CONVERSATION_AI_TOKEN } from '@dataclouder/ngx-agent-cards';
+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 {
@@ -420,7 +427,6 @@ function getLessonComponentClass(type) {
 // import { UntypedFormControl } from '@angular/forms';
 // import { LessonComponents } from '../models/lessons.class';
 const LESSONS_TOKEN = new InjectionToken('Lessons Service');
-// Think on someway of getting the toast alerts service
 class LessonsAbstractService {
 }
 // my-service.provider.ts
@@ -570,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:
 
@@ -596,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:
 
@@ -605,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;
@@ -630,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;
@@ -658,9 +666,8 @@ class DcLessonCardComponent {
         ];
     }
     ngOnInit() {
-        if (this.lesson?.media?.images[0]?.url) {
-            this.coverUrl = this.lesson.media.images[0].url;
-        }
+        console.log(this.lesson);
+        this.coverUrl = this.lesson?.banner?.url || this.lesson?.media?.images?.[0]?.url || 'assets/background/default-background.webp';
     }
     eventCard(eventType) {
         switch (eventType) {
@@ -679,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                <span class=\"status-tag success\">Tomada</span>\n              }\n              @if (lesson.taken?.status == 'failed') {\n                <span class=\"status-tag danger\">Fallida</span>\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"] }] }); }
+    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], 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                <span class=\"status-tag success\">Tomada</span>\n              }\n              @if (lesson.taken?.status == 'failed') {\n                <span class=\"status-tag danger\">Fallida</span>\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
             }] } });
@@ -803,15 +812,15 @@ class DCLessonListComponent extends PaginationBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: LESSONS_TOKEN }, { token: TOAST_ALERTS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { showOptions: "showOptions", customCardComponent: "customCardComponent", customFilters: "customFilters", viewType: "viewType" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n@if(viewType === 'table') {\n<app-quick-table [columns]=\"columns\" [tableData]=\"lessons\" (onAction)=\"doOrEmitAction($event)\"></app-quick-table>\n} @else {\n<div class=\"lesson-list-container\">\n  @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: showOptions\n    }\">\n  </ng-container>\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1rem;flex:1;overflow-y:auto;min-height:0}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "items", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i2$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { showOptions: "showOptions", customCardComponent: "customCardComponent", customFilters: "customFilters", viewType: "viewType" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n@if(viewType === 'table') {\n<app-quick-table [columns]=\"columns\" [tableData]=\"lessons\" (onAction)=\"doOrEmitAction($event)\"></app-quick-table>\n} @else {\n<div class=\"lesson-list-container\">\n  @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: showOptions\n    }\">\n  </ng-container>\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["isAdmin", "items", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i2$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [RouterModule, DCFilterBarComponent, PaginatorModule, NgComponentOutlet, QuickTableComponent], template: "<dc-filter-bar [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n@if(viewType === 'table') {\n<app-quick-table [columns]=\"columns\" [tableData]=\"lessons\" (onAction)=\"doOrEmitAction($event)\"></app-quick-table>\n} @else {\n<div class=\"lesson-list-container\">\n  @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: showOptions\n    }\">\n  </ng-container>\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1rem;flex:1;overflow-y:auto;min-height:0}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"] }]
+            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [RouterModule, DCFilterBarComponent, PaginatorModule, NgComponentOutlet, QuickTableComponent], template: "<dc-filter-bar [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"newLesson()\"></dc-filter-bar>\n\n@if(viewType === 'table') {\n<app-quick-table [columns]=\"columns\" [tableData]=\"lessons\" (onAction)=\"doOrEmitAction($event)\"></app-quick-table>\n} @else {\n<div class=\"lesson-list-container\">\n  @if (!isLoadingLessons && lessons?.length > 0) { @for (lesson of lessons; track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: showOptions\n    }\">\n  </ng-container>\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"paginatorFirst\"\n  [rows]=\"paginatorRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: LessonsAbstractService, decorators: [{
                     type: Inject,
                     args: [LESSONS_TOKEN]
-                }] }, { type: i4$1.ToastAlertsAbstractService, decorators: [{
+                }] }, { type: i4$2.ToastAlertsAbstractService, decorators: [{
                     type: Inject,
                     args: [TOAST_ALERTS_TOKEN]
                 }] }], propDecorators: { showOptions: [{
@@ -959,6 +968,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }] });
 
+const EnglishEvaluationSkill = `
+You are a virtual professor for the Polilan English learning app. Your primary role is to evaluate a student's English conversational performance.
+
+You will be provided with two pieces of information for each evaluation:
+1.  **The student's English level:** This will be one of "Beginner", "Intermediate", or "Advanced".
+2.  **A conversation transcript:** This will be the dialogue between the Student and an Assistant, with each turn clearly labeled (e.g., "Student or User: ...", "Assistant: ...").
+
+Your sole task is to evaluate the *Student's* contribution to the conversation. **Do NOT evaluate the Assistant's turns.**
+
+Evaluate the student's performance based on the following aspects, *always keeping the student's provided level in mind*  and adjusting your expectations accordingly specially with beginners give them credits just for trying:
+
+*   **Grammar & Syntax:** Evaluate accuracy and complexity *relative to the expected level*. (Beginners: focus on basic accuracy; Advanced: expect complex structures with high accuracy).
+*   **Vocabulary & Usage:** Evaluate the range and appropriateness of words used *relative to the expected level*. (Beginners: focus on using basic words correctly; Advanced: expect varied and idiomatic language).
+*   **Cohesion & Coherence:** Evaluate how well their turns connect and make sense within the conversation *relative to the expected level*. (Beginners: focus on simple, clear responses; Advanced: expect logical flow and detailed contributions).
+*   **Task Completion/Relevance:** Evaluate how effectively they participate and respond to the conversation's goals or topics *relative to the expected level*.
+
+Assign a rating from 0 to 3 based on how well the student performs *compared to the typical expectations for their provided level*:
+
+*   **0: Bad** - Performance is significantly below what is expected for this level. Many errors impede communication.
+*   **1: Not Bad** - Performance is below expectations for this level, but communication is sometimes possible despite frequent errors.
+*   **2: Good** - Performance meets expectations for this level, demonstrating solid understanding and usage with only occasional minor errors.
+*   **3: Very Good** - Performance exceeds expectations for this level, demonstrating a strong command and potential to progress quickly.
+
+Provide detailed, constructive feedback that explains the rating. Point out specific strengths and areas for improvement based on their performance *at their given level*. Use examples from the dialog if helpful. Maintain a supportive, encouraging, and educational tone appropriate for a virtual professor guiding a student at their specific stage.
+`;
+
 class DCLessonRendererComponent {
     constructor() {
         // --- Signal Inputs ---
@@ -971,12 +1006,14 @@ class DCLessonRendererComponent {
         this.toastrService = inject(TOAST_ALERTS_TOKEN);
         this.lessonService = inject(LESSONS_TOKEN);
         this.lessonAIService = inject(LessonAIService); // Inject the new service
+        this.userDataExchange = inject(USER_DATA_EXCHANGE);
         // --- State Signals ---
         this.lesson = signal(undefined); // Internal lesson state signal
         this.chatVisible = signal(false); // Signal for chat visibility
         this.agentMasterLesson = signal(undefined); // Signal for agent card
         this.evaluatorAgentCard = signal(undefined); // Signal for evaluator card
         this.conversationSettings = signal(undefined);
+        this.evalAgentTask = signal(undefined); // Signal for evaluator card
         // --- Computed Signals ---
         this.imageCover = computed(() => this.lesson()?.media?.images?.find((img) => img.type === 'cover')?.url); // Computed signal for imageCover
         // --- Properties ---
@@ -1017,6 +1054,12 @@ class DCLessonRendererComponent {
         effect(() => {
             const currentLesson = this.lesson(); // Read the lesson signal
             const newTextCoded = currentLesson?.textCoded; // Get the current textCoded value
+            this.evalAgentTask.set({
+                systemPrompt: EnglishEvaluationSkill,
+                model: { provider: 'google' },
+                task: `Please evaluate the user conversation student data is: \n ${this.userDataExchange.getUserDataInformation()}`,
+                expectedResponseType: EvalResultStringDefinition,
+            });
             // Quick fix to only render on changes textCode not all the lesson
             if (newTextCoded !== this.previousTextCoded) {
                 if (newTextCoded !== undefined && newTextCoded !== null && currentLesson) {
@@ -1190,7 +1233,7 @@ class DCLessonRendererComponent {
             this.toastrService.error({ subtitle: 'Cannot save result, lesson data missing.', title: 'Error' });
             return;
         }
-        const takenLesson = { lessonId: currentLesson.id, status: status, score: rates.score };
+        const takenLesson = { id: currentLesson.id, goalCompleted: null, score: rates.score, status: status, lastAccess: new Date() };
         console.log('Lesson evaluation result:', takenLesson);
         // TODO: Re-implement saving the taken lesson status via lessonService
         // try {
@@ -1224,8 +1267,6 @@ class DCLessonRendererComponent {
             // Call the service to get the agent cards
             const conversationSettings = await this.lessonAIService.generateConversationSettingsForLesson(currentLesson);
             if (conversationSettings) {
-                // this.agentMasterLesson.set(agentCards);
-                // this.evaluatorAgentCard.set(agentCards.evaluatorAgent);
                 this.conversationSettings.set(conversationSettings);
                 this.chatVisible.set(true);
                 console.log('Agent cards received and set.');
@@ -1240,12 +1281,24 @@ class DCLessonRendererComponent {
             this.toastrService.error({ subtitle: 'An error occurred while preparing the AI chat.', title: 'Error' });
         }
     }
+    onVisibleChange(isVisible) {
+        if (isVisible === false) {
+            this.chatVisible.set(false);
+        }
+    }
+    handleGoalCompleted(event) {
+        console.log('Goal completed:', event);
+        const lesson = this.lesson();
+        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()\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat [conversationSettings]=\"conversationSettings()\"></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", "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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-renderer', standalone: true, imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule], 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()\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat [conversationSettings]=\"conversationSettings()\"></dc-chat>\n</p-drawer>\n}\n", styles: [".evaluate{float:right}\n"] }]
+            args: [{ selector: 'dc-lesson-renderer', standalone: true, imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule], 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"] }]
         }], ctorParameters: () => [], propDecorators: { dynamicLesson: [{
                 type: ViewChild,
                 args: ['dynamicLesson', { static: true }]
@@ -1416,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);
@@ -1438,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.
@@ -1496,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.
@@ -1530,9 +1577,9 @@ class LessonUtilsService {
     /**
      * Improves the provided Markdown text using AI and updates the lesson.
      * Assumes the lesson is already saved before calling this.
-     * @param lessonId The ID of the lesson to update.
+     * @param lesson The lesson object containing the prompt and other context.
      * @param markdownText The Markdown text generated from the lesson's HTML content.
-     * @returns The updated lesson object after AI improvement, or null on failure.
+     * @returns The improved Markdown string, or null on failure.
      */
     async improveMDWithAI(lesson, markdownText) {
         if (!markdownText) {
@@ -1541,38 +1588,30 @@ 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```';
-            if (improvedMarkdown.startsWith(markdownFenceStart) && improvedMarkdown.endsWith(markdownFenceEnd)) {
+            if (improvedMarkdown?.startsWith(markdownFenceStart) && improvedMarkdown.endsWith(markdownFenceEnd)) {
                 improvedMarkdown = improvedMarkdown.slice(markdownFenceStart.length, -markdownFenceEnd.length);
             }
             else {
                 // Also handle cases where it might just be ``` at the start/end
                 const simpleFence = '```';
-                if (improvedMarkdown.startsWith(simpleFence)) {
+                if (improvedMarkdown?.startsWith(simpleFence)) {
                     improvedMarkdown = improvedMarkdown.slice(simpleFence.length);
                 }
-                if (improvedMarkdown.endsWith(simpleFence)) {
+                if (improvedMarkdown?.endsWith(simpleFence)) {
                     improvedMarkdown = improvedMarkdown.slice(0, -simpleFence.length);
                 }
             }
             // Trim any leading/trailing whitespace that might remain after removing fences
-            improvedMarkdown = improvedMarkdown.trim();
+            improvedMarkdown = improvedMarkdown?.trim() ?? null;
             console.log('Improved Markdown:', improvedMarkdown);
-            return improvedMarkdown;
+            return improvedMarkdown; // Return only the string
         }
         catch (error) {
             console.error('Error during AI Markdown improvement in service:', error);
@@ -1582,7 +1621,78 @@ class LessonUtilsService {
         finally {
             this.loadingBarService.successAndHide();
         }
-        // Loading state should be managed by the component calling this service.
+    }
+    /**
+     * Generates a concise description for the lesson using AI based on its content.
+     * @param lesson The lesson object containing the content.
+     * @returns A promise resolving to the generated description string, or null on failure.
+     */
+    async generateDescriptionWithAI(lesson) {
+        if (!lesson || !lesson.textCoded) {
+            this.#toastService.warn({ title: 'Contenido Requerido', subtitle: 'Se necesita contenido en la lección para generar una descripción.' });
+            return null;
+        }
+        try {
+            this.loadingBarService.showIndeterminate(); // Corrected: No argument needed
+            // Extract plain text from the lesson's HTML content
+            const plainTextContent = this._extractTextFromHtml(lesson.textCoded);
+            if (!plainTextContent || plainTextContent.trim().length === 0) {
+                this.#toastService.warn({ title: 'Texto Vacío', subtitle: 'No se pudo extraer texto útil del contenido de la lección.' });
+                return null;
+            }
+            const 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('"')) {
+                generatedDescription = generatedDescription.substring(1, generatedDescription.length - 1);
+            }
+            if (generatedDescription) {
+                this.#toastService.success({ title: 'Descripción Generada', subtitle: 'Se generó la descripción con IA.' });
+                return generatedDescription;
+            }
+            else {
+                throw new Error('AI did not return a valid description.');
+            }
+        }
+        catch (error) {
+            console.error('Error during AI description generation in service:', error);
+            this.#toastService.error({ title: 'Error de IA', subtitle: 'No se pudo generar la descripción con IA.' });
+            return null;
+        }
+        finally {
+            this.loadingBarService.successAndHide();
+        }
+    }
+    /**
+     * Extracts plain text from an HTML string, removing encoded JSON components.
+     * @param htmlInput The HTML string potentially containing encoded JSON (~...~).
+     * @returns The plain text representation.
+     */
+    _extractTextFromHtml(htmlInput) {
+        if (!htmlInput)
+            return '';
+        // 1. Replace encoded JSON blocks with their 'settings.text' or an empty string
+        const jsonRegex = /~(.+?)~/g;
+        const textWithPlaceholders = htmlInput.replace(jsonRegex, (match, jsonCoded) => {
+            try {
+                const decodedJson = jsonCoded.replace(/"/g, '"').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+                const data = JSON.parse(decodedJson);
+                return data?.settings?.text || ''; // Return text or empty string if not found
+            }
+            catch (error) {
+                console.error('Failed to parse JSON inside HTML during text extraction:', jsonCoded, error);
+                return ''; // Return empty string on error
+            }
+        });
+        // 2. Strip remaining HTML tags to get plain text
+        // Create a temporary DOM element to parse the HTML
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = textWithPlaceholders;
+        // Use textContent to get the plain text, effectively stripping tags
+        // Replace multiple whitespace characters (including newlines) with a single space
+        return (tempDiv.textContent || tempDiv.innerText || '').replace(/\s+/g, ' ').trim();
     }
     /**
      * Cleans orphaned components from the lesson's dynamicComponents.
@@ -1623,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({
@@ -1691,22 +1800,95 @@ 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
-        this.lesson = signal(undefined);
-        this.isLoadingLesson = signal(false);
+        this.lesson = signal(undefined); // The lesson data itself
+        this.isLoadingLesson = signal(false); // Shared loading state
         // Outputs for actions
         this.saveRequest = new EventEmitter();
         this.importNotionRequest = new EventEmitter();
         this.improveNotionRequest = new EventEmitter();
-        this.generateAIRequest = new EventEmitter();
-        // Output for property changes
-        this.propertyChange = new EventEmitter();
+        // 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
+        this.#lessonUtilsService = inject(LessonUtilsService);
+        this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        this.#lessonService = inject(LESSONS_TOKEN);
+        this.#turndownService = new TurndownService(); // Instantiate TurndownService
     }
-    // Method to emit property changes, called by ngModelChange in the template
-    onPropertyChange(property, value) {
-        this.propertyChange.emit({ property, value });
+    // 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 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() {
@@ -1718,13 +1900,110 @@ class DCLessonMetadataEditorComponent {
     emitImproveNotionRequest() {
         this.improveNotionRequest.emit();
     }
-    emitGenerateAIRequest() {
-        this.generateAIRequest.emit();
+    /**
+     * Generates lesson content using AI, saving the current state first.
+     * Moved from DCLessonEditorComponent.
+     */
+    async generateByAI() {
+        const currentLesson = this.lesson(); // Get current value
+        if (!currentLesson?.id) {
+            this.#toastService.warn({ title: 'Guardar primero', subtitle: 'Guarda la lección antes de usar IA.' });
+            return;
+        }
+        this.isLoadingLesson.set(true);
+        try {
+            const rawHtmlContent = currentLesson.textCoded || '';
+            if (!rawHtmlContent) {
+                console.warn('No HTML content found in lesson to process. taking just description');
+                this.#toastService.info({ title: 'Contenido lección desde 0', subtitle: 'Solo se usará el prompt' });
+                // 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 {
+                // 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) {
+            console.error('Error during AI generation process in metadata editor:', error);
+            // Service handles specific AI error toasts, maybe add a general one here if needed
+            // this.#toastService.error({ title: 'Error General', subtitle: 'Ocurrió un problema durante el proceso de IA.' });
+        }
+        finally {
+            this.isLoadingLesson.set(false); // Stop loading
+        }
+    }
+    /**
+     * Replaces encoded JSON blocks (~...~) in HTML with their 'settings.text' value.
+     * Moved from DCLessonEditorComponent.
+     * @param htmlInput The HTML string containing encoded JSON.
+     * @returns The processed HTML string with text replacements.
+     */
+    _extractTextFromEncodedJson(htmlInput) {
+        const jsonRegex = /~(.+?)~/g; // Global flag to replace all occurrences
+        return htmlInput.replace(jsonRegex, (match, jsonCoded) => {
+            try {
+                // Attempt to decode HTML entities that might be present in the JSON string
+                const decodedJson = jsonCoded.replace(/"/g, '"').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+                const data = JSON.parse(decodedJson);
+                // Return the text if available, otherwise keep the original match (or an error placeholder)
+                return data?.settings?.text || match;
+            }
+            catch (error) {
+                console.error('Failed to parse JSON inside HTML:', jsonCoded, error);
+                return '<!-- invalid component data -->'; // Placeholder for parsing errors
+            }
+        });
+    }
+    /**
+     * Calls the LessonUtilsService to generate a description using AI
+     * and updates the lesson signal if successful.
+     */
+    async triggerGenerateDescriptionAI() {
+        const currentLesson = this.lesson();
+        if (!currentLesson) {
+            this.#toastService.warn({ title: 'Lección no cargada', subtitle: 'Espera a que la lección se cargue.' });
+            return;
+        }
+        const generatedDescription = await this.#lessonUtilsService.generateDescriptionWithAI(currentLesson);
+        if (generatedDescription) {
+            // 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", generateAIRequest: "generateAIRequest", 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      <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    </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)=\"emitGenerateAIRequest()\" />\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: "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" }] }); }
+                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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonMetadataEditorComponent, decorators: [{
             type: Component,
@@ -1736,7 +2015,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         TooltipModule, // Added TooltipModule
                         FlagLanguagePipe, // Added Pipe
                         LangDescTranslationPipe, // Added Pipe
-                    ], 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      <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    </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)=\"emitGenerateAIRequest()\" />\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" }]
+                        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.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 }]
@@ -1749,12 +2029,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Output
             }], improveNotionRequest: [{
                 type: Output
-            }], generateAIRequest: [{
-                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
@@ -1763,6 +2143,7 @@ class DCLessonEditorComponent {
     #router;
     #lessonService;
     #toastService;
+    #loadingBarService;
     constructor() {
         // Services
         this.#activatedRoute = inject(ActivatedRoute); // Re-inject as it's needed for navigation
@@ -1771,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(() => {
@@ -1798,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();
@@ -1921,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)
@@ -1949,75 +2338,8 @@ class DCLessonEditorComponent {
         }
     }
     // isLoadingLesson signal is used directly
-    async generateByAI() {
-        const currentId = this.lessonId();
-        if (!currentId) {
-            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
-            const savedLesson = await this.saveLesson();
-            if (!savedLesson) {
-                // Handle save error - toast is shown in saveLesson
-                throw new Error('Failed to save before AI generation');
-            }
-            //  // Removed debugger
-            const rawHtmlContent = this.lesson()?.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);
-            const turndownService = new TurndownService();
-            // Convert the processed HTML (with text instead of JSON) to Markdown
-            const markdownText = turndownService.turndown(processedHtmlContent);
-            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);
-                this.lesson.set({ ...this.lesson(), textCoded: improvedHtml }); // Update the signal with the converted HTML
-                // Toast success is handled by the service
-            }
-            else {
-                // Toast error is handled by the service
-                throw new Error('AI generation failed or lesson fetch failed after generation.');
-            }
-        }
-        catch (error) {
-            // Type error
-            console.error('Error during AI generation process in component:', error);
-            // Service handles specific AI error toasts, maybe add a general one here if needed
-            // this.#toastService.error({ title: 'Error General', subtitle: 'Ocurrió un problema durante el proceso de IA.' });
-        }
-        finally {
-            this.isLoadingLesson.set(false); // Stop loading
-        }
-    }
-    /**
-     * Replaces encoded JSON blocks (~...~) in HTML with their 'settings.text' value.
-     * @param htmlInput The HTML string containing encoded JSON.
-     * @returns The processed HTML string with text replacements.
-     */
-    _extractTextFromEncodedJson(htmlInput) {
-        const jsonRegex = /~(.+?)~/g; // Global flag to replace all occurrences
-        return htmlInput.replace(jsonRegex, (match, jsonCoded) => {
-            try {
-                // Attempt to decode HTML entities that might be present in the JSON string
-                const decodedJson = jsonCoded.replace(/"/g, '"').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
-                const data = JSON.parse(decodedJson);
-                // Return the text if available, otherwise keep the original match (or an error placeholder)
-                return data?.settings?.text || match;
-            }
-            catch (error) {
-                console.error('Failed to parse JSON inside HTML:', jsonCoded, error);
-                return '<!-- invalid component data -->'; // Placeholder for parsing errors
-            }
-        });
-    }
+    // Removed generateByAI and _extractTextFromEncodedJson methods.
+    // This logic is now handled within DCLessonMetadataEditorComponent.
     /**
      * Handles the image upload event, updates the lesson signal via the service, and saves.
      * @param event The image upload event data.
@@ -2059,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  (generateAIRequest)=\"generateByAI()\"\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$1.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", "generateAIRequest", "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,
@@ -2076,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  (generateAIRequest)=\"generateByAI()\"\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 }]
@@ -2112,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, 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