Add regenerate lessons

src/components/GenerateCourse/AICourseLesson.tsx

@@ -20,12 +20,13 @@ import { httpPatch } from '../../lib/query-http';
 import { slugify } from '../../lib/slugger';
 import {
   getAiCourseLimitOptions,
-  getAiCourseOptions
+  getAiCourseOptions,
 } from '../../queries/ai-course';
 import { useIsPaidUser } from '../../queries/billing';
 import { queryClient } from '../../stores/query-client';
 import { AICourseFollowUp } from './AICourseFollowUp';
 import './AICourseFollowUp.css';
+import { RegenerateLesson } from './RegenerateLesson';
 
 type AICourseLessonProps = {
   courseSlug: string;
@@ -78,7 +79,10 @@ export function AICourseLesson(props: AICourseLessonProps) {
     [activeModuleIndex, activeLessonIndex],
   );
 
-  const generateAiCourseContent = async () => {
+  const generateAiCourseContent = async (
+    isForce?: boolean,
+    customPrompt?: string,
+  ) => {
     setIsLoading(true);
     setError('');
     setLessonHtml('');
@@ -107,6 +111,8 @@ export function AICourseLesson(props: AICourseLessonProps) {
         body: JSON.stringify({
           moduleIndex: activeModuleIndex,
           lessonIndex: activeLessonIndex,
+          isForce,
+          customPrompt,
         }),
       },
     );
@@ -219,6 +225,11 @@ export function AICourseLesson(props: AICourseLessonProps) {
 
           {!isGenerating && !isLoading && (
             <div className="absolute right-3 top-3 flex items-center justify-between gap-2">
+              <RegenerateLesson
+                onRegenerateLesson={(prompt) => {
+                  generateAiCourseContent(true, prompt);
+                }}
+              />
               <button
                 disabled={isLoading || isTogglingDone}
                 className={cn(

src/components/GenerateCourse/RegenerateLesson.tsx

@@ -0,0 +1,100 @@
+import { PenSquare, RefreshCcw } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { cn } from '../../lib/classname';
+import { useIsPaidUser } from '../../queries/billing';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { ModifyCoursePrompt } from './ModifyCoursePrompt';
+
+type RegenerateLessonProps = {
+  onRegenerateLesson: (prompt?: string) => void;
+};
+
+export function RegenerateLesson(props: RegenerateLessonProps) {
+  const { onRegenerateLesson } = props;
+
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const [showPromptModal, setShowPromptModal] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { isPaidUser } = useIsPaidUser();
+
+  useOutsideClick(ref, () => setIsDropdownVisible(false));
+
+  return (
+    <>
+      {showUpgradeModal && (
+        <UpgradeAccountModal
+          onClose={() => {
+            setShowUpgradeModal(false);
+          }}
+        />
+      )}
+
+      {showPromptModal && (
+        <ModifyCoursePrompt
+          title="Give AI more context"
+          description="Pass additional information to the AI to generate a lesson."
+          onClose={() => setShowPromptModal(false)}
+          onSubmit={(prompt) => {
+            setShowPromptModal(false);
+            onRegenerateLesson(prompt);
+          }}
+        />
+      )}
+
+      <div className="relative mr-2 flex items-center" ref={ref}>
+        <button
+          className={cn('rounded-full p-1 text-gray-400 hover:text-black', {
+            'text-black': isDropdownVisible,
+          })}
+          onClick={() => setIsDropdownVisible(!isDropdownVisible)}
+        >
+          <PenSquare className="text-current" size={16} strokeWidth={2.5} />
+        </button>
+        {isDropdownVisible && (
+          <div className="absolute right-0 top-full min-w-[170px] overflow-hidden rounded-md border border-gray-200 bg-white">
+            <button
+              onClick={() => {
+                if (!isPaidUser) {
+                  setIsDropdownVisible(false);
+                  setShowUpgradeModal(true);
+                } else {
+                  onRegenerateLesson();
+                }
+              }}
+              className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-100"
+            >
+              <RefreshCcw
+                size={16}
+                className="text-gray-400"
+                strokeWidth={2.5}
+              />
+              Regenerate
+            </button>
+            <button
+              onClick={() => {
+                setIsDropdownVisible(false);
+                if (!isPaidUser) {
+                  setShowUpgradeModal(true);
+                } else {
+                  setShowPromptModal(true);
+                }
+              }}
+              className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-100"
+            >
+              <PenSquare
+                size={16}
+                className="text-gray-400"
+                strokeWidth={2.5}
+              />
+              Modify Prompt
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}