@dataclouder/ngx-lessons 0.0.31 → 0.0.33

package/fesm2022/dataclouder-ngx-lessons.mjs

@@ -17,11 +17,11 @@ 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 { PaginationBase, TOAST_ALERTS_TOKEN, DCFilterBarComponent, QuickTableComponent, LoadingBarService } from '@dataclouder/ngx-core';
 import { PopoverModule } from 'primeng/popover';
 import * as i2$2 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
@@ -37,9 +37,11 @@ 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, 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 i2$6 from 'primeng/api';
 
 class ComponentBuilder {
@@ -535,6 +537,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";
@@ -630,7 +715,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 = [];
@@ -769,6 +853,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 +880,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 +906,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 +957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             args: [{
                     providedIn: 'root', // Or provide appropriately if it's library-specific
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class DCLessonRendererComponent {
     constructor() {
@@ -860,11 +976,13 @@ class DCLessonRendererComponent {
         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);
         // --- 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 +992,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 +1013,23 @@ 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
+            // 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 +1062,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 +1106,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];
@@ -1095,10 +1222,11 @@ 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.agentMasterLesson.set(agentCards);
+                // this.evaluatorAgentCard.set(agentCards.evaluatorAgent);
+                this.conversationSettings.set(conversationSettings);
                 this.chatVisible.set(true);
                 console.log('Agent cards received and set.');
             }
@@ -1113,11 +1241,11 @@ class DCLessonRendererComponent {
         }
     }
     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()\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat [conversationSettings]=\"conversationSettings()\"></dc-chat>\n</p-drawer>\n}\n", styles: [".evaluate{float:right}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "agentCard", "evaluatorAgentCard", "parseDict"], outputs: ["sendMessage", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$4.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }] }); }
 }
 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()\" position=\"bottom\" styleClass=\"app-bottom-overlay\">\n  <dc-chat [conversationSettings]=\"conversationSettings()\"></dc-chat>\n</p-drawer>\n}\n", styles: [".evaluate{float:right}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dynamicLesson: [{
                 type: ViewChild,
                 args: ['dynamicLesson', { static: true }]
@@ -1289,9 +1417,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 +1527,63 @@ 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 lessonId The ID of the lesson to update.
+     * @param markdownText The Markdown text generated from the lesson's HTML content.
+     * @returns The updated lesson object after AI improvement, 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();
+            console.log('Improved Markdown:', improvedMarkdown);
+            return improvedMarkdown;
+        }
+        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();
+        }
+        // Loading state should be managed by the component calling this service.
+    }
     /**
      * 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 +1646,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() {
@@ -1531,7 +1722,7 @@ class DCLessonMetadataEditorComponent {
         this.generateAIRequest.emit();
     }
     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", generateAIRequest: "generateAIRequest", propertyChange: "propertyChange" }, ngImport: i0, template: "@if (lesson(); as currentLesson) {\n<div>\n  <div>\n    <div style=\"display: flex; gap: 10px; padding: 10px\">\n      <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n      <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n      <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n    </div>\n\n    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.title\"\n        (ngModelChange)=\"onPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.description\"\n        (ngModelChange)=\"onPropertyChange('description', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega una descripci\u00F3n\" />\n    </div>\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.prompt\"\n        (ngModelChange)=\"onPropertyChange('prompt', $event)\"\n        type=\"text\"\n        placeholder=\"Prompt para IA (opcional)\" />\n      <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson()\" (click)=\"emitGenerateAIRequest()\" />\n    </div>\n\n    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.isPublished\"\n          (ngModelChange)=\"onPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.level\"\n        (ngModelChange)=\"onPropertyChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n    </div>\n\n    <!-- Access signal values -->\n    <div style=\"margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)\">\n      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden\n      {{ currentLesson.targetLang | langDesc : 'es' }}\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: // Added TooltipModule
                 FlagLanguagePipe, name: "flagEmoji" }, { kind: "pipe", type: // Added Pipe
                 LangDescTranslationPipe, name: "langDesc" }] }); }
 }
@@ -1545,7 +1736,7 @@ 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" }]
+                    ], template: "@if (lesson(); as currentLesson) {\n<div>\n  <div>\n    <div style=\"display: flex; gap: 10px; padding: 10px\">\n      <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n      <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n      <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n    </div>\n\n    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.title\"\n        (ngModelChange)=\"onPropertyChange('title', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <input\n        pInputText\n        style=\"width: 100%\"\n        [ngModel]=\"currentLesson.description\"\n        (ngModelChange)=\"onPropertyChange('description', $event)\"\n        type=\"text\"\n        placeholder=\"Agrega una descripci\u00F3n\" />\n    </div>\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.prompt\"\n        (ngModelChange)=\"onPropertyChange('prompt', $event)\"\n        type=\"text\"\n        placeholder=\"Prompt para IA (opcional)\" />\n      <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson()\" (click)=\"emitGenerateAIRequest()\" />\n    </div>\n\n    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.isPublished\"\n          (ngModelChange)=\"onPropertyChange('isPublished', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.level\"\n        (ngModelChange)=\"onPropertyChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n    </div>\n\n    <!-- Access signal values -->\n    <div style=\"margin-top: 10px; font-size: 0.9em; color: var(--text-color-secondary)\">\n      {{ currentLesson.baseLang | flagEmoji }} -> {{ currentLesson.targetLang | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ currentLesson.baseLang | langDesc : 'es' }} que aprenden\n      {{ currentLesson.targetLang | langDesc : 'es' }}\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n" }]
         }], propDecorators: { lesson: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1564,38 +1755,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 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.coverBackground = computed(() => {
+        this.coverImageUrl = computed(() => {
             const currentLesson = this.lesson();
             const coverImage = currentLesson?.media?.images?.find((img) => img.type === 'cover');
-            const imageUrl = coverImage?.url || '/assets/images/default_banner.webp';
-            return `${GradientCss}, url("${imageUrl}")`;
+            return coverImage?.url || '/assets/images/default_banner.webp';
         });
         // Computed signal to get dynamic components as an array for easier iteration in the template
         this.dynamicComponentsArray = computed(() => {
@@ -1644,6 +1828,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
             }
         });
@@ -1655,6 +1840,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;
@@ -1704,7 +1890,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.
@@ -1731,7 +1917,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) {
@@ -1763,10 +1948,6 @@ class DCLessonEditorComponent {
             // this.saveLesson();
         }
     }
-    openCropper() {
-        // Correctly define openCropper
-        this.isCropperVisible.set(true);
-    }
     // isLoadingLesson signal is used directly
     async generateByAI() {
         const currentId = this.lessonId();
@@ -1782,10 +1963,23 @@ class DCLessonEditorComponent {
                 // 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
+            //  // Removed debugger
+            const rawHtmlContent = this.lesson()?.textCoded || '';
+            if (!rawHtmlContent) {
+                console.warn('No HTML content found in lesson to process.');
+                this.isLoadingLesson.set(false);
+                return; // Exit if no content
+            }
+            // Replace encoded JSON with actual text before Markdown conversion
+            const processedHtmlContent = this._extractTextFromEncodedJson(rawHtmlContent);
+            const turndownService = new TurndownService();
+            // Convert the processed HTML (with text instead of JSON) to Markdown
+            const markdownText = turndownService.turndown(processedHtmlContent);
+            const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson(), markdownText);
+            if (improvedMarkdown) {
+                // Convert the improved Markdown back to HTML before setting it
+                const improvedHtml = marked(improvedMarkdown);
+                this.lesson.set({ ...this.lesson(), textCoded: improvedHtml }); // Update the signal with the converted HTML
                 // Toast success is handled by the service
             }
             else {
@@ -1803,6 +1997,27 @@ class DCLessonEditorComponent {
             this.isLoadingLesson.set(false); // Stop loading
         }
     }
+    /**
+     * Replaces encoded JSON blocks (~...~) in HTML with their 'settings.text' value.
+     * @param htmlInput The HTML string containing encoded JSON.
+     * @returns The processed HTML string with text replacements.
+     */
+    _extractTextFromEncodedJson(htmlInput) {
+        const jsonRegex = /~(.+?)~/g; // Global flag to replace all occurrences
+        return htmlInput.replace(jsonRegex, (match, jsonCoded) => {
+            try {
+                // Attempt to decode HTML entities that might be present in the JSON string
+                const decodedJson = jsonCoded.replace(/"/g, '"').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+                const data = JSON.parse(decodedJson);
+                // Return the text if available, otherwise keep the original match (or an error placeholder)
+                return data?.settings?.text || match;
+            }
+            catch (error) {
+                console.error('Failed to parse JSON inside HTML:', jsonCoded, error);
+                return '<!-- invalid component data -->'; // Placeholder for parsing errors
+            }
+        });
+    }
     /**
      * Handles the image upload event, updates the lesson signal via the service, and saves.
      * @param event The image upload event data.
@@ -1845,9 +2060,7 @@ 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  <div class=\"header-cover\" [style.background-image]=\"coverBackground()\"></div>\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
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", providers: [LessonNotionService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }, { propertyName: "dhtml", first: true, predicate: ["dhtml"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n</div>\n\n<br />\n\n<!-- Lesson Metadata Editor -->\n<dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\"\n  (generateAIRequest)=\"generateByAI()\"\n  (propertyChange)=\"updateLessonProperty($event.property, $event.value)\">\n</dc-lesson-metadata-editor>\n\n<hr />\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button></li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\" [test]=\"true\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i3$1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "test"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i5$1.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "style", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: DCLessonComponentAdderComponent, selector: "dc-lesson-component-adder", outputs: ["componentAdded"] }, { kind: "component", type: // Add the component adder here
                 DCLessonMetadataEditorComponent, selector: "dc-lesson-metadata-editor", inputs: ["lesson", "isLoadingLesson"], outputs: ["saveRequest", "importNotionRequest", "improveNotionRequest", "generateAIRequest", "propertyChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
@@ -1861,11 +2074,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  <div class=\"header-cover\" [style.background-image]=\"coverBackground()\"></div>\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  (generateAIRequest)=\"generateByAI()\"\n  (propertyChange)=\"updateLessonProperty($event.property, $event.value)\">\n</dc-lesson-metadata-editor>\n\n<hr />\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li>ID: {{ comp.id }} - Tipo: {{ comp.component }}<button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button></li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\" [test]=\"true\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}\n"] }]
         }], ctorParameters: () => [], propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', { read: ViewContainerRef }]
@@ -1901,5 +2112,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, 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