feat: ai course chat

src/components/GenerateCourse/AICourseContent.tsx

@@ -392,6 +392,9 @@ export function AICourseContent(props: AICourseContentProps) {
           className={cn(
             'flex-1 overflow-y-scroll p-6 transition-all duration-200 ease-in-out max-lg:p-3',
             sidebarOpen ? 'lg:ml-0' : '',
+            viewMode === 'module'
+              ? 'flex flex-col overflow-hidden p-0 max-lg:p-0'
+              : '',
           )}
           key={`${courseSlug}-${viewMode}`}
         >
@@ -442,7 +445,12 @@ export function AICourseContent(props: AICourseContentProps) {
             />
           )}
 
-          <div className="mx-auto mb-10 mt-5 text-center text-sm text-gray-400">
+          <div
+            className={cn(
+              'mx-auto mb-10 mt-5 text-center text-sm text-gray-400',
+              viewMode === 'module' ? 'hidden' : '',
+            )}
+          >
             AI can make mistakes, check important info.
           </div>
         </main>

src/components/GenerateCourse/AICourseLesson.tsx

@@ -28,6 +28,7 @@ import { AICourseFollowUp } from './AICourseFollowUp';
 import './AICourseFollowUp.css';
 import { RegenerateLesson } from './RegenerateLesson';
 import { TestMyKnowledgeAction } from './TestMyKnowledgeAction';
