Topic AI changes

src/components/CustomRoadmap/CustomRoadmap.tsx

@@ -118,6 +118,7 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
         resourceId={roadmap!._id}
         resourceTitle={roadmap!.title}
         resourceType="roadmap"
+        renderer='editor'
         isEmbed={isEmbed}
         canSubmitContribution={false}
       />

src/components/TopicDetail/TopicDetail.tsx

@@ -25,7 +25,7 @@ import { Ban, FileText, HeartHandshake, Star, X } from 'lucide-react';
 import { getUrlParams, parseUrl } from '../../lib/browser';
 import { Spinner } from '../ReactIcons/Spinner';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
-import { resourceTitleFromId } from '../../lib/roadmap.ts';
+import { resourceTitleFromId, type AllowedRoadmapRenderer } from '../../lib/roadmap.ts';
 import { lockBodyScroll } from '../../lib/dom.ts';
 import { TopicDetailLink } from './TopicDetailLink.tsx';
 import { ResourceListSeparator } from './ResourceListSeparator.tsx';
@@ -44,6 +44,7 @@ type TopicDetailProps = {
   resourceId?: string;
   resourceTitle?: string;
   resourceType?: ResourceType;
+  renderer?: AllowedRoadmapRenderer;
 
   isEmbed?: boolean;
   canSubmitContribution: boolean;
@@ -93,6 +94,7 @@ export function TopicDetail(props: TopicDetailProps) {
     canSubmitContribution,
     resourceId: defaultResourceId,
     isEmbed = false,
+    renderer = 'balsamiq',
     resourceTitle,
   } = props;
 
@@ -397,6 +399,7 @@ export function TopicDetail(props: TopicDetailProps) {
                   <TopicDetailsTabs
                     activeTab={activeTab}
                     setActiveTab={setActiveTab}
+                    hasAITutor={renderer === 'editor'}
                   />
                 )}
                 <div

src/components/TopicDetail/TopicDetailsTabs.tsx

@@ -5,10 +5,11 @@ export type AllowedTopicDetailsTabs = 'content' | 'ai';
 type TopicDetailsTabsProps = {
   activeTab: AllowedTopicDetailsTabs;
   setActiveTab: (tab: AllowedTopicDetailsTabs) => void;
+  hasAITutor?: boolean;
 };
 
 export function TopicDetailsTabs(props: TopicDetailsTabsProps) {
-  const { activeTab, setActiveTab } = props;
+  const { activeTab, setActiveTab, hasAITutor = true } = props;
 
   return (
     <div className="flex w-max gap-1.5">
@@ -23,6 +24,7 @@ export function TopicDetailsTabs(props: TopicDetailsTabsProps) {
         icon={WandSparkles}
         label="AI Tutor"
         isNew={true}
+        isDisabled={!hasAITutor}
         onClick={() => setActiveTab('ai')}
       />
     </div>
@@ -34,27 +36,33 @@ type TopicDetailsTabProps = {
   icon: LucideIcon;
   label: string;
   isNew?: boolean;
+  isDisabled?: boolean;
   onClick: () => void;
 };
 
 function TopicDetailsTab(props: TopicDetailsTabProps) {
-  const { isActive, icon: Icon, label, isNew, onClick } = props;
+  const { isActive, icon: Icon, label, isNew, isDisabled, onClick } = props;
 
   return (
     <button
-      className="flex items-center gap-2 rounded-md border border-gray-300 px-2 py-1 text-sm text-gray-500 hover:border-gray-400 data-[state=active]:border-black data-[state=active]:bg-black data-[state=active]:text-white"
+      className="flex select-none disabled:pointer-events-none items-center gap-2 rounded-md border border-gray-300 px-2 py-1 text-sm text-gray-500 hover:border-gray-400 data-[state=active]:border-black data-[state=active]:bg-black data-[state=active]:text-white"
       data-state={isActive ? 'active' : 'inactive'}
       onClick={onClick}
-      disabled={isActive}
+      disabled={isDisabled}
       type="button"
     >
       <Icon className="h-4 w-4" />
       <span className="hidden sm:block">{label}</span>
-      {isNew && (
+      {isNew && !isDisabled && (
         <span className="hidden rounded-sm bg-yellow-400 px-1 text-xs text-black sm:block">
           New
         </span>
       )}
+      {isDisabled && (
+        <span className="hidden rounded-sm bg-gray-400 px-1 text-xs text-white sm:block">
+          Soon
+        </span>
+      )}
     </button>
   );
 }

src/pages/[roadmapId]/index.astro

@@ -102,6 +102,7 @@ const courses = roadmapData.courses || [];
     resourceTitle={roadmapData.title}
     resourceId={roadmapId}
     resourceType='roadmap'
+    renderer={roadmapData.renderer}
     client:idle
     canSubmitContribution={true}
   />

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -108,6 +108,7 @@ const ogImageUrl = getOpenGraphImageUrl({
             resourceId={bestPracticeId}
             resourceTitle={bestPracticeData.title}
             resourceType='best-practice'
+            renderer={'balsamiq'}
             client:idle
             canSubmitContribution={true}
           />