wip

src/components/AIRoadmap/AIRoadmap.tsx

@@ -12,6 +12,10 @@ import { GenerateAIRoadmap } from './GenerateAIRoadmap';
 import { AIRoadmapContent, type RoadmapNodeDetails } from './AIRoadmapContent';
 import { AIRoadmapChat } from './AIRoadmapChat';
 import { AlertCircleIcon } from 'lucide-react';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
+import { getAiCourseLimitOptions } from '../../queries/ai-course';
+import { billingDetailsOptions } from '../../queries/billing';
 
 export type AIRoadmapChatActions = {
   handleNodeClick: (node: RoadmapNodeDetails) => void;
@@ -42,7 +46,29 @@ export function AIRoadmap(props: AIRoadmapProps) {
     error: aiRoadmapError,
   } = useQuery(aiRoadmapOptions(roadmapSlug), queryClient);
 
+  const {
+    data: tokenUsage,
+    isLoading: isTokenUsageLoading,
+    refetch: refetchTokenUsage,
+  } = useQuery(getAiCourseLimitOptions(), queryClient);
+
+  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
+    useQuery(billingDetailsOptions(), queryClient);
+
+  const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);
+  const isPaidUser = userBillingDetails?.status === 'active';
+
   const handleRegenerate = async (prompt?: string) => {
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
+    if (!isPaidUser && isLimitExceeded) {
+      setShowUpgradeModal(true);
+      return;
+    }
+
     flushSync(() => {
       setIsRegenerating(true);
       setRegeneratedSvgHtml(null);
@@ -76,12 +102,17 @@ export function AIRoadmap(props: AIRoadmapProps) {
       },
       onFinish: () => {
         setIsRegenerating(false);
+        refetchTokenUsage();
         queryClient.invalidateQueries(aiRoadmapOptions(roadmapSlug));
       },
     });
   };
 
-  const isLoading = isLoadingBySlug || isRegenerating;
+  const isLoading =
+    isLoadingBySlug ||
+    isRegenerating ||
+    isTokenUsageLoading ||
+    isBillingDetailsLoading;
 
   const handleNodeClick = useCallback(
     (node: RoadmapNodeDetails) => {

src/components/AIRoadmap/AIRoadmapChat.tsx

@@ -124,6 +124,10 @@ export function AIRoadmapChat(props: AIRoadmapChatProps) {
       });
       sendMessages(newMessages);
       setInputValue('');
+
+      setTimeout(() => {
+        scrollToBottom('smooth');
+      }, 0);
     },
     [inputValue, isStreamingMessage, messages, sendMessages, setMessages],
   );
@@ -174,11 +178,7 @@ export function AIRoadmapChat(props: AIRoadmapChatProps) {
 
   useImperativeHandle(aiChatActionsRef, () => ({
     handleNodeClick: (node: RoadmapNodeDetails) => {
-      flushSync(() => {
+      handleSubmitInput(`Explain what is "${node.nodeTitle}" topic in detail.`);
-        setInputValue(`Explain what is ${node.nodeTitle} topic in detail.`);
-      });
-
-      inputRef.current?.focus();
     },
   }));
 
@@ -304,6 +304,24 @@ export function AIRoadmapChat(props: AIRoadmapChatProps) {
               </div>
             )}
 
+            {!isLoggedIn() && (
+              <div className="absolute inset-0 z-10 flex items-center justify-center gap-2 bg-black text-white">
+                <LockIcon
+                  className="size-4 cursor-not-allowed"
+                  strokeWidth={2.5}
+                />
+                <p className="cursor-not-allowed">Please login to continue</p>
+                <button
+                  onClick={() => {
+                    showLoginPopup();
+                  }}
+                  className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300"
+                >
+                  Login / Register
+                </button>
+              </div>
+            )}
+
             <input
               ref={inputRef}
               type="text"

src/components/AIRoadmap/AIRoadmapRegenerate.tsx

@@ -19,6 +19,9 @@ import { aiRoadmapOptions } from '../../queries/ai-roadmap';
 import { UpdatePreferences } from '../GenerateGuide/UpdatePreferences';
 import { generateAIRoadmapFromText } from '@roadmapsh/editor';
 import { useToast } from '../../hooks/use-toast';
