feat: implement micro learning generation service with cached LLM content delivery and UI components

src/components/micro_learning/MicroLearningContainer.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import ConceptExplainer from './ConceptExplainer';
 import ScenarioQuiz from './ScenarioQuiz';
 import FlashcardSet from './FlashcardSet';
-import ReflectionPrompt from './ReflectionPrompt';
+
 import { useMicroLearningCompletions } from '../../hooks/useMicroLearningCompletions';
 
 export default function MicroLearningContainer({ microLearning, sessionWeek, onCompletedSuccessfully }) {
@@ -42,8 +42,7 @@ export default function MicroLearningContainer({ microLearning, sessionWeek, onC
         return <ScenarioQuiz {...props} />;
       case 'flashcard_set':
         return <FlashcardSet {...props} />;
-      case 'reflection_prompt':
+
-        return <ReflectionPrompt {...props} />;
       default:
         return <div>Unknown micro learning type.</div>;
     }

src/components/micro_learning/MicroLearningSelector.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
-import { Loader, BookOpen, Target, Layers, MessageCircle } from 'lucide-react';
+import { Loader, BookOpen, Target, Layers, CheckCircle } from 'lucide-react';
 import { useMicroLearnings } from '../../hooks/useMicroLearnings';
 import MicroLearningContainer from './MicroLearningContainer';
 import Card from '../ui/Card';
@@ -23,19 +23,28 @@ const TYPES = [
     description: 'Test your recall with a set of quick flashcards.',
     icon: Layers,
   },
-  {
-    key: 'reflection_prompt',
-    label: 'Reflection Prompt',
-    description: 'Connect the topic to your own professional experience.',
-    icon: MessageCircle,
-  },
 ];
 
 export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCompleted }) {
-  const { getOrGenerate } = useMicroLearnings();
+  const { getOrGenerate, checkExistingTypes } = useMicroLearnings();
   const [selectedML, setSelectedML] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [existingTypes, setExistingTypes] = useState({});
+
+  // Check which types already have generated content
+  useEffect(() => {
+    if (!topicId) return;
+    let cancelled = false;
+
+    checkExistingTypes(topicId).then((result) => {
+      if (!cancelled) setExistingTypes(result);
+    }).catch((err) => {
+      console.warn('[MicroLearningSelector] Could not check existing types:', err);
+    });
+
+    return () => { cancelled = true; };
+  }, [topicId]);
 
   const handleSelection = async (type) => {
     setLoading(true);
@@ -43,6 +52,8 @@ export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCom
     try {
       const record = await getOrGenerate(topicId, type);
       setSelectedML(record);
+      // Mark this type as existing after successful generation
+      setExistingTypes(prev => ({ ...prev, [type]: true }));
     } catch (err) {
       console.error('[MicroLearningSelector] Generation failed:', err);
       setError(err.message || 'Failed to generate content. Please try again.');
@@ -97,7 +108,7 @@ export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCom
     );
   }
 
-  // Type selection menu — always shows all 4 types
+  // Type selection menu
   return (
     <Card className="w-full">
       <div className="mb-6 pb-4 border-b border-bg-warm">
@@ -105,21 +116,30 @@ export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCom
         <p className="text-sm text-fg-muted mt-1">Select how you want to engage with this topic.</p>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {TYPES.map(({ key, label, description, icon: Icon }) => (
+        {TYPES.map(({ key, label, description, icon: Icon }) => {
-          <div
+          const exists = existingTypes[key];
-            key={key}
+          return (
-            className="cursor-pointer border-2 border-bg-warm rounded-[var(--r-md)] p-6 hover:border-teal hover:bg-teal/5 transition-all group"
+            <div
-            onClick={() => handleSelection(key)}
+              key={key}
-          >
+              className="cursor-pointer border-2 border-bg-warm rounded-[var(--r-md)] p-6 hover:border-teal hover:bg-teal/5 transition-all group relative"
-            <div className="flex items-center gap-3 mb-3">
+              onClick={() => handleSelection(key)}
-              <div className="w-10 h-10 rounded-full bg-teal/10 flex items-center justify-center flex-shrink-0 group-hover:bg-teal/20 transition-colors">
+            >
-                <Icon size={20} className="text-teal" />
+              {exists && (
+                <div className="absolute top-3 right-3 flex items-center gap-1.5 text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full text-xs font-medium">
+                  <CheckCircle size={14} />
+                  <span>Generated</span>
+                </div>
+              )}
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-10 h-10 rounded-full bg-teal/10 flex items-center justify-center flex-shrink-0 group-hover:bg-teal/20 transition-colors">
+                  <Icon size={20} className="text-teal" />
+                </div>
+                <h3 className="font-bold text-lg text-teal">{label}</h3>
               </div>
-              <h3 className="font-bold text-lg text-teal">{label}</h3>
+              <p className="text-sm text-fg-muted">{description}</p>
             </div>
-            <p className="text-sm text-fg-muted">{description}</p>
+          );
-          </div>
+        })}
-        ))}
       </div>
     </Card>
   );

src/hooks/useMicroLearnings.js

@@ -1,4 +1,4 @@
-import { getOrGenerateMicroLearning, regenerateMicroLearning } from '../lib/microLearningService';
+import { getOrGenerateMicroLearning, regenerateMicroLearning, getExistingTypes } from '../lib/microLearningService';
 
 export function useMicroLearnings() {
   /**
@@ -16,5 +16,13 @@ export function useMicroLearnings() {
     return regenerateMicroLearning(topicId, type);
   };
 
-  return { getOrGenerate, regenerate };
+  /**
+   * Check which micro learning types already exist for a given topic.
+   * Returns { concept_explainer: true, scenario_quiz: false, ... }
+   */
+  const checkExistingTypes = async (topicId) => {
+    return getExistingTypes(topicId);
+  };
+
+  return { getOrGenerate, regenerate, checkExistingTypes };
 }

src/lib/microLearningService.js

@@ -15,7 +15,6 @@ import {
   EMIT_CONCEPT_EXPLAINER_TOOL,
   EMIT_SCENARIO_QUIZ_TOOL,
   EMIT_FLASHCARD_SET_TOOL,
-  EMIT_REFLECTION_PROMPT_TOOL,
 } from './llmTools';
 import * as db from './db';
 
@@ -53,15 +52,6 @@ Mix three question types:
   - Relationships: "How does X relate to Y?"
 Keep answers concise — one or two sentences maximum.`,
   },
-  reflection_prompt: {
-    tool: EMIT_REFLECTION_PROMPT_TOOL,
-    tier: 'fast',
-    maxTokens: 1024,
-    instructions: `Generate a reflection prompt.
-The question must be open-ended and cannot be answered with a fact.
-It must require the employee to think about their own professional context — their team, their role, their past experience.
-The model answer should show depth and specificity (3–5 sentences). It is not a rubric — it is an example of thoughtful reflection.`,
-  },
 };
 
 const SYSTEM_PROMPT = `You are an expert learning content writer for Respellion, an internal IT company.
@@ -145,6 +135,21 @@ export async function deleteAllForTopic(topicId) {
   }
 }
 
+// ── Public helpers ────────────────────────────────────────────────────────────
+
+/**
+ * Check which micro learning types already exist for a given topic.
+ * Returns an object like { concept_explainer: true, scenario_quiz: false, ... }
+ */
+export async function getExistingTypes(topicId) {
+  const types = Object.keys(MICRO_LEARNING_TYPES);
+  const result = {};
+  for (const type of types) {
+    result[type] = !!(await findExisting(topicId, type));
+  }
+  return result;
+}
+
 // ── Internal helpers ──────────────────────────────────────────────────────────
 
 async function findExisting(topicId, type) {