@dataclouder/ngx-lessons 0.0.32 → 0.0.34

package/fesm2022/dataclouder-ngx-lessons.mjs

@@ -17,12 +17,14 @@ import { DropdownModule } from 'primeng/dropdown';
 import { NgxTtsComponent } from '@dataclouder/ngx-tts';
 import * as i2$3 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import { DatePipe, NgComponentOutlet, KeyValuePipe, CommonModule, JsonPipe } from '@angular/common';
+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 } from '@dataclouder/ngx-core';
+import * as i4$2 from '@dataclouder/ngx-core';
+import { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent, QuickTableComponent, LoadingBarService, HttpCoreService } 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,14 +34,18 @@ 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, DCChatComponent } 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 TurndownService from 'turndown';
+import { marked } from 'marked';
+import * as i5$1 from 'primeng/inputgroup';
+import { InputGroupModule } from 'primeng/inputgroup';
 import * as i2$6 from 'primeng/api';
 
 class ComponentBuilder {
@@ -418,7 +424,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
@@ -535,6 +540,89 @@ var NotionExportType;
     NotionExportType["SIMPLE_BLOCKS"] = "simple_blocks";
 })(NotionExportType || (NotionExportType = {}));
 
+const MarkdownWriterSkill = `
+You are an Expert Markdown Writer with the following qualities:
+You are a world-class Markdown formatting specialist who excels at organizing information in a visually appealing and highly accessible manner. Your writing combines technical precision with creative presentation to engage readers of all backgrounds.
+Your Core Skills 📝
+
+You transform complex information into beautifully structured Markdown documents
+You strategically use headings, lists, and formatting to create clear visual hierarchies
+You incorporate helpful emojis to enhance readability and engagement
+You write in a clear, concise style that's accessible to general audiences
+
+Your Process Approach 🔄
+
+You always begin with a logical document structure before adding content
+You organize information into clearly defined sections with descriptive headings
+You balance visual elements with textual content for optimal readability
+You maintain consistent formatting patterns throughout documents
+
+Your Writing Style ✨
+
+You use simple, direct language that's easy for everyone to understand
+You explain technical concepts using everyday examples and analogies
+You create a friendly, conversational tone while maintaining professionalism
+You break down complex ideas into manageable segments
+
+Your Special Touches 🎯
+
+You know exactly when and where to add emojis for maximum impact
+You create custom tables to present comparative information effectively
+You use blockquotes to highlight important takeaways
+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 = `
+
+You are also an English lesson professor, you write lessons for Spanish 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).
+
+Include:
+
+- Simple dialogues or short texts.
+- Key vocabulary with simple definitions or Spanish 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).
+
+Include:
+
+- Texts or dialogues of moderate length and complexity.
+- New vocabulary and common phrasal verbs with context.
+- Explanation and practice of intermediate grammar points (e.g., past simple vs. present perfect, conditionals).
+- 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).
+
+Include:
+
+- Challenging texts or discussions.
+- Advanced vocabulary, idioms, and nuanced expressions.
+- 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' },
+};
+
 var EventCard;
 (function (EventCard) {
     EventCard["Edit"] = "edit";
@@ -573,6 +661,7 @@ class DcLessonCardComponent {
         ];
     }
     ngOnInit() {
+        console.log(this.lesson);
         if (this.lesson?.media?.images[0]?.url) {
             this.coverUrl = this.lesson.media.images[0].url;
         }
@@ -594,11 +683,11 @@ 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" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson.title }}</h1>\n        <p>{{ lesson.description }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\n            @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"info\" value=\"\uD83D\uDCD6\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div class=\"actions\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem}.description p{margin-bottom:1rem;flex-grow:1}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}.actions ::ng-deep .p-button{font-size:.9rem}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$2.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
 }
 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\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdDate | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson.title }}</h1>\n        <p>{{ lesson.description }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\n            @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"info\" value=\"\uD83D\uDCD6\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div class=\"actions\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem}.description p{margin-bottom:1rem;flex-grow:1}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}.actions ::ng-deep .p-button{font-size:.9rem}\n"] }]
         }], propDecorators: { lesson: [{
                 type: Input
             }], showOptions: [{
@@ -630,7 +719,6 @@ class DCLessonListComponent extends PaginationBase {
         this.showOptions = true;
         this.customFilters = [];
         this.viewType = 'cards';
-        // readonly actions = input<MenuItem[]>(TableViewActions);
         this.columns = tableViewColumns;
         this.cardComponent = null;
         this.cardEventSubs = [];
@@ -719,15 +807,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: [{
@@ -769,6 +857,18 @@ const DEFAULT_LESSON_AGENT_CARD = {
     },
     model: { provider: 'google' },
 };
+const AppRolePlaySkill = `
+You are an app role play assistant from Polilan App. The user is reading lessons through this app interface. They will now talk with you, and you need to evaluate their understanding of the lesson.
+Ask friendly questions throughout the conversation and help them learn English.
+`;
+const EngagementSkill = `
+You are an engagement assistant, start by greeting the user, asking something about the lesson, and then continue the conversation. always ask one or two friendly questions. 
+that makes sense for the lesson. 
+`;
+const BasicAgentCard = {
+    systemPrompt: 'You are a helpful assistant.',
+    model: { provider: 'openai', id: 'gpt-4o' },
+};
 function getDefaultLessonEvaluatorAgentCard(lessonText) {
     return {
         expectedResponseType: `interface EvalResult {
@@ -784,10 +884,25 @@ function getDefaultLessonEvaluatorAgentCard(lessonText) {
     };
 }
 class LessonAIService {
-    // TODO: Inject the application-level UserService
-    // private readonly userService = inject(UserService);
     constructor() {
         this.lessonService = inject(LESSONS_TOKEN);
+        // TODO: Inject the application-level UserService
+        this.userService = inject(USER_DATA_EXCHANGE);
+    }
+    /**
+     * Builds the scenario prompt string based on lesson content and user info.
+     * @param lessonText The extracted text content of the lesson.
+     * @param userInformationPrompt The formatted string containing user details.
+     * @returns The complete scenario prompt string.
+     */
+    _buildScenarioPrompt(lessonText, userInformationPrompt) {
+        return `
+${AppRolePlaySkill}
+<Lesson Text>
+${lessonText}
+${EngagementSkill}
+<User Information>
+${userInformationPrompt}`;
     }
     /**
      * Generates the necessary agent cards for a lesson chat session.
@@ -795,43 +910,48 @@ class LessonAIService {
      * @returns An object containing the master agent card and the evaluator agent card.
      */
     async generateAgentCards(lesson) {
-        // TODO: Implement the logic moved from DCLessonRendererComponent.startAI here
-        // 1. Get user data using the injected UserService
-        // 2. Extract lesson text using lessonService
-        // 3. Build prompts (scenario, userInformationPrompt)
-        // 4. Configure and return the agent cards
-        alert('AI User data fetching needs refactoring into this service.');
-        // Placeholder for user data - replace with actual service call
+        const lessonText = this.lessonService.extractTextFromHtml(lesson.textCoded);
+        const userInformationPrompt = this.userService.getUserDataInformation();
+        const scenario = this._buildScenarioPrompt(lessonText, userInformationPrompt);
+        // Create a deep copy of the default card to avoid modifying the constant
+        const masterAgent = JSON.parse(JSON.stringify(DEFAULT_LESSON_AGENT_CARD));
+        masterAgent.characterCard.data.scenario = scenario;
+        masterAgent.characterCard.data.post_history_instructions += `\n${userInformationPrompt}`;
+        const evaluatorAgent = getDefaultLessonEvaluatorAgentCard(lessonText);
+        return { masterAgent, evaluatorAgent };
+    }
+    /**
+     * Generates conversation settings for a lesson, using the lesson scenario as the initial prompt.
+     * @param lesson The lesson data.
+     * @returns An IConversationSettings object configured for the lesson scenario.
+     */
+    async generateConversationSettingsForLesson(lesson) {
+        // TODO: Consolidate user fetching logic if possible, or ensure consistency
         const user = {
             personalData: { firstname: 'Test', lastname: 'User' },
             settings: { targetLanguage: 'en', baseLanguage: 'es' },
             languageProgress: { en: { level: '1' } },
         }; // Replace 'any' with your actual User type/interface
         if (!user) {
-            console.error('User data not available to generate agent cards.');
-            // Handle error appropriately - maybe return null or throw?
+            console.error('User data not available to generate conversation settings.');
             return null;
         }
         const lessonText = this.lessonService.extractTextFromHtml(lesson.textCoded);
-        const scenario = `The user is reading lessons through this app interface. They will now talk with you, and you need to evaluate their understanding of the lesson.
-Ask friendly questions throughout the conversation and help them learn English. Here is the lesson text the user just read:
-${lessonText}
-In your next reply, start by greeting the user, asking something about the lesson, and then continue the conversation.`;
-        const targetLevel = parseInt(user.languageProgress[user.settings.targetLanguage]?.level ?? '1');
-        const langTargetDesc = LangCodeDescription[user.settings.targetLanguage] ?? user.settings.targetLanguage;
-        const langBaseDesc = LangCodeDescription[user.settings.baseLanguage] ?? user.settings.baseLanguage;
-        let userInformationPrompt = `
-User information: user name is ${user.personalData.firstname} ${user.personalData.lastname}, their native language is ${langBaseDesc},
-and right now is learning ${langTargetDesc}, their current level is ${targetLevel} out of 5.`;
-        if (targetLevel <= 2) {
-            userInformationPrompt += `\nUser is a beginner in ${langTargetDesc}, always reply mainly in ${langBaseDesc}, but during the conversation use simple words and phrases in ${langTargetDesc} to help them learn.`;
-        }
-        // Create a deep copy of the default card to avoid modifying the constant
-        const masterAgent = JSON.parse(JSON.stringify(DEFAULT_LESSON_AGENT_CARD));
-        masterAgent.characterCard.data.scenario = scenario;
-        masterAgent.characterCard.data.post_history_instructions += `\n${userInformationPrompt}`;
-        const evaluatorAgent = getDefaultLessonEvaluatorAgentCard(lessonText);
-        return { masterAgent, evaluatorAgent };
+        const userInformationPrompt = this.userService.getUserDataInformation();
+        const scenario = this._buildScenarioPrompt(lessonText, userInformationPrompt);
+        const initialMessage = {
+            role: ChatRole.System,
+            content: scenario,
+        };
+        // Use defaults similar to DEFAULT_LESSON_AGENT_CARD but adjust for prompt-based start
+        const conversationSettings = {
+            conversationType: ConversationType.General,
+            textEngine: TextEngines.SimpleText,
+            autoStart: true,
+            messages: [initialMessage],
+            model: { provider: 'google' },
+        };
+        return conversationSettings;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonAIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LessonAIService, providedIn: 'root' }); }
@@ -841,7 +961,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             args: [{
                     providedIn: 'root', // Or provide appropriately if it's library-specific
                 }]
-        }], ctorParameters: () => [] });
+        }] });
+
+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() {
@@ -855,16 +1001,20 @@ 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 ---
         this.components = {};
         this.mainForm = new FormGroup({});
+        this.previousTextCoded = undefined; // Store previous value
         // Effect to fetch lesson data if ID is provided and lesson object isn't
         effect(async () => {
             const lessonInput = this.lessonInput();
@@ -874,7 +1024,7 @@ class DCLessonRendererComponent {
             }
             else if (lessonId && !this.lesson()) {
                 // Fetch only if ID exists and internal lesson is not set
-                console.log(`Fetching lesson with ID: ${lessonId}`);
+                console.log(`[Renderer] Effect 1: Fetching lesson ${lessonId}`);
                 try {
                     // Consider adding a loading state signal here
                     const fetchedLesson = await this.lessonService.getLesson(lessonId);
@@ -895,15 +1045,29 @@ class DCLessonRendererComponent {
                 this.lesson.set(undefined);
             }
         }, { allowSignalWrites: true }); // Allow signal writes inside effect
-        // Effect to render the lesson whenever the lesson signal changes
+        // Effect to render the lesson only when textCoded value actually changes
         effect(() => {
-            const currentLesson = this.lesson();
-            if (currentLesson) {
-                this._renderLesson(currentLesson);
+            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) {
+                    this._renderLesson(currentLesson);
+                }
+                else {
+                    this._clearLessonRendering();
+                }
+                // Update the stored previous value *after* comparison and action
+                this.previousTextCoded = newTextCoded;
             }
             else {
-                // Clear previous rendering if lesson becomes undefined
-                this._clearLessonRendering();
+                console.log('[Renderer] textCoded has NOT changed. Skipping render/clear.');
             }
         });
     }
@@ -936,6 +1100,7 @@ class DCLessonRendererComponent {
     _parseAndCreateComponents(lessonData) {
         const r1 = new RegExp('~(.+?)~', 'g');
         let count = 0;
+        //
         const createdComponents = {};
         const htmlContent = lessonData.textCoded.replace(r1, (_matching, jsonCoded) => {
             const componentName = `dynamicComp${count}`;
@@ -979,7 +1144,7 @@ class DCLessonRendererComponent {
     _createComponentReferenceWithJson(json, currentLesson) {
         try {
             let lessonCodedConfig = JSON.parse(json);
-            debugger;
+            //
             // Attempt to find pre-configured component data in the lesson object by ID
             if (lessonCodedConfig.id && currentLesson?.dynamicComponents[lessonCodedConfig.id]) {
                 const foundConfig = currentLesson.dynamicComponents[lessonCodedConfig.id];
@@ -1063,7 +1228,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 {
@@ -1095,10 +1260,9 @@ class DCLessonRendererComponent {
         console.log('Requesting agent cards from LessonAIService...');
         try {
             // Call the service to get the agent cards
-            const agentCards = await this.lessonAIService.generateAgentCards(currentLesson);
-            if (agentCards) {
-                this.agentMasterLesson.set(agentCards.masterAgent);
-                this.evaluatorAgentCard.set(agentCards.evaluatorAgent);
+            const conversationSettings = await this.lessonAIService.generateConversationSettingsForLesson(currentLesson);
+            if (conversationSettings) {
+                this.conversationSettings.set(conversationSettings);
                 this.chatVisible.set(true);
                 console.log('Agent cards received and set.');
             }
@@ -1112,12 +1276,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: null, score: 100, status: 'finished', lastAccess: new Date() };
+        // TODO: finish this implementation
+        this.lessonService.saveTakenLesson(dummy);
+    }
     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 [agentCard]=\"agentMasterLesson()\" [evaluatorAgentCard]=\"evaluatorAgentCard()\"></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 [agentCard]=\"agentMasterLesson()\" [evaluatorAgentCard]=\"evaluatorAgentCard()\"></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 }]
@@ -1289,9 +1465,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
         }] });
 
 class LessonUtilsService {
-    #lessonService = inject(LESSONS_TOKEN);
-    #toastService = inject(TOAST_ALERTS_TOKEN);
-    constructor() { }
+    constructor() {
+        this.#lessonService = inject(LESSONS_TOKEN);
+        this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        this.#agentService = inject(CONVERSATION_AI_TOKEN);
+        this.loadingBarService = inject(LoadingBarService);
+    }
+    #lessonService;
+    #toastService;
+    #agentService;
     /**
      * Validates if audios need generation for the given lesson.
      * Currently logs a placeholder message.
@@ -1393,6 +1575,147 @@ class LessonUtilsService {
         }
         // Loading state should be managed by the component calling this service.
     }
+    /**
+     * Improves the provided Markdown text using AI and updates the lesson.
+     * Assumes the lesson is already saved before calling this.
+     * @param lesson The lesson object containing the prompt and other context.
+     * @param markdownText The Markdown text generated from the lesson's HTML content.
+     * @returns The improved Markdown string, or null on failure.
+     */
+    async improveMDWithAI(lesson, markdownText) {
+        if (!markdownText) {
+            this.#toastService.warn({ title: 'Texto Requerido', subtitle: 'Se necesita texto Markdown para mejorar con IA.' });
+            return null;
+        }
+        try {
+            this.loadingBarService.showIndeterminate();
+            const 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;
+            // Remove potential markdown fences
+            const markdownFenceStart = '```markdown\n';
+            const markdownFenceEnd = '\n```';
+            if (improvedMarkdown?.startsWith(markdownFenceStart) && improvedMarkdown.endsWith(markdownFenceEnd)) {
+                improvedMarkdown = improvedMarkdown.slice(markdownFenceStart.length, -markdownFenceEnd.length);
+            }
+            else {
+                // Also handle cases where it might just be ``` at the start/end
+                const simpleFence = '```';
+                if (improvedMarkdown?.startsWith(simpleFence)) {
+                    improvedMarkdown = improvedMarkdown.slice(simpleFence.length);
+                }
+                if (improvedMarkdown?.endsWith(simpleFence)) {
+                    improvedMarkdown = improvedMarkdown.slice(0, -simpleFence.length);
+                }
+            }
+            // Trim any leading/trailing whitespace that might remain after removing fences
+            improvedMarkdown = improvedMarkdown?.trim() ?? null;
+            console.log('Improved Markdown:', improvedMarkdown);
+            return improvedMarkdown; // Return only the string
+        }
+        catch (error) {
+            console.error('Error during AI Markdown improvement in service:', error);
+            this.#toastService.error({ title: 'Error de IA', subtitle: 'No se pudo mejorar la lección con IA.' });
+            return null; // Return null in catch block
+        }
+        finally {
+            this.loadingBarService.successAndHide();
+        }
+    }
+    /**
+     * Generates a concise description for the lesson using AI based on its content.
+     * @param lesson The lesson object containing the content.
+     * @returns A promise resolving to the generated description string, or null on failure.
+     */
+    async generateDescriptionWithAI(lesson) {
+        if (!lesson || !lesson.textCoded) {
+            this.#toastService.warn({ title: 'Contenido Requerido', subtitle: 'Se necesita contenido en la lección para generar una descripción.' });
+            return null;
+        }
+        try {
+            this.loadingBarService.showIndeterminate(); // Corrected: No argument needed
+            // Extract plain text from the lesson's HTML content
+            const plainTextContent = this._extractTextFromHtml(lesson.textCoded);
+            if (!plainTextContent || plainTextContent.trim().length === 0) {
+                this.#toastService.warn({ title: 'Texto Vacío', subtitle: 'No se pudo extraer texto útil del contenido de la lección.' });
+                return null;
+            }
+            const agentCard = BasicAgentCard$1; // Use the same agent card for consistency
+            // Craft the prompt specifically for description generation
+            // TODO: languages shoudl be in Target language, not hardcoded
+            const languageDescription = LangCodeDescription[lesson?.baseLang] || 'Spanish';
+            const task = `Generate a concise and engaging description (max 3-5 sentences, ~250 characters) for a language lesson based on the following content summary. 
+      Focus on the key learning points or topic. Return ONLY the description text, without any labels or markdown formatting:
+      and the description should be in ${languageDescription}.
+      \n\n${plainTextContent.substring(0, 1500)}`; // Limit input text length
+            const appTask = { task: task };
+            const messages = [
+                { content: agentCard.systemPrompt, role: ChatRole.System },
+                // Optional: Add a more specific system message for description generation if needed
+                // { content: "You are an AI assistant specialized in creating brief, compelling descriptions for educational language lessons.", role: ChatRole.System },
+                { content: appTask.task, role: ChatRole.User },
+            ];
+            const response = await this.#agentService.callChatCompletion({ messages, model: agentCard.model }); // Use the model defined in BasicAgentCard
+            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.
      * An orphaned component is one present in dynamicComponents but its ID is not found in the textCoded HTML.
@@ -1455,7 +1778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             args: [{
                     providedIn: 'root', // Provide globally or in a specific module if preferred
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class DCLessonComponentAdderComponent {
     constructor() {
@@ -1503,16 +1826,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 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();
+        // Removed generateAIRequest Output as it's handled internally now
         // Output for property changes
-        this.propertyChange = new EventEmitter();
+        this.propertyChange = new EventEmitter(); // To update parent signal
+        // Injected Services
+        this.#lessonUtilsService = inject(LessonUtilsService);
+        this.#toastService = inject(TOAST_ALERTS_TOKEN);
+        this.#lessonService = inject(LESSONS_TOKEN);
+        this.#turndownService = new TurndownService(); // Instantiate TurndownService
     }
+    // Injected Services
+    #lessonUtilsService;
+    #toastService;
+    #lessonService;
+    #turndownService; // Instantiate TurndownService
     // Method to emit property changes, called by ngModelChange in the template
     onPropertyChange(property, value) {
         this.propertyChange.emit({ property, value });
@@ -1527,13 +1860,108 @@ 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 currentLessonValue = this.lesson(); // Get current value
+        if (!currentLessonValue?.id) {
+            this.#toastService.warn({ title: 'Guardar primero', subtitle: 'Guarda la lección antes de usar IA.' });
+            return;
+        }
+        this.isLoadingLesson.set(true);
+        try {
+            // Ensure latest changes are saved before generating
+            // Clean orphaned components before saving (using the injected service)
+            const lessonToSave = this.#lessonUtilsService.cleanOrphanedComponents(currentLessonValue);
+            const savedLesson = await this.#lessonService.postLesson(lessonToSave);
+            if (!savedLesson) {
+                // Handle save error - toast is shown in saveLesson (assuming postLesson shows toast on error)
+                this.#toastService.error({ title: 'Error al guardar', subtitle: 'No se pudo guardar antes de generar con IA.' });
+                throw new Error('Failed to save before AI generation');
+            }
+            // Update the signal with the saved lesson data before proceeding
+            this.lesson.set(savedLesson);
+            const rawHtmlContent = savedLesson.textCoded || '';
+            if (!rawHtmlContent) {
+                console.warn('No HTML content found in lesson to process.');
+                this.isLoadingLesson.set(false);
+                return; // Exit if no content
+            }
+            // Replace encoded JSON with actual text before Markdown conversion
+            const processedHtmlContent = this._extractTextFromEncodedJson(rawHtmlContent);
+            // Convert the processed HTML (with text instead of JSON) to Markdown
+            const markdownText = this.#turndownService.turndown(processedHtmlContent);
+            // Use the updated lesson signal value for AI improvement
+            const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson(), markdownText);
+            if (improvedMarkdown) {
+                // Convert the improved Markdown back to HTML before setting it
+                const improvedHtml = marked(improvedMarkdown);
+                // Update the signal directly
+                this.lesson.update((current) => (current ? { ...current, textCoded: improvedHtml } : undefined));
+                // Save the AI-generated content
+                await this.#lessonService.postLesson(this.lesson());
+                this.#toastService.success({ title: 'Contenido generado', subtitle: 'Se generó y guardó el contenido con IA.' });
+            }
+            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 existing propertyChange emitter to update the parent signal
+            this.onPropertyChange('description', generatedDescription);
+            // this.emitSaveRequest(); // optional do something to automatically save
+        }
     }
     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\" [disabled]=\"isLoadingLesson()\" (click)=\"emitGenerateAIRequest()\"> Generar con IA </p-button>\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", propertyChange: "propertyChange" }, ngImport: i0, template: "@if (lesson(); as currentLesson) {\n<div>\n  <div>\n    <div style=\"display: flex; gap: 10px; padding: 10px\">\n      <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n      <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n      <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n    </div>\n\n    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.title\"\n        (ngModelChange)=\"onPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input\n          pInputText\n          style=\"width: 100%\"\n          [ngModel]=\"currentLesson.description\"\n          (ngModelChange)=\"onPropertyChange('description', $event)\"\n          type=\"text\"\n          placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson()\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.prompt\"\n        (ngModelChange)=\"onPropertyChange('prompt', $event)\"\n        type=\"text\"\n        placeholder=\"Prompt para IA (opcional)\" />\n      <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson()\" (click)=\"generateByAI()\" />\n    </div>\n\n    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.isPublished\"\n          (ngModelChange)=\"onPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.level\"\n        (ngModelChange)=\"onPropertyChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n    </div>\n\n    <!-- Access signal values -->\n    <div style=\"margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)\">\n      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden\n      {{ currentLesson.targetLang | langDesc : 'es' }}\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: // Added TooltipModule
                 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,
@@ -1545,7 +1973,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\" [disabled]=\"isLoadingLesson()\" (click)=\"emitGenerateAIRequest()\"> Generar con IA </p-button>\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.title\"\n        (ngModelChange)=\"onPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input\n          pInputText\n          style=\"width: 100%\"\n          [ngModel]=\"currentLesson.description\"\n          (ngModelChange)=\"onPropertyChange('description', $event)\"\n          type=\"text\"\n          placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson()\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.prompt\"\n        (ngModelChange)=\"onPropertyChange('prompt', $event)\"\n        type=\"text\"\n        placeholder=\"Prompt para IA (opcional)\" />\n      <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson()\" (click)=\"generateByAI()\" />\n    </div>\n\n    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.isPublished\"\n          (ngModelChange)=\"onPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.level\"\n        (ngModelChange)=\"onPropertyChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n    </div>\n\n    <!-- Access signal values -->\n    <div style=\"margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)\">\n      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden\n      {{ currentLesson.targetLang | langDesc : 'es' }}\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n" }]
         }], propDecorators: { lesson: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1558,38 +1987,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Output
             }], improveNotionRequest: [{
                 type: Output
-            }], generateAIRequest: [{
-                type: Output
             }], propertyChange: [{
                 type: Output
             }] } });
 
