Arik Chakma
2 weeks ago
parent
599da5a153
commit
09ed8c4692
4 changed files with 582 additions and 183 deletions
@ -0,0 +1,300 @@ |
||||
import { useQuery } from '@tanstack/react-query'; |
||||
import { |
||||
useState, |
||||
type FormEvent, |
||||
useRef, |
||||
Fragment, |
||||
useCallback, |
||||
useEffect, |
||||
} from 'react'; |
||||
import { billingDetailsOptions } from '../../queries/billing'; |
||||
import { getAiCourseLimitOptions } from '../../queries/ai-course'; |
||||
import { queryClient } from '../../stores/query-client'; |
||||
import { isLoggedIn, removeAuthToken } from '../../lib/jwt'; |
||||
import { BotIcon, LockIcon, SendIcon } from 'lucide-react'; |
||||
import { showLoginPopup } from '../../lib/popup'; |
||||
import { cn } from '../../lib/classname'; |
||||
import TextareaAutosize from 'react-textarea-autosize'; |
||||
import { flushSync } from 'react-dom'; |
||||
import { |
||||
AIChatCard, |
||||
type AIChatHistoryType, |
||||
} from '../GenerateCourse/AICourseLessonChat'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { readStream } from '../../lib/ai'; |
||||
import { markdownToHtmlWithHighlighting } from '../../lib/markdown'; |
||||
|
||||
type TopicDetailAIProps = { |
||||
aiChatHistory: AIChatHistoryType[]; |
||||
setAiChatHistory: (history: AIChatHistoryType[]) => void; |
||||
}; |
||||
|
||||
export function TopicDetailAI(props: TopicDetailAIProps) { |
||||
const { aiChatHistory, setAiChatHistory } = props; |
||||
|
||||
const scrollareaRef = useRef<HTMLDivElement>(null); |
||||
|
||||
const toast = useToast(); |
||||
const [message, setMessage] = useState(''); |
||||
const [isStreamingMessage, setIsStreamingMessage] = useState(false); |
||||
const [streamedMessage, setStreamedMessage] = useState(''); |
||||
|
||||
const { data: tokenUsage, isLoading } = useQuery( |
||||
getAiCourseLimitOptions(), |
||||
queryClient, |
||||
); |
||||
|
||||
const { data: userBillingDetails, isLoading: isBillingDetailsLoading } = |
||||
useQuery(billingDetailsOptions(), queryClient); |
||||
|
||||
const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0); |
||||
const isPaidUser = userBillingDetails?.status === 'active'; |
||||
|
||||
const handleChatSubmit = (e: FormEvent<HTMLFormElement>) => { |
||||
e.preventDefault(); |
||||
|
||||
const trimmedMessage = message.trim(); |
||||
if ( |
||||
!trimmedMessage || |
||||
isStreamingMessage || |
||||
!isLoggedIn() || |
||||
isLimitExceeded || |
||||
isLoading |
||||
) { |
||||
return; |
||||
} |
||||
|
||||
const newMessages: AIChatHistoryType[] = [ |
||||
...aiChatHistory, |
||||
{ |
||||
role: 'user', |
||||
content: trimmedMessage, |
||||
}, |
||||
]; |
||||
|
||||
flushSync(() => { |
||||
setAiChatHistory(newMessages); |
||||
setMessage(''); |
||||
}); |
||||
|
||||
scrollToBottom(); |
||||
// completeCourseAIChat(newMessages);
|
||||
}; |
||||
|
||||
const scrollToBottom = useCallback(() => { |
||||
scrollareaRef.current?.scrollTo({ |
||||
top: scrollareaRef.current.scrollHeight, |
||||
behavior: 'smooth', |
||||
}); |
||||
}, [scrollareaRef]); |
||||
|
||||
const completeCourseAIChat = async (messages: AIChatHistoryType[]) => { |
||||
setIsStreamingMessage(true); |
||||
|
||||
// const response = await fetch(
|
||||
// `${import.meta.env.PUBLIC_API_URL}/v1-follow-up-ai-course/${courseSlug}`,
|
||||
// {
|
||||
// method: 'POST',
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// },
|
||||
// credentials: 'include',
|
||||
// body: JSON.stringify({
|
||||
// moduleTitle,
|
||||
// lessonTitle,
|
||||
// messages: messages.slice(-10),
|
||||
// }),
|
||||
// },
|
||||
// );
|
||||
|
||||
const response = new Response(); |
||||
|
||||
if (!response.ok) { |
||||
const data = await response.json(); |
||||
|
||||
toast.error(data?.message || 'Something went wrong'); |
||||
setAiChatHistory([...messages].slice(0, messages.length - 1)); |
||||
setIsStreamingMessage(false); |
||||
|
||||
if (data.status === 401) { |
||||
removeAuthToken(); |
||||
window.location.reload(); |
||||
} |
||||
} |
||||
|
||||
const reader = response.body?.getReader(); |
||||
|
||||
if (!reader) { |
||||
setIsStreamingMessage(false); |
||||
toast.error('Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
await readStream(reader, { |
||||
onStream: async (content) => { |
||||
flushSync(() => { |
||||
setStreamedMessage(content); |
||||
}); |
||||
|
||||
scrollToBottom(); |
||||
}, |
||||
onStreamEnd: async (content) => { |
||||
const newMessages: AIChatHistoryType[] = [ |
||||
...messages, |
||||
{ |
||||
role: 'assistant', |
||||
content, |
||||
html: await markdownToHtmlWithHighlighting(content), |
||||
}, |
||||
]; |
||||
|
||||
flushSync(() => { |
||||
setStreamedMessage(''); |
||||
setIsStreamingMessage(false); |
||||
setAiChatHistory(newMessages); |
||||
}); |
||||
|
||||
queryClient.invalidateQueries(getAiCourseLimitOptions()); |
||||
scrollToBottom(); |
||||
}, |
||||
}); |
||||
|
||||
setIsStreamingMessage(false); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
scrollToBottom(); |
||||
}, []); |
||||
|
||||
return ( |
||||
<div className="mt-4 flex grow flex-col rounded-lg border"> |
||||
<div className="flex items-center justify-between gap-2 border-b border-gray-200 px-4 py-2 text-sm"> |
||||
<h4 className="flex items-center gap-2 text-base font-medium"> |
||||
<BotIcon |
||||
className="relative -top-[1px] size-5 shrink-0 text-black" |
||||
strokeWidth={2.5} |
||||
/> |
||||
AI Tutor |
||||
</h4> |
||||
</div> |
||||
|
||||
<div |
||||
className="scrollbar-thumb-gray-300 scrollbar-track-transparent scrollbar-thin relative grow overflow-y-auto" |
||||
ref={scrollareaRef} |
||||
> |
||||
<div className="absolute inset-0 flex flex-col"> |
||||
<div className="relative flex grow flex-col justify-end"> |
||||
<div className="flex flex-col justify-end gap-2 px-3 py-2"> |
||||
{aiChatHistory.map((chat, index) => { |
||||
return ( |
||||
<Fragment key={`chat-${index}`}> |
||||
<AIChatCard |
||||
role={chat.role} |
||||
content={chat.content} |
||||
html={chat.html} |
||||
/> |
||||
|
||||
{/* {chat.isDefault && defaultQuestions?.length > 1 && ( |
||||
<div className="mt-0.5 mb-1"> |
||||
<p className="mb-2 text-xs font-normal text-gray-500"> |
||||
Some questions you might have about this lesson. |
||||
</p> |
||||
<div className="flex flex-col justify-end gap-1"> |
||||
{defaultQuestions.map((question, index) => ( |
||||
<button |
||||
key={`default-question-${index}`} |
||||
className="flex h-full self-start rounded-md bg-yellow-500/10 px-3 py-2 text-left text-sm text-black hover:bg-yellow-500/20" |
||||
onClick={() => { |
||||
flushSync(() => { |
||||
setMessage(question); |
||||
}); |
||||
|
||||
textareaRef.current?.focus(); |
||||
}} |
||||
> |
||||
{question} |
||||
</button> |
||||
))} |
||||
</div> |
||||
</div> |
||||
)} */} |
||||
</Fragment> |
||||
); |
||||
})} |
||||
|
||||
{isStreamingMessage && !streamedMessage && ( |
||||
<AIChatCard role="assistant" content="Thinking..." /> |
||||
)} |
||||
|
||||
{streamedMessage && ( |
||||
<AIChatCard role="assistant" content={streamedMessage} /> |
||||
)} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<form |
||||
className="relative flex items-start border-t border-gray-200 text-sm" |
||||
onSubmit={handleChatSubmit} |
||||
> |
||||
{isLimitExceeded && isLoggedIn() && ( |
||||
<div className="absolute inset-0 z-10 flex items-center justify-center gap-2 bg-black text-white"> |
||||
<LockIcon className="size-4 cursor-not-allowed" strokeWidth={2.5} /> |
||||
<p className="cursor-not-allowed"> |
||||
Limit reached for today |
||||
{isPaidUser ? '. Please wait until tomorrow.' : ''} |
||||
</p> |
||||
{!isPaidUser && ( |
||||
<button |
||||
onClick={() => { |
||||
// onUpgradeClick();
|
||||
}} |
||||
className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300" |
||||
> |
||||
Upgrade for more |
||||
</button> |
||||
)} |
||||
</div> |
||||
)} |
||||
{!isLoggedIn() && ( |
||||
<div className="absolute inset-0 z-10 flex items-center justify-center gap-2 bg-black text-white"> |
||||
<LockIcon className="size-4 cursor-not-allowed" strokeWidth={2.5} /> |
||||
<p className="cursor-not-allowed">Please login to continue</p> |
||||
<button |
||||
onClick={() => { |
||||
showLoginPopup(); |
||||
}} |
||||
className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300" |
||||
> |
||||
Login / Register |
||||
</button> |
||||
</div> |
||||
)} |
||||
<TextareaAutosize |
||||
className={cn( |
||||
'h-full min-h-[41px] grow resize-none bg-transparent px-4 py-2 focus:outline-hidden', |
||||
// isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-auto',
|
||||
)} |
||||
placeholder="Ask AI anything about the lesson..." |
||||
value={message} |
||||
onChange={(e) => setMessage(e.target.value)} |
||||
autoFocus={true} |
||||
onKeyDown={(e) => { |
||||
// if (e.key === 'Enter' && !e.shiftKey) {
|
||||
// handleChatSubmit(e as unknown as FormEvent<HTMLFormElement>);
|
||||
// }
|
||||
}} |
||||
// ref={textareaRef}
|
||||
/> |
||||
<button |
||||
type="submit" |
||||
// disabled={isDisabled || isStreamingMessage || isLimitExceeded}
|
||||
className="flex aspect-square size-[41px] items-center justify-center text-zinc-500 hover:text-black disabled:cursor-not-allowed disabled:opacity-50" |
||||
> |
||||
<SendIcon className="size-4 stroke-[2.5]" /> |
||||
</button> |
||||
</form> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,53 @@ |
||||
import { BookIcon, SparklesIcon, type LucideIcon } from 'lucide-react'; |
||||
|
||||
export type AllowedTopicDetailsTabs = 'content' | 'ai'; |
||||
|
||||
type TopicDetailsTabsProps = { |
||||
activeTab: AllowedTopicDetailsTabs; |
||||
setActiveTab: (tab: AllowedTopicDetailsTabs) => void; |
||||
}; |
||||
|
||||
export function TopicDetailsTabs(props: TopicDetailsTabsProps) { |
||||
const { activeTab, setActiveTab } = props; |
||||
|
||||
return ( |
||||
<div className="flex w-max items-center gap-1 rounded-lg border border-gray-200 p-0.5"> |
||||
<TopicDetailsTab |
||||
isActive={activeTab === 'content'} |
||||
icon={BookIcon} |
||||
label="Content" |
||||
onClick={() => setActiveTab('content')} |
||||
/> |
||||
<TopicDetailsTab |
||||
isActive={activeTab === 'ai'} |
||||
icon={SparklesIcon} |
||||
label="Learn with AI" |
||||
onClick={() => setActiveTab('ai')} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
type TopicDetailsTabProps = { |
||||
isActive: boolean; |
||||
icon: LucideIcon; |
||||
label: string; |
||||
onClick: () => void; |
||||
}; |
||||
|
||||
function TopicDetailsTab(props: TopicDetailsTabProps) { |
||||
const { isActive, icon: Icon, label, onClick } = props; |
||||
|
||||
return ( |
||||
<button |
||||
className="flex h-7 items-center gap-2 rounded-md px-2 py-0.5 text-sm text-gray-500 data-[state=active]:bg-black data-[state=active]:text-white" |
||||
data-state={isActive ? 'active' : 'inactive'} |
||||
onClick={onClick} |
||||
disabled={isActive} |
||||
type="button" |
||||
> |
||||
<Icon className="h-4 w-4" /> |
||||
{label} |
||||
</button> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue