diff --git a/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx b/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx index 178ac4cb7..ca06b3175 100644 --- a/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx +++ b/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx @@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { useKeydown } from '../../hooks/use-keydown'; import { useOutsideClick } from '../../hooks/use-outside-click'; import { markdownToHtml } from '../../lib/markdown'; -import { Ban, Contact, FileText, X } from 'lucide-react'; +import { Ban, Contact, FileText, X, ArrowRight } from 'lucide-react'; import { Spinner } from '../ReactIcons/Spinner'; import type { RoadmapNodeDetails } from './GenerateRoadmap'; import { isLoggedIn, removeAuthToken } from '../../lib/jwt'; @@ -35,6 +35,7 @@ export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(''); const [topicHtml, setTopicHtml] = useState(''); + const [isStreaming, setIsStreaming] = useState(false); const topicRef = useRef(null); @@ -90,10 +91,14 @@ export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) { } setIsLoading(false); + setIsStreaming(true); await readAIRoadmapContentStream(reader, { onStream: async (result) => { setTopicHtml(markdownToHtml(result, false)); }, + onStreamEnd(roadmap) { + setIsStreaming(false); + }, }); onTopicContentGenerateComplete?.(); }; @@ -149,8 +154,7 @@ export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) { className="rounded-xl border border-current px-1.5 py-0.5 text-left text-sm font-medium text-blue-500 sm:text-center" onClick={onConfigureOpenAI} > - Need to generate more?{' '} - Click here. + Need more? Click here. )} @@ -200,6 +204,18 @@ export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) { id="topic-content" dangerouslySetInnerHTML={{ __html: topicHtml }} /> + + {!isStreaming && ( +
+ + Dive deeper using AI Tutor + + +
+ )} ) : (