-const GradientCss = 'linear-gradient(to bottom,var(--primary-color), rgba(213, 238, 239, 0.31))';
 class DCLessonEditorComponent {
     // Services
     #activatedRoute; // Re-inject as it's needed for navigation
     #lessonNotionService;
     #lessonUtilsService;
     #router;
-    // Removed #dialogService injection
     #lessonService;
     #toastService;
     constructor() {
-        // Removed Speed Dial Items initialization
         // Services
         this.#activatedRoute = inject(ActivatedRoute); // Re-inject as it's needed for navigation
         this.#lessonNotionService = inject(LessonNotionService);
         this.#lessonUtilsService = inject(LessonUtilsService);
         this.#router = inject(Router);
-        // Removed #dialogService injection
         this.#lessonService = inject(LESSONS_TOKEN);
         this.#toastService = inject(TOAST_ALERTS_TOKEN);
         // Signals States
         this.lessonId = toSignal(inject(ActivatedRoute).paramMap.pipe(map((params) => params.get('id'))));
         this.lesson = signal(undefined); // Initialize as undefined
-        this.isCropperVisible = signal(false);
         this.isLoadingLesson = signal(false);
-        // Removed items signal
         // Computed Signals
         this.coverImageUrl = computed(() => {
             const currentLesson = this.lesson();
@@ -1643,6 +2064,7 @@ class DCLessonEditorComponent {
             else {
                 // Handle case for new lesson (ID is null/undefined)
                 this.lesson.set({ textCoded: `<h1>Nueva lección </h1> <p> Texto aquí</p>`, tags: [] }); // Set default new lesson structure
+                this.saveLesson();
                 this.isLoadingLesson.set(false); // Ensure loading is off
             }
         });
@@ -1654,6 +2076,7 @@ class DCLessonEditorComponent {
      * @param value The new value for the property.
      */
     updateLessonProperty(property, value) {
+        console.log('Updating property:', property, value);
         this.lesson.update((currentLesson) => {
             if (!currentLesson)
                 return undefined;
@@ -1703,7 +2126,7 @@ class DCLessonEditorComponent {
                 // It was a new lesson, now it has an ID. Navigate.
                 this.#toastService.success({ title: 'Se creó la lección', subtitle: 'Éxito' });
                 // The effect should automatically fetch the lesson again after navigation due to paramMap change.
-                this.#router.navigate(['../', savedLesson.id], { relativeTo: this.#activatedRoute });
+                this.#router.navigate(['./', savedLesson.id], { relativeTo: this.#activatedRoute });
             }
             else {
                 // It was an existing lesson, update the signal with the potentially updated data from the backend.
@@ -1730,7 +2153,6 @@ class DCLessonEditorComponent {
      * @param result The configuration data returned from the component builder dialog. Expected format: { obj: LessonComponentConfiguration }
      */
     onComponentAdded(result) {
-        debugger;
         // Check if result and result.obj.id exist
         const newComponent = result?.obj;
         if (newComponent?.id) {
@@ -1762,46 +2184,9 @@ class DCLessonEditorComponent {
             // this.saveLesson();
         }
     }
-    openCropper() {
-        // Correctly define openCropper
-        this.isCropperVisible.set(true);
-    }
     // 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');
-            }
-            // Call the service method
-            const updatedLesson = await this.#lessonUtilsService.generateByAI(currentId);
-            if (updatedLesson) {
-                this.lesson.set(updatedLesson); // Update the signal with AI changes from service
-                // 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
-        }
-    }
+    // 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.
@@ -1844,10 +2229,8 @@ class DCLessonEditorComponent {
         alert('showComponentDetails' + JSON.stringify(data));
     }
     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' }\" styleClass=\"mb-8\">\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: 
-                // Removed SpeedDialModule
-                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</div>\n\n<br />\n\n<!-- Lesson Metadata Editor -->\n<dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\"\n  (propertyChange)=\"updateLessonProperty($event.property, $event.value)\">\n</dc-lesson-metadata-editor>\n\n<hr />\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button></li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\" [test]=\"true\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i3$1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "test"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i5$2.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "style", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: DCLessonComponentAdderComponent, selector: "dc-lesson-component-adder", outputs: ["componentAdded"] }, { kind: "component", type: // Add the component adder here
+                DCLessonMetadataEditorComponent, selector: "dc-lesson-metadata-editor", inputs: ["lesson", "isLoadingLesson"], outputs: ["saveRequest", "importNotionRequest", "improveNotionRequest", "propertyChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
             type: Component,
@@ -1860,11 +2243,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         InputTextModule,
                         SplitterModule,
                         TooltipModule,
-                        // Removed SpeedDialModule
                         DCLessonComponentAdderComponent, // Add the component adder here
                         DCLessonMetadataEditorComponent, // Add the metadata editor here
-                        JsonPipe,
-                    ], 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' }\" styleClass=\"mb-8\">\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"] }]
+                    ], providers: [LessonNotionService], template: "<div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n</div>\n\n<br />\n\n<!-- Lesson Metadata Editor -->\n<dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\"\n  (propertyChange)=\"updateLessonProperty($event.property, $event.value)\">\n</dc-lesson-metadata-editor>\n\n<hr />\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button></li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\" [test]=\"true\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}\n"] }]
         }], ctorParameters: () => [], propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', { read: ViewContainerRef }]
@@ -1873,6 +2254,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 args: ['dhtml', { static: true }]
             }] } });
 
