Arik Chakma
9 months ago
parent
56b327177b
commit
f561a52a46
4 changed files with 416 additions and 114 deletions
@ -0,0 +1,168 @@ |
|||||||
|
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, FileText, X } from 'lucide-react'; |
||||||
|
import { Spinner } from '../ReactIcons/Spinner'; |
||||||
|
import type { RoadmapNodeDetails } from './GenerateRoadmap'; |
||||||
|
import { removeAuthToken } from '../../lib/jwt'; |
||||||
|
import { readAIRoadmapContentStream } from '../../helper/read-stream'; |
||||||
|
|
||||||
|
type RoadmapTopicDetailProps = RoadmapNodeDetails & { |
||||||
|
onClose?: () => void; |
||||||
|
roadmapId: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) { |
||||||
|
const { onClose, roadmapId, nodeTitle, parentTitle } = props; |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
const [error, setError] = useState(''); |
||||||
|
const [topicHtml, setTopicHtml] = useState(''); |
||||||
|
|
||||||
|
const topicRef = useRef<HTMLDivElement>(null); |
||||||
|
|
||||||
|
const abortController = useMemo(() => new AbortController(), []); |
||||||
|
const generateAiRoadmapTopicContent = async () => { |
||||||
|
setIsLoading(true); |
||||||
|
setError(''); |
||||||
|
|
||||||
|
const response = await fetch( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-genereate-ai-roadmap-content/${roadmapId}`, |
||||||
|
{ |
||||||
|
method: 'POST', |
||||||
|
headers: { |
||||||
|
'Content-Type': 'application/json', |
||||||
|
}, |
||||||
|
credentials: 'include', |
||||||
|
body: JSON.stringify({ |
||||||
|
nodeTitle, |
||||||
|
parentTitle, |
||||||
|
}), |
||||||
|
signal: abortController.signal, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
if (!response.ok) { |
||||||
|
const data = await response.json(); |
||||||
|
|
||||||
|
setError(data?.message || 'Something went wrong'); |
||||||
|
setIsLoading(false); |
||||||
|
|
||||||
|
// Logout user if token is invalid
|
||||||
|
if (data.status === 401) { |
||||||
|
removeAuthToken(); |
||||||
|
window.location.reload(); |
||||||
|
} |
||||||
|
} |
||||||
|
const reader = response.body?.getReader(); |
||||||
|
|
||||||
|
if (!reader) { |
||||||
|
setIsLoading(false); |
||||||
|
setError('Something went wrong'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(false); |
||||||
|
await readAIRoadmapContentStream(reader, { |
||||||
|
onStream: async (result) => { |
||||||
|
setTopicHtml(markdownToHtml(result, false)); |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// Close the topic detail when user clicks outside the topic detail
|
||||||
|
useOutsideClick(topicRef, () => { |
||||||
|
onClose?.(); |
||||||
|
}); |
||||||
|
|
||||||
|
useKeydown('Escape', () => { |
||||||
|
onClose?.(); |
||||||
|
}); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!topicRef?.current) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
topicRef?.current?.focus(); |
||||||
|
generateAiRoadmapTopicContent().finally(() => {}); |
||||||
|
|
||||||
|
return () => { |
||||||
|
abortController.abort(); |
||||||
|
}; |
||||||
|
}, []); |
||||||
|
|
||||||
|
const hasContent = topicHtml?.length > 0; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={'relative z-50'}> |
||||||
|
<div |
||||||
|
ref={topicRef} |
||||||
|
tabIndex={0} |
||||||
|
className="fixed right-0 top-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 focus:outline-0 sm:max-w-[600px] sm:p-6" |
||||||
|
> |
||||||
|
{isLoading && ( |
||||||
|
<div className="flex w-full justify-center"> |
||||||
|
<Spinner |
||||||
|
outerFill="#d1d5db" |
||||||
|
className="h-6 w-6 sm:h-12 sm:w-12" |
||||||
|
innerFill="#2563eb" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{!isLoading && !error && ( |
||||||
|
<> |
||||||
|
<div className="mb-2"> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
id="close-topic" |
||||||
|
className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
<X className="h-5 w-5" /> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
{hasContent ? ( |
||||||
|
<div className="prose prose-quoteless prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-li:m-0 prose-li:mb-0.5"> |
||||||
|
<div |
||||||
|
id="topic-content" |
||||||
|
dangerouslySetInnerHTML={{ __html: topicHtml }} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div className="flex h-[calc(100%-38px)] flex-col items-center justify-center"> |
||||||
|
<FileText className="h-16 w-16 text-gray-300" /> |
||||||
|
<p className="mt-2 text-lg font-medium text-gray-500"> |
||||||
|
Empty Content |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
{/* Error */} |
||||||
|
{!isLoading && error && ( |
||||||
|
<> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
id="close-topic" |
||||||
|
className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
<X className="h-5 w-5" /> |
||||||
|
</button> |
||||||
|
<div className="flex h-full flex-col items-center justify-center"> |
||||||
|
<Ban className="h-16 w-16 text-red-500" /> |
||||||
|
<p className="mt-2 text-lg font-medium text-red-500">{error}</p> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue