info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-03 14:22:41 +02:00
Code Issues Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Arik Chakma
2025-06-25 21:20:42 +06:00
parent a64587b836
commit ef7397cf4a
7 changed files with 162 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/AIRoadmap/AIRoadmap.tsx
View File

@@ -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) => {

28
src/components/AIRoadmap/AIRoadmapChat.tsx
View File

@@ -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"

41
src/components/AIRoadmap/AIRoadmapRegenerate.tsx
View File

@@ -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}

3
src/components/GenerateCourse/GetAICourse.tsx
View File

@@ -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}

33
src/components/GenerateGuide/AIGuide.tsx
View File

@@ -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}
/>
)}

25
src/components/GenerateGuide/AIGuideChat.tsx
View File

@@ -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';
@@ -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"

18
src/components/GenerateGuide/AIGuideRegenerate.tsx
View File

@@ -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);
}}