Populate chat questions at bottom

src/components/FrameRenderer/RoadmapFloatingChat.tsx

@@ -21,6 +21,7 @@ import { cn } from '../../lib/classname';
 import { lockBodyScroll } from '../../lib/dom';
 import { slugify } from '../../lib/slugger';
 import { roadmapJSONOptions } from '../../queries/roadmap';
+import { roadmapQuestionsOptions } from '../../queries/roadmap-questions';
 import { queryClient } from '../../stores/query-client';
 import { RoadmapAIChatCard } from '../RoadmapAIChat/RoadmapAIChatCard';
 
@@ -81,33 +82,24 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
   const [isOpen, setIsOpen] = useState(false);
   const scrollareaRef = useRef<HTMLDivElement>(null);
   const [inputValue, setInputValue] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  // Default questions - will be populated from API later
-  const allDefaultQuestions = [
-    'What should I learn next based on my current progress?',
-    'What are the most important topics I should focus on?',
-    'Which topics are prerequisites for advanced concepts?',
-    'Can you recommend other roadmaps related to this field?',
-    'What learning resources are available for specific topics?',
-    'Which topics should I prioritize based on job market demand?',
-    'What are common learning pitfalls I should avoid?',
-    'How can I share my progress with others?',
-    'What projects should I build while following this roadmap?',
-    'Which skills are most valuable for career advancement?',
-    'Give me some project ideas based on my progress',
-    'What are the latest industry trends in this field?',
-    'Can you suggest a study schedule for this roadmap?',
-    'What other roadmaps complement this learning path?',
-    'How should I approach learning complex topics?',
-    "What's the best way to practice what I've learned?",
-    'What are different job roles in this field?',
-  ];
+  // Fetch questions from API
+  const { data: questionsData } = useQuery(
+    roadmapQuestionsOptions(roadmapId),
+    queryClient,
+  );
 
   // Randomly select 4 questions to display
   const defaultQuestions = useMemo(() => {
-    const shuffled = [...allDefaultQuestions].sort(() => 0.5 - Math.random());
+    if (!questionsData?.questions || questionsData.questions.length === 0) {
+      return [];
+    }
+    const shuffled = [...questionsData.questions].sort(
+      () => 0.5 - Math.random(),
+    );
     return shuffled.slice(0, 4);
-  }, []);
+  }, [questionsData]);
 
   const { data: roadmapDetail, isLoading: isRoadmapDetailLoading } = useQuery(
     roadmapJSONOptions(roadmapId),
@@ -275,13 +267,7 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
                           className="flex h-full self-start rounded-md bg-yellow-500/10 px-3 py-2 text-left text-sm text-black hover:bg-yellow-500/20"
                           onClick={() => {
                             setInputValue(question);
-                            // Focus the input after setting the value
-                            setTimeout(() => {
-                              const input = document.querySelector(
-                                'input[type="text"]',
-                              ) as HTMLInputElement;
-                              input?.focus();
-                            }, 0);
+                            inputRef.current?.focus();
                           }}
                         >
                           {question}
@@ -312,6 +298,7 @@ export function RoadmapFloatingChat(props: RoadmapChatProps) {
             {/* Input area */}
             <div className="relative flex items-center border-t border-gray-200 text-sm">
               <input
+                ref={inputRef}
                 type="text"
                 value={inputValue}
                 onChange={(e) => setInputValue(e.target.value)}

src/pages/[roadmapId].json.ts

@@ -13,7 +13,24 @@ const __dirname = path.dirname(__filename);
 // hack to make it work. TODO: Fix
 const projectRoot = path.resolve(__dirname, '../..').replace(/dist$/, '');
 
-export async function fetchRoadmapJson(roadmapId: string) {
+type RoadmapJson = {
+  _id: string;
+  title: string;
+  description: string;
+  slug: string;
+  nodes: {
+    type: 'topic' | 'subtopic' | 'paragraph';
+    data: { label: string };
+  }[];
+  edges: unknown[];
+  draft: boolean;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export async function fetchRoadmapJson(
+  roadmapId: string,
+): Promise<RoadmapJson> {
   const response = await fetch(
     `https://roadmap.sh/api/v1-official-roadmap/${roadmapId}`,
   );

src/queries/roadmap-questions.ts

@@ -0,0 +1,16 @@
+import { queryOptions } from '@tanstack/react-query';
+import { httpGet } from '../lib/query-http';
+
+export interface RoadmapQuestionsResponse {
+  questions: string[];
+}
+
+export function roadmapQuestionsOptions(roadmapId: string) {
+  return queryOptions({
+    queryKey: ['roadmap-questions', roadmapId],
+    queryFn: () => {
+      return httpGet<RoadmapQuestionsResponse>(`/v1-official-roadmap-questions/${roadmapId}`);
+    },
+    refetchOnMount: false,
+  });
+}