Update UI for AI chat

src/components/RoadmapHeader.astro

@@ -2,19 +2,20 @@
 import {
   ArrowLeftIcon,
   BookOpenIcon,
+  Bot,
   FolderKanbanIcon,
   MapIcon,
   MessageCircle,
 } from 'lucide-react';
-import { TabLink } from './TabLink';
-import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
-import { ScheduleButton } from './Schedule/ScheduleButton';
-import ProgressHelpPopup from './ProgressHelpPopup.astro';
-import { MarkFavorite } from './FeaturedItems/MarkFavorite';
 import { type RoadmapFrontmatter } from '../lib/roadmap';
-import { ShareRoadmapButton } from './ShareRoadmapButton';
+import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
 import { DownloadRoadmapButton } from './DownloadRoadmapButton';
-import { CourseAnnouncement } from './SQLCourse/CourseAnnouncement';
+import { MarkFavorite } from './FeaturedItems/MarkFavorite';
+import ProgressHelpPopup from './ProgressHelpPopup.astro';
+import { ScheduleButton } from './Schedule/ScheduleButton';
+import { ShareRoadmapButton } from './ShareRoadmapButton';
+import { TabLink } from './TabLink';
+
 export interface Props {
   title: string;
   description: string;
@@ -29,6 +30,7 @@ export interface Props {
   hasSearch?: boolean;
   projectCount?: number;
   coursesCount?: number;
+  hasAIChat?: boolean;
   question?: RoadmapFrontmatter['question'];
   hasTopics?: boolean;
   isForkable?: boolean;
@@ -43,6 +45,7 @@ const {
   isUpcoming = false,
   note,
   hasTopics = false,
+  hasAIChat = false,
   projectCount = 0,
   question,
   activeTab = 'roadmap',
@@ -150,6 +153,16 @@ const hasProjects = projectCount > 0;
                 badgeText='New'
               />
             )}
+            {hasAIChat && (
+              <TabLink
+                url={`/${roadmapId}/ai`}
+                icon={Bot}
+                text='Chat with AI'
+                mobileText="AI"
+                isActive={false}
+                badgeText='New'
+              />
+            )}
           </div>
 
           <TabLink

src/components/TabLink.tsx

@@ -4,6 +4,7 @@ import { cn } from '../lib/classname.ts';
 type TabLinkProps = {
   icon: LucideIcon;
   text: string;
+  mobileText?: string;
   isActive: boolean;
   isExternal?: boolean;
   badgeText?: string;
@@ -19,6 +20,7 @@ export function TabLink(props: TabLinkProps) {
     isExternal = false,
     url,
     text,
+    mobileText,
     isActive,
     hideTextOnMobile = false,
     className: additionalClassName = '',
@@ -75,7 +77,8 @@ export function TabLink(props: TabLinkProps) {
       className={className}
     >
       <Icon className="h-4 w-4 shrink-0" />
-      <span className={textClass}>{text}</span>
+      <span className={cn(textClass, 'hidden sm:inline')}>{text}</span>
+      <span className={cn(textClass, 'inline sm:hidden')}>{mobileText || text}</span>
       {badgeNode}
     </a>
   );

src/pages/[roadmapId]/index.astro

@@ -120,6 +120,7 @@ const courses = roadmapData.courses || [];
       question={roadmapData.question}
       projectCount={projects.length}
       coursesCount={courses.length}
+      hasAIChat={roadmapData.renderer === 'editor'}
     />
 
     <div class='container mt-2.5'>