Arik Chakma
2 months ago
parent
9518b66f10
commit
03838ae888
6 changed files with 401 additions and 333 deletions
@ -0,0 +1,131 @@ |
||||
import { type Dispatch, type SetStateAction, useState } from 'react'; |
||||
import type { AiCourse } from '../../lib/ai'; |
||||
import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react'; |
||||
import { cn } from '../../lib/classname'; |
||||
|
||||
type AICourseModuleListProps = { |
||||
course: AiCourse; |
||||
activeModuleIndex: number; |
||||
setActiveModuleIndex: (index: number) => void; |
||||
activeLessonIndex: number; |
||||
setActiveLessonIndex: (index: number) => void; |
||||
|
||||
setSidebarOpen: (open: boolean) => void; |
||||
|
||||
viewMode: 'module' | 'full'; |
||||
setViewMode: (mode: 'module' | 'full') => void; |
||||
|
||||
expandedModules: Record<number, boolean>; |
||||
setExpandedModules: Dispatch<SetStateAction<Record<number, boolean>>>; |
||||
}; |
||||
|
||||
export function AICourseModuleList(props: AICourseModuleListProps) { |
||||
const { |
||||
course, |
||||
activeModuleIndex, |
||||
setActiveModuleIndex, |
||||
activeLessonIndex, |
||||
setActiveLessonIndex, |
||||
setSidebarOpen, |
||||
setViewMode, |
||||
expandedModules, |
||||
setExpandedModules, |
||||
} = props; |
||||
|
||||
const toggleModule = (index: number) => { |
||||
setExpandedModules((prev) => { |
||||
// If this module is already expanded, collapse it
|
||||
if (prev[index]) { |
||||
return { |
||||
...prev, |
||||
[index]: false, |
||||
}; |
||||
} |
||||
|
||||
// Otherwise, collapse all modules and expand only this one
|
||||
const newState: Record<number, boolean> = {}; |
||||
// Set all modules to collapsed
|
||||
course.modules.forEach((_, idx) => { |
||||
newState[idx] = false; |
||||
}); |
||||
// Expand only the clicked module
|
||||
newState[index] = true; |
||||
return newState; |
||||
}); |
||||
}; |
||||
|
||||
return ( |
||||
<nav className="space-y-1 px-2"> |
||||
{course.modules.map((module, moduleIdx) => ( |
||||
<div key={moduleIdx} className="rounded-md"> |
||||
<button |
||||
onClick={() => toggleModule(moduleIdx)} |
||||
className={cn( |
||||
'flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm font-medium', |
||||
activeModuleIndex === moduleIdx
|
||||
? 'bg-gray-100 text-gray-900' |
||||
: 'text-gray-700 hover:bg-gray-50', |
||||
)} |
||||
> |
||||
<div className="flex min-w-0 items-start pr-2"> |
||||
<span className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gray-200 text-xs font-semibold"> |
||||
{moduleIdx + 1} |
||||
</span> |
||||
<span className="break-words"> |
||||
{module.title?.replace(/^Module\s*?\d+[\.:]\s*/, '')} |
||||
</span> |
||||
</div> |
||||
{expandedModules[moduleIdx] ? ( |
||||
<ChevronDownIcon size={16} className="flex-shrink-0" /> |
||||
) : ( |
||||
<ChevronRightIcon size={16} className="flex-shrink-0" /> |
||||
)} |
||||
</button> |
||||
|
||||
{/* Lessons */} |
||||
{expandedModules[moduleIdx] && ( |
||||
<div className="ml-8 mt-1 space-y-1"> |
||||
{module.lessons.map((lesson, lessonIdx) => ( |
||||
<button |
||||
key={lessonIdx} |
||||
onClick={() => { |
||||
setActiveModuleIndex(moduleIdx); |
||||
setActiveLessonIndex(lessonIdx); |
||||
// Expand only this module in the sidebar
|
||||
setExpandedModules((prev) => { |
||||
const newState: Record<number, boolean> = {}; |
||||
// Set all modules to collapsed
|
||||
course.modules.forEach((_, idx) => { |
||||
newState[idx] = false; |
||||
}); |
||||
// Expand only the current module
|
||||
newState[moduleIdx] = true; |
||||
return newState; |
||||
}); |
||||
// Ensure sidebar is visible on mobile
|
||||
setSidebarOpen(true); |
||||
setViewMode('module'); |
||||
}} |
||||
className={cn( |
||||
'flex w-full items-start rounded-md px-3 py-2 text-left text-sm', |
||||
activeModuleIndex === moduleIdx && |
||||
activeLessonIndex === lessonIdx |
||||
? 'bg-gray-800 text-white' |
||||
: 'text-gray-600 hover:bg-gray-50', |
||||
)} |
||||
> |
||||
<span className="relative top-[2px] mr-2 flex-shrink-0 text-xs"> |
||||
{lessonIdx + 1}. |
||||
</span> |
||||
<span className="break-words"> |
||||
{lesson?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')} |
||||
</span> |
||||
</button> |
||||
))} |
||||
</div> |
||||
)} |
||||
</div> |
||||
))} |
||||
</nav> |
||||
); |
||||
} |
||||
@ -0,0 +1,187 @@ |
||||
import { useEffect, useState } from 'react'; |
||||
import { getUrlParams } from '../../lib/browser'; |
||||
import { isLoggedIn } from '../../lib/jwt'; |
||||
import { showLoginPopup } from '../../lib/popup'; |
||||
import { generateAiCourseStructure, type AiCourse } from '../../lib/ai'; |
||||
import { readAICourseStream } from '../../helper/read-stream'; |
||||
import { AICourseContent } from './AICourseContent'; |
||||
|
||||
type GenerateAICourseProps = {}; |
||||
|
||||
export function GenerateAICourse(props: GenerateAICourseProps) { |
||||
const [term, setTerm] = useState(''); |
||||
const [difficulty, setDifficulty] = useState(''); |
||||
|
||||
const [isLoading, setIsLoading] = useState(true); |
||||
const [error, setError] = useState(''); |
||||
|
||||
const [courseId, setCourseId] = useState(''); |
||||
const [courseSlug, setCourseSlug] = useState(''); |
||||
const [course, setCourse] = useState<AiCourse>({ |
||||
title: '', |
||||
modules: [], |
||||
difficulty: '', |
||||
}); |
||||
|
||||
useEffect(() => { |
||||
if (term || difficulty) { |
||||
return; |
||||
} |
||||
|
||||
const params = getUrlParams(); |
||||
const paramsTerm = params?.term; |
||||
const paramsDifficulty = params?.difficulty; |
||||
if (!paramsTerm || !paramsDifficulty) { |
||||
return; |
||||
} |
||||
|
||||
setTerm(paramsTerm); |
||||
setDifficulty(paramsDifficulty); |
||||
generateCourse({ term: paramsTerm, difficulty: paramsDifficulty }); |
||||
}, [term, difficulty]); |
||||
|
||||
const generateCourse = async (options: { |
||||
term: string; |
||||
difficulty: string; |
||||
}) => { |
||||
const { term, difficulty } = options; |
||||
|
||||
if (!isLoggedIn()) { |
||||
setIsLoading(false); |
||||
setError('You must be logged in to generate a course'); |
||||
showLoginPopup(); |
||||
return; |
||||
} |
||||
|
||||
setIsLoading(true); |
||||
setCourse({ |
||||
title: '', |
||||
modules: [], |
||||
difficulty: '', |
||||
}); |
||||
setError(''); |
||||
|
||||
try { |
||||
const response = await fetch( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-generate-ai-course`, |
||||
{ |
||||
method: 'POST', |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
}, |
||||
body: JSON.stringify({ |
||||
keyword: term, |
||||
difficulty, |
||||
}), |
||||
credentials: 'include', |
||||
}, |
||||
); |
||||
|
||||
if (!response.ok) { |
||||
const data = await response.json(); |
||||
console.error( |
||||
'Error generating course:', |
||||
data?.message || 'Something went wrong', |
||||
); |
||||
setIsLoading(false); |
||||
setError(data?.message || 'Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
const reader = response.body?.getReader(); |
||||
|
||||
if (!reader) { |
||||
console.error('Failed to get reader from response'); |
||||
setError('Something went wrong'); |
||||
setIsLoading(false); |
||||
return; |
||||
} |
||||
|
||||
const COURSE_ID_REGEX = new RegExp('@COURSEID:(\\w+)@'); |
||||
const COURSE_SLUG_REGEX = new RegExp(/@COURSESLUG:([\w-]+)@/); |
||||
|
||||
await readAICourseStream(reader, { |
||||
onStream: (result) => { |
||||
if (result.includes('@COURSEID') || result.includes('@COURSESLUG')) { |
||||
const courseIdMatch = result.match(COURSE_ID_REGEX); |
||||
const courseSlugMatch = result.match(COURSE_SLUG_REGEX); |
||||
const extractedCourseId = courseIdMatch?.[1] || ''; |
||||
const extractedCourseSlug = courseSlugMatch?.[1] || ''; |
||||
|
||||
if (extractedCourseSlug) { |
||||
window.history.replaceState( |
||||
{ |
||||
courseId, |
||||
courseSlug: extractedCourseSlug, |
||||
term, |
||||
difficulty, |
||||
}, |
||||
'', |
||||
`${origin}/ai-tutor/${extractedCourseSlug}`, |
||||
); |
||||
} |
||||
|
||||
result = result |
||||
.replace(COURSE_ID_REGEX, '') |
||||
.replace(COURSE_SLUG_REGEX, ''); |
||||
|
||||
setCourseId(extractedCourseId); |
||||
} |
||||
|
||||
try { |
||||
const aiCourse = generateAiCourseStructure(result); |
||||
setCourse({ |
||||
...aiCourse, |
||||
difficulty: difficulty || '', |
||||
}); |
||||
} catch (e) { |
||||
console.error('Error parsing streamed course content:', e); |
||||
} |
||||
}, |
||||
onStreamEnd: (result) => { |
||||
result = result |
||||
.replace(COURSE_ID_REGEX, '') |
||||
.replace(COURSE_SLUG_REGEX, ''); |
||||
setIsLoading(false); |
||||
}, |
||||
}); |
||||
} catch (error: any) { |
||||
setError(error?.message || 'Something went wrong'); |
||||
console.error('Error in course generation:', error); |
||||
setIsLoading(false); |
||||
} |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
const handlePopState = (e: PopStateEvent) => { |
||||
const { courseId, courseSlug, term, difficulty } = e.state || {}; |
||||
if (!courseId || !courseSlug) { |
||||
window.location.reload(); |
||||
return; |
||||
} |
||||
|
||||
setCourseId(courseId); |
||||
setCourseSlug(courseSlug); |
||||
setTerm(term); |
||||
setDifficulty(difficulty); |
||||
|
||||
setIsLoading(true); |
||||
generateCourse({ term, difficulty }).finally(() => { |
||||
setIsLoading(false); |
||||
}); |
||||
}; |
||||
|
||||
window.addEventListener('popstate', handlePopState); |
||||
return () => { |
||||
window.removeEventListener('popstate', handlePopState); |
||||
}; |
||||
}, []); |
||||
|
||||
return ( |
||||
<AICourseContent |
||||
courseSlug={courseSlug} |
||||
course={course} |
||||
isLoading={isLoading} |
||||
/> |
||||
); |
||||
} |
||||
@ -0,0 +1,33 @@ |
||||
import { httpGet } from '../lib/query-http'; |
||||
import { isLoggedIn } from '../lib/jwt'; |
||||
|
||||
export interface AICourseProgressDocument { |
||||
_id: string; |
||||
userId: string; |
||||
courseId: string; |
||||
done: string[]; |
||||
createdAt: Date; |
||||
updatedAt: Date; |
||||
} |
||||
|
||||
type GetAICourseProgressParams = { |
||||
aiCourseSlug: string; |
||||
}; |
||||
|
||||
type GetAICourseProgressBody = {}; |
||||
|
||||
type GetAICourseProgressQuery = {}; |
||||
|
||||
type GetAICourseProgressResponse = AICourseProgressDocument; |
||||
|
||||
export function getAiCourseProgressOptions(params: GetAICourseProgressParams) { |
||||
return { |
||||
queryKey: ['ai-course-progress', params], |
||||
queryFn: () => { |
||||
return httpGet<GetAICourseProgressResponse>( |
||||
`/v1-get-ai-course-progress/${params.aiCourseSlug}`, |
||||
); |
||||
}, |
||||
enabled: !!params.aiCourseSlug && isLoggedIn(), |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue