Merge branch 'feat/questions-chat' of github.com:kamranahmedse/developer-roadmap into feat/questions-chat

2025-09-02 22:02:39 +02:00 · 2025-06-25 17:14:34 +01:00
parent df14860a14 0f8f6eea57
commit f79733d8b7
8 changed files with 219 additions and 54 deletions
--- a/src/components/AIRoadmap/AIRoadmap.tsx
+++ b/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) => {
--- a/src/components/AIRoadmap/AIRoadmapChat.tsx
+++ b/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(() => {
-        setInputValue(`Explain what is ${node.nodeTitle} topic in detail.`);
-      });
-
-      inputRef.current?.focus();
+      handleSubmitInput(`Explain what is "${node.nodeTitle}" topic in detail.`);
    },
  }));

@@ -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"
--- a/src/components/AIRoadmap/AIRoadmapRegenerate.tsx
+++ b/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);

@@ -132,8 +136,11 @@ export function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) {
    queryClient,
  );

+  const isCurrentUserCreator = currentUser?.id === aiRoadmap?.userId;
  const showUpdatePreferences =
-    aiRoadmap?.questionAndAnswers && aiRoadmap.questionAndAnswers.length > 0;
+    aiRoadmap?.questionAndAnswers &&
+    aiRoadmap.questionAndAnswers.length > 0 &&
+    isCurrentUserCreator;

  return (
    <>
@@ -180,45 +187,78 @@ export function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) {
        </button>
        {isDropdownVisible && (
          <div className="absolute top-full right-0 min-w-[190px] translate-y-1 overflow-hidden rounded-md border border-gray-200 bg-white shadow-md">
-            {showUpdatePreferences && (
-              <ActionButton
-                onClick={() => {
-                  setIsDropdownVisible(false);
-                  setShowUpdatePreferencesModal(true);
-                }}
-                icon={SettingsIcon}
-                label="Update Preferences"
-              />
+            {isCurrentUserCreator && (
+              <>
+                {showUpdatePreferences && (
+                  <ActionButton
+                    onClick={() => {
+                      if (!isLoggedIn()) {
+                        showLoginPopup();
+                        return;
+                      }
+
+                      setIsDropdownVisible(false);
+                      setShowUpdatePreferencesModal(true);
+                    }}
+                    icon={SettingsIcon}
+                    label="Update Preferences"
+                  />
+                )}
+
+                <ActionButton
+                  onClick={() => {
+                    if (!isLoggedIn()) {
+                      showLoginPopup();
+                      return;
+                    }
+
+                    setIsDropdownVisible(false);
+                    onRegenerate();
+                  }}
+                  icon={RefreshCcw}
+                  label="Regenerate"
+                />
+                <ActionButton
+                  onClick={() => {
+                    if (!isLoggedIn()) {
+                      showLoginPopup();
+                      return;
+                    }
+
+                    setIsDropdownVisible(false);
+                    setShowPromptModal(true);
+                  }}
+                  icon={PenSquare}
+                  label="Modify Prompt"
+                />
+
+                <hr className="my-1 border-gray-200" />
+              </>
            )}

            <ActionButton
              onClick={() => {
-                setIsDropdownVisible(false);
-                onRegenerate();
-              }}
-              icon={RefreshCcw}
-              label="Regenerate"
-            />
-            <ActionButton
-              onClick={() => {
-                setIsDropdownVisible(false);
-                setShowPromptModal(true);
-              }}
-              icon={PenSquare}
-              label="Modify Prompt"
-            />
+                if (!isLoggedIn()) {
+                  showLoginPopup();
+                  return;
+                }

-            <hr className="my-1 border-gray-200" />
-
-            <ActionButton
-              onClick={saveAIRoadmap}
+                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}
--- a/src/components/GenerateCourse/GetAICourse.tsx
+++ b/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}
--- a/src/components/GenerateGuide/AIGuide.tsx
+++ b/src/components/GenerateGuide/AIGuide.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { ExternalLink } from 'lucide-react';
+import { AlertCircleIcon, ExternalLink } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { generateGuide } from '../../helper/generate-ai-guide';
@@ -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;
@@ -32,10 +35,23 @@ export function AIGuide(props: AIGuideProps) {

  // only fetch the guide if the guideSlug is provided
  // otherwise we are still generating the guide
-  const { data: aiGuide, isLoading: isLoadingBySlug } = useQuery(
-    getAiGuideOptions(guideSlug),
-    queryClient,
-  );
+  const {
+    data: aiGuide,
+    isLoading: isLoadingBySlug,
+    error: aiGuideError,
+  } = useQuery(getAiGuideOptions(guideSlug), 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 +73,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,25 +118,44 @@ 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"
+      wrapperClassName="flex-row p-0 lg:p-0 relative overflow-hidden bg-white"
      containerClassName="h-[calc(100vh-49px)] overflow-hidden relative"
    >
      {showUpgradeModal && (
        <UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} />
      )}

+      {!isLoading && aiGuideError && (
+        <div className="absolute inset-0 z-10 flex h-full flex-col items-center justify-center bg-white">
+          <div className="flex flex-col items-center justify-center gap-2">
+            <AlertCircleIcon className="size-10 text-gray-500" />
+            <p className="text-center">
+              {aiGuideError?.message || 'Something went wrong'}
+            </p>
+          </div>
+        </div>
+      )}
+
      <div className="grow overflow-y-auto p-4 pt-0">
-        {guideSlug && (
+        {guideSlug && !aiGuideError && (
          <AIGuideContent
            html={regeneratedHtml || aiGuide?.html || ''}
            onRegenerate={handleRegenerate}
-            isLoading={isLoadingBySlug || isRegenerating}
+            isLoading={isLoading}
            guideSlug={guideSlug}
          />
        )}
-        {!guideSlug && <GenerateAIGuide onGuideSlugChange={setGuideSlug} />}
+        {!guideSlug && !aiGuideError && (
+          <GenerateAIGuide onGuideSlugChange={setGuideSlug} />
+        )}

        {aiGuide && !isRegenerating && (
          <div className="mx-auto mt-12 mb-12 max-w-4xl">
--- a/src/components/GenerateGuide/AIGuideChat.tsx
+++ b/src/components/GenerateGuide/AIGuideChat.tsx
@@ -60,11 +60,8 @@ export function AIGuideChat(props: AIGuideChatProps) {
    refetch: refetchTokenUsage,
  } = useQuery(getAiCourseLimitOptions(), queryClient);

-  const {
-    data: userBillingDetails,
-    isLoading: isBillingDetailsLoading,
-    refetch: refetchBillingDetails,
-  } = useQuery(billingDetailsOptions(), queryClient);
+  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
+    useQuery(billingDetailsOptions(), queryClient);

  const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);
  const isPaidUser = userBillingDetails?.status === 'active';
@@ -127,6 +124,10 @@ export function AIGuideChat(props: AIGuideChatProps) {
      });
      sendMessages(newMessages);
      setInputValue('');
+
+      setTimeout(() => {
+        scrollToBottom('smooth');
+      }, 0);
    },
    [inputValue, isStreamingMessage, messages, sendMessages, setMessages],
  );
@@ -332,6 +333,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"
--- a/src/components/GenerateGuide/AIGuideRegenerate.tsx
+++ b/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);
              }}
--- a/src/queries/ai-guide.ts
+++ b/src/queries/ai-guide.ts
@@ -48,7 +48,6 @@ export function getAiGuideOptions(guideSlug?: string) {
      };
    },
    enabled: !!guideSlug,
-    refetchOnMount: false,
  });
 }