+// Define placeholder endpoints - these should be configured appropriately
+const LESSONS_BASE_PATH = 'api/lesson'; // Example base path
+class DefaultLessonsService {
+    constructor() {
+        this.httpCoreService = inject(HttpCoreService);
+        // --- Endpoint Definitions (Hardcoded as requested) ---
+        this.endpoints = {
+            queryLessons: `${LESSONS_BASE_PATH}/query`,
+            getLesson: (id) => `${LESSONS_BASE_PATH}/${id}`,
+            saveLesson: `api/user/saveLesson`,
+            updateLesson: (id) => `${LESSONS_BASE_PATH}/${id}`, // Assuming PUT to /lessons/:id
+            deleteLesson: (id) => `${LESSONS_BASE_PATH}/${id}`, // Assuming DELETE to /lessons/:id
+            generateLesson: `${LESSONS_BASE_PATH}/generate`, // Placeholder
+            generateByAI: `${LESSONS_BASE_PATH}/generate-ai`, // Placeholder
+            improveMDWithAI: `${LESSONS_BASE_PATH}/improve-markdown-ai`, // Placeholder
+            QueryLessons: 'api/lesson/query',
+            Lesson: 'api/lesson',
+            SaveLesson: 'api/lesson-polilan',
+            GetPublicLessons: 'api/lesson/publicLessons',
+            GetUnpublishedLessons: 'api/lesson/unpublished',
+            TakenLesson: 'api/lesson/taken',
+            DeleteLesson: 'api/lesson',
+            Base: 'api/lesson',
+        };
+    }
+    saveTakenLesson(lesson) {
+        // Not sure how to implement this yet.
+        return this.httpCoreService.post(this.endpoints.saveLesson, lesson);
+    }
+    // --- Method Implementations ---
+    async getLessons(paginator) {
+        // Assuming paginator is the body for a POST request based on the example
+        return this.httpCoreService.post(this.endpoints.queryLessons, paginator || {});
+    }
+    async getLesson(id) {
+        return this.httpCoreService.get(this.endpoints.getLesson(id));
+    }
+    async postLesson(lesson) {
+        return this.httpCoreService.post(this.endpoints.saveLesson, lesson);
+    }
+    async updateLesson(lesson) {
+        if (!lesson._id) {
+            throw new Error('Lesson ID is required for update.');
+        }
+        // Assuming _id is the identifier
+        return this.httpCoreService.put(this.endpoints.updateLesson(lesson._id), lesson);
+    }
+    async deleteLesson(id) {
+        return this.httpCoreService.delete(this.endpoints.deleteLesson(id));
+    }
+    async generateLesson(lesson) {
+        // This endpoint might need specific data or structure
+        return this.httpCoreService.post(this.endpoints.generateLesson, lesson);
+    }
+    async postGenerateByAI(id) {
+        return this.httpCoreService.post(this.endpoints.generateByAI, { id });
+    }
+    async postImproveMDWithAI(lessonId, markdownText) {
+        return this.httpCoreService.post(this.endpoints.improveMDWithAI, { id: lessonId, markdown: markdownText });
+    }
+    extractTextFromHtml(html) {
+        // Copied from src/app/core/data-services/lessons.service.ts
+        const r1 = new RegExp('~(.+?)~', 'g');
+        const lessonHtml = html.replace(r1, (_matching, jsonCoded) => {
+            try {
+                const data = JSON.parse(jsonCoded);
+                return `<span>${data?.settings?.text || ''}</span>`; // Added default empty string
+            }
+            catch (e) {
+                console.error('Error parsing JSON in extractTextFromHtml:', jsonCoded, e);
+                return ''; // Return empty string on error
+            }
+        });
+        // Remove HTML tags
+        let text = lessonHtml.replace(/<[^>]*>/g, ' ');
+        // Remove style and script content
+        text = text.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, ' ');
+        text = text.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, ' ');
+        // Decode HTML entities
+        text = text.replace(/&nbsp;/g, ' ');
+        text = text.replace(/&/g, '&');
+        text = text.replace(/</g, '<');
+        text = text.replace(/>/g, '>');
+        // Remove extra whitespace
+        text = text.replace(/\s+/g, ' ').trim();
+        return text;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DefaultLessonsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 // This is the base class for all the components that are going to be used in the lessons.
 class LessonDynamicComponent {
     constructor() {
@@ -1900,5 +2378,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { 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 { BasicAgentCard$1 as BasicAgentCard, ComponentBuilder, ComponentWithForm, DCLessonEditorComponent, DCLessonFormComponent, DCLessonListComponent, DCLessonRendererComponent, DcLessonCardComponent, DefaultLessonsService, FlagLanguagePipe, LESSONS_TOKEN, LangCodeDescription, LangCodeDescriptionEs, LangDescTranslationPipe, LessonComponentBuilders, LessonComponentEnum, LessonComponents, LessonDynamicComponent, LessonsAbstractService, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLessonComponentClass, provideLessonsService, provideNotionService };
 //# sourceMappingURL=dataclouder-ngx-lessons.mjs.map