Kamran Ahmed
2 months ago
parent
38411a276e
commit
f86e2ca741
4 changed files with 669 additions and 693 deletions
@ -0,0 +1,647 @@ |
|||||||
|
import { |
||||||
|
ArrowLeft, |
||||||
|
BookOpenCheck, |
||||||
|
ChevronDown, |
||||||
|
ChevronLeft, |
||||||
|
ChevronRight, |
||||||
|
Layers, |
||||||
|
Loader2, |
||||||
|
Menu, |
||||||
|
X, |
||||||
|
} from 'lucide-react'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { readAICourseStream } from '../../helper/read-stream'; |
||||||
|
import { markdownToHtml } from '../../lib/markdown'; |
||||||
|
import { getUrlParams } from '../../lib/browser'; |
||||||
|
|
||||||
|
// Define types for our course structure
|
||||||
|
type Lesson = string; |
||||||
|
|
||||||
|
type Module = { |
||||||
|
title: string; |
||||||
|
lessons: Lesson[]; |
||||||
|
}; |
||||||
|
|
||||||
|
type Course = { |
||||||
|
title: string; |
||||||
|
modules: Module[]; |
||||||
|
difficulty: string; |
||||||
|
}; |
||||||
|
|
||||||
|
type AICourseContentProps = {}; |
||||||
|
|
||||||
|
export function AICourseContent(props: AICourseContentProps) { |
||||||
|
const [term, setTerm] = useState(''); |
||||||
|
const [difficulty, setDifficulty] = useState('beginner'); |
||||||
|
|
||||||
|
const [courseId, setCourseId] = useState(''); |
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
const [courseContent, setCourseContent] = useState(''); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const urlParams = getUrlParams(); |
||||||
|
const termFromUrl = urlParams.term as string | ''; |
||||||
|
const difficultyFromUrl = urlParams.difficulty || 'beginner'; |
||||||
|
|
||||||
|
if (!termFromUrl) { |
||||||
|
window.location.href = '/ai-tutor'; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setTerm(termFromUrl); |
||||||
|
setDifficulty(difficultyFromUrl); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const [streamedCourse, setStreamedCourse] = useState<{ |
||||||
|
title: string; |
||||||
|
modules: Module[]; |
||||||
|
}>({ |
||||||
|
title: '', |
||||||
|
modules: [], |
||||||
|
}); |
||||||
|
const [expandedModules, setExpandedModules] = useState< |
||||||
|
Record<number, boolean> |
||||||
|
>({}); |
||||||
|
const [activeModuleIndex, setActiveModuleIndex] = useState(0); |
||||||
|
const [activeLessonIndex, setActiveLessonIndex] = useState(0); |
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(true); |
||||||
|
const [viewMode, setViewMode] = useState<'module' | 'full'>('full'); |
||||||
|
|
||||||
|
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
|
||||||
|
streamedCourse.modules.forEach((_, idx) => { |
||||||
|
newState[idx] = false; |
||||||
|
}); |
||||||
|
// Expand only the clicked module
|
||||||
|
newState[index] = true; |
||||||
|
return newState; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!term && !courseId) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (courseId) { |
||||||
|
// fetchCourse();
|
||||||
|
} else { |
||||||
|
generateCourse(term, difficulty); |
||||||
|
} |
||||||
|
}, [courseId, term, difficulty]); |
||||||
|
|
||||||
|
const generateCourse = async (term: string, difficulty: string) => { |
||||||
|
setIsLoading(true); |
||||||
|
setStreamedCourse({ title: '', modules: [] }); |
||||||
|
setExpandedModules({}); |
||||||
|
setViewMode('full'); |
||||||
|
|
||||||
|
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); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const reader = response.body?.getReader(); |
||||||
|
|
||||||
|
if (!reader) { |
||||||
|
console.error('Failed to get reader from response'); |
||||||
|
setIsLoading(false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// Define regex patterns to extract course ID
|
||||||
|
const COURSE_ID_REGEX = new RegExp('@COURSEID:(\\w+)@'); |
||||||
|
|
||||||
|
await readAICourseStream(reader, { |
||||||
|
onStream: (result) => { |
||||||
|
// Check if the result contains a course ID
|
||||||
|
if (result.includes('@COURSEID')) { |
||||||
|
const courseIdMatch = result.match(COURSE_ID_REGEX); |
||||||
|
const extractedCourseId = courseIdMatch?.[1] || ''; |
||||||
|
|
||||||
|
if (extractedCourseId) { |
||||||
|
console.log('extractedCourseId', extractedCourseId); |
||||||
|
// setCourseId(extractedCourseId);
|
||||||
|
|
||||||
|
// Remove the course ID token from the result
|
||||||
|
result = result.replace(COURSE_ID_REGEX, ''); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Store the raw content and log it
|
||||||
|
setCourseContent(result); |
||||||
|
|
||||||
|
// Parse the streamed content to update the sidebar in real-time
|
||||||
|
try { |
||||||
|
const lines = result.split('\n'); |
||||||
|
let title = ''; |
||||||
|
const modules: Module[] = []; |
||||||
|
let currentModule: Module | null = null; |
||||||
|
|
||||||
|
for (let i = 0; i < lines.length; i++) { |
||||||
|
const line = lines[i].trim(); |
||||||
|
|
||||||
|
if (i === 0 && line.startsWith('#')) { |
||||||
|
// First line is the title
|
||||||
|
title = line.replace('#', '').trim(); |
||||||
|
} else if (line.startsWith('## ')) { |
||||||
|
// New module
|
||||||
|
if (currentModule) { |
||||||
|
modules.push(currentModule); |
||||||
|
} |
||||||
|
currentModule = { |
||||||
|
title: line.replace('## ', ''), |
||||||
|
lessons: [], |
||||||
|
}; |
||||||
|
// Removed auto-expand code to keep modules collapsed by default
|
||||||
|
} else if (line.startsWith('- ') && currentModule) { |
||||||
|
// Lesson within current module
|
||||||
|
currentModule.lessons.push(line.replace('- ', '')); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Add the last module if it exists
|
||||||
|
if (currentModule) { |
||||||
|
modules.push(currentModule); |
||||||
|
} |
||||||
|
|
||||||
|
setStreamedCourse({ |
||||||
|
title, |
||||||
|
modules, |
||||||
|
}); |
||||||
|
} catch (e) { |
||||||
|
console.error('Error parsing streamed course content:', e); |
||||||
|
} |
||||||
|
}, |
||||||
|
onStreamEnd: (result) => { |
||||||
|
// Clean up any tokens from the final result
|
||||||
|
result = result.replace(COURSE_ID_REGEX, ''); |
||||||
|
setCourseContent(result); |
||||||
|
|
||||||
|
try { |
||||||
|
const lines = result.split('\n'); |
||||||
|
const title = lines[0].replace('#', '').trim(); |
||||||
|
const modules: Module[] = []; |
||||||
|
|
||||||
|
let currentModule: Module | null = null; |
||||||
|
|
||||||
|
for (let i = 1; i < lines.length; i++) { |
||||||
|
const line = lines[i].trim(); |
||||||
|
|
||||||
|
if (line.startsWith('## ')) { |
||||||
|
// New module
|
||||||
|
if (currentModule) { |
||||||
|
modules.push(currentModule); |
||||||
|
} |
||||||
|
currentModule = { |
||||||
|
title: line.replace('## ', ''), |
||||||
|
lessons: [], |
||||||
|
}; |
||||||
|
} else if (line.startsWith('- ') && currentModule) { |
||||||
|
// Lesson within current module
|
||||||
|
currentModule.lessons.push(line.replace('- ', '')); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Add the last module if it exists
|
||||||
|
if (currentModule) { |
||||||
|
modules.push(currentModule); |
||||||
|
} |
||||||
|
|
||||||
|
setStreamedCourse({ |
||||||
|
title, |
||||||
|
modules, |
||||||
|
}); |
||||||
|
} catch (e) { |
||||||
|
console.error('Error parsing course content:', e); |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(false); |
||||||
|
}, |
||||||
|
}); |
||||||
|
} catch (error) { |
||||||
|
console.error('Error in course generation:', error); |
||||||
|
setIsLoading(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// Navigation helpers
|
||||||
|
const goToNextModule = () => { |
||||||
|
if (activeModuleIndex < streamedCourse.modules.length - 1) { |
||||||
|
const nextModuleIndex = activeModuleIndex + 1; |
||||||
|
setActiveModuleIndex(nextModuleIndex); |
||||||
|
setActiveLessonIndex(0); |
||||||
|
|
||||||
|
// Expand the next module in the sidebar
|
||||||
|
setExpandedModules((prev) => { |
||||||
|
const newState: Record<number, boolean> = {}; |
||||||
|
// Set all modules to collapsed
|
||||||
|
streamedCourse.modules.forEach((_, idx) => { |
||||||
|
newState[idx] = false; |
||||||
|
}); |
||||||
|
// Expand only the next module
|
||||||
|
newState[nextModuleIndex] = true; |
||||||
|
return newState; |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const goToPrevModule = () => { |
||||||
|
if (activeModuleIndex > 0) { |
||||||
|
const prevModuleIndex = activeModuleIndex - 1; |
||||||
|
setActiveModuleIndex(prevModuleIndex); |
||||||
|
setActiveLessonIndex(0); |
||||||
|
|
||||||
|
// Expand the previous module in the sidebar
|
||||||
|
setExpandedModules((prev) => { |
||||||
|
const newState: Record<number, boolean> = {}; |
||||||
|
// Set all modules to collapsed
|
||||||
|
streamedCourse.modules.forEach((_, idx) => { |
||||||
|
newState[idx] = false; |
||||||
|
}); |
||||||
|
// Expand only the previous module
|
||||||
|
newState[prevModuleIndex] = true; |
||||||
|
return newState; |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const goToNextLesson = () => { |
||||||
|
const currentModule = streamedCourse.modules[activeModuleIndex]; |
||||||
|
if (currentModule && activeLessonIndex < currentModule.lessons.length - 1) { |
||||||
|
setActiveLessonIndex(activeLessonIndex + 1); |
||||||
|
} else { |
||||||
|
goToNextModule(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const goToPrevLesson = () => { |
||||||
|
if (activeLessonIndex > 0) { |
||||||
|
setActiveLessonIndex(activeLessonIndex - 1); |
||||||
|
} else { |
||||||
|
const prevModule = streamedCourse.modules[activeModuleIndex - 1]; |
||||||
|
if (prevModule) { |
||||||
|
const prevModuleIndex = activeModuleIndex - 1; |
||||||
|
setActiveModuleIndex(prevModuleIndex); |
||||||
|
setActiveLessonIndex(prevModule.lessons.length - 1); |
||||||
|
|
||||||
|
// Expand the previous module in the sidebar
|
||||||
|
setExpandedModules((prev) => { |
||||||
|
const newState: Record<number, boolean> = {}; |
||||||
|
// Set all modules to collapsed
|
||||||
|
streamedCourse.modules.forEach((_, idx) => { |
||||||
|
newState[idx] = false; |
||||||
|
}); |
||||||
|
// Expand only the previous module
|
||||||
|
newState[prevModuleIndex] = true; |
||||||
|
return newState; |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const currentModule = streamedCourse.modules[activeModuleIndex]; |
||||||
|
const currentLesson = currentModule?.lessons[activeLessonIndex]; |
||||||
|
const totalModules = streamedCourse.modules.length; |
||||||
|
const totalLessons = currentModule?.lessons.length || 0; |
||||||
|
|
||||||
|
return ( |
||||||
|
<section className="flex h-screen flex-grow flex-col overflow-hidden bg-gray-50"> |
||||||
|
{/* Top navigation bar */} |
||||||
|
<header className="flex h-16 items-center justify-between bg-white px-4 shadow-sm"> |
||||||
|
<div className="flex items-center"> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
if (typeof window !== 'undefined') { |
||||||
|
window.location.href = '/ai-tutor/search'; |
||||||
|
} |
||||||
|
}} |
||||||
|
className="mr-4 rounded-md p-2 hover:bg-gray-100" |
||||||
|
aria-label="Back to generator" |
||||||
|
> |
||||||
|
<ArrowLeft size={20} /> |
||||||
|
</button> |
||||||
|
<h1 className="text-xl font-bold"> |
||||||
|
{streamedCourse.title || 'Loading Course...'} |
||||||
|
</h1> |
||||||
|
</div> |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
{viewMode === 'module' && ( |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
// Collapse all modules in the sidebar when switching to outline view
|
||||||
|
setExpandedModules({}); |
||||||
|
setViewMode('full'); |
||||||
|
}} |
||||||
|
className="flex items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium hover:bg-gray-50" |
||||||
|
> |
||||||
|
<BookOpenCheck size={16} className="mr-2" /> |
||||||
|
View Course Outline |
||||||
|
</button> |
||||||
|
)} |
||||||
|
<button |
||||||
|
onClick={() => setSidebarOpen(!sidebarOpen)} |
||||||
|
className="flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 md:hidden" |
||||||
|
> |
||||||
|
{sidebarOpen ? <X size={18} /> : <Menu size={18} />} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
|
||||||
|
{/* Main content with sidebar */} |
||||||
|
<div className="flex flex-1 overflow-hidden"> |
||||||
|
{/* Sidebar */} |
||||||
|
<aside |
||||||
|
className={`${ |
||||||
|
sidebarOpen ? 'translate-x-0' : '-translate-x-full' |
||||||
|
} fixed inset-y-0 left-0 z-20 mt-16 w-80 transform overflow-y-auto border-r border-gray-200 bg-white pt-4 transition-transform duration-200 ease-in-out md:relative md:mt-0 md:translate-x-0`}
|
||||||
|
> |
||||||
|
{/* Course title */} |
||||||
|
<div className="mb-4 px-4"> |
||||||
|
<div className="flex items-center justify-between"> |
||||||
|
<h2 className="text-lg font-bold">Course Content</h2> |
||||||
|
<div className="flex items-center"> |
||||||
|
{isLoading && ( |
||||||
|
<Loader2 |
||||||
|
size={16} |
||||||
|
className="mr-2 animate-spin text-gray-400" |
||||||
|
/> |
||||||
|
)} |
||||||
|
<button |
||||||
|
onClick={() => setSidebarOpen(false)} |
||||||
|
className="rounded-md p-1 hover:bg-gray-100 md:hidden" |
||||||
|
> |
||||||
|
<X size={18} /> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="mt-2 text-sm text-gray-500"> |
||||||
|
{totalModules} modules •{' '} |
||||||
|
{streamedCourse.modules.reduce( |
||||||
|
(total, module) => total + module.lessons.length, |
||||||
|
0, |
||||||
|
)}{' '} |
||||||
|
lessons |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Module list */} |
||||||
|
<nav className="space-y-1 px-2"> |
||||||
|
{streamedCourse.modules.map((module, moduleIdx) => ( |
||||||
|
<div key={moduleIdx} className="rounded-md"> |
||||||
|
<button |
||||||
|
onClick={() => toggleModule(moduleIdx)} |
||||||
|
className={`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] ? ( |
||||||
|
<ChevronDown size={16} className="flex-shrink-0" /> |
||||||
|
) : ( |
||||||
|
<ChevronRight 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
|
||||||
|
streamedCourse.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={`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> |
||||||
|
</aside> |
||||||
|
|
||||||
|
{/* Main content */} |
||||||
|
<main |
||||||
|
className={`flex-1 overflow-y-auto p-6 transition-all duration-200 ease-in-out ${ |
||||||
|
sidebarOpen ? 'md:ml-0' : '' |
||||||
|
}`}
|
||||||
|
> |
||||||
|
{viewMode === 'module' ? ( |
||||||
|
<div className="mx-auto max-w-4xl"> |
||||||
|
{/* Module and lesson navigation */} |
||||||
|
<div className="mb-6 flex flex-wrap items-center justify-between gap-4"> |
||||||
|
<div> |
||||||
|
<div className="text-sm text-gray-500"> |
||||||
|
Module {activeModuleIndex + 1} of {totalModules} |
||||||
|
</div> |
||||||
|
<h2 className="text-2xl font-bold"> |
||||||
|
{currentModule?.title?.replace( |
||||||
|
/^Module\s*?\d+[\.:]\s*/, |
||||||
|
'', |
||||||
|
) || 'Loading...'} |
||||||
|
</h2> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Current lesson */} |
||||||
|
<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm"> |
||||||
|
<div className="mb-4 flex items-center justify-between"> |
||||||
|
<div className="text-sm text-gray-500"> |
||||||
|
Lesson {activeLessonIndex + 1} of {totalLessons} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<h3 className="mb-6 text-xl font-semibold"> |
||||||
|
{currentLesson?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')} |
||||||
|
</h3> |
||||||
|
|
||||||
|
<div className="prose max-w-none"> |
||||||
|
<p className="text-gray-600"> |
||||||
|
This lesson is part of the "{currentModule?.title}" module.
|
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Navigation buttons */} |
||||||
|
<div className="mt-8 flex items-center justify-between"> |
||||||
|
<button |
||||||
|
onClick={goToPrevLesson} |
||||||
|
disabled={ |
||||||
|
activeModuleIndex === 0 && activeLessonIndex === 0 |
||||||
|
} |
||||||
|
className={`flex items-center rounded-md px-4 py-2 ${ |
||||||
|
activeModuleIndex === 0 && activeLessonIndex === 0 |
||||||
|
? 'cursor-not-allowed text-gray-400' |
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' |
||||||
|
}`}
|
||||||
|
> |
||||||
|
<ChevronLeft size={16} className="mr-2" /> |
||||||
|
Previous Lesson |
||||||
|
</button> |
||||||
|
|
||||||
|
<button |
||||||
|
onClick={goToNextLesson} |
||||||
|
disabled={ |
||||||
|
activeModuleIndex === totalModules - 1 && |
||||||
|
activeLessonIndex === totalLessons - 1 |
||||||
|
} |
||||||
|
className={`flex items-center rounded-md px-4 py-2 ${ |
||||||
|
activeModuleIndex === totalModules - 1 && |
||||||
|
activeLessonIndex === totalLessons - 1 |
||||||
|
? 'cursor-not-allowed text-gray-400' |
||||||
|
: 'bg-gray-800 text-white hover:bg-gray-700' |
||||||
|
}`}
|
||||||
|
> |
||||||
|
Next Lesson |
||||||
|
<ChevronRight size={16} className="ml-2" /> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
/* Full course content view */ |
||||||
|
<div className="mx-auto max-w-3xl rounded-xl border border-gray-200 bg-white p-6 shadow-sm"> |
||||||
|
<div className="mb-4 flex items-center justify-between"> |
||||||
|
<h2 className="text-xl font-bold">Course Outline</h2> |
||||||
|
{isLoading && ( |
||||||
|
<Loader2 size={20} className="animate-spin text-gray-400" /> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{streamedCourse.title ? ( |
||||||
|
<div className="flex flex-col"> |
||||||
|
{streamedCourse.modules.map((module, moduleIdx) => ( |
||||||
|
<div |
||||||
|
key={moduleIdx} |
||||||
|
className="mb-5 pb-4 last:border-0 last:pb-0" |
||||||
|
> |
||||||
|
<h2 className="mb-2 text-xl font-bold text-gray-800"> |
||||||
|
{module.title} |
||||||
|
</h2> |
||||||
|
<div className="ml-2 space-y-1"> |
||||||
|
{module.lessons.map((lesson, lessonIdx) => ( |
||||||
|
<div |
||||||
|
key={lessonIdx} |
||||||
|
className="flex cursor-pointer items-start rounded-md border border-gray-100 p-2 transition-colors hover:border-gray-300 hover:bg-blue-50" |
||||||
|
onClick={() => { |
||||||
|
setActiveModuleIndex(moduleIdx); |
||||||
|
setActiveLessonIndex(lessonIdx); |
||||||
|
// Expand only this module in the sidebar
|
||||||
|
setExpandedModules((prev) => { |
||||||
|
const newState: Record<number, boolean> = {}; |
||||||
|
// Set all modules to collapsed
|
||||||
|
streamedCourse.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'); |
||||||
|
}} |
||||||
|
> |
||||||
|
<span className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700"> |
||||||
|
{lessonIdx + 1} |
||||||
|
</span> |
||||||
|
<p className="flex-1 pt-0.5 text-gray-700"> |
||||||
|
{lesson} |
||||||
|
</p> |
||||||
|
<span className="text-sm font-medium text-blue-600"> |
||||||
|
View → |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div className="flex h-64 items-center justify-center"> |
||||||
|
<Loader2 size={40} className="animate-spin text-gray-400" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</main> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Overlay for mobile sidebar */} |
||||||
|
{sidebarOpen && ( |
||||||
|
<div |
||||||
|
className="fixed inset-0 z-10 bg-gray-900 bg-opacity-50 md:hidden" |
||||||
|
onClick={() => setSidebarOpen(false)} |
||||||
|
></div> |
||||||
|
)} |
||||||
|
</section> |
||||||
|
); |
||||||
|
} |
||||||
@ -1,16 +0,0 @@ |
|||||||
--- |
|
||||||
import { AICourse } from '../../components/GenerateCourse/AICourse'; |
|
||||||
import BaseLayout from '../../layouts/BaseLayout.astro'; |
|
||||||
|
|
||||||
export const prerender = false; |
|
||||||
|
|
||||||
interface Params extends Record<string, string | undefined> { |
|
||||||
courseId: string; |
|
||||||
} |
|
||||||
|
|
||||||
const { courseId } = Astro.params as Params; |
|
||||||
--- |
|
||||||
|
|
||||||
<BaseLayout title='AI Tutor' noIndex={true}> |
|
||||||
<AICourse courseId={courseId} client:load /> |
|
||||||
</BaseLayout> |
|
||||||
@ -0,0 +1,15 @@ |
|||||||
|
--- |
||||||
|
import { AICourse } from '../../components/GenerateCourse/AICourse'; |
||||||
|
import { AICourseContent } from '../../components/GenerateCourse/AICourseContent'; |
||||||
|
import SkeletonLayout from '../../layouts/SkeletonLayout.astro'; |
||||||
|
--- |
||||||
|
|
||||||
|
<SkeletonLayout |
||||||
|
title='AI Tutor' |
||||||
|
briefTitle='AI Tutor' |
||||||
|
description='AI Tutor' |
||||||
|
keywords={['ai', 'tutor', 'education', 'learning']} |
||||||
|
canonicalUrl='/ai-tutor/search' |
||||||
|
> |
||||||
|
<AICourseContent client:load /> |
||||||
|
</SkeletonLayout> |
||||||
Loading…
Reference in new issue