Kamran Ahmed
1 month ago
parent
38cd727e48
commit
cfbb4f32ab
29 changed files with 543 additions and 314 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,75 @@ |
||||
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'; |
||||
|
||||
type RegenerateOutlineProps = { |
||||
onRegenerateOutline: () => void; |
||||
}; |
||||
|
||||
export function RegenerateOutline(props: RegenerateOutlineProps) { |
||||
const { onRegenerateOutline } = props; |
||||
|
||||
const [isDropdownVisible, setIsDropdownVisible] = useState(false); |
||||
const [showUpgradeModal, setShowUpgradeModal] = useState(false); |
||||
const ref = useRef<HTMLDivElement>(null); |
||||
|
||||
const isPaidUser = useIsPaidUser(); |
||||
|
||||
useOutsideClick(ref, () => setIsDropdownVisible(false)); |
||||
|
||||
return ( |
||||
<> |
||||
{showUpgradeModal && ( |
||||
<UpgradeAccountModal |
||||
onClose={() => { |
||||
setShowUpgradeModal(false); |
||||
}} |
||||
/> |
||||
)} |
||||
|
||||
<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 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,132 @@ |
||||
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; |
||||
isForce?: boolean; |
||||
onCourseIdChange?: (courseId: string) => void; |
||||
onCourseSlugChange?: (courseSlug: string) => void; |
||||
onCourseChange?: (course: AiCourse) => void; |
||||
onLoadingChange?: (isLoading: boolean) => void; |
||||
onError?: (error: string) => void; |
||||
}; |
||||
|
||||
export async function generateCourse(options: GenerateCourseOptions) { |
||||
const { |
||||
term, |
||||
difficulty, |
||||
onCourseIdChange, |
||||
onCourseSlugChange, |
||||
onCourseChange, |
||||
onLoadingChange, |
||||
onError, |
||||
isForce = false, |
||||
} = options; |
||||
|
||||
onLoadingChange?.(true); |
||||
onCourseChange?.({ |
||||
title: '', |
||||
modules: [], |
||||
difficulty: '', |
||||
}); |
||||
onError?.(''); |
||||
|
||||
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, |
||||
isForce, |
||||
}), |
||||
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 || '', |
||||
}); |
||||
} 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); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue