refactor: ai-courses (#8327)
* Refactor ai courses * Refactor * Regenerate roadmap functionality * Title and difficulty to refresh also * Add course regeneration * Improve the non paid user headings * Update * Improve back button logic * Is paid user checksfix/ai-course
Kamran Ahmed
1 month ago
committed by
GitHub
parent
cc5585171c
commit
79c6e2be53
31 changed files with 813 additions and 450 deletions
@ -0,0 +1,39 @@ |
|||||||
|
import { AlertTriangle, type LucideIcon } from 'lucide-react'; |
||||||
|
|
||||||
|
export type BillingWarningProps = { |
||||||
|
icon?: LucideIcon; |
||||||
|
message: string; |
||||||
|
onButtonClick?: () => void; |
||||||
|
buttonText?: string; |
||||||
|
isLoading?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export function BillingWarning(props: BillingWarningProps) { |
||||||
|
const { |
||||||
|
message, |
||||||
|
onButtonClick, |
||||||
|
buttonText, |
||||||
|
isLoading, |
||||||
|
icon: Icon = AlertTriangle, |
||||||
|
} = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="mb-6 flex items-center gap-2 rounded-lg border border-red-300 bg-red-50 p-4 text-sm text-red-600"> |
||||||
|
<Icon className="h-5 w-5" /> |
||||||
|
<span> |
||||||
|
{message} |
||||||
|
{buttonText && ( |
||||||
|
<button |
||||||
|
disabled={isLoading} |
||||||
|
onClick={() => { |
||||||
|
onButtonClick?.(); |
||||||
|
}} |
||||||
|
className="font-semibold underline underline-offset-4 disabled:cursor-not-allowed disabled:opacity-50 ml-0.5" |
||||||
|
> |
||||||
|
{buttonText} |
||||||
|
</button> |
||||||
|
)} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { Modal } from '../Modal'; |
||||||
|
|
||||||
|
export type ModifyCoursePromptProps = { |
||||||
|
onClose: () => void; |
||||||
|
onSubmit: (prompt: string) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ModifyCoursePrompt(props: ModifyCoursePromptProps) { |
||||||
|
const { onClose, onSubmit } = props; |
||||||
|
|
||||||
|
const [prompt, setPrompt] = useState(''); |
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { |
||||||
|
e.preventDefault(); |
||||||
|
onSubmit(prompt); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
onClose={onClose} |
||||||
|
wrapperClassName="rounded-xl max-w-xl w-full h-auto" |
||||||
|
bodyClassName="p-6" |
||||||
|
overlayClassName="items-start md:items-center" |
||||||
|
> |
||||||
|
<div className="flex flex-col gap-4"> |
||||||
|
<div> |
||||||
|
<h2 className="mb-2 text-left text-xl font-semibold"> |
||||||
|
Give AI more context |
||||||
|
</h2> |
||||||
|
<p className="text-sm text-gray-500"> |
||||||
|
Pass additional information to the AI to generate a course outline. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<form className="flex flex-col gap-2" onSubmit={handleSubmit}> |
||||||
|
<textarea |
||||||
|
id="prompt" |
||||||
|
autoFocus |
||||||
|
rows={3} |
||||||
|
value={prompt} |
||||||
|
onChange={(e) => setPrompt(e.target.value)} |
||||||
|
className="w-full rounded-md border border-gray-200 p-2 placeholder:text-sm focus:outline-black" |
||||||
|
placeholder="e.g. make sure to add a section on React hooks" |
||||||
|
/> |
||||||
|
|
||||||
|
<p className="text-sm text-gray-500"> |
||||||
|
Complete the sentence: "I want AI to..." |
||||||
|
</p> |
||||||
|
|
||||||
|
<div className="flex justify-end gap-2"> |
||||||
|
<button |
||||||
|
className="rounded-md bg-gray-200 px-4 py-2.5 text-sm text-black hover:opacity-80" |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
Cancel |
||||||
|
</button> |
||||||
|
<button |
||||||
|
type="submit" |
||||||
|
disabled={!prompt.trim()} |
||||||
|
className="rounded-md bg-black px-4 py-2.5 text-sm text-white hover:opacity-80 disabled:opacity-50" |
||||||
|
> |
||||||
|
Modify Prompt |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
import { PenSquare, RefreshCcw } from 'lucide-react'; |
||||||
|
import { useRef, useState } from 'react'; |
||||||
|
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import { useIsPaidUser } from '../../queries/billing'; |
||||||
|
import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal'; |
||||||
|
import { ModifyCoursePrompt } from './ModifyCoursePrompt'; |
||||||
|
|
||||||
|
type RegenerateOutlineProps = { |
||||||
|
onRegenerateOutline: (prompt?: string) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function RegenerateOutline(props: RegenerateOutlineProps) { |
||||||
|
const { onRegenerateOutline } = props; |
||||||
|
|
||||||
|
const [isDropdownVisible, setIsDropdownVisible] = useState(false); |
||||||
|
const [showUpgradeModal, setShowUpgradeModal] = useState(false); |
||||||
|
const [showPromptModal, setShowPromptModal] = useState(false); |
||||||
|
|
||||||
|
const ref = useRef<HTMLDivElement>(null); |
||||||
|
|
||||||
|
const { isPaidUser } = useIsPaidUser(); |
||||||
|
|
||||||
|
useOutsideClick(ref, () => setIsDropdownVisible(false)); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{showUpgradeModal && ( |
||||||
|
<UpgradeAccountModal |
||||||
|
onClose={() => { |
||||||
|
setShowUpgradeModal(false); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
{showPromptModal && ( |
||||||
|
<ModifyCoursePrompt |
||||||
|
onClose={() => setShowPromptModal(false)} |
||||||
|
onSubmit={(prompt) => { |
||||||
|
setShowPromptModal(false); |
||||||
|
onRegenerateOutline(prompt); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
<div className="absolute right-3 top-3" ref={ref}> |
||||||
|
<button |
||||||
|
className={cn('text-gray-400 hover:text-black', { |
||||||
|
'text-black': isDropdownVisible, |
||||||
|
})} |
||||||
|
onClick={() => setIsDropdownVisible(!isDropdownVisible)} |
||||||
|
> |
||||||
|
<PenSquare className="text-current" size={16} strokeWidth={2.5} /> |
||||||
|
</button> |
||||||
|
{isDropdownVisible && ( |
||||||
|
<div className="absolute right-0 top-full min-w-[170px] overflow-hidden rounded-md border border-gray-200 bg-white"> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
if (!isPaidUser) { |
||||||
|
setIsDropdownVisible(false); |
||||||
|
setShowUpgradeModal(true); |
||||||
|
} else { |
||||||
|
onRegenerateOutline(); |
||||||
|
} |
||||||
|
}} |
||||||
|
className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-100" |
||||||
|
> |
||||||
|
<RefreshCcw |
||||||
|
size={16} |
||||||
|
className="text-gray-400" |
||||||
|
strokeWidth={2.5} |
||||||
|
/> |
||||||
|
Regenerate |
||||||
|
</button> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
setIsDropdownVisible(false); |
||||||
|
if (!isPaidUser) { |
||||||
|
setShowUpgradeModal(true); |
||||||
|
} else { |
||||||
|
setShowPromptModal(true); |
||||||
|
} |
||||||
|
}} |
||||||
|
className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-100" |
||||||
|
> |
||||||
|
<PenSquare |
||||||
|
size={16} |
||||||
|
className="text-gray-400" |
||||||
|
strokeWidth={2.5} |
||||||
|
/> |
||||||
|
Modify Prompt |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,162 @@ |
|||||||
|
import { |
||||||
|
generateAiCourseStructure, |
||||||
|
readStream, |
||||||
|
type AiCourse, |
||||||
|
} from '../lib/ai'; |
||||||
|
import { queryClient } from '../stores/query-client'; |
||||||
|
import { getAiCourseLimitOptions } from '../queries/ai-course'; |
||||||
|
|
||||||
|
type GenerateCourseOptions = { |
||||||
|
term: string; |
||||||
|
difficulty: string; |
||||||
|
slug?: string; |
||||||
|
isForce?: boolean; |
||||||
|
prompt?: string; |
||||||
|
onCourseIdChange?: (courseId: string) => void; |
||||||
|
onCourseSlugChange?: (courseSlug: string) => void; |
||||||
|
onCourseChange?: (course: AiCourse, rawData: string) => void; |
||||||
|
onLoadingChange?: (isLoading: boolean) => void; |
||||||
|
onError?: (error: string) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export async function generateCourse(options: GenerateCourseOptions) { |
||||||
|
const { |
||||||
|
term, |
||||||
|
slug, |
||||||
|
difficulty, |
||||||
|
onCourseIdChange, |
||||||
|
onCourseSlugChange, |
||||||
|
onCourseChange, |
||||||
|
onLoadingChange, |
||||||
|
onError, |
||||||
|
isForce = false, |
||||||
|
prompt, |
||||||
|
} = options; |
||||||
|
|
||||||
|
onLoadingChange?.(true); |
||||||
|
onCourseChange?.( |
||||||
|
{ |
||||||
|
title: '', |
||||||
|
modules: [], |
||||||
|
difficulty: '', |
||||||
|
}, |
||||||
|
'', |
||||||
|
); |
||||||
|
onError?.(''); |
||||||
|
|
||||||
|
try { |
||||||
|
let response = null; |
||||||
|
|
||||||
|
if (slug && isForce) { |
||||||
|
response = await fetch( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-regenerate-ai-course/${slug}`, |
||||||
|
{ |
||||||
|
method: 'POST', |
||||||
|
headers: { |
||||||
|
'Content-Type': 'application/json', |
||||||
|
}, |
||||||
|
credentials: 'include', |
||||||
|
body: JSON.stringify({ |
||||||
|
isForce, |
||||||
|
customPrompt: prompt, |
||||||
|
}), |
||||||
|
}, |
||||||
|
); |
||||||
|
} else { |
||||||
|
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, |
||||||
|
isForce, |
||||||
|
customPrompt: prompt, |
||||||
|
}), |
||||||
|
credentials: 'include', |
||||||
|
}, |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
if (!response.ok) { |
||||||
|
const data = await response.json(); |
||||||
|
console.error( |
||||||
|
'Error generating course:', |
||||||
|
data?.message || 'Something went wrong', |
||||||
|
); |
||||||
|
onLoadingChange?.(false); |
||||||
|
onError?.(data?.message || 'Something went wrong'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const reader = response.body?.getReader(); |
||||||
|
|
||||||
|
if (!reader) { |
||||||
|
console.error('Failed to get reader from response'); |
||||||
|
onError?.('Something went wrong'); |
||||||
|
onLoadingChange?.(false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const COURSE_ID_REGEX = new RegExp('@COURSEID:(\\w+)@'); |
||||||
|
const COURSE_SLUG_REGEX = new RegExp(/@COURSESLUG:([\w-]+)@/); |
||||||
|
|
||||||
|
await readStream(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: extractedCourseId, |
||||||
|
courseSlug: extractedCourseSlug, |
||||||
|
term, |
||||||
|
difficulty, |
||||||
|
}, |
||||||
|
'', |
||||||
|
`${origin}/ai-tutor/${extractedCourseSlug}`, |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
result = result |
||||||
|
.replace(COURSE_ID_REGEX, '') |
||||||
|
.replace(COURSE_SLUG_REGEX, ''); |
||||||
|
|
||||||
|
onCourseIdChange?.(extractedCourseId); |
||||||
|
onCourseSlugChange?.(extractedCourseSlug); |
||||||
|
} |
||||||
|
|
||||||
|
try { |
||||||
|
const aiCourse = generateAiCourseStructure(result); |
||||||
|
onCourseChange?.( |
||||||
|
{ |
||||||
|
...aiCourse, |
||||||
|
difficulty: difficulty || '', |
||||||
|
}, |
||||||
|
result, |
||||||
|
); |
||||||
|
} catch (e) { |
||||||
|
console.error('Error parsing streamed course content:', e); |
||||||
|
} |
||||||
|
}, |
||||||
|
onStreamEnd: (result) => { |
||||||
|
result = result |
||||||
|
.replace(COURSE_ID_REGEX, '') |
||||||
|
.replace(COURSE_SLUG_REGEX, ''); |
||||||
|
onLoadingChange?.(false); |
||||||
|
queryClient.invalidateQueries(getAiCourseLimitOptions()); |
||||||
|
}, |
||||||
|
}); |
||||||
|
} catch (error: any) { |
||||||
|
onError?.(error?.message || 'Something went wrong'); |
||||||
|
console.error('Error in course generation:', error); |
||||||
|
onLoadingChange?.(false); |
||||||
|
} |
||||||
|
} |
||||||
@ -1,12 +0,0 @@ |
|||||||
export function getPercentage(portion: number, total: number): number { |
|
||||||
if (portion <= 0 || total <= 0) { |
|
||||||
return 0; |
|
||||||
} |
|
||||||
|
|
||||||
if (portion >= total) { |
|
||||||
return 100; |
|
||||||
} |
|
||||||
|
|
||||||
const percentage = (portion / total) * 100; |
|
||||||
return Math.round(percentage); |
|
||||||
} |
|
||||||
@ -1,141 +0,0 @@ |
|||||||
const NEW_LINE = '\n'.charCodeAt(0); |
|
||||||
|
|
||||||
export async function readAIRoadmapStream( |
|
||||||
reader: ReadableStreamDefaultReader<Uint8Array>, |
|
||||||
{ |
|
||||||
onStream, |
|
||||||
onStreamEnd, |
|
||||||
}: { |
|
||||||
onStream?: (roadmap: string) => void; |
|
||||||
onStreamEnd?: (roadmap: string) => void; |
|
||||||
}, |
|
||||||
) { |
|
||||||
const decoder = new TextDecoder('utf-8'); |
|
||||||
let result = ''; |
|
||||||
|
|
||||||
while (true) { |
|
||||||
const { value, done } = await reader.read(); |
|
||||||
if (done) { |
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
// We will call the renderRoadmap callback whenever we encounter
|
|
||||||
// a new line with the result until the new line
|
|
||||||
// otherwise, we will keep appending the result to the previous result
|
|
||||||
if (value) { |
|
||||||
let start = 0; |
|
||||||
for (let i = 0; i < value.length; i++) { |
|
||||||
if (value[i] === NEW_LINE) { |
|
||||||
result += decoder.decode(value.slice(start, i + 1)); |
|
||||||
onStream?.(result); |
|
||||||
start = i + 1; |
|
||||||
} |
|
||||||
} |
|
||||||
if (start < value.length) { |
|
||||||
result += decoder.decode(value.slice(start)); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
onStream?.(result); |
|
||||||
onStreamEnd?.(result); |
|
||||||
reader.releaseLock(); |
|
||||||
} |
|
||||||
|
|
||||||
export async function readAIRoadmapContentStream( |
|
||||||
reader: ReadableStreamDefaultReader<Uint8Array>, |
|
||||||
{ |
|
||||||
onStream, |
|
||||||
onStreamEnd, |
|
||||||
}: { |
|
||||||
onStream?: (roadmap: string) => void; |
|
||||||
onStreamEnd?: (roadmap: string) => void; |
|
||||||
}, |
|
||||||
) { |
|
||||||
const decoder = new TextDecoder('utf-8'); |
|
||||||
let result = ''; |
|
||||||
|
|
||||||
while (true) { |
|
||||||
const { value, done } = await reader.read(); |
|
||||||
if (done) { |
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
if (value) { |
|
||||||
result += decoder.decode(value); |
|
||||||
onStream?.(result); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
onStream?.(result); |
|
||||||
onStreamEnd?.(result); |
|
||||||
reader.releaseLock(); |
|
||||||
} |
|
||||||
|
|
||||||
export async function readAICourseStream( |
|
||||||
reader: ReadableStreamDefaultReader<Uint8Array>, |
|
||||||
{ |
|
||||||
onStream, |
|
||||||
onStreamEnd, |
|
||||||
}: { |
|
||||||
onStream?: (course: string) => void; |
|
||||||
onStreamEnd?: (course: string) => void; |
|
||||||
}, |
|
||||||
) { |
|
||||||
const decoder = new TextDecoder('utf-8'); |
|
||||||
let result = ''; |
|
||||||
|
|
||||||
while (true) { |
|
||||||
const { value, done } = await reader.read(); |
|
||||||
if (done) { |
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
// Process the stream data as it comes in
|
|
||||||
if (value) { |
|
||||||
let start = 0; |
|
||||||
for (let i = 0; i < value.length; i++) { |
|
||||||
if (value[i] === NEW_LINE) { |
|
||||||
result += decoder.decode(value.slice(start, i + 1)); |
|
||||||
onStream?.(result); |
|
||||||
start = i + 1; |
|
||||||
} |
|
||||||
} |
|
||||||
if (start < value.length) { |
|
||||||
result += decoder.decode(value.slice(start)); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
onStream?.(result); |
|
||||||
onStreamEnd?.(result); |
|
||||||
reader.releaseLock(); |
|
||||||
} |
|
||||||
|
|
||||||
export async function readAICourseLessonStream( |
|
||||||
reader: ReadableStreamDefaultReader<Uint8Array>, |
|
||||||
{ |
|
||||||
onStream, |
|
||||||
onStreamEnd, |
|
||||||
}: { |
|
||||||
onStream?: (lesson: string) => void; |
|
||||||
onStreamEnd?: (lesson: string) => void; |
|
||||||
}, |
|
||||||
) { |
|
||||||
const decoder = new TextDecoder('utf-8'); |
|
||||||
let result = ''; |
|
||||||
|
|
||||||
while (true) { |
|
||||||
const { value, done } = await reader.read(); |
|
||||||
if (done) { |
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
result += decoder.decode(value); |
|
||||||
onStream?.(result); |
|
||||||
} |
|
||||||
|
|
||||||
onStream?.(result); |
|
||||||
onStreamEnd?.(result); |
|
||||||
reader.releaseLock(); |
|
||||||
} |
|
||||||
Loading…
Reference in new issue