+import { showLoginPopup } from '../../lib/popup';
+import { isLoggedIn } from '../../lib/jwt';
+import { useAuth } from '../../hooks/use-auth';
 
 type AIRoadmapRegenerateProps = {
   onRegenerate: (prompt?: string) => void;
@@ -34,6 +37,7 @@ export function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) {
   const [showPromptModal, setShowPromptModal] = useState(false);
   const [showUpdatePreferencesModal, setShowUpdatePreferencesModal] =
     useState(false);
+  const currentUser = useAuth();
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -133,7 +137,9 @@ export function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) {
   );
 
   const showUpdatePreferences =
-    aiRoadmap?.questionAndAnswers && aiRoadmap.questionAndAnswers.length > 0;
+    aiRoadmap?.questionAndAnswers &&
+    aiRoadmap.questionAndAnswers.length > 0 &&
+    currentUser?.id === aiRoadmap.userId;
 
   return (
     <>
@@ -183,6 +189,11 @@ export function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) {
             {showUpdatePreferences && (
               <ActionButton
                 onClick={() => {
+                  if (!isLoggedIn()) {
+                    showLoginPopup();
+                    return;
+                  }
+
                   setIsDropdownVisible(false);
                   setShowUpdatePreferencesModal(true);
                 }}
@@ -193,6 +204,11 @@ export function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) {
 
             <ActionButton
               onClick={() => {
+                if (!isLoggedIn()) {
+                  showLoginPopup();
+                  return;
+                }
+
                 setIsDropdownVisible(false);
                 onRegenerate();
               }}
@@ -201,6 +217,11 @@ export function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) {
             />
             <ActionButton
               onClick={() => {
+                if (!isLoggedIn()) {
+                  showLoginPopup();
+                  return;
+                }
+
                 setIsDropdownVisible(false);
                 setShowPromptModal(true);
               }}
@@ -211,14 +232,28 @@ export function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) {
             <hr className="my-1 border-gray-200" />
 
             <ActionButton
-              onClick={saveAIRoadmap}
+              onClick={() => {
+                if (!isLoggedIn()) {
+                  showLoginPopup();
+                  return;
+                }
+
+                saveAIRoadmap();
+              }}
               icon={SaveIcon}
               label="Start Learning"
               isLoading={isSavingAIRoadmap}
             />
 
             <ActionButton
-              onClick={editAIRoadmap}
+              onClick={() => {
+                if (!isLoggedIn()) {
+                  showLoginPopup();
+                  return;
+                }
+
+                editAIRoadmap();
+              }}
               icon={PenSquare}
               label="Edit in Editor"
               isLoading={isEditingAIRoadmap}

src/components/GenerateCourse/GetAICourse.tsx

@@ -59,7 +59,6 @@ export function GetAICourse(props: GetAICourseProps) {
 
     await generateCourse({
       term: aiCourse.keyword,
-      difficulty: aiCourse.difficulty,
       slug: courseSlug,
       prompt,
       onCourseChange: (course, rawData) => {
@@ -68,7 +67,6 @@ export function GetAICourse(props: GetAICourseProps) {
           {
             ...aiCourse,
             title: course.title,
-            difficulty: course.difficulty,
             modules: course.modules,
           },
         );
@@ -89,7 +87,6 @@ export function GetAICourse(props: GetAICourseProps) {
       course={{
         title: aiCourse?.title || '',
         modules: aiCourse?.modules || [],
-        difficulty: aiCourse?.difficulty || 'Easy',
         done: aiCourse?.done || [],
       }}
       isLoading={isLoading || isRegenerating}

src/components/GenerateGuide/AIGuide.tsx

@@ -16,6 +16,9 @@ import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 import { AIGuideChat } from './AIGuideChat';
 import { AIGuideContent } from './AIGuideContent';
 import { GenerateAIGuide } from './GenerateAIGuide';
+import { getAiCourseLimitOptions } from '../../queries/ai-course';
+import { billingDetailsOptions } from '../../queries/billing';
+import { showLoginPopup } from '../../lib/popup';
 
 type AIGuideProps = {
   guideSlug?: string;
@@ -37,6 +40,18 @@ export function AIGuide(props: AIGuideProps) {
     queryClient,
   );
 
+  const {
+    data: tokenUsage,
+    isLoading: isTokenUsageLoading,
+    refetch: refetchTokenUsage,
+  } = useQuery(getAiCourseLimitOptions(), queryClient);
+
+  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
+    useQuery(billingDetailsOptions(), queryClient);
+
+  const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);
+  const isPaidUser = userBillingDetails?.status === 'active';
+
   const { data: aiGuideSuggestions, isLoading: isAiGuideSuggestionsLoading } =
     useQuery(
       {
@@ -57,6 +72,16 @@ export function AIGuide(props: AIGuideProps) {
   }, [aiGuideSuggestions]);
 
   const handleRegenerate = async (prompt?: string) => {
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
+    if (!isPaidUser && isLimitExceeded) {
+      setShowUpgradeModal(true);
+      return;
+    }
+
     flushSync(() => {
       setIsRegenerating(true);
       setRegeneratedHtml(null);
@@ -92,6 +117,12 @@ export function AIGuide(props: AIGuideProps) {
     });
   };
 
+  const isLoading =
+    isLoadingBySlug ||
+    isRegenerating ||
+    isTokenUsageLoading ||
+    isBillingDetailsLoading;
+
   return (
     <AITutorLayout
       wrapperClassName="flex-row p-0 lg:p-0 overflow-hidden bg-white"
@@ -106,7 +137,7 @@ export function AIGuide(props: AIGuideProps) {
           <AIGuideContent
             html={regeneratedHtml || aiGuide?.html || ''}
             onRegenerate={handleRegenerate}
-            isLoading={isLoadingBySlug || isRegenerating}
+            isLoading={isLoading}
             guideSlug={guideSlug}
           />
         )}

src/components/GenerateGuide/AIGuideChat.tsx

@@ -60,11 +60,8 @@ export function AIGuideChat(props: AIGuideChatProps) {
     refetch: refetchTokenUsage,
   } = useQuery(getAiCourseLimitOptions(), queryClient);
 
-  const {
+  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
-    data: userBillingDetails,
+    useQuery(billingDetailsOptions(), queryClient);
-    isLoading: isBillingDetailsLoading,
-    refetch: refetchBillingDetails,
-  } = useQuery(billingDetailsOptions(), queryClient);
 
   const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);
   const isPaidUser = userBillingDetails?.status === 'active';
@@ -332,6 +329,24 @@ export function AIGuideChat(props: AIGuideChatProps) {
               </div>
             )}
 
+            {!isLoggedIn() && (
+              <div className="absolute inset-0 z-10 flex items-center justify-center gap-2 bg-black text-white">
+                <LockIcon
+                  className="size-4 cursor-not-allowed"
+                  strokeWidth={2.5}
+                />
+                <p className="cursor-not-allowed">Please login to continue</p>
+                <button
+                  onClick={() => {
+                    showLoginPopup();
+                  }}
+                  className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300"
+                >
+                  Login / Register
+                </button>
+              </div>
+            )}
+
             <input
               ref={inputRef}
               type="text"

src/components/GenerateGuide/AIGuideRegenerate.tsx

@@ -10,6 +10,9 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { getAiGuideOptions } from '../../queries/ai-guide';
 import { queryClient } from '../../stores/query-client';
 import { httpPost } from '../../lib/query-http';
+import { useAuth } from '../../hooks/use-auth';
+import { showLoginPopup } from '../../lib/popup';
+import { isLoggedIn } from '../../lib/jwt';
 
 type AIGuideRegenerateProps = {
   onRegenerate: (prompt?: string) => void;
@@ -24,6 +27,7 @@ export function AIGuideRegenerate(props: AIGuideRegenerateProps) {
   const [showPromptModal, setShowPromptModal] = useState(false);
   const [showUpdatePreferencesModal, setShowUpdatePreferencesModal] =
     useState(false);
+  const currentUser = useAuth();
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -61,7 +65,9 @@ export function AIGuideRegenerate(props: AIGuideRegenerateProps) {
   );
 
   const showUpdatePreferences =
-    aiGuide?.questionAndAnswers && aiGuide.questionAndAnswers.length > 0;
+    aiGuide?.questionAndAnswers &&
+    aiGuide.questionAndAnswers.length > 0 &&
+    currentUser?.id === aiGuide.userId;
 
   return (
     <>
@@ -127,6 +133,11 @@ export function AIGuideRegenerate(props: AIGuideRegenerateProps) {
 
             <button
               onClick={() => {
+                if (!isLoggedIn()) {
+                  showLoginPopup();
+                  return;
+                }
+
                 setIsDropdownVisible(false);
                 onRegenerate();
               }}
@@ -141,6 +152,11 @@ export function AIGuideRegenerate(props: AIGuideRegenerateProps) {
             </button>
             <button
               onClick={() => {
+                if (!isLoggedIn()) {
+                  showLoginPopup();
+                  return;
+                }
+
                 setIsDropdownVisible(false);
                 setShowPromptModal(true);
               }}