diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx index f01e4b88c..d8fcdda8d 100644 --- a/src/components/TopicDetail/TopicDetail.tsx +++ b/src/components/TopicDetail/TopicDetail.tsx @@ -21,7 +21,17 @@ import type { RoadmapContentDocument, } from '../CustomRoadmap/CustomRoadmap'; import { markdownToHtml, sanitizeMarkdown } from '../../lib/markdown'; -import { Ban, BookOpen, FileText, HeartHandshake, Star, X } from 'lucide-react'; +import { + Ban, + BookOpen, + BookOpenIcon, + BotIcon, + FileText, + FileTextIcon, + HeartHandshake, + Star, + X, +} from 'lucide-react'; import { getUrlParams, parseUrl } from '../../lib/browser'; import { Spinner } from '../ReactIcons/Spinner'; import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx'; @@ -434,7 +444,9 @@ export function TopicDetail(props: TopicDetailProps) { const shouldShowAiTab = !isCustomResource && resourceType === 'roadmap'; const subjects = roadmapTreeMapping?.subjects || []; + const guides = roadmapTreeMapping?.guides || []; const hasSubjects = subjects.length > 0; + const hasGuides = guides.length > 0; const hasDataCampResources = paidResources.some((resource) => resource.title.toLowerCase().includes('datacamp'), @@ -649,12 +661,12 @@ export function TopicDetail(props: TopicDetailProps) { )} - {hasSubjects && ( + {(hasSubjects || hasGuides) && ( <> )} diff --git a/src/components/TopicDetail/TopicDetailAI.tsx b/src/components/TopicDetail/TopicDetailAI.tsx index 86838b7b7..e94ecb69d 100644 --- a/src/components/TopicDetail/TopicDetailAI.tsx +++ b/src/components/TopicDetail/TopicDetailAI.tsx @@ -2,8 +2,10 @@ import '../ChatMessages/AIChat.css'; import { useQuery } from '@tanstack/react-query'; import { + BookOpenIcon, BotIcon, ChevronRightIcon, + FileTextIcon, Gift, Loader2Icon, LockIcon, @@ -149,10 +151,11 @@ export function TopicDetailAI(props: TopicDetailAIProps) { ); const hasChatHistory = messages.length > 0; const nodeTextParts = roadmapTreeMapping?.text?.split('>') || []; - const hasSubjects = - (roadmapTreeMapping?.subjects && - roadmapTreeMapping?.subjects?.length > 0) || - nodeTextParts.length > 1; + + const subjects = roadmapTreeMapping?.subjects || []; + const guides = roadmapTreeMapping?.guides || []; + const hasGuides = guides.length > 0; + const hasSubjects = subjects.length > 0 || nodeTextParts.length > 1; return (
@@ -172,14 +175,14 @@ export function TopicDetailAI(props: TopicDetailAIProps) { /> )} - {hasSubjects && ( + {(hasSubjects || hasGuides) && (

- Complete the following AI Tutor courses + Complete the following AI Tutor courses or guides

- {roadmapTreeMapping?.subjects?.map((subject) => { + {subjects.map((subject) => { return ( + {subject} ); })} + {guides.map((guide) => { + return ( + { + if (!isLoggedIn()) { + e.preventDefault(); + onLogin(); + return; + } - {roadmapTreeMapping?.subjects?.length === 0 && ( + if (isLimitExceeded) { + e.preventDefault(); + onUpgrade(); + return; + } + }} + href={`/ai/guide/search?term=${guide}&src=topic`} + className="flex items-center gap-1.5 rounded-md border border-gray-300 bg-gray-100 px-2 py-1 hover:bg-gray-200 hover:text-black" + > + + {guide} + + ); + })} + + {subjects.length === 0 && ( { diff --git a/src/queries/roadmap-tree.ts b/src/queries/roadmap-tree.ts index 1565749a0..4cb2ad206 100644 --- a/src/queries/roadmap-tree.ts +++ b/src/queries/roadmap-tree.ts @@ -9,6 +9,7 @@ export interface RoadmapTreeDocument { nodeId: string; text: string; subjects: string[]; + guides?: string[]; }[]; createdAt: Date; updatedAt: Date;