Add ai tutor inside ai roadmap topic

pull/8430/head
Kamran Ahmed 7 days ago
parent a68ed2e0b8
commit 56c9faabe8
  1. 22
      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<HTMLDivElement>(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?{' '}
<span className="font-semibold">Click here.</span>
Need more? <span className="font-semibold">Click here.</span>
</button>
</div>
)}
@ -200,6 +204,18 @@ export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) {
id="topic-content"
dangerouslySetInnerHTML={{ __html: topicHtml }}
/>
{!isStreaming && (
<div className="mt-4">
<a
href="/ai-tutor"
className="mb-1 mt-2 inline-flex items-center rounded-md bg-yellow-400 px-3 py-2 text-sm font-medium text-gray-800 no-underline hover:bg-yellow-500"
>
Dive deeper using AI Tutor
<ArrowRight className="ml-2 h-4 w-4" />
</a>
</div>
)}
</div>
) : (
<div className="flex h-[calc(100%-38px)] flex-col items-center justify-center">

Loading…
Cancel
Save