feat: course ai roadmap (#8352)
* feat: course ai roadmap * wip * fix: error * refactor: remove open ai key * wip: view switch * feat: add roadmap progress * fix: simplify module * wip * Update outline generation * Update course limits popup * fix: module done * Updates to AI usage * UI and error handling * Map and outline view to share header * Outline switcher * Responsive AI generation * Update header for course * Roadmap switch --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/8411/head
Arik Chakma
2 weeks ago
committed by
GitHub
parent
80a4ebbb3d
commit
85202507e6
17 changed files with 784 additions and 498 deletions
@ -0,0 +1,80 @@ |
|||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import type { AiCourse } from '../../lib/ai'; |
||||||
|
import { RegenerateOutline } from './RegenerateOutline'; |
||||||
|
import type { AICourseViewMode } from './AICourseContent'; |
||||||
|
import { BookOpenCheck, Signpost } from 'lucide-react'; |
||||||
|
|
||||||
|
type AICourseOutlineHeaderProps = { |
||||||
|
course: AiCourse; |
||||||
|
isLoading: boolean; |
||||||
|
onRegenerateOutline: (prompt?: string) => void; |
||||||
|
viewMode: AICourseViewMode; |
||||||
|
setViewMode: (mode: AICourseViewMode) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function AICourseOutlineHeader(props: AICourseOutlineHeaderProps) { |
||||||
|
const { course, isLoading, onRegenerateOutline, viewMode, setViewMode } = |
||||||
|
props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
'relative mb-1 flex items-start justify-between border-b border-gray-100 p-6 max-lg:p-3', |
||||||
|
isLoading && 'striped-loader', |
||||||
|
)} |
||||||
|
> |
||||||
|
<div className="max-lg:hidden"> |
||||||
|
<h2 className="mb-1 text-balance text-2xl font-bold max-lg:text-lg max-lg:leading-tight"> |
||||||
|
{course.title || 'Loading course ..'} |
||||||
|
</h2> |
||||||
|
<p className="text-sm capitalize text-gray-500"> |
||||||
|
{course.title ? course.difficulty : 'Please wait ..'} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="absolute right-3 top-3 flex gap-2 max-lg:relative max-lg:right-0 max-lg:top-0 max-lg:w-full max-lg:flex-row-reverse max-lg:justify-between"> |
||||||
|
{!isLoading && ( |
||||||
|
<> |
||||||
|
<RegenerateOutline onRegenerateOutline={onRegenerateOutline} /> |
||||||
|
<div className="mr-1 flex rounded-lg border border-gray-200 bg-white p-0.5"> |
||||||
|
<button |
||||||
|
onClick={() => setViewMode('outline')} |
||||||
|
className={cn( |
||||||
|
'flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors', |
||||||
|
viewMode === 'outline' |
||||||
|
? 'bg-gray-200 text-gray-900' |
||||||
|
: 'text-gray-500 hover:text-gray-900', |
||||||
|
)} |
||||||
|
> |
||||||
|
<BookOpenCheck |
||||||
|
className={cn( |
||||||
|
'size-4', |
||||||
|
viewMode === 'outline' && 'text-gray-900', |
||||||
|
)} |
||||||
|
/> |
||||||
|
<span>Outline</span> |
||||||
|
</button> |
||||||
|
<button |
||||||
|
onClick={() => setViewMode('roadmap')} |
||||||
|
className={cn( |
||||||
|
'flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors', |
||||||
|
viewMode === 'roadmap' |
||||||
|
? 'bg-gray-200 text-gray-900' |
||||||
|
: 'text-gray-500 hover:text-gray-900', |
||||||
|
)} |
||||||
|
> |
||||||
|
<Signpost |
||||||
|
className={cn( |
||||||
|
'size-4', |
||||||
|
viewMode === 'roadmap' && 'text-gray-900', |
||||||
|
)} |
||||||
|
/> |
||||||
|
<span>Map</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,117 @@ |
|||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import type { AiCourse } from '../../lib/ai'; |
||||||
|
import { slugify } from '../../lib/slugger'; |
||||||
|
import { CheckIcon } from '../ReactIcons/CheckIcon'; |
||||||
|
import type { Dispatch, SetStateAction } from 'react'; |
||||||
|
import { Loader2Icon } from 'lucide-react'; |
||||||
|
import type { AICourseViewMode } from './AICourseContent'; |
||||||
|
import { AICourseOutlineHeader } from './AICourseOutlineHeader'; |
||||||
|
|
||||||
|
type AICourseOutlineViewProps = { |
||||||
|
course: AiCourse; |
||||||
|
isLoading: boolean; |
||||||
|
onRegenerateOutline: (prompt?: string) => void; |
||||||
|
setActiveModuleIndex: (index: number) => void; |
||||||
|
setActiveLessonIndex: (index: number) => void; |
||||||
|
setSidebarOpen: (open: boolean) => void; |
||||||
|
setViewMode: (mode: AICourseViewMode) => void; |
||||||
|
setExpandedModules: Dispatch<SetStateAction<Record<number, boolean>>>; |
||||||
|
viewMode: AICourseViewMode; |
||||||
|
}; |
||||||
|
|
||||||
|
export function AICourseOutlineView(props: AICourseOutlineViewProps) { |
||||||
|
const { |
||||||
|
course, |
||||||
|
isLoading, |
||||||
|
onRegenerateOutline, |
||||||
|
setActiveModuleIndex, |
||||||
|
setActiveLessonIndex, |
||||||
|
setSidebarOpen, |
||||||
|
setViewMode, |
||||||
|
setExpandedModules, |
||||||
|
viewMode, |
||||||
|
} = props; |
||||||
|
|
||||||
|
const aiCourseProgress = course.done || []; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="mx-auto rounded-xl border border-gray-200 bg-white shadow-sm lg:max-w-5xl"> |
||||||
|
<AICourseOutlineHeader |
||||||
|
course={course} |
||||||
|
isLoading={isLoading} |
||||||
|
onRegenerateOutline={onRegenerateOutline} |
||||||
|
viewMode={viewMode} |
||||||
|
setViewMode={setViewMode} |
||||||
|
/> |
||||||
|
{course.title ? ( |
||||||
|
<div className="flex flex-col p-6 max-lg:mt-0.5 max-lg:p-4"> |
||||||
|
{course.modules.map((courseModule, moduleIdx) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
key={moduleIdx} |
||||||
|
className="mb-5 pb-4 last:border-0 last:pb-0 max-lg:mb-2" |
||||||
|
> |
||||||
|
<h2 className="mb-4 text-xl font-bold text-gray-800 max-lg:mb-2 max-lg:text-lg max-lg:leading-tight"> |
||||||
|
{courseModule.title} |
||||||
|
</h2> |
||||||
|
<div className="divide-y divide-gray-100"> |
||||||
|
{courseModule.lessons.map((lesson, lessonIdx) => { |
||||||
|
const key = `${slugify(String(moduleIdx))}-${slugify(String(lessonIdx))}`; |
||||||
|
const isCompleted = aiCourseProgress.includes(key); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
key={key} |
||||||
|
className="flex cursor-pointer items-center gap-2 px-2 py-2.5 transition-colors hover:bg-gray-100 max-lg:px-0 max-lg:py-1.5" |
||||||
|
onClick={() => { |
||||||
|
setActiveModuleIndex(moduleIdx); |
||||||
|
setActiveLessonIndex(lessonIdx); |
||||||
|
setExpandedModules((prev) => { |
||||||
|
const newState: Record<number, boolean> = {}; |
||||||
|
course.modules.forEach((_, idx) => { |
||||||
|
newState[idx] = false; |
||||||
|
}); |
||||||
|
newState[moduleIdx] = true; |
||||||
|
return newState; |
||||||
|
}); |
||||||
|
|
||||||
|
setSidebarOpen(false); |
||||||
|
setViewMode('module'); |
||||||
|
}} |
||||||
|
> |
||||||
|
{!isCompleted && ( |
||||||
|
<span |
||||||
|
className={cn( |
||||||
|
'flex size-6 flex-shrink-0 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-800 max-lg:size-5 max-lg:text-xs', |
||||||
|
)} |
||||||
|
> |
||||||
|
{lessonIdx + 1} |
||||||
|
</span> |
||||||
|
)} |
||||||
|
|
||||||
|
{isCompleted && ( |
||||||
|
<CheckIcon additionalClasses="size-6 flex-shrink-0 text-green-500" /> |
||||||
|
)} |
||||||
|
|
||||||
|
<p className="flex-1 truncate text-base text-gray-800 max-lg:text-sm"> |
||||||
|
{lesson.replace(/^Lesson\s*?\d+[\.:]\s*/, '')} |
||||||
|
</p> |
||||||
|
<span className="text-sm font-medium text-gray-700 max-lg:hidden"> |
||||||
|
{isCompleted ? 'View' : 'Start'} → |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div className="flex h-64 items-center justify-center"> |
||||||
|
<Loader2Icon size={36} className="animate-spin text-gray-300" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,252 @@ |
|||||||
|
import '../GenerateRoadmap/GenerateRoadmap.css'; |
||||||
|
import { renderFlowJSON } from '../../../editor/renderer/renderer'; |
||||||
|
import { generateAIRoadmapFromText } from '../../../editor/utils/roadmap-generator'; |
||||||
|
import { |
||||||
|
generateAICourseRoadmapStructure, |
||||||
|
readAIRoadmapStream, |
||||||
|
type ResultItem, |
||||||
|
} from '../../lib/ai'; |
||||||
|
import { |
||||||
|
useCallback, |
||||||
|
useEffect, |
||||||
|
useRef, |
||||||
|
useState, |
||||||
|
type Dispatch, |
||||||
|
type SetStateAction, |
||||||
|
type MouseEvent, |
||||||
|
} from 'react'; |
||||||
|
import type { AICourseViewMode } from './AICourseContent'; |
||||||
|
import { replaceChildren } from '../../lib/dom'; |
||||||
|
import { Frown, Loader2Icon } from 'lucide-react'; |
||||||
|
import { renderTopicProgress } from '../../lib/resource-progress'; |
||||||
|
import { queryClient } from '../../stores/query-client'; |
||||||
|
import { useQuery } from '@tanstack/react-query'; |
||||||
|
import { billingDetailsOptions } from '../../queries/billing'; |
||||||
|
import { AICourseOutlineHeader } from './AICourseOutlineHeader'; |
||||||
|
import type { AiCourse } from '../../lib/ai'; |
||||||
|
|
||||||
|
export type AICourseRoadmapViewProps = { |
||||||
|
done: string[]; |
||||||
|
courseSlug: string; |
||||||
|
course: AiCourse; |
||||||
|
isLoading: boolean; |
||||||
|
onRegenerateOutline: (prompt?: string) => void; |
||||||
|
setActiveModuleIndex: (index: number) => void; |
||||||
|
setActiveLessonIndex: (index: number) => void; |
||||||
|
setViewMode: (mode: AICourseViewMode) => void; |
||||||
|
onUpgradeClick: () => void; |
||||||
|
setExpandedModules: Dispatch<SetStateAction<Record<number, boolean>>>; |
||||||
|
viewMode: AICourseViewMode; |
||||||
|
}; |
||||||
|
|
||||||
|
export function AICourseRoadmapView(props: AICourseRoadmapViewProps) { |
||||||
|
const { |
||||||
|
done = [], |
||||||
|
courseSlug, |
||||||
|
course, |
||||||
|
isLoading, |
||||||
|
onRegenerateOutline, |
||||||
|
setActiveModuleIndex, |
||||||
|
setActiveLessonIndex, |
||||||
|
setViewMode, |
||||||
|
setExpandedModules, |
||||||
|
onUpgradeClick, |
||||||
|
viewMode, |
||||||
|
} = props; |
||||||
|
|
||||||
|
const containerEl = useRef<HTMLDivElement>(null); |
||||||
|
const [roadmapStructure, setRoadmapStructure] = useState<ResultItem[]>([]); |
||||||
|
|
||||||
|
const [isGenerating, setIsGenerating] = useState(false); |
||||||
|
const [error, setError] = useState<string | null>(null); |
||||||
|
|
||||||
|
const { data: userBillingDetails, isLoading: isBillingDetailsLoading } = |
||||||
|
useQuery(billingDetailsOptions(), queryClient); |
||||||
|
|
||||||
|
const isPaidUser = userBillingDetails?.status === 'active'; |
||||||
|
|
||||||
|
const generateAICourseRoadmap = async (courseSlug: string) => { |
||||||
|
try { |
||||||
|
const response = await fetch( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-generate-ai-course-roadmap/${courseSlug}`, |
||||||
|
{ |
||||||
|
method: 'POST', |
||||||
|
headers: { |
||||||
|
'Content-Type': 'application/json', |
||||||
|
}, |
||||||
|
credentials: 'include', |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
if (!response.ok) { |
||||||
|
const data = await response.json(); |
||||||
|
console.error( |
||||||
|
'Error generating course roadmap:', |
||||||
|
data?.message || 'Something went wrong', |
||||||
|
); |
||||||
|
setError(data?.message || 'Something went wrong'); |
||||||
|
setIsGenerating(false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const reader = response.body?.getReader(); |
||||||
|
if (!reader) { |
||||||
|
console.error('Failed to get reader from response'); |
||||||
|
setError('Something went wrong'); |
||||||
|
setIsGenerating(false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsGenerating(true); |
||||||
|
await readAIRoadmapStream(reader, { |
||||||
|
onStream: async (result) => { |
||||||
|
const roadmap = generateAICourseRoadmapStructure(result, true); |
||||||
|
const { nodes, edges } = generateAIRoadmapFromText(roadmap); |
||||||
|
const svg = await renderFlowJSON({ nodes, edges }); |
||||||
|
replaceChildren(containerEl.current!, svg); |
||||||
|
}, |
||||||
|
onStreamEnd: async (result) => { |
||||||
|
const roadmap = generateAICourseRoadmapStructure(result, true); |
||||||
|
const { nodes, edges } = generateAIRoadmapFromText(roadmap); |
||||||
|
const svg = await renderFlowJSON({ nodes, edges }); |
||||||
|
replaceChildren(containerEl.current!, svg); |
||||||
|
setRoadmapStructure(roadmap); |
||||||
|
setIsGenerating(false); |
||||||
|
|
||||||
|
done.forEach((id) => { |
||||||
|
renderTopicProgress(id, 'done'); |
||||||
|
}); |
||||||
|
|
||||||
|
const modules = roadmap.filter((item) => item.type === 'topic'); |
||||||
|
for (const module of modules) { |
||||||
|
const moduleId = module.id; |
||||||
|
const isAllLessonsDone = |
||||||
|
module?.children?.every((child) => done.includes(child.id)) ?? |
||||||
|
false; |
||||||
|
if (isAllLessonsDone) { |
||||||
|
renderTopicProgress(moduleId, 'done'); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
}); |
||||||
|
} catch (error) { |
||||||
|
console.error('Error generating course roadmap:', error); |
||||||
|
setError('Something went wrong'); |
||||||
|
setIsGenerating(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!courseSlug) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
generateAICourseRoadmap(courseSlug); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleNodeClick = useCallback( |
||||||
|
(e: MouseEvent<HTMLDivElement, unknown>) => { |
||||||
|
if (isGenerating) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const target = e.target as SVGElement; |
||||||
|
const targetGroup = (target?.closest('g') as SVGElement) || {}; |
||||||
|
|
||||||
|
const nodeId = targetGroup?.dataset?.nodeId; |
||||||
|
const nodeType = targetGroup?.dataset?.type; |
||||||
|
if (!nodeId || !nodeType) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
if (nodeType === 'topic') { |
||||||
|
const topicIndex = roadmapStructure |
||||||
|
.filter((item) => item.type === 'topic') |
||||||
|
.findIndex((item) => item.id === nodeId); |
||||||
|
|
||||||
|
setExpandedModules((prev) => { |
||||||
|
const newState: Record<number, boolean> = {}; |
||||||
|
roadmapStructure.forEach((_, idx) => { |
||||||
|
newState[idx] = false; |
||||||
|
}); |
||||||
|
newState[topicIndex] = true; |
||||||
|
return newState; |
||||||
|
}); |
||||||
|
|
||||||
|
setActiveModuleIndex(topicIndex); |
||||||
|
setActiveLessonIndex(0); |
||||||
|
setViewMode('module'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (nodeType !== 'subtopic') { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const [moduleIndex, topicIndex] = nodeId.split('-').map(Number); |
||||||
|
setExpandedModules((prev) => { |
||||||
|
const newState: Record<number, boolean> = {}; |
||||||
|
roadmapStructure.forEach((_, idx) => { |
||||||
|
newState[idx] = false; |
||||||
|
}); |
||||||
|
newState[moduleIndex] = true; |
||||||
|
return newState; |
||||||
|
}); |
||||||
|
setActiveModuleIndex(moduleIndex); |
||||||
|
setActiveLessonIndex(topicIndex); |
||||||
|
setViewMode('module'); |
||||||
|
}, |
||||||
|
[ |
||||||
|
roadmapStructure, |
||||||
|
setExpandedModules, |
||||||
|
setActiveModuleIndex, |
||||||
|
setActiveLessonIndex, |
||||||
|
setViewMode, |
||||||
|
], |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="relative mx-auto min-h-[500px] rounded-xl border border-gray-200 bg-white shadow-sm lg:max-w-5xl"> |
||||||
|
<AICourseOutlineHeader |
||||||
|
course={course} |
||||||
|
isLoading={isLoading} |
||||||
|
onRegenerateOutline={(prompt) => { |
||||||
|
setViewMode('outline'); |
||||||
|
onRegenerateOutline(prompt); |
||||||
|
}} |
||||||
|
viewMode={viewMode} |
||||||
|
setViewMode={setViewMode} |
||||||
|
/> |
||||||
|
{isLoading && ( |
||||||
|
<div className="absolute inset-0 flex h-full w-full items-center justify-center"> |
||||||
|
<Loader2Icon className="h-10 w-10 animate-spin stroke-[3px]" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{error && !isGenerating && ( |
||||||
|
<div className="absolute inset-0 flex h-full w-full flex-col items-center justify-center"> |
||||||
|
<Frown className="size-20 text-red-500" /> |
||||||
|
<p className="mx-auto mt-5 max-w-[250px] text-balance text-center text-base text-red-500"> |
||||||
|
{error || 'Something went wrong'} |
||||||
|
</p> |
||||||
|
|
||||||
|
{!isPaidUser && (error || '')?.includes('limit') && ( |
||||||
|
<button |
||||||
|
onClick={onUpgradeClick} |
||||||
|
className="mt-5 rounded-full bg-red-600 px-4 py-1 text-white hover:bg-red-700" |
||||||
|
> |
||||||
|
Upgrade Account |
||||||
|
</button> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
<div |
||||||
|
id={'resource-svg-wrap'} |
||||||
|
ref={containerEl} |
||||||
|
onClick={handleNodeClick} |
||||||
|
className="px-4 pb-2" |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
import { BookOpenCheckIcon, SignpostIcon, type LucideIcon } from 'lucide-react'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import type { AICourseViewMode } from './AICourseContent'; |
||||||
|
|
||||||
|
type AIRoadmapViewSwitchProps = { |
||||||
|
viewMode: AICourseViewMode; |
||||||
|
setViewMode: (mode: AICourseViewMode) => void; |
||||||
|
isLoading: boolean; |
||||||
|
variant?: 'icon' | 'text'; |
||||||
|
}; |
||||||
|
|
||||||
|
export function AIRoadmapViewSwitch(props: AIRoadmapViewSwitchProps) { |
||||||
|
const { viewMode, setViewMode, isLoading, variant = 'icon' } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
'grid shrink-0 grid-cols-2 gap-0.5 rounded-md border border-gray-300 bg-white p-0.5 shadow-sm', |
||||||
|
)} |
||||||
|
> |
||||||
|
<SwitchButton |
||||||
|
onClick={() => setViewMode('outline')} |
||||||
|
isActive={viewMode === 'outline'} |
||||||
|
disabled={isLoading} |
||||||
|
variant={variant} |
||||||
|
icon={BookOpenCheckIcon} |
||||||
|
label="Outline" |
||||||
|
/> |
||||||
|
|
||||||
|
<SwitchButton |
||||||
|
onClick={() => setViewMode('roadmap')} |
||||||
|
isActive={viewMode === 'roadmap'} |
||||||
|
disabled={isLoading} |
||||||
|
variant={variant} |
||||||
|
icon={SignpostIcon} |
||||||
|
label="Roadmap" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type SwitchButtonProps = { |
||||||
|
onClick: () => void; |
||||||
|
isActive: boolean; |
||||||
|
disabled: boolean; |
||||||
|
variant?: 'icon' | 'text'; |
||||||
|
icon: LucideIcon; |
||||||
|
label: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function SwitchButton(props: SwitchButtonProps) { |
||||||
|
const { |
||||||
|
onClick, |
||||||
|
isActive, |
||||||
|
disabled, |
||||||
|
variant = 'icon', |
||||||
|
icon: Icon, |
||||||
|
label, |
||||||
|
} = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'flex items-center justify-center gap-1.5 rounded text-sm hover:bg-gray-100 disabled:cursor-not-allowed', |
||||||
|
isActive && 'bg-gray-100 text-gray-800', |
||||||
|
variant === 'text' ? 'px-2 py-1.5' : 'p-[5px]', |
||||||
|
)} |
||||||
|
onClick={onClick} |
||||||
|
disabled={disabled} |
||||||
|
> |
||||||
|
<Icon |
||||||
|
className={cn( |
||||||
|
'size-4', |
||||||
|
variant === 'icon' && 'h-3 w-3', |
||||||
|
isActive && 'text-gray-800', |
||||||
|
)} |
||||||
|
/> |
||||||
|
{variant === 'text' && label} |
||||||
|
</button> |
||||||
|
); |
||||||
|
} |
||||||
@ -1,171 +0,0 @@ |
|||||||
import { useEffect, useState } from 'react'; |
|
||||||
import { deleteOpenAIKey, getOpenAIKey, saveOpenAIKey } from '../../lib/jwt.ts'; |
|
||||||
import { cn } from '../../lib/classname.ts'; |
|
||||||
import { CloseIcon } from '../ReactIcons/CloseIcon.tsx'; |
|
||||||
import { useToast } from '../../hooks/use-toast.ts'; |
|
||||||
import { httpPost } from '../../lib/http.ts'; |
|
||||||
import { ChevronLeft } from 'lucide-react'; |
|
||||||
|
|
||||||
type OpenAISettingsProps = { |
|
||||||
onClose: () => void; |
|
||||||
onBack: () => void; |
|
||||||
}; |
|
||||||
|
|
||||||
export function OpenAISettings(props: OpenAISettingsProps) { |
|
||||||
const { onClose, onBack } = props; |
|
||||||
|
|
||||||
const [defaultOpenAIKey, setDefaultOpenAIKey] = useState(''); |
|
||||||
|
|
||||||
const [error, setError] = useState(''); |
|
||||||
const [openaiApiKey, setOpenaiApiKey] = useState(''); |
|
||||||
const [isLoading, setIsLoading] = useState(false); |
|
||||||
|
|
||||||
const toast = useToast(); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
const apiKey = getOpenAIKey(); |
|
||||||
setOpenaiApiKey(apiKey || ''); |
|
||||||
setDefaultOpenAIKey(apiKey || ''); |
|
||||||
}, []); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="p-4"> |
|
||||||
<button |
|
||||||
onClick={onBack} |
|
||||||
className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none" |
|
||||||
> |
|
||||||
<ChevronLeft size={16} /> |
|
||||||
Back to options |
|
||||||
</button> |
|
||||||
|
|
||||||
<h2 className="text-xl font-semibold text-gray-800">OpenAI Settings</h2> |
|
||||||
<p className="mt-2 text-sm leading-normal text-gray-500"> |
|
||||||
Add your OpenAI API key below to bypass the roadmap generation limits. |
|
||||||
You can use your existing key or{' '} |
|
||||||
<a |
|
||||||
className="underline underline-offset-2 hover:text-gray-900" |
|
||||||
href={'https://platform.openai.com/signup'} |
|
||||||
target="_blank" |
|
||||||
> |
|
||||||
create a new one here |
|
||||||
</a> |
|
||||||
. |
|
||||||
</p> |
|
||||||
|
|
||||||
<form |
|
||||||
className="mt-4" |
|
||||||
onSubmit={async (e) => { |
|
||||||
e.preventDefault(); |
|
||||||
setError(''); |
|
||||||
|
|
||||||
const normalizedKey = openaiApiKey.trim(); |
|
||||||
if (!normalizedKey) { |
|
||||||
deleteOpenAIKey(); |
|
||||||
toast.success('OpenAI API key removed'); |
|
||||||
onClose(); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
if (!normalizedKey.startsWith('sk-')) { |
|
||||||
setError("Invalid OpenAI API key. It should start with 'sk-'"); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
setIsLoading(true); |
|
||||||
const { response, error } = await httpPost( |
|
||||||
`${import.meta.env.PUBLIC_API_URL}/v1-validate-openai-key`, |
|
||||||
{ |
|
||||||
key: normalizedKey, |
|
||||||
}, |
|
||||||
); |
|
||||||
|
|
||||||
if (error) { |
|
||||||
setError(error.message); |
|
||||||
setIsLoading(false); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
// Save the API key to cookies
|
|
||||||
saveOpenAIKey(normalizedKey); |
|
||||||
toast.success('OpenAI API key saved'); |
|
||||||
onClose(); |
|
||||||
}} |
|
||||||
> |
|
||||||
<div className="relative"> |
|
||||||
<input |
|
||||||
type="text" |
|
||||||
name="openai-api-key" |
|
||||||
id="openai-api-key" |
|
||||||
className={cn( |
|
||||||
'block w-full rounded-md border border-gray-300 px-3 py-2 text-gray-800 transition-colors focus:border-black focus:outline-none', |
|
||||||
{ |
|
||||||
'border-red-500 bg-red-100 focus:border-red-500': error, |
|
||||||
}, |
|
||||||
)} |
|
||||||
placeholder="Enter your OpenAI API key" |
|
||||||
value={openaiApiKey} |
|
||||||
onChange={(e) => { |
|
||||||
setError(''); |
|
||||||
setOpenaiApiKey((e.target as HTMLInputElement).value); |
|
||||||
}} |
|
||||||
/> |
|
||||||
|
|
||||||
{openaiApiKey && ( |
|
||||||
<button |
|
||||||
type={'button'} |
|
||||||
onClick={() => { |
|
||||||
setOpenaiApiKey(''); |
|
||||||
}} |
|
||||||
className="absolute right-2 top-1/2 flex h-[20px] w-[20px] -translate-y-1/2 items-center justify-center rounded-full bg-gray-400 text-white hover:bg-gray-600" |
|
||||||
> |
|
||||||
<CloseIcon className="h-[13px] w-[13px] stroke-[3.5]" /> |
|
||||||
</button> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
<p className={'mb-2 mt-1 text-xs text-gray-500'}> |
|
||||||
We do not store your API key on our servers. |
|
||||||
</p> |
|
||||||
|
|
||||||
{error && ( |
|
||||||
<p className="mt-2 text-sm text-red-500"> |
|
||||||
{error} |
|
||||||
</p> |
|
||||||
)} |
|
||||||
<button |
|
||||||
disabled={isLoading} |
|
||||||
type="submit" |
|
||||||
className={ |
|
||||||
'mt-2 w-full rounded-md bg-gray-700 px-4 py-2 text-white transition-colors hover:bg-black disabled:cursor-not-allowed disabled:opacity-50' |
|
||||||
} |
|
||||||
> |
|
||||||
{!isLoading && 'Save'} |
|
||||||
{isLoading && 'Validating ..'} |
|
||||||
</button> |
|
||||||
{!defaultOpenAIKey && ( |
|
||||||
<button |
|
||||||
type="button" |
|
||||||
onClick={() => { |
|
||||||
onClose(); |
|
||||||
}} |
|
||||||
className="mt-1 w-full rounded-md border border-red-500 px-4 py-2 text-sm text-red-600 transition-colors hover:bg-red-700 hover:text-white" |
|
||||||
> |
|
||||||
Cancel |
|
||||||
</button> |
|
||||||
)} |
|
||||||
{defaultOpenAIKey && ( |
|
||||||
<button |
|
||||||
type="button" |
|
||||||
onClick={() => { |
|
||||||
deleteOpenAIKey(); |
|
||||||
onClose(); |
|
||||||
toast.success('OpenAI API key removed'); |
|
||||||
}} |
|
||||||
className="mt-1 w-full rounded-md border border-red-500 px-4 py-2 text-sm text-red-600 transition-colors hover:bg-red-700 hover:text-white" |
|
||||||
> |
|
||||||
Remove API Key |
|
||||||
</button> |
|
||||||
)} |
|
||||||
</form> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
Loading…
Reference in new issue