+import { AICourseLessonChat } from './AICourseLessonChat';
 
 type AICourseLessonProps = {
   courseSlug: string;
@@ -209,10 +210,11 @@ export function AICourseLesson(props: AICourseLessonProps) {
     isLoading;
 
   return (
-    <div className="mx-auto max-w-4xl">
+    <div className="grid h-full grid-cols-5">
-      <div className="relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm max-lg:px-4 max-lg:pb-4 max-lg:pt-3">
+      <div className="relative col-span-3">
+        <div className="absolute inset-0 overflow-y-auto bg-white p-8 pb-0 max-lg:px-4 max-lg:pt-3">
           {(isGenerating || isLoading) && (
-          <div className="absolute right-3 top-3 flex items-center justify-center">
+            <div className="absolute right-6 top-6 flex items-center justify-center">
               <Loader2Icon
                 size={18}
                 strokeWidth={3}
@@ -227,7 +229,7 @@ export function AICourseLesson(props: AICourseLessonProps) {
             </div>
 
             {!isGenerating && !isLoading && (
-            <div className="absolute right-3 top-3 flex items-center justify-between gap-2">
+              <div className="absolute right-6 top-6 flex items-center justify-between gap-2">
                 <RegenerateLesson
                   onRegenerateLesson={(prompt) => {
                     generateAiCourseContent(true, prompt);
@@ -292,8 +294,12 @@ export function AICourseLesson(props: AICourseLessonProps) {
                   </h2>
                   <p className="my-3 text-red-600">
                     You have reached the AI usage limit for today.
-                  {!isPaidUser && <>Please upgrade your account to continue.</>}
+                    {!isPaidUser && (
-                  {isPaidUser && <>&nbsp;Please wait until tomorrow to continue.</>}
+                      <>Please upgrade your account to continue.</>
+                    )}
+                    {isPaidUser && (
+                      <>&nbsp;Please wait until tomorrow to continue.</>
+                    )}
                   </p>
 
                   {!isPaidUser && (
@@ -384,15 +390,20 @@ export function AICourseLesson(props: AICourseLessonProps) {
               </button>
             </div>
           </div>
+
+          <div className="mx-auto mb-10 mt-5 text-center text-sm text-gray-400">
+            AI can make mistakes, check important info.
+          </div>
+        </div>
       </div>
 
-      {!isGenerating && !isLoading && (
+      <AICourseLessonChat
-        <AICourseFollowUp
         courseSlug={courseSlug}
         moduleTitle={currentModuleTitle}
         lessonTitle={currentLessonTitle}
+        onUpgradeClick={onUpgrade}
+        isDisabled={isGenerating || isLoading || isTogglingDone}
       />
-      )}
     </div>
   );
 }

src/components/GenerateCourse/AICourseLessonChat.tsx

@@ -0,0 +1,407 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  BookOpen,
+  Bot,
+  Hammer,
+  HelpCircle,
+  LockIcon,
+  Send,
+} from 'lucide-react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FormEvent,
+} from 'react';
+import { flushSync } from 'react-dom';
+import TextareaAutosize from 'react-textarea-autosize';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { useToast } from '../../hooks/use-toast';
+import { readStream } from '../../lib/ai';
+import { cn } from '../../lib/classname';
+import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
+import {
+  markdownToHtml,
+  markdownToHtmlWithHighlighting,
+} from '../../lib/markdown';
+import { getAiCourseLimitOptions } from '../../queries/ai-course';
+import { queryClient } from '../../stores/query-client';
+import { billingDetailsOptions } from '../../queries/billing';
+
+export type AllowedAIChatRole = 'user' | 'assistant';
+export type AIChatHistoryType = {
+  role: AllowedAIChatRole;
+  content: string;
+  isDefault?: boolean;
+  html?: string;
+};
+
+type AICourseLessonChatProps = {
+  courseSlug: string;
+  moduleTitle: string;
+  lessonTitle: string;
+  onUpgradeClick: () => void;
+  isDisabled?: boolean;
+};
+
+export function AICourseLessonChat(props: AICourseLessonChatProps) {
+  const { courseSlug, moduleTitle, lessonTitle, onUpgradeClick, isDisabled } =
+    props;
+
+  const toast = useToast();
+  const scrollareaRef = useRef<HTMLDivElement | null>(null);
+
+  const [courseAIChatHistory, setCourseAIChatHistory] = useState<
+    AIChatHistoryType[]
+  >([
+    {
+      role: 'assistant',
+      content:
+        'Hey, I am your AI instructor. Here are some examples of what you can ask me about 🤖',
+      isDefault: true,
+    },
+  ]);
+
+  const [isStreamingMessage, setIsStreamingMessage] = useState(false);
+  const [message, setMessage] = useState('');
+  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[] = [
+      ...courseAIChatHistory,
+      {
+        role: 'user',
+        content: trimmedMessage,
+      },
+    ];
+
+    flushSync(() => {
+      setCourseAIChatHistory(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),
+        }),
+      },
+    );
+
+    if (!response.ok) {
+      const data = await response.json();
+
+      toast.error(data?.message || 'Something went wrong');
+      setCourseAIChatHistory([...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);
+          setCourseAIChatHistory(newMessages);
+        });
+
+        queryClient.invalidateQueries(getAiCourseLimitOptions());
+        scrollToBottom();
+      },
+    });
+
+    setIsStreamingMessage(false);
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, []);
+
+  return (
+    <div className="relative col-span-2 h-full border-l border-gray-200">
+      <div className="absolute inset-0 flex w-full flex-col overflow-hidden bg-white">
+        <div className="flex items-center justify-between gap-2 border-b border-gray-200 px-4 py-2 text-sm">
+          <h4 className="text-base font-medium">Course AI</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="flex grow flex-col justify-end">
+              <div className="flex flex-col justify-end gap-2 px-3 py-2">
+                {courseAIChatHistory.map((chat, index) => {
+                  return (
+                    <>
+                      <AIChatCard
+                        key={`chat-${index}`}
+                        role={chat.role}
+                        content={chat.content}
+                        html={chat.html}
+                      />
+
+                      {chat.isDefault && (
+                        <div className="mb-1 mt-0.5">
+                          <div className="grid grid-cols-2 gap-2">
+                            {capabilities.map((capability, index) => (
+                              <CapabilityCard
+                                key={`capability-${index}`}
+                                {...capability}
+                              />
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  );
+                })}
+
+                {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 && (
+            <div className="absolute inset-0 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>
+          )}
+          <TextareaAutosize
+            className={cn(
+              'h-full min-h-[41px] grow resize-none bg-transparent px-4 py-2 focus:outline-none',
+              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>);
+              }
+            }}
+          />
+          <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"
+          >
+            <Send className="size-4 stroke-[2.5]" />
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+type AIChatCardProps = {
+  role: AllowedAIChatRole;
+  content: string;
+  html?: string;
+};
+
+function AIChatCard(props: AIChatCardProps) {
+  const { role, content, html: defaultHtml } = props;
+
+  const html = useMemo(() => {
+    if (defaultHtml) {
+      return defaultHtml;
+    }
+
+    return markdownToHtml(content, false);
+  }, [content, defaultHtml]);
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col rounded-lg',
+        role === 'user' ? 'bg-gray-300/30' : 'bg-yellow-500/30',
+      )}
+    >
+      <div className="flex items-start gap-2.5 p-3">
+        <div
+          className={cn(
+            'flex size-6 shrink-0 items-center justify-center rounded-full',
+            role === 'user'
+              ? 'bg-gray-200 text-black'
+              : 'bg-yellow-400 text-black',
+          )}
+        >
+          <Bot className="size-4 stroke-[2.5]" />
+        </div>
+        <div
+          className="course-content course-ai-content prose prose-sm mt-0.5 max-w-full overflow-hidden text-sm"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
+    </div>
+  );
+}
+
+type CapabilityCardProps = {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  className?: string;
+};
+
+function CapabilityCard({
+  icon,
+  title,
+  description,
+  className,
+}: CapabilityCardProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-2 rounded-lg bg-yellow-500/10 p-3',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        {icon}
+        <span className="text-[13px] font-medium leading-none text-black">
+          {title}
+        </span>
+      </div>
+      <p className="text-[12px] leading-normal text-gray-600">{description}</p>
+    </div>
+  );
+}
+
+const capabilities = [
+  {
+    icon: (
+      <HelpCircle
+        className="size-4 shrink-0 text-yellow-600"
+        strokeWidth={2.5}
+      />
+    ),
+    title: 'Clarify Concepts',
+    description: "If you don't understand a concept, ask me to clarify it",
+  },
+  {
+    icon: (
+      <BookOpen className="size-4 shrink-0 text-yellow-600" strokeWidth={2.5} />
+    ),
+    title: 'More Details',
+    description: 'Get deeper insights about topics covered in the lesson',
+  },
+  {
+    icon: (
+      <Hammer className="size-4 shrink-0 text-yellow-600" strokeWidth={2.5} />
+    ),
+    title: 'Real-world Examples',
+    description: 'Ask for real-world examples to understand better',
+  },
+  {
+    icon: <Bot className="size-4 shrink-0 text-yellow-600" strokeWidth={2.5} />,
+    title: 'Best Practices',
+    description: 'Learn about best practices and common pitfalls',
+  },
+